使用jQuery管理選擇結果_jquery

使用jQuery選擇出來的元素與陣列非常類似，可以透過jQuery提供的一系列方法來處理，包括長度、尋找某個元素，截取某個段落等。

1.取得元素的數量。

在jQuery中可以透過size()方法取得選擇器中元素的個數，它類似數組中的length屬性，傳回整數值，例如：

$("img").size()
在取得頁中，所有圖片的數目

如下是一個實例，透過不斷的點擊新增div塊併計算頁面中的

區塊。

複製程式碼 程式碼如下:

       

")); //新增一個div塊
                $("#number").html(i);
            }
       

頁中一共有0個DIV區塊。點選滑鼠新增

2.提取元素

在jQuery中選擇器中，如果想提取某個元素，最直接的方法是採用方括號加序號的形式，例如；

$("img[title]")[1]
取得了所有設定了title屬性的img標記中的第二個元素。 jQuery也提供了get(index)方法來提取元素，以下的程式碼與上面的完全等效

$("img[title]")get(1)
get方法不設定任何參數時，可以將元素轉換為元素物件的數組，如下的例子：

複製程式碼 程式碼如下:

            div {
                邊框：1px 實線 #003a75;
                背景顏色：#FFFF00;
                邊界：5px；
                內邊界：20px；
                為對齊文字；
                高度：20px；
                寬度：20px；
                浮動：左；
            }
        }
        樣式>
       
            函數 displayleb(ndiv) {
                for (var i = 0; i $(document.body).append($("

" ndiv[i].innerHTML "

")) ;
            }
            $(函數(){
                var aDiv = $("div").get();//轉換為div物件備份
                displayleb(aDiv.reverse());
            });
        腳本>
       

1

       

2

       

3

       

4

       

5

       

6

上面程式碼將頁面本身的6個

區塊用get()方法轉換為陣列，然後用陣列反序reverse()，並傳給displayleb()函數，再將其一個現在頁面中。

get(index)方法可以取得指定位置的元素，反過來，index(element)方法可以找出元素的元素的位置。例如

var iNum=$("li").index($(li[title=isaac]")[0])
以上取

在整個

標記列表無線的位置，將該位置傳回整數iNum。如下舉例index(element)方法的典型運用。

例：用index()方法取得元素的序號

複製程式碼程式碼如下：

   
       
       

1

       

2

       

3

       

4

       

5

       

6

        點選的是第個div。

以上程式碼區塊本身用this關鍵字傳入index()方法中，取得自身的序號，並且利用click()新增事件，將序號顯示出來。

3.新增、刪除、過濾元素

除了取得選擇元素外，jQuery還提供了一系列的方法來修改元素集合，例如以add()的方法加入元素。

$("img[alt]").add("img[title]")
以上程式碼將設定了alt元素的圖像和說呀設定了title屬性的圖像組合在一起，供別的方法統一調運。它完全等同於

$("img[alt],img[title]")
例如，可以講組合後的元素集統一加入css屬性。

$("img[alt]").add("img[title]").addClass("altcss")
與add()方法相反,not()方法可以去除元素集合中的某些元素形成集合

$("li[title]").not("[title*=isaac]")
以上程式碼表示，選取所有設定了title屬性的標記 ，但不包括title的值中包含"isaac"的

。

例：

複製程式碼 程式碼如下:

            div {
                邊框：1px 實線 #003a75;
                背景顏色：#FFFF00;
                邊界：5px；
                內邊界：20px；
                為對齊文字；
                高度：20px；
                寬度：20px；
                浮動：左；
            }
            .altcss {
                邊框：2px 實線 #000000;
            }
        }
        樣式>
       
            $(函數() {
                $("div").not(".green, #blueone").addClass("altcss");
            });
        腳本>
       

       

       

       

       

       

       

以上的Jquery透過not()的方法去掉樣式為「green」和「blueone」的

區塊，給剩餘的div塊加上altcss樣式。

not()方法所接收的參數都不能包含特定的元素，只能是透過通用的表達式例如下面的程式碼是錯誤的

$("li[title]").not("img[title*=isaac]")
正確的寫法是：

$("li[tile]").not("[title*=isaac]")
除了add()和not()外，jQuery還提供了更強大的filter()方法來篩選元素。 filter()可以接受兩種類型的參數，一種與not()方法一樣，接受通用的表達式。程式碼如下：

$("li").filter("[title*=isaac]")
以上的程式碼表示：篩選出標題值包含isaac字串的li元素組合。

與

$("li[標題*=isaac]")
所篩選的組合相同。

複製程式碼程式碼如下：

            $(函數() {
                $("div").addClass("css1").filter("[class*=middle]").addClass("css2");
            });
        腳本>

       

       

       

       

       

       

以上程式碼中其中4個class屬性為middle，Jq先為所有的div塊都加入了css1樣式，然後透過filter()方法，把class中包含middle的div添加css2樣式。

在filter()的參數中，不能直接的等於匹配(=),只能使用前匹配(^=)、後匹配(&=)，或任意匹配(*=).

filter()另外一種類型的參數是函數，對於傳回ture元素比對保​​留，否則排除集合。函數參數功能十分強大，可以讓使用者自訂篩選函數。

例如：

複製程式碼 程式碼如下:

     

   

   

   

   

以上jq執行:

將所有的div加入css1然後利用filter()傳回的函數將div列表中第一個（index為1），id是fourth的div元素篩選出來，加上css2.

4.查詢過濾新元素組

jq也提供了 一些很有的用的方法組合，透過查詢來取得新元素組合。例如find()方法。透過匹配選擇器來篩選元素

$("p").find("span")
表示查找到

標記下含有標記的組合

完全等於

複製程式碼 程式碼如下:

$("span",$("p"))
$(function(){
    $("p").find("span").addClass("css1");
});

Hello, how are you?

表示為Hello加上css1的樣式.

另外，也可以透過is()方法來偵測是否包含指定的元素，例如可以透過下面程式碼偵測頁面中

區塊中是否包含圖片。

var himg = $("div").is("img");
試想下，is()還可以結合filter()使用，是不是很愜意？

以上就是本文的全部內容了，雖然有點長，但是還是建議小夥伴們仔細讀一下，希望大家能夠喜歡。