jQuery 篩選&文件處理

vjvj1101發表於2022-04-16

一、篩選

1、過濾

        (1)first():獲取匹配的第一個元素

 程式碼:


$(function(){

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

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

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

})

html程式碼: 


<body>

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

<!-- 篩選和查詢案例 -->

<ul>

<li>1</li>

<li title="a">2</li>

<li title="b">3</li>

<li title="a"><span><b>4</b></span></li>

<li title="b"><span>5</span></li>

<ol>

<li>6</li>

<li>7</li>

</ol>

<span>8</span>

</ul>

<button type="button" id="btn">返回頂部</button>

</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>")

})

效果圖:




 


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70016760/viewspace-2887464/,如需轉載,請註明出處,否則將追究法律責任。

相關文章