jQuery - 객체 조작 메서드
속성 조작 메서드
1. html() / text()
$("요소 선택").html();
$("요소 선택").html("새 요소");
$("요소 선택").text();
$("요소 선택").text("새 텍스트");
<script>
$(() => {
// html() 메서드로 sec_1 안의 요소를 <p> -> <a>로 변경
$("#sec_1").html();
$("#sec_1 p").html("<a href=\\"#\\">Text1</a>");
// text() 메서드로 sec_2 안의 h2태그의 텍스트를 변경
$("#sec_2").text();
$("#sec_2 h2").text("text()");
});//.jq
</script>
</head>
<body>
<h1><strong>객체 조작 및 생성</strong></h1>>
<section id="sec_1">
<h2><em>html()</em></h2>
<p>내용1</p>
</section>
<section id="sec_2">
<h2><em>텍스트()</em></h2>
<p>내용2</p>
</section>
</body>2. attr() / removeAttr()
$("요소 선택").attr("속성명");
$("요소 선택").attr("속성명", "새 값");
여러개 속성 --> $("요소 선택").attr( {"속성명1" : "새 값1", "속성명2" : "새 값2" ...} );
$("요소 선택).removeAttr("속성");
<script>
$(() => {
$("#sec_1 img").attr("src");// 지정된 속성값 얻기
$("#sec_1 img").attr({// 새로운 속성을 추가 또는 기존 속성값의 변경을 한꺼번에
"widt": 200,
"src" : srcVal.replace("684", "658") // 기존속성값의 변경
}).
// 기존 속성을 제거
removeAttr("border");
});//.jq
</script>
</head>
<body>
<h1><strong>태그의 속성 조작 및 생성</strong></h1>
<section id="sec_1">
<h2>이미지 속성</h2>
<p><img src="https://picsum.photos/id/684/600/400" border="2"></p>
</section>
</body>- prop 와의 차이점
<head>
<script>
$(() => {
var result_1 = $("#user_name").val();// 양식태그의 value 속성값 얻어내기
$("#user_id").val("javascript");// 양식태그의 value 속성값 설정하기
// 선택된 요소노드에서, 지정된 이름의 속성값을 얻어오기
var result_2 = $("#user_id").prop("value");
var result_3 = $("#user_id").attr("value");
// prop --> 동적으로 바뀐 속성값을 가져온다
// attr --> 동적으로 가져오는게 아니라, 원래 지정해 놨던 양식 태그의 value를 가져옴
console.log("2. prop: ", result_2);
console.log("3. attr: ", result_3);
// prop("defaultValue") --> attr처럼 기본 지정 값을 가져온다.
// var result_4 = $("#user_id").prop("defaultValue");
});//.jq
</script>
</head>
<body>
<h1>객체 조작 및 생성</h1>
<form action="#" id="form_1">
<p>
<label for="user_name">이름</label>
<input type="text" name="user_name" id="user_name" value="용대리">
</p>
<p>
<label for="user_id">아이디</label>
<input type="text" name="user_id" id="user_id" value="hello">
</p>
</form>
</body>3. Class 조작
addClass()
- 요소를 선택하여 지정한 class 값을 생성
$("요소 선택").addClass("class 값");
removeClass()
- 요소를 선택하여 지정한 class 값을 삭제
$("요소 선택").removeClass("class 값");
toggleClass()
- 요소를 선택하여 지정한 class 값이 있으면 삭제, 없으면 생성
$("요소 선택").toggleClass("class 값");
hasClass()
- 선택한 요소에 지정한 class 값이 있으면 true, 없으면 false 반환
$("요소 선택").hasClass("class 값");
<script>
$(() => {
$("#p1").addClass("aqua");// class='aqua' 추가 & class속성이 없으면 생성
$("#p2").removeClass("red");// class='red' 삭제
$("#p3").toggleClass("green");// class='green' 추가/삭제를 번갈아 반복
$("#p4").toggleClass("green");// class='green' 추가/삭제를 번갈아 반복
// 선택한 요소노드(6번째 p태그)의 컨텐츠 지정(인자값으로)
// text() 메소드의 인자값으로는, 5번쨰 p태그에 class='yellow'가 있는지 여부에 따라,
// boolean 값을 전달
$("#p6").text($("#p5").hasClass("yellow"));
});//.jq
</script>
</head>
<body>
<p id="p1">내용1</p>
<p id="p2" class="red">내용2</p>
<p id="p3">내용3</p>
<p id="p4" class="green">내용4</p>
<p id="p5" clss="yellow">내용5</p>
<p id="p6"></p>
</body>
수치 조작 메서드
1. 요소
width() / height()
2. 요소 + padding
innerWidth() / innerHeight()
3. 요소 + padding + border
outerWidth() / outerHeight()
<script>
$(() => {
// 1.선택된 요소노드의 너비(width), 높이(height) 얻기
var width = $("#p1").width();
var height = $("#p1").height();
console.log(`1. width: ${width}, height: ${height}`);
// 2. padding + width 포함한 높이 얻기
var innerWidth = $("#p1").innerWidth();
var innerHeight = $("#p1").innerHeight();
console.log(`2. innerWidth: ${innerWidth}, innerHeight: ${innerHeight}`);
// 3. border + padding + height 포함한 높이 얻기
var outerWidth = $("#p1").outerWidth();
var outerHeight = $("#p1").outerHeight();
console.log(`3. outerWidth: ${outerWidth}, outerHeight: ${outerHeight}`);
// 인자값(px단위)대로, 선택된 요소노드의 바깥너비와 높이 설정
// 바깥높이/너비 = border + padding + width/height
$("#p2").outerWidth(100).outerHeight(100);
console.groupEnd();
});//.jq
</script>
</head>
<body>
<h1>수치 조작 메서드</h1>
<p id="p1">내용1</p>
<p id="p1">내용2</p>
</body>position()
- 선택한 포지션 위칫값 반환
$("요소 선택").position().left;
$("요소 선택").position().top;
offset()
- 선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지에 대한 값 반환
( 브라우저의 viewport 좌측/상단을 원점으로 위치 계산 )
$("요소 선택").offset().left;
$("요소 선택").offset().top;
scrollLeft() / scrollTop()
- 브라우저의 수평/수직 스크롤 이동거리 반환 (px단위)
$(window).scrollLeft(); / $(window).scrollTop();
객체 편집 메서드
before() / after()
- 선택한 요소의 이전 / 다음 위치에 새 요소를 추가
$("요소 선택").before("새 요소");
$("요소 선택").after("새 요소");
<script>
$(() => {
// <선택자> <새 요소>
$("#wrap p:eq(2)").after("<p>After</p>");
// <새 요소> <선택자>
$("<p>insterAfter</p>").insertAfter("#wrap p:eq(1)");
// <선택자> <새 요소>
$("#wrap p:eq(1)").before("<p>Before</p>");
// <새 요소> <선택자>
$("<p>insertBefore</p>").insertBefore("#wrap p:eq(0)");
}); //.jq
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p>내용2</p>
<p>내용3</p>
</div>
</body>
append() / prepend()
- 선택한 요소의 마지막 / 맨 앞 위치에 새 요소를 추가
$("요소 선택").append("새 요소")
$("요소 선택").prepend("새 요소")
// <새 요소> <선택자>
$("<li>appendTo</li>").appendTo("#listZone"); // 수직(상하)관계로 넣어라
// <선택자> <새 요소>
$("#listZone").append("<li>append</li>");
$("#listZone").prepend("<li>prepend</li>");
replaceAll() / replaceWith()
- 선택한 요소들을 새 요소로 교체
$("새 요소").replaceAll("요소 선택");
$("요소 선택").replaceWith("새 요소");
unwrap()
- 선택한 요소의 부모 요소를 삭제
$("요소 선택").unwrap();
wrap() / wrapAll()
-선택한 요소를 새 요소로 각각 / 한꺼번에 감싸기
$("요소 선택").wrap("새 요소");
$("요소 선택").wrapAll();
wrapinner()
- 선택한 요소의 내용을 새 요소로 각각 감싸기
$("요소 선택").wrapinner("새 요소");