객체조작메소드
속성 조작 메소드와 수치 조작 메소드 그리고 객체편집메소드로 나눌 수 있다.
속성 조작 메소드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메소드는 요소의 너비값 또는 높이값 같은
수치를 바꿀 때 사용한다.
이 두 메소드는 선택한 요소의 속성을 바꾸는 메소드이므로 성격이 비슷하다고 볼 수 있다.
객체편집 메소드는 말 그대로 객체를 생성하거나 삭제 또는 복제 할 때 사용한다.
예를 들어 제이쿼리에 객체를 조작하거나 생성하는 메소드는 다음과 같은 기능을 가진 메소드를 말한다.
1. 선택한 요소에 새 요소를 만든다. -새 요소 생성
| <div></div> -> <div><p>내용</p></div> |
2. 요소를 복제하여 선택한 요소에 삽입한다. - 복제
| <p>내용1</p> -> <p>내용1</p> <p>내용1</p> |
3. 선택한 요소를 삭제한다. -삭제
| <div><p>내용</p></div> -> <div></div> |
4. 선택한 요소의 속성을 변경 또는 추가한다. 그리고 기존의 속성을 삭제도 한다 - 속성 변환
| <img src="bnt_on.gif" alt="버튼1"/> -> <img src="bnt_out.gif" alt="버튼1"/> |
속성 조작 메소드
요소의 속성을 조작할 때 사용하는 메소드이다. 다음은 속성 조작 메소드의 종류와 사용법을 정리한 표이다.
| 종류 | 사용법 | 설명 |
| html() html(“새 요소”) |
$(“요소 선택”).html(); $(“요소 선택”).html(“새 요소”); |
선택한 요소의 하위 요소를 가져온다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성한다. |
| text() text(“새 텍스트”) |
$(“요소 선택”).text(); $(“요소 선택”).text(“새 텍스트”); |
선택한 요소가 감싸는 모든 텍스트를 가져온다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성한다. |
| attr(“속성명”) attr(“속성명”,”새값”) |
$(“요소 선택”).attr(“속성명”); $(“요소 선택”).attr(“속성명”,”새값”); |
선택한 요소의 지정한 속성(attribute)값을 가져온다. 요소를 선택하여 지정한 속성에 새 값을 적용한다. |
| removeAttr(“속성명”) | $(“요소 선택”).removeAttr(“속성명”); | 선택한 요소의 지정한 속성만 제거한다. |
| prop(“상태 속성명”) prop(“상태 속성명”, 새 값) |
$(“요소 선택”).prop(“상태 속성명”); $(“요소 선택”).prop(“상태 속성명”,”새 값”); |
선택한 요소의 상태 속성값을 가져온다. 요소를 선택하여 상태 속성에 새 값을 적용한다. |
| val() var(“새 값”) |
$(“요소 선택”).val(); $(“요소 선택”).val(“새 값”); |
선택한 폼 요소의 value값을 가져온다. 폼 요소를 선택하여 value 속성에 새 값을 적용한다. |
| css(“속성명”) css(“속성명”,”새값”) |
$(“요소 선택”).css(“속성명”); $(“요소 선택”).css(“속성명”,”새 값”); |
선택한 요소의 지정한 스타일(CSS)속성 값을 가져온다. 요소를 선택하여 지정한 스타일 속성에 새 값을 적용한다. |
| addClass(“class 값”) | $(“요소 선택”).addClass(“class 값”); | 선택한 요소의 class속성에 새 값을 추가한다. |
| removeClass(“class 값”) | $(“요소 선택”).removeClass(“class 값”); | 선택한 요소의 class 속성에서 지정한 값만 제거한다. |
| toggleClass(“class 값”) | $(“요소 선택”).toggleClass(“class 값”) | 선택한 요소의 class값에 지정한 값이 포함되어 있으면 제거하고 속성값이 없으면 추가한다. |
| hasClass(“class 값”) | $(“요소 선택”).hasClass(“class 값”) | 선택한 요소의 class값에 지정한 클래스 값이 포함되어 있으면 true를, 없으면 false를 반환한다. |
html()/text() 메소드
html()메소드는 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀 때
사용한다.
text()메소드는 선택한 요소에 포함되어있는 전체 텍스트를 가져오거나 선택한 하위 요소를 전부 제거하고 새 텍스트를
생성할 때 사용한다.
1. $("요소 선택").html();
2. $("요소 선택").html("새 요소");
3. $("요소 선택").text();
4. $("요소 선택").text("새 텍스트");1은 선택한 요소의 하위 요소를 가져와 문자열로 반환한다.
2는 선택한 요소의 하위 요소를 전부 제거하고 지정한 새 요소를 생성한다.
3은 선택한 요소의 텍스트만 가져온다.
4는 선택한 요소의 하위 요소를 전부 제거하고 지정한 텍스트를 생성한다.
<script>
$(function(){
var result_1 = $("#sec_1").html();
console.log(result_1);
//id 값이 "sec_1"인 하위 요소를 문자열로 가져와
//result_1에 저장한다.
$("#sec_1 p").html("<a href=\"#\">Text1</a>");
//id값이 "sec_1"인 요소의 하위 요소 중
//<p>요소의 하위 요소를 새 요소로 바꾼다.
var result_2 = $("#sec_2").text();
console.log(result_2);
//id값이 "sec_2"인 요소의 텍스트를 result_2에 저장
$("#sec_2 h2").text("text()");
//id값이 "sec_2"인 요소의 하위 요소 중 <h2> 요소의 하위 요소를
//모두 제거. 그 다음 새로운 텍스트를 생성.
});
</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>
attr()/removeAttr()메소드
attr()메소드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때 또는 요소의 속성값을 불러올 때
사용한다.
removeAttr()메소드는 선택한 요소에서 기존의 속성을 삭제할 때 사용한다.
attr()메소드의 기본형은 다음과 같다.
1. $("요소 선택").attr("속성명");
2. $("요소 선택").attr("속성명","새 값");
3. $("요소 선택").attr({"속성명1":"새 값1","속성명2":"새 값2"..."속성명n":"새 값n"});1은 선택한 요소의 지정한 속성값을 가져온다.
2는 요소를 선택하여 지정한 속성값을 적용한다.
3은 요소를 선택하여 지정한 여러개의 속성값을 적용한다.
removeAttr()메소드의 기본형은 다음과 같다.
$("요소 선택").removeAttr("속성");선택한 요소에서 지정한 속성을 삭제한다.
다음 예제는 attr()메소드와 removeattr()메소드가 어떻게 작용하는지에 대한 예제이다.
<script>
$(function(){
var srcVal=$("#sec_1 img").attr("src");
console.log(srcVal);
//id값이 "sec_1"인 요소의 하위 <img>요소를 선택하여
//"src" 값을 srcVal에 저장한다.
$("#sec_1 img")
.attr({
"width":200,
"src":srcVal.replace("1.jpg","2.jpg"),
"alt":"바위"
})
.removeAttr("border");
});
</script>
</head>
<body>
<h1>
<strong>객체 조작 및 생성</strong>
</h1>
<section id="sec_1">
<h2>이미지 속성</h2>
<p>
<img src="images/math_img_1.jpg" alt="가위" border="2">
</p>
</section>
</body>
addClass()/removeClass()/toggleClass()/hasClass()메소드
addClass()메소드는 선택한 요소에 클래스를 생성하고, removeClass()메소드는 선택한 요소에서 지정한 클래스를
삭제한다. toggleClass()메소드는 선택한 요소에 지정한 클래스가 없으면 생성하고, 있을 경우에는 삭제한다.
hasClass()메소드는 선택한 요소에 지정한 클래스가 있으면 true를 반환하고, 없으면 false를 반환한다.
각각의 기본형은 다음과 같다.
1. $("요소 선택").addClass("class 값");
2. $("요소 선택").removeClass("class 값");
3. $("요소 선택").toggleClass("class 값");
4. $("요소 선택").hasClass("class 값");1은 요소를 선택하여 지정한 class값을 생성한다.
2는 요소를 선택하여 지정한 class값을 삭제한다.
3은 요소를 선택하여 지정한 class값이 있으면 삭제하고 없으면 생성한다.
4는 선택한 요소에 지정한 class값이 있으면 true, 없으면 false를 반환한다.
<script>
$(function(){
$("#p1").addClass("aqua");
$("#p2").removeClass("red");
$("#p3").toggleClass("green");
$("#p4").toggleClass("green");
$("#p6").text($("#p5").hasClass("yellow"));
});
</script>
<style>
.aqua{background_color:#0ff;}
.red{background_color:#f00;}
.green{background_color:#0f0;}
.yellow{background_color:##f0;}
</style>
</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" class = "yellow">내용5</p>
<p id="p6"> </p>
</body>val()메소드
선택한 폼 요소의 value속성값을 가져오거나 새 값을 적용할 때 사용한다.
기본형은 다음과 같다.
1. $("요소 선택").val();
2. $("요소 선택").val("새 값");1은 선택한 폼 요소의 value 속성값을 가져온다.
2는 요소를 선택하여 value 속성에 새 값을 적용한다.
다음은 value() 메소드 작동 예제이다.
<script>
$(function(){
var result_1=$("#user_name").val();
console.log(result_1); //용대리
$("#user_id").val("javascript");
var result_2=$("#user_id").prop("defaultValue");
console.log(result_2); //hello
});
</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>prop()메소드
선택한 폼 요소(선택상자, 체크박스, 라디오 버튼)의 상태 속성값을 가져오거나 새롭게 설정할 때 사용한다.
그리고 선택한 요소의 태그명, 노드타입, 선택상자의 선택된 옵션의 인덱스 값도 알 수 있다.
1. $("요소 선택").prop("[checked | selected]");
2. $("요소 선택").prop("[checked | selected]", [true | false]);
3. $("요소 선택").prop("[tagName | nodeType | selectedIndex | defaultValue]");1번은 선택한 폼 요소(체크밗, 라디오버튼, 선택상자)가 체크(checked)된 상태인지, 선택(selected) 상태인지 알 수 있다.
예를 들어 선택한 요소가 체크박스이고 체크된 상태에서 prop("checked")를 적용하였다면 true를 아니면 false를
반환한다.
2번은 폼 요소를 선택하여 체크 또는 선택 상태를 바꿀 수 있다.
3번은 선택한 요소의 태그명이나 노드타입, 선택된 옵션의 인덱스 값을 구한다.
이때 폼 요소에 prop("defaultValue")를 사용하면 사용자가 value 속성값을 바꿔도 초기의 value 속성값을 가져온다.
<script>
$(function(){
var result_1=$("#chk1").prop("checked");
console.log(result_1); //false
//id값이 "chk1"인 요소가 체크된 상태이면 true를 반환하여
//result_1에 저장한다.(반대의 경우에는 false)
var result_2=$("#chk2").prop("checked");
console.log(result_2) //true
var result_2=$("#chk3").prop("checked", true);
//id 값이 "chk3"인 요소의 체크상태를 true로 바꾼다.
var result_3=$("#se_1").prop("selectedIndex");
console.log(result_3); //2
//id값이 "se_1"인 요소의 옵션 중 selected 옵션의 인덱스 값을 가져온다.
});
</script>
</head>
<body>
<h1>
<strong>객체 조작 및 생성</strong>
</h1>
<form action="#" id="form_1">
<p>
<input type="checkbox" name="chk1" id="chk1">
<label for="chk1">chk1</label>
<input type="checkbox" name="chk2" id="chk2" checked>
<label for"chk2">chk2</label>
<input type="checkbox" name="chk3" id="chk3">
<label for="chk3">chk2</label>
</p>
<p>
<select name="se_1" id="se_1">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3" selected>option3</option>
</select>
</p>
</form>
</body>실행하면 체크박스가 체크되고 선택 상자의 옵션 요소 중 선택된 옵션의 인덱스값(2)이 출력된다.
그리고 "chk3"의 체크박스가 체크된 상태로 바뀐다.
수치 조작 메소드
수치 조작 메소드는 요소의 속성을 조작할 때 사용하는 메소드이다.
다음은 수치 조작 메소드의 종류와 사용법을 정리한 표이다.
| 종류 | 사용법 | 설명 |
| height() | $(“요소 선택”).height(); $(“요소 선택”).height(100); |
안쪽 여백과 선을 제외한 높이값을 반환하거나 변환한다. |
| width() | $(“요소 선택”).width(); $(“요소 선택”).width(100); |
안쪽 여백과 선을 제외한 너비값을 반환하거나 변환한다. |
| inneHeight() | $(“요소 선택”).inneHeight(); $(“요소 선택”).innerHeight(300); |
안쪽 여백을 포함한 높이값을 반환하거나 변환한다. |
| innerWidth() | $(“요소 선택”).innerWidth(); $(“요소 선택”).innerWidth(100); |
안쪽 여백을 포함한 너비값을 반환하거나 변환한다. |
| outerHeight() | $(“요소 선택”).outerHeight(); $(“요소 선택”).outerHeight(100); |
선과 안쪽 여백을 포함한 높이값을 반환하거나 변환한다. |
| outerWidth() | $(“요소 선택”).outerWidth(); $(“요소 선택”).outerWidth(100); |
선과 안쪽 여백을 포함한 너비값을 반환하거나 변환한다. |
| position() | $(“요소 선택”).position().left; $(“요소 선택’).position().top; |
선택한 요소의 포지션 위치값을 반환한다. |
| offset() | $(“요소 선택”).offset().left; $(“요소 선택”).offset().top; |
선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지에 대한 값을 반환한다. |
| scrollLeft() | $(window).scrollLeft(); | 브라우저의 수평 스크롤 이동 높이값을 반환한다 |
| scrollTop() | $(window).scrollTop(); | 브라우저의 수직 스크롤 이동 너비값을 반환한다 |
요소의 높이/너비 메소드
height()와 width() 메소드는 여백 및 선 두께를 제외한 순수 요소의 높이값과 너비값을 계산한다.
innerHeight()와 innerWidth()메소드는 여백을 포함한 요소의 높이값과 너비값을 계산하고,
outerHeight()와 outerWidth() 메소드는 여백 및 선을 포함한 요소의 높이값과 너비값을 계산한다.
다음은 선택한 요소에 각 메소드를 적용하여 너비값 또는 높이값을 불러왔을때 계산되는 범위를 그림으로 나타낸
것이다.
이 메소드들의 기본형은 다음과 같다.
1. $(요소 선택).height(); / $(요소 선택).width();
$(요소 선택).height(값); / $(요소 선택).width(값);
2. $(요소 선택).innerHeight(); / $(요소 선택).innerWidth();
$(요소 선택).innerHeight(값); / $(요소 선택).innerWidth(값);
3. $(요소 선택).outerHeight(); / $(요소 선택).outerWidth();
$(요소 선택).outerHeight(값); / $(요소 선택).outerWidth(값);1은 요소의 높이값과 너비값을 반환 또는 변경한다.
2는 여백을 포함한 요소의 높이값과 너비값을 반환 또는 변경한다.
3은 여백 및 선 두께를 포함한 요소의 높이값과 너비값을 반환 또는 변경한다.
다음 예제는 요소의 높이/ 너비 메소드들이 어떻게 사용되는지 보여준다.
<script>
$(function(){
var w1 = $("#p1").width();
console.log(w1);
var w2=$("#p1").innerWidth();
console.log(w2);
var w3=$("#p1").outerWidth();
console.log(w3);
$("#p2")
.outerWidth(100)
.outerHeight(100);
});
</script>
<style>
*{
padding : 0;
}
#p1, #p2{
width: 100px;
height: 50px;
padding: 20px;
border: 5px solid #000;
background-color: #ff0;
}
</style>
</head>
<body>
<h1>수치 조작 메소드</h1>
<p id="p1">내용1</p>
<p id="p2">내용2</p>
</body>
요소 위치 메소드
요소 위치 메소드에는 position() 메소드와 offset()메소드가 있다.
position()메소드는 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로로 떨어진 위치의 좌표값을
반환하거나 변경할 때 사용한다. offset()메소드는 문서(document)를 기준으로 선택한 요소의 가로/세로로 떨어진
위치의 좌표값을 반환하거나 변경할 때 사용한다.
각 메소드의 기본형은 다음과 같다.
1. $(요소 선택).position().[left | right | top | bottom]
2. $(요소 선택).offset().[left | top]1은 포지션 기준이 되는 요소를 기준으로 선택한 요소의 위치 좌표값을 반환한다.
2는 문서를 기준으로 선택한 요소의 위치 좌표값을 반환한다.
다음은 선택한 요소에 위치 메소드를 적용하여 위치값을 구한 position()과 offset() 메소드의 차이를 그림으로 나타낸
것이다.
다음은 요소위치 메소드 사용 예제이다.
<div id="box_wrap">의 position 속성에는 "relative"값을 적용하고 <p class="box">의 position속성에는
"absolute"값을 적용했다.
<script>
$(function(){
var $txt1=$(".txt_1 span"),
$txt2=$(".txt_2 span"),
$box=$(".box");
var off_t=$box.offset().top; //100
var pos_t=$box.poisition().top; //50
$txt1.text(off_t);
$txt2.text(pos_t);
});
</script>
<style>
*{margib:0;padding:0;}
#box_wrap{
width:300px;
height:200px;
margin:50px auto 0;
position:relative;
background-color:#ccc;
}
.box{
width:50px;height:50px;
position:absolute;
left:100px;top:50px;
background-color:#f00;
}
</style>
</head>
<body>
<div id="box_wrap">
<p class="box">박스</p>
</div>
<p class="txt_1">절대 top위치값:<span></span></p>
<p class="txt_2">상대 top위치값:<span></span></p>
</body>스크롤바 위치 메소드
scrollTop()메소드는 브라우저의 스크롤바가 수직/수평으로 이동한 위치값을 불러오거나 변경할 때 사용한다.
다음은 scrollTop()메소드의 기본형이다.
1. $(요소 선택).scrollTop(); $(요소 선택).scrollLeft();
2. $(요소 선택).scrollTop(새 값); $(요소 선택).scrollLeft(새 값);1은 스크롤바가 수직 또는 수평으로 이동한 위치값을 반환한다.
2는 입력한 수치만큼 수직 또는 수평으로 스크롤바를 이동시킨다.
다음은 속성과 값에 따른 스크롤바 위치 메소드를 사용한 예제이다.
<script>
$(function(){
var topNum=$("h1").offset().top;
$(window).scrollTop(topNum);
var sct=$(window).scrollTop();
console.log(sct);
});
</script>
<style>
*{margin:0;padding:0;}
body{line-height:1;}
#wrap{
height:5000px;
padding-top:2000px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>위치 메소드</h1>
</div>
</body>
객체 편집 메소드
선택한 요소를 복제하거나 새 요소를 생성하는 메소드와 복제하거나 새로 생성한 요소를 의도한 위치에 삽입하고
선택한 요소를 삭제하는 기능을 살펴보자.
다음은 객체편집 메소드의 종류와 사용법을 간략하게 정리한 표이다.
| 종류 | 사용법 | 설명 |
| before() | $(“요소 선택”).before(“새 요소”); | 선택한 요소의 이전 위치에 새 요소를 추가한다. |
| after() | $(“요소 선택”).after(“새 요소”); | 선택한 요소의 다음 위치에 새 요소를 추가한다. |
| append() | $(“요소 선택”).append(“새 요소”); | 선택한 요소의 마지막 위치에 새 요소를 추가한다. |
| appendTo() | $(“새 요소”).appendTo(“요소 선택”); | 선택한 요소의 마지막 위치에 새 요소를 추가한다. |
| prepend() | $(“요소 선택”).prepend(“새 요소”); | 선택한 요소의 맨 앞 위치에 새 요소를 추가한다. |
| prependTo() | $(“새 요소”).prependTo(“요소 선택”); | 선택한 요소의 맨 앞 위치에 새 요소를 추가한다 |
| insertBefore() | $(“새 요소”).insertBefore(“요소 선택”); | 선택한 요소의 이전 위치에 새 요소를 추가한다. |
| insertAfter() | $(“새 요소”).insertAfter(“요소 선택”); | 선택한 요소의 다음 위치에 새 요소를 추가한다. |
| clone() | $(“요소 선택”).clone(true or false); | 선택한 문서 객체를 복제한다. 이때 인자값이 true일 경우 하위 요소까지 모두 복제하고, false일 경우에는 선택한 요소만 복제한다. |
| empty() | $(“요소 선택”).empty(); | 선택한 요소의 하위 내용들을 모두 삭제한다. |
| remove() | $(“요소 선택”).remove(); | 선택한 요소를 삭제한다 |
| replaceAll()/ replaceWith() |
$(“새 요소”).replace(“요소 선택”); $(“요소 선택”).replaceWith(“새 요소”); |
선택한 요소들을 새 요소로 교체한다. |
| unwrap() | $(“요소 선택”).unwrap(); | 선택한 요소의 부모 요소를 삭제한다. |
| wrap() | $(“요소 선택”).wrap(새 요소); | 선택한 요소를 새 요소로 각각 감싼다. |
| wrapAll() | $(“요소 선택”).wrapAll(); | 선택한 요소를 새 요소로 한꺼번에 감싼다 |
| wrapInner() | $(“요소 선택”).wrapInner(새 요소); | 선택한 요소의 내용을 새 요소로 각각 감싼다. |
before()/insertBefore()/after()/insertAfter()메소드
before()와 insertBefore()메소드는 선택한 요소의 이전 위치에 새 요소를 생성하고, after()와 insertAfter()메소드는
선택한 요소의 다음 위치에 새 요소를 선택한다.
각 메소드의 기본형은 다음과 같다.
1. $("요소 선택").before("새 요소");
2. $("새 요소").insertBefore("요소 선택");
3. $("요소 선택").after("새 요소");
4. $("새 요소").insertAfter("요소 선택");1과 3, 2와 4는 서로 사용법만 다르고 기능은 같다.
다음은 before(), insertBefore(), after(), insertAfter() 메소드를 사용한 예제이다.
<script>
$(function(){
$("#wrap p:eq(2)").after("<p>After</p>");
$("<p>insertAfter</p>").insertAfter("#wrap p:eq(1)");
$("#wrap p:eq(1)").before("<p>Before</p>");
$("<p>insertBefore</p>").insertBefore("#wrap p:eq");
});
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p>내용2</p>
<p>내용3</p>
</div>
</body>append()/appendTo()/prepend()/prependTo()메소드
append()메소드와 appendTo()메소드는 선택한 요소 내의 마지막 위치에 새 요소를 생성하고 추가한다.
prepend() 메소드와 prependTo()메소드는 선택한 요소 내의 앞 위치에 새 요소를 생성하고 추가한다.
각 메소드의 기본형은 다음과 같다.
1. $(요소 선택).appenc(새 요소);
$(새 요소).appendTo(요소 선택);
2. $(요소 선택).prepend(새 요소);
$(새 요소).prependTo(요소 선택);1은 선택한 요소 내의 마지막 위치에 새 요소를 생성하고 추가한다.
2는 선택한 요소 내의 앞 위치에 새 요소를 생성하고 추가한다.
다음은 appendTo()메소드와 prepend()메소드를 어떻게 사용하는지 보여주는 예제이다.
<script>
$(function(){
$("<li>appendTo</li>").appendTo("#listZone");
//선택한 요소의 맨 뒤에 새 요소를 생성
$("#listZone").prepend("<li>prepend</li>");
//선택한 요소의 맨 앞에 새 요소를 생성
});
</script>
</head>
<body>
<ul id="listZone">
<li>리스트</li>
</ul>
</body>clone()/empty()/remove() 메소드
clone()메소드는 선택한 요소를 복제한다.
empty()메소드는 선택한 요소의 모든 하위 요소를 삭제하고, remove()메소드는 선택한 요소를 삭제한다.
각 메소드의 기본형은 다음과 같다.
1. $("요소 선택").clone([true | false]);
2. $("요소 선택").empty();
3. $("요소 선택").remove();1은 선택한 요소를 복제한다. true면 이벤트까지 복제하고, false면 요소만 복제한다. 기본값은 false이다.
2는 선택한 요소의 모든 하위 요소를 삭제한다.
3은 선택한 요소를 삭제하낟.
다음은 clone(), empty() 함수, remove()메소드를 이용한 예제이다.
<script>
$(function(){
var copyObj=$(".box1").children().clone();
//class 값이 "box1"인 요소의 모든 자식 요소를 복제.
//그 다음 copyObj에 참조시킨다.
$(".box3").empty();
//class값이 "box3"인 요소의 모든 하위 요소를 삭제.
$(".box3").append(copyObj);
//copyObj에 저장된 요소를 class값이 "box3"인 요소
//맨 뒤에 추가.
});
</script>
</head>
<body>
<div class="box1">
<p>내용1</p>
<p>내용2</p>
</div>
<div class="box2">
<p>내용3</p>
<p>내용4</p>
</div>
<div class="box3">
<p>내용5</p>
<p>내용6</p>
</div>
</body>
replaceAll()/replaceWith()메소드
replaceAll()메소드와 replaceWith()메소드는 선택한 요소를 새 요소로 바꿀 때 사용한다.
주로 선택한 모든 요소를 한꺼번에 바꿀 때 사용하며 각 메소드의 기본형은 다음과 같다.
$("새 요소").replaceAll("요소 선택");
$("요소 선택").replaceWith("새 요소");다음은 <h2>태그에 replaceWith()함수를 지정하고, 모든 <div>태그에는 replaceAll()메소드를 지정하는 예제이다
<script>
$(function(){
$("h2").replaceWith("<h3>replace method</h3>");
$("<p>Change</p>").replaceAll("div");
//모든 <h2>요소와 <div> 요소를 새 요소로 바꾼다.
});
</script>
</head>
<body>
<section class="box1">
<h2>제목1</h2>
<div>내용1</div>
<div>내용2</div>
</section>
<section class="box2">
<h2>제목2</h2>
<div>내용3</div>
<div>내용4</div>
</section>
</body>unwrap()/wrap()/wrapAll()/wrapInner()메소드
unwrap()메소드는 선택한 요소의 부모 요소를 삭제한다. wrap()메소드는 선택한 요소를 각각 새 요소로 감싸고,
wrapAll()메소드는 선택한 요소를 한꺼번에 새 요소로 감싼다. wrapInner()메소드는 선택한 요소의 모든 하위 요소를
새 요소로 감싼다.
각 메소드의 기본형은 다음과 같다.
1. $("요소 선택").unwrap();
2. $("요소 선택").wrap(새 요소);
3. $("요소 선택").wrapAll(새 요소);
4. $("요소 선택").wrapInner(새 요소);1은 선택한 요소의 부모 요소를 삭제한다.
2는 선택한 요소를 새 요소로 각각 감싼다.
3은 선택한 요소를 새 요소로 한꺼번에 감싼다.
4는 선택한 요소의 모든 하위 요소를 새 요소로 감싼다.
다음 예제는 위의 메소드들의 사용 예제이다.
<script>
$(function(){
$("strong").unwrap(); //<strong> 요소를 감싸는 부모요소를 제거
$(".ct1").wrap("<div/>"); //class값이 "ct1"인 요소를 <div>요소로 감싼다.
$(".ct2").wrapAll("<div/>"); //class값이 "ct2"인 요소를 <div> 요소로 감싼다.
$("li").wrapInner("<h3/>"); //<li>요소의 모든 하위 요소를 <h3>요소로 감싼다.
});
</script>
<style>
div{background-color:aqua;}
</style>
</head>
<body>
<h1 id="tit_1">
<strong>객체 조작 및 생성</strong>
</h1>
<p class="ct1">내용1</p>
<p class="ct1">내용2</p>
<p class="ct2">내용3</p>
<p class="ct2">내용4</p>
<ul>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
주요 선택자 정리하기
자주 사용하는 선택자만 정리한 예제이다.
<script>
$(function(){
$(".wrap_1 p:first")
.text("내용1");
//<div class="wrap1">
// <p>내용1</p>
$(".wrap_1 p.active")
.removeClass("active")
.addClass("on");
//<p class="on">내용2</p>
$(".wrap_1 p:eq(2)a")
.attr("href","http://www.naver.com");
//<p><a href="#">네이버</a></p>
$(".wrap_1 p:eq(3) input").val("Korea");
//<input type="text" value="Korea">
$(".wrap_2 p:first").after("<p>After(추가1)</p>");
$(".wrap_2 p:first").before("<p>Before(추가2)</p>");
//<div class="wrap_2">
// <p>Before(추가2)</p>
// <p>내용5</p>
// <p>After(추가1)</p>
$(".wrap_3 p")
.unwrap()
.wrapInner("<strong/>");
//<div class="wrap_3">
// <p><strong>내용7</strong></p>
// <p><strong>내용8</strong></p>
//</div>
});
</script>
</head>
<body>
<div class="wrap_1">
<p>텍스트1</p>
<p class="active">내용2</p>
<p><a href="#">네이버</a></p>
<p>
<input type="text" value="Hello">
</p>
</div>
<div class="wrap_2">
<p>내용5</p>
<p>내용6</p>
</div>
<div class="wrap_3">
<div>
<p>내용7</p>
<p>내용8</p>
</div>
</div>
</body>
(참고 : do it 자바스크립트+제이쿼리 입문)
'Front > JQuery' 카테고리의 다른 글
| JQuery(이벤트 객체) (0) | 2020.05.22 |
|---|---|
| JQuery(이벤트 등록 메소드) (0) | 2020.05.22 |
| JQuery(속성 탐색 선택자) (0) | 2020.05.20 |
| JQuery(위치탐색선택자) (0) | 2020.05.20 |
| jquery(선택자) (0) | 2020.05.20 |