집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 상위 요소와 하위 요소를 찾습니다(개인 경험 요약)_jquery

jquery는 상위 요소와 하위 요소를 찾습니다(개인 경험 요약)_jquery

WBOY원래의: 2016-05-16 16:52:591397검색

상위 요소와 하위 요소를 찾기 위해 js나 jquery를 사용할 때 자주 발생합니다. 하지만 사용시 항상 헷갈리기 쉽습니다. 요약하자면 앞으로는 훨씬 더 편리하게 사용할 수 있을 거라 믿습니다

jquery에서 상위 요소를 위쪽으로 찾는 방법은 다음과 같습니다. : close() parent() parent()

하위 요소를 검색하는 데 사용되는 메서드: find() children()

js는 children[] 속성을 사용합니다

html code

코드 복사 코드는 다음과 같습니다.

jquery는 상위 요소 하위 요소를 찾습니다. >

< ;body>

p>1항 상위 요소 찾기

🎜>

;

< 테이블>

<시간>

2단락 하위 요소 찾기

11closest( ) 가장 가까운 요소를 찾습니다(0개 또는 1개의 요소로 구성된 jQuery 객체를 반환)

21parent() 메소드

31parent("selector") 메소드

id="sectd2">table2 찾기 td children() 메소드

html>

js 코드:

코드 복사

코드는 다음과 같습니다.

 
 
<script> >$(function(){ <br>/************ 상위 요소 찾기 *************/ <br>//closest() 메소드<br>$("#mytd1").bind("click",function(){ <br>//alert($(this).html()); <br>alert($(this).closest("table").attr("id")) //table0 대신 table1 <br>/ /alert($(this).closest("table").html()); <br><br>//parent() 메소드<br>$("#mytd2").bind ("click",function(){ <br>//alert($(this).html()); //$(this).html()은 21입니다. (this).attr("id")는 mytd2입니다. <br>alert($(this).parent().parent().parent().attr("id")); <br>//.parent()는 tr이고 두 번째 .parent는 tbody입니다. tbody 태그가 아니며 발견된 세 번째 .parent()는 <br><br>//document.write("첫 번째 상위의 id:" $(this).parent().attr(" id" 테이블입니다. ) ". 두 번째 부모의 ID는 " $(this).parent().parent().attr("id") "입니다. 세 번째 부모의 ID는 " $(this).parent () .parent().parent().attr("id")); <br><br>}) <br><br>//parent("selector") parent("selector") <br>$ ("#mytd3").bind("click",function(){ <br>$("p").parent("#div1").css("Background", "yellow"); //p 여기에서 태그가 대체되었습니다. this<br>//alert($(this).parent("#div").attr("id"));//undefine alert($(this).parents("div").attr("id"));//div1 부모에게 주의 <br>}) <br><br><br>/* *********** 하위 요소 찾기 *************/ <br>//table2의 td 요소 찾기 find() <br>$("#sectd1").bind("click",function(){ <br>alert($("# table2") .find("td").length); <br>/* $("#table2").find("td").each(function(index,element){ <br>alert($( 요소).text()); <br>}); */ <br>}) <br><br>//children() <br>$("#sectd2").bind("클릭", function() { <br>var table = $("#table2"); <br>alert($("#table2").children().children().children("td[id='sectd2'] ").html()); <br>//children()은 tbody입니다. children()은 tr children("td[id='sectd2']")은 td <br>}); <br><br> <br> // js의 children[] <br>$("#sectd3").bind("click",function(){ <br>var table = document.getElementById("table2"); <br>alert (table.children[0].children[2].children[0].innerHTML); <br>//children[0]은 tbody입니다. children[2]는 세 번째 줄의 tr입니다. children[0]은 td <br>}) ; <br><br>}) <br></script>

성명：

이전 기사：js_javascript 팁을 사용하여 드롭다운 상자를 읽기 전용으로 설정하는 팁다음 기사：js_javascript 팁을 사용하여 드롭다운 상자를 읽기 전용으로 설정하는 팁

jquery는 상위 요소와 하위 요소를 찾습니다(개인 경험 요약)_jquery

관련 기사