다연이네

[days02] 복습 - attr() 본문

Web/jQuery

[days02] 복습 - attr()

　다연　 2020. 12. 21. 13:54
반응형

jQuery 라이브러리를 사용해서 문서 객체 속성을 조작할때는 attr() 메소드를 사용한다.

attr()메소드는 매개변수를 넣는 방법에 따라 속성을 지정하거나 추출할 수 있다.

 

 - 속성 추출 

attr() 메소드에 매개변수를 하나 입력하면 해당 속성을 추출한다.

<script>
var src = $("script").attr("src");
alert(src); //https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
</script>

 

 - 속성 지정 

 

 1) 속성 값을 입력해 속성 지정

attr() 메소드의 첫번째 매개변수에 속성명을, 두번째 매개변수에 속성값을 입력한다.

<body>
	<img />
	<img />
	<img />
<script>
$("img").attr("src","http://placehold.it/300X200"); 
	//src를 http~로 주겠다
	//원래는 아래와 같이 하나하나 줘야하는데 위처럼 한번에 줄 수도 있다.

$("img").each(function(index) {
	$(this).attr("src","http://placehold.it/"+(100*(index+1))+"X200");  //0은 안들어감
})
</script>
</body>

 

 2) 객체를 입력해 속성 지정

attr() 메소드의 매개변수에 객체를 넣는다.

<script>
$('img').attr({
	src: 'http://placehold.it/300X200',
    width: 300,
    height: 200
});
</script>

 

 3) 함수를 이용해 속성 지정

attr() 메소드의 첫번째 매개변수에는 속성명을, 두번째 매개변수에는 함수를 입력한다.

<script>
$("img").attr("src", function(index) {
	return "http://placehold.it/"+(50*(index+1))+"X200"; 
});
</script>

 

 

 

 <script>
	 $("img").attr("src","http://placehold.it/300X200");
	 $("img").attr("alt","test image");
	 $("img").attr("width","200px");
	 $("img").attr("height","100x");
	 
	 //$함수를 여러번 사용하지 말고
	 //메소드 체이닝
	 $("img")
	 	.attr("src","http://placehold.it/300X200")
	 	.attr("alt","test image")
	 	.attr("width","200px")
	 	.attr("height","100x");
	 
	 // 이렇게도 가능
	 $("img").attr({ //중괄호 필수
		 "src":"http://placehold.it/300X200",
		 "alt":"test image",
		 "width":"200px",
		 "height":"100px"
	 });
	 
	 
	 $("img").attr({ //앞 속성 따옴표 빼도 되고, 뒤에 px떼고 숫자만 줘도 됨
		 src:"http://placehold.it/300X200",
		 alt:"test image",
		 width:200,
		 height:100
	 });
	 
	 
});
</script>
반응형
저작자표시 비영리

'Web > jQuery' 카테고리의 다른 글

[days02] 복습 - 1) 보이기/안보이기(~toggle) 2) 애니메이션(animate) 효과  (0) 2020.12.21
[days02] 복습 - on()/off() 이벤트 연결/제거  (0) 2020.12.21
[days02] 복습 - 1) 콜백함수 / 2) $.each()  (0) 2020.12.21
[days02] 복습 - 1) optgroup / 2) 미디어 쿼리 설정  (0) 2020.12.21
[days02] 복습 - 의미없는 이미지, 회원가입 폼  (0) 2020.12.21
'Web/jQuery' Related Articles more
Comments