一、篩選

1、過濾

（1）first()：獲取匹配的第一個元素

程式碼：

$(function(){

// 獲取ul中所有的li元素，然後找到第一個元素

$("ul>li:first").css("background","yellow")

$("ul>li").first().css("background","yellow")

})

html程式碼：

<body>

<h2>jQuery03：篩選、文件處理</h2>

<ul>

<ol>

</ol>

</ul>

</body>

注意：下面大部分效果圖html程式碼與此一致，為方便瀏覽，下文相同的地方就不寫了。

兩種方式效果一致。

效果圖：

（2）last()：獲得匹配的最後一個元素

程式碼：

$(function(){

// 找到最後一個元素

$("ul>li").last().css("background","yellow");

})

和上面的first() 類似

效果圖：

（3）eq(N)：獲取匹配的第N或-N個元素

程式碼：

$(function(){

// 找到指定的某一個元素，例如第3個

$("ul>li:eq(2)").css("background","yellow")

$("ul>li").eq(-2).css("background","yellow");//倒著數

})

效果圖：

（4）filter(selector)：篩選出與指定表示式匹配的元素集合

程式碼：

$(function(){

// 找到屬性title為a的元素

$("ul>li").filter("[title=a]").css("background","yellow");

// 找到屬性title不為a的元素

// $("ul>li").filter("[title][title!=a]").css("background","yellow");

// 篩選出有title屬性的元素集合

// $("ul>li").filter("[title]").css("background","yellow")

})

效果圖：

（5）has(selector)：篩選出包含特定特點的元素的集合

程式碼：

$(function(){

// 篩選出有<span>標籤的元素集合

$("ul>li").has("span").css("background","yellow");

})

效果圖：

（6）not(selector)：篩選出不包含特定特點的元素的集合

程式碼：

$(function(){

// 篩選出沒有title屬性的元素集合

$("ul>li").not("[title]").css("background","yellow");

})

效果圖：

2、查詢

（1）children()：子標籤中找

程式碼：

$(function(){

// 查詢ul的所有子標籤,並且指定為li子標籤

// $("ul>li").css("background","yellow");

$("ul").children().css("background","yellow");

})

效果圖：

（2）find()：後代標籤中找

程式碼：

$(function(){

// 查詢ul下面所有的span標籤

// $("ul span").css("background","yellow");

$("ul").find("span").css("background","yellow");

})

效果圖：

（3）parent()：父標籤

程式碼：

$(function(){

// 查詢b標籤的父元素標籤

$("b").parent().css("background","yellow");

})

效果圖：

（4）prevAll()：前面所有的兄弟標籤

程式碼：

$(function(){

// 查詢第三個li標籤前面所有的兄弟標籤

$("ul>li").eq(2).prevAll().css("background","yellow");

})

效果圖：

（5）nextAll()：後面所有的兄弟標籤

程式碼：

$(function(){

// 查詢第三個li標籤後面所有的兄弟標籤,並且只能是li標籤

// $("ul>li").eq(2).nextAll().css("background", "yellow");

$("ul>li").eq(2).nextAll("li").css("background", "yellow");

})

效果圖：

（6）siblings()：前後所有的兄弟標籤

程式碼：

$(function(){

// 查詢第三個li標籤所有的兄弟標籤

$("ul>li").eq(2).siblings().css("background","yellow");

})

效果圖：

二、文件處理

1.增加

（1）內部插入

1、append()：將內容新增到指定的元素後面

程式碼：

$(function(){

$("ul>li").last().append("<a href='嘿嘿嘿</a>")

})

效果圖：

2、appendTo()：和append()顛倒

程式碼：

$(function(){

$("<a href='嘿嘿嘿</a>").appendTo($("ul>li").last())

})

效果圖：

3、prepend()：將內容新增到指定元素前面

程式碼：

$(function(){

$("ul>li").first().prepend("<a href='哈哈哈</a>")

})

效果圖：

4、prependTo():和prepend()顛倒

程式碼：

$(function(){

$("<a href='哈哈哈</a>").prependTo($("ul>li").first())

})

效果圖：

（2）外部插入

1、after()：在匹配元素之後插入內容

程式碼：

$(function(){

// 在屬性title為b的li後面插入一個a標籤

$("ul>li").filter("[title=b]").after("<a href='嗨嗨</a>")

})

效果圖：

2、before()：在匹配元素之前插入內容

程式碼：

$(function(){

// 在屬性title為b的li後面插入一個a標籤

$("ul>li").filter("[title=b]").before("<a href='嗨嗨</a>")

})

效果圖：

jQuery 篩選&文件處理

相關文章