jquery查詢子元素的方法:1、使用children()方法,可以取得指定元素下的直接子集元素;2、使用find()方法,可以取得指定元素下的所有(包括子集的子集)子集元素。
本教學操作環境:windows7系統、jquery1.10.2版本、Dell G3電腦。
jQuery 子元素選擇器find() 和children()
children()方法:取得此元素下的直接子集元素
find()方法:取得該元素下的所有(包含子集的子集)子集元素
<html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ /*background-color: pink;*/ } </style> </head> <body> <div> <span>11</span> <span> <ul> <li class="no1">aaa</li> <li>bbb</li> <li>ccc</li> </ul> </span> <span>222</span> <ul> <li>ddd</li> <li>eee</li> <li>fff</li> </ul> </div> </body> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"}); console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined // $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"}); </script> </html>
此時我們再把find 這項開啟註解
<html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ /*background-color: pink;*/ } </style> </head> <body> <div> <span>11</span> <span> <ul> <li class="no1">aaa</li> <li>bbb</li> <li>ccc</li> </ul> </span> <span>222</span> <ul> <li>ddd</li> <li>eee</li> <li>fff</li> </ul> </div> </body> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> // $("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"}); // console.log($("div").children(".no1")[0]); $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"}); console.log($("div").find(".no1")[0]); </script> </html>
對應截圖:
總結一下區別:
children() 方法傳回傳回所有被選元素的直接子元素(直接子元素,只找兒子不要孫子(: 也就是說不會遞歸去遍歷)
find()方法獲得目前元素集合中每個元素的後代(注意find()方法,必須傳參數,否者無效)
【推薦學習:jQuery影片教學、 web前端】
以上是jquery怎麼查詢子元素的詳細內容。更多資訊請關注PHP中文網其他相關文章!