04. jQuery 요소(Element)의 속성(attribute)을 가져오고, 설정하고, 삭제

📌 jQuery로 엘리먼트 속성(Attribute) 제어하기

✅ 사용된 메서드

• .attr("속성명", "값") : 속성 설정
• .attr({속성1:값1, 속성2:값2}) : 여러 속성 한 번에 설정
• .attr("속성명") : 속성 값 가져오기
• .removeAttr("속성명") : 속성 제거
• .css("속성", "값") : CSS 직접 적용
• .append(내용) : 기존 요소 끝에 내용 추가

 

---

<script type="text/javascript">
	$(document).ready(function(){
		// document영역에 준비가 되었을때 이미지 출력
		// 첫번째 이미지
		$('img:eq(0)').attr("src", "./../images/im0.jpg")
						.attr('title','귀여운 강아지')
						.attr('alt', 'puppy1')
						.css('border', '3px solid red')
		
		$('img:eq(1)').attr({
						src : "./../images/im1.jpg",
						title : '귀여운강아지2',
						alt : 'puppy2'
						})	
						.css({
							"border" : '5px double blue',
							 padding : "20px"
						})
						
						
		$('#btn1').click(function(){
			// 버튼 클릭시 0번 이미지 타이틀삭제
			$('img:eq(0)').removeAttr('title') 
			$('img:eq(0)').css('border', '6px dashed green')		
		})
		// append 추가
		// 작업대상 객체로 만들고 함수적용, alt속성 가져와서 div span에 추가
		// attr에 속성 이름만 넣어주면됨
		$('div span').append($('img:eq(0)').attr('alt'))
	});
	
	</script>

---

✅ 코드 해설

1. 첫 번째 이미지 속성/스타일 지정

$('img:eq(0)')
  .attr("src", "./../images/im0.jpg")
  .attr("title", "귀여운 강아지")
  .attr("alt", "puppy1")
  .css("border", "3px solid red");

 

• img:eq(0) → 첫 번째 <img> 선택
• src, title, alt 속성 설정
• border CSS 적용

 

2. 두 번째 이미지 속성/스타일 지정 (객체 형태)

$('img:eq(1)').attr({
  src : "./../images/im1.jpg",
  title : "귀여운강아지2",
  alt : "puppy2"
})
.css({
  "border" : "5px double blue",
  padding : "20px"
});

 

• attr({ ... }) → 여러 속성을 한 번에 설정
• css({ ... }) → 여러 스타일 한 번에 적용

 

3. 버튼 클릭 시 속성 제거

$('#btn1').click(function(){
  $('img:eq(0)').removeAttr('title');
  $('img:eq(0)').css('border', '6px dashed green');
});

 

 

 

• 첫 번째 이미지의 title 속성 제거
• border 스타일 변경

 

4. 속성 값 가져오기 & 추가

$('div span').append($('img:eq(0)').attr('alt'));