DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 使用jQuery管理選擇結果
使用jQuery管理選擇結果
編輯:JQuery特效代碼     

使用jQuery選擇出來的元素與數組非常類似,可以通過jQuery提供的一系列方法對其進行處理,包括長度、查找某個元素,截取某個段落等。

1.獲取元素的個數。

在jQuery中可以通過size()方法獲取選擇器中元素的個數,它類似數組中的length屬性,返回整數值,例如:

$("img").size()
獲取頁面中,所有圖片<img>的數目

如下是一個實例,通過不斷的點擊添加div塊並計算頁面中的<div>塊。

代碼如下:
<style>
            div {
                border: 1px solid #003a75;
                background-color: #FFFF00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
        }
        </style>
        <script type="text/javascript">
            document.onclick = function() {
                var i = $("div").size() + 1; //獲取div的數目,(此時還沒有div塊)
                $(document.body).append($("<div>" + i + "</div>")); //添加一個div塊
                $("#number").html(i);
            }
        </script>

頁面中一共有<span id="number">0</span>個DIV塊。單擊鼠標添加

2.提取元素

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

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

$("img[title]")get(1)
get方法在不設置任何參數時,可以將元素轉化為一個元素對象的數組,如下的例子:

代碼如下:
<style>
            div {
                border: 1px solid #003a75;
                background-color: #FFFF00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
        }
        </style>
        <script type="text/javascript">
            function displayleb(ndiv) {
                for (var i = 0; i < ndiv.length; i++)
                    $(document.body).append($("<div style='background:"+ndiv[i].style.background + ";'>" + ndiv[i].innerHTML + "</div>"));
            }
            $(function(){
                var aDiv = $("div").get();//轉化為div對象數組
                displayleb(aDiv.reverse());
            });
        </script>
        <div style="background:#FFFFFF">1</div>
        <div style="background:#CCCCCC">2</div>
        <div style="background:#999999">3</div>
        <div style="background:#666666">4</div>
        <div style="background:#333333">5</div>
        <div style="background:#000000">6</div>

上面代碼將頁面本身的6個<div>塊用get()方法轉化為數組,然後用數組反序reverse(),並傳給displayleb()函數,再將其一個個現在頁面中。

get(index)方法可以獲取指定位置的元素,反過來,index(element)方法可以查找元素的element所處的位置。例如

var iNum=$("li").index($(li[title=isaac]")[0])
以上取<li titile="isaac">標記在整個<li>標記列表所處的位置,並將該位置返回給整數iNum.如下舉例index(element)方法的典型運用。

例:用index()方法獲取元素的序號

代碼如下:
    <style>
            div {
                border: 1px solid #003a75;
                background-color: #FFFF00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
        }
        </style>
        <script type="text/javascript">
            $(function() {
                //div click()添加單擊函數
                $("div").click(function() {
                    //將本身通過this關鍵字傳入,獲取自身的序號。
                    var index = $("div").index(this) + 1;
                    $("#display").html(index.toString());
                })
            });
        </script>
        <div style="background:#FFFFFF">1</div>
        <div style="background:#CCCCCC">2</div>
        <div style="background:#999999">3</div>
        <div style="background:#666666">4</div>
        <div style="background:#333333">5</div>
        <div style="background:#000000">6</div>
        單擊的是第<span id="display"></span>個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"的<li>。

例:

代碼如下:
<style>
            div {
                border: 1px solid #003a75;
                background-color: #FFFF00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
            .altcss {
                border: 2px solid #000000;
            }
        }
        </style>
        <script type="text/javascript">
            $(function() {
                $("div").not(".green, #blueone").addClass("altcss");
            });
        </script>
        <div></div>
        <div id="blueone"></div>
        <div></div>
        <div class="green"></div>
        <div class="green"></div>
        <div class="gray"></div>
        <div></div>

以上的Jquery通過not()的方法去掉風格為"green"和"blueone"的<div>塊,給剩下的div塊加altcss樣式。

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

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

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

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

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

代碼如下:
<script type="text/javascript">
            $(function() {
                $("div").addClass("css1").filter("[class*=middle]").addClass("css2");
            });
        </script>

        <div></div>
        <div class="middle"></div>
        <div class="middle"></div>
        <div class="middle"></div>
        <div class="middle"></div>
        <div></div>

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

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

filter()另外一種類型的參數是函數,對於返回ture元素匹配保留,否則排除集合。函數參數功能十分強大,可以讓用戶自定義篩選函數。

例如:

代碼如下:
<script type="text/javascript">
            $(function() {
                $("div").addClass("css1").filter(function(index) {
                    return index == 1 || $(this).attr("id") == "fourth";
                }).addClass("css2");
            });
        </script>     
<div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    <div id="fourth"></div>
    <div id="fifth"></div>

以上jq執行:

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

4.查詢過濾新元素組

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

$("p").find("span")
表示查找到<p>標記下含有<span>標記的組合

完全等於

代碼如下:
$("span",$("p"))
$(function(){
    $("p").find("span").addClass("css1");
});

<p><span>Hello</span>, how are you?</p>

表示給Hello添加css1的樣式.

另外,還可以通過is()方法來檢測是否包含指定的元素,例如可以通過下面代碼檢測頁面中<div>塊中是否包含圖片。

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved