Jquery-활용-속성변경

✅ 사용한 핵심 jQuery 메서드 정리 (개념 요약)

목적	메서드	설명
속성 읽기	.attr("속성")	HTML 속성 값 가져오기
속성 변경	.attr("속성", 값)	단일 속성 변경
여러 속성 변경	.attr({})	객체로 여러 속성 한 번에 변경
속성 제거	.removeAttr()	HTML 속성 자체 제거
CSS 변경	.css()	스타일 변경
내용 변경	.html()	태그 포함 내용 변경
내용 삭제	.empty()	자식 요소만 삭제
요소 삭제	.remove()	요소 자체 삭제
요소 생성	$("<태그/>")	동적 생성
삽입	.appendTo()	자식 끝에 추가
삽입	.prependTo()	자식 처음에 추가
형제 삽입	.insertBefore()	특정 요소 앞에 추가
형제 삽입	.insertAfter()	특정 요소 뒤에 추가

✅ 버튼별 동작 정리

🔹 속성 읽기 (Getter)

var src1 = $("#here img:nth-child(1)").attr("src");
console.log(src1);

 

🔹 개별 속성 변경

 

$("#here img:nth-child(1)").css("border","5px dotted red");
$("#here img:nth-child(1)").attr("width", function(index){ return 300*(index+1) });
$("#here img:nth-child(1)").attr("height","250px");

 

👉 포인트

• .css()로 스타일 변경
• .attr() + 콜백 함수로 동적 값 계산

🔹 객체로 여러 속성 한 번에 변경

var obj = {"width":"250px","height":"250px"};
$("#here img:nth-child(2)").attr(obj);

 

👉 포인트

• 여러 속성 → 객체로 한 번에 변경

🔹 전체 이미지 속성 변경 (콜백 사용)

var obj = {
  "width": function(index){ return 150*(index+1); },
  "height": function(index){ return 150*(index+1); }
};
$("#here img").attr(obj);

 

👉 포인트

• index 활용한 동적 크기 조절

🔹 CSS 일괄 변경 (함수형 스타일)

$("#here img").css("border", function(index){
  return (index+2)*2 + "px dotted blue";
});

👉 포인트

• 요소마다 다른 스타일 적용 (index 기반)

🔹 속성 제거

$("#here img").removeAttr("width");		
$("#here img").removeAttr("height");
$("#here img").removeAttr("src");

👉 포인트

• HTML 속성 자체를 삭제 → 이미지 깨짐(의도적 실습 👍)

🔹 h1 배경색 변경 (배열 활용)

var arr = ["lightgreen",'pink','orange','skyblue'];
$("h1").css("backgroundColor", function(index){
  return arr[index];
});

 

👉 포인트

• 배열 + index로 요소별 스타일 분기

🔹 기존 내용 읽고 추가

$("h1").html(function (index, item){
  return item + `<span>${index+1}</span>`;
});

👉 포인트

• item = 기존 HTML 내용
• 읽어서 + 새로운 태그 추가

🔹 내용만 삭제

 

$("#here").empty();

👉 포인트

• 자식만 삭제, 부모는 남음

🔹 요소 자체 삭제

$("#here").remove();

👉 포인트

• #here 자체가 사라짐

🔹 동적 요소 생성 & 삽입 (핵심🔥)

 

var arr=[
 "../resources/images/cat.jpg",
 "../resources/images/prod1.jpg",
 "../resources/images/car.jpg",
 "../resources/images/tree.jpg"
];

var img1 = $("<img/>").attr({src:arr[0],alt:"cat이미지",width:"150px"});
var img2 = $("<img/>").attr({src:arr[1],alt:"car이미지",width:"150px"});
var img3 = $("<img/>").attr({src:arr[2],alt:"tree이미지",width:"150px"});
var img4 = $("<img/>").attr({src:arr[3],alt:"sunset이미지",width:"150px"});

// 자식 위치
$(img1).appendTo("#here");   // 맨 뒤
$(img2).prependTo("#here");  // 맨 앞

// 형제 위치
$(img3).insertBefore("#here");
$(img4).insertAfter("#here");

👉 학습 포인트 정리

• $("<img/>") → 동적 생성
• .attr({}) → 속성 설정
• appendTo / prependTo → 자식 위치 제어
• insertBefore / insertAfter → 형제 위치 제어

✅ 4. ‘속성 변경’ 관점에서 핵심 개념 정리 (시험 대비)

✔ ① 속성 읽기 vs 변경

 

// 읽기
var v = $("#img").attr("src");

// 변경
$("#img").attr("src", "new.jpg");

✔ ② 단일 속성 vs 다중 속성

 

// 단일
$("#img").attr("width", "200px");

// 다중
$("#img").attr({
  width:"200px",
  height:"200px"
});

✔ ③ 정적 값 vs 함수형 값

 

// 정적
$("#img").attr("width","200px");

// 동적
$("#img").attr("width", function(i){ return 100*(i+1); });

✔ ④ attr vs css

변경 대상	사용 메서드
HTML 속성	.attr()
스타일	.css()