jquery尋找節點

1，最基礎的選擇節點：

$("p")//引號第一個無特殊字符，在頁面中選取全部 <p> 元素:
$(".test")//在引號中第一個字符爲「.」，即選擇的是class="xx"的節點
$("#test")//在引號中第一個字符爲「#」，即選擇的是id="test"的節點

//標籤不惟一，若是找到符合標籤的有多個，則會返回全部符合條件的節點。

//id是惟一的，若是找到符合id的有多個，則只會返回一個。

//class不惟一，若是找到符合id的有多個，則會返回全部符合條件的節點。

2，尋找附近相關節點

$("#test1").parent(); // 父節點
$("#test1").parents(); // 所有父節點
$("#test1").parents(".mui-content");//返回class爲mui-content的父節點
$("#test1").children(); // 所有子節點
$("#test1").children("#test1"); //返回id爲test1的子節點
$("#test1").contents(); // 返回id爲test1裏面的全部內容，包括節點和文本
$("#test1").contents("#test1"); //返回id爲test裏面的id爲#test1的節點和文本
$("#test1").prev();  // 上一個兄弟節點
$("#test1").prevAll(); // 以前全部兄弟節點
$("#test1").next(); // 下一個兄弟節點
$("#test1").nextAll(); // 以後全部兄弟節點
$("#test1").siblings(); // 全部兄弟節點
$("#test1").siblings("#test2"); //返回id爲test2的兄弟節點
$("#test").find("#test1"); //選中id爲test後代中 id爲test1的節點

3，class="test"的多個兄弟節點，從中選取：

$(".test").eq(1); // 選取class爲test1中匹配的索引順序爲1的元素(也就是第2個li元素)
$(".test").first(); // 選取class爲test1中匹配的第一個元素
$(".test").last(); // 選取class爲test1中匹配的最後一個元素
$(".test").slice(1, 4); // 選取第2 ~ 4個元素
$(".test").filter(":even"); // 選取class爲test中全部奇數順序的元素
$(".test").filter(":odd"); // 選取class爲test中全部偶數順序的元素

4，選擇器選取節點：

$("p:first")//選取第一個 <p> 元素
$("p>.test")//選取父元素爲p的class爲test的子節點
$("div+p")//選擇全部緊接着<div>元素以後的<p>元素
$("ul li:first")//選取第一個 <ul> 元素的第一個 <li> 元素
$("ul li:first-child")//選取每一個 <ul> 元素的第一個 <li> 元素
$("[href]")//選取帶有 href 屬性的元素
$("a[href='www.baidu.com']")//選取全部 href 屬性值等於 "www.baidu.com" 的 <a> 元素
$("a[href!=www.baidu.com']")//選取全部 target 屬性值不等於 "www.baidu.com" 的 <a> 元素
$(":button")//選取全部 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")//選取偶數位置的 <tr> 元素
$("tr:odd")//選取奇數位置的 <tr> 元素

選擇器有不少，經常使用的就幾個。

5,比較特殊的選取節點：

$("*")//選取全部元素
$(this)//選取當前 HTML 元素
$("p.intro")//選取 class 爲 intro 的 <p> 元素（p和.intro緊鄰，是同一級關係）
$(".index.intro")//選取 class 同時爲 index 和 intro 的元素（.index和.intro緊鄰，也是同一級關係）

注意的是JavaScript得到的節點並不等於jquery節點。

經過javascript的getElementsByTagName獲取到的節點的元素是一個dom合集對象 ， 經過jQuery生成的對象是一個作了包裝處理的對象 。

注意上面的方法 返回的是jquery 集合 須要繼續用jq的方法操做或取值。

若是想要轉爲dom 直接操做的只須要 取它的下標便可。

$("#test1").parent()[0] //返回的就是dom節點

 

參考文章：

http://www.javashuo.com/article/p-dmtdowxi-gv.html

https://www.runoob.com/jquery/jquery-selectors.html