728x90
반응형
|
slice(시작인덱스, 마지막값-1인덱스)
: 시작인덱스요소부터 (마지막값-1인덱스)까지의 요소까지 선택 요소명.only-child : 단 하나인 자식으로 존재하는 요소를 의미
$("li:only-child").css({"background-color":"#0ff"});
|
$("#menu1 li").slice(1,3).css({"background-color":"#ff0"}); |
|
$("선택자").find("요소 또는 선택자"): 선택한 요소의 하위 요소(자식, 자손)를 필터링(검색)할 때 사용.
|
$("#inner_1").find(".txt1"). |
|
$("선택자").filter(callback 또는 요소 또는 선택자) : 자기 자신의 레벨에서 형제 요소를 필터링(검색)을 할 때 사용
|
$("#inner_1 p").filter(".txt2"). $("#inner_2 p").filter(function(i,o){
console.log(i,o);
// 단 아이템 매개변수는 생략 가능하지만 인덱스 매개변수는 생략불가
// (첫 번재 매개변수 =>인덱스값, 두번째 매개변수 =>아이템(요소))
return i % 2 == 0; //반드시 true값이 되어야 한다.
}).
|
|
// clone() : 해당 선택요소 복사
// java는 1개 요소만 copy가능하지만 js, jq에서는 배열로 copy가능
|
var copyObj = $(".box1").children().clone();
// console.log(copyObj);
|
|
// remove() : 해당 요소 제거
$(".box2").remove( ); //jq
// document.body.removeChild(document.getElementsByClassName("box2")[0]); //js
|
$(".box2").remove( ); //jq
document.body.removeChild(document.getElementsByClassName("box2")[0]); //js
|
|
// empty( ) : 해당 요소의 하위 요소를 모두 제거
// document.getElementsByClassName("box3")[0].innerHTML="";
|
$(".box3").empty();
document.getElementsByClassName("box3")[0].innerHTML="";
|
|
$("선택한 요소").replaceWith("새요소")
: 선택한 요소를 새요소로 변경함. |
$("h2").replaceWith("<h3>replace method</h3>");
|
|
$("새요소").replaceAll("해당 요소")
: 해당 요소로 새 요소로 변경함. |
$("<p>Change</p>").replaceAll("div");
|
slice()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <script> $(function(){ // slice(시작인덱스, 마지막값-1인덱스): 시작인덱스요소부터 (마지막값-1인덱스)까지의 요소까지 선택 $("#menu1 li").slice(1,3).css({"background-color":"#ff0"}); // $("li").slice(1,5).css({"background-color":"#ff0"}); // 요소명.only-child : 단 하나인 자식으로 존재하는 요소를 의미 $("li:only-child").css({"background-color":"#0ff"}); }); </script> </head> <body> <h1>탐색 선택자</h1> <ul id="menu1"> <li>내용1-1</li> <li>내용1-2</li> <li>내용1-3</li> <li>내용1-4</li> </ul> <ul id="menu2"> <li><span>menu2의 첫번째 li :</span><span>내용2-1</span></li> <li><span>menu2의 두번째 li :</span><span>내용2-2</span></li> </ul> </body> </html>
fine()
filter()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <script> $(function(){ /* $("선택자").find("요소 또는 선택자"): 선택한 요소의 하위 요소(자식, 자손)를 필터링(검색)할 때 사용. $("선택자").filter(callback 또는 요소 또는 선택자) : 자기 자신의 레벨에서 형제 요소를 필터링(검색)을 할 때 사용 */ $("#inner_1").find(".txt1").css({"background-color":"yellow"}); $("#inner_1 p").filter(".txt2").css({"background-color":"aqua"}); $("#inner_2 p").filter(function(i,o){ console.log(i,o); // 단 아이템 매개변수는 생략 가능하지만 인덱스 매개변수는 생략불가 // (첫 번재 매개변수 =>인덱스값, 두번째 매개변수 =>아이템(요소)) return i % 2 == 0; //반드시 true값이 되어야 한다. }).css({"background-color":"yellowgreen"}); }); </script> </head> <body> <div id="outer_wrap"> <h1>콘텐츠 탐색 선택자</h1> <section id="inner_1"> <h2>find( ), filter( )</h2> <p class="txt1">내용1</p> <p class="txt2">내용2</p> </section> <section id="inner_2"> <h2>filter(function)</h2> <p>index 0</p> <p>index 1</p> <p>index 2</p> <p>index 3</p> </section> </div> </body> </html>
s
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <script> function btn(){ // clone() : 해당 선택요소 복사 // java는 1개 요소만 copy가능하지만 js, jq에서는 배열로 copy가능 var copyObj = $(".box1").children().clone(); // console.log(copyObj); var copyObj1 = document.getElementsByClassName("box1")[0].children; console.log(copyObj1); // remove() : 해당 요소 제거 $(".box2").remove( ); //jq // document.body.removeChild(document.getElementsByClassName("box2")[0]); //js // empty( ) : 해당 요소의 하위 요소를 모두 제거 // $(".box3").empty(); // document.getElementsByClassName("box3")[0].innerHTML=""; document.getElementsByClassName("box3")[0].removeChild(document.getElementsByClassName("box3")[0].getElementsByTagName("p")[0]); document.getElementsByClassName("box3")[0].removeChild(document.getElementsByClassName("box3")[0].getElementsByTagName("p")[0]); $(".box3").append(copyObj); // for(let i = 0; i < copyObj1.length; i++){ // document.getElementsByClassName("box3")[0].appendChild(copyObj1[i].cloneNode(true)); // } $("button").hide(); //태그들 // document.getElementsByTagName("button")[0].style.display="none"; //태그1개만 } </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> <button onclick="btn()">버튼</button> </body> </html>
a<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <script> /* $("선택한 요소").replaceWith("새요소"): 선택한 요소를 새요소로 변경함. $("새요소").replaceAll("해당 요소"): 해당 요소로 새 요소로 변경함. */ function gbb(){ $("h2").replaceWith("<h3>replace method</h3>"); $("<p>Change</p>").replaceAll("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> <button onclick="gbb()">클릭</button> </body> </html>
728x90
반응형
'[JS]' 카테고리의 다른 글
| search (0) | 2024.03.07 |
|---|---|
| prop(), attr(), map방식 (0) | 2024.03.06 |
| [JS] jQuery ㅇㅇㅇ (0) | 2024.03.06 |
| [JS] jQuery (0) | 2024.03.05 |
| [JS] jQuery (0) | 2024.03.05 |