亚洲免费乱码视频,日韩 欧美 国产 动漫 一区,97在线观看免费视频播国产,中文字幕亚洲图片

      1. <legend id="ppnor"></legend>

      2. 
        
        <sup id="ppnor"><input id="ppnor"></input></sup>
        <s id="ppnor"></s>

        使用jQuery管理選擇結(jié)果

        字號(hào):


            使用jQuery選擇出來(lái)的元素與數(shù)組非常類似,可以通過(guò)jQuery提供的一系列方法對(duì)其進(jìn)行處理,包括長(zhǎng)度、查找某個(gè)元素,截取某個(gè)段落等。
            1.獲取元素的個(gè)數(shù)。
            在jQuery中可以通過(guò)size()方法獲取選擇器中元素的個(gè)數(shù),它類似數(shù)組中的length屬性,返回整數(shù)值,例如:
            $("img").size()
            獲取頁(yè)面中,所有圖片<img>的數(shù)目
            如下是一個(gè)實(shí)例,通過(guò)不斷的點(diǎn)擊添加div塊并計(jì)算頁(yè)面中的<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的數(shù)目,(此時(shí)還沒有div塊)
            $(document.body).append($("<div>" + i + "</div>")); //添加一個(gè)div塊
            $("#number").html(i);
            }
            </script>
            頁(yè)面中一共有<span id="number">0</span>個(gè)DIV塊。單擊鼠標(biāo)添加
            2.提取元素
            在jQuery中選擇器中,如果想提取某個(gè)元素,最直接的方法是采用方括號(hào)加序號(hào)的形式,例如;
            $("img[title]")[1]
            獲取了所有設(shè)置了title屬性的img標(biāo)記中的第二個(gè)元素。jQuery也提供了get(index)方法來(lái)提取元素,以下的代碼與上面的完全等效
            $("img[title]")get(1)
            get方法在不設(shè)置任何參數(shù)時(shí),可以將元素轉(zhuǎn)化為一個(gè)元素對(duì)象的數(shù)組,如下的例子:
            代碼如下:
            <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();//轉(zhuǎn)化為div對(duì)象數(shù)組
            displayleb(aDiv.reverse());
            });
            </script>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            上面代碼將頁(yè)面本身的6個(gè)<div>塊用get()方法轉(zhuǎn)化為數(shù)組,然后用數(shù)組反序reverse(),并傳給displayleb()函數(shù),再將其一個(gè)個(gè)現(xiàn)在頁(yè)面中。
            get(index)方法可以獲取指定位置的元素,反過(guò)來(lái),index(element)方法可以查找元素的element所處的位置。例如
            var iNum=$("li").index($(li[title=isaac]")[0])
            以上取<li titile="isaac">標(biāo)記在整個(gè)<li>標(biāo)記列表所處的位置,并將該位置返回給整數(shù)iNum.如下舉例index(element)方法的典型運(yùn)用。
            例:用index()方法獲取元素的序號(hào)
            代碼如下:
            <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()添加單擊函數(shù)
            $("div").click(function() {
            //將本身通過(guò)this關(guān)鍵字傳入,獲取自身的序號(hào)。
            var index = $("div").index(this) + 1;
            $("#display").html(index.toString());
            })
            });
            </script>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            單擊的是第<span id="display"></span>個(gè)div。
            以上代碼塊本身用this關(guān)鍵字傳入index()方法中,獲取自身的序號(hào),并且利用click()添加事件,將序號(hào)顯示出來(lái)。
            3.添加、刪除、過(guò)濾元素
            除了獲取選擇元素外,jQuery還提供了一系列的方法來(lái)修改元素集合,例如用add()的方法添加元素。
            $("img[alt]").add("img[title]")
            以上代碼將設(shè)置了alt元素的圖像和說(shuō)呀設(shè)置了title屬性的圖像組合在一起,供別的方法統(tǒng)一調(diào)運(yùn)。它完全等同于
            $("img[alt],img[title]")
            例如,可以講組合后的元素集統(tǒng)一添加css屬性。
            $("img[alt]").add("img[title]").addClass("altcss")
            與add()方法相反,not()方法可以去除元素集合中的某些元素形成集合
            $("li[title]").not("[title*=isaac]")
            以上代碼表示,選中所有設(shè)置了title屬性的標(biāo)記 ,但不包括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></div>
            <div></div>
            <div></div>
            <div></div>
            以上的Jquery通過(guò)not()的方法去掉風(fēng)格為"green"和"blueone"的<div>塊,給剩下的div塊加altcss樣式。
            not()方法所接收的參數(shù)都不能包含特定的元素,只能是通過(guò)通用的表達(dá)式例如下面的代碼是錯(cuò)誤的
            $("li[title]").not("img[title*=isaac]")
            正確的寫法是:
            $("li[tile]").not("[title*=isaac]")
            除了add()和not()外,jQuery還提供了更強(qiáng)大的filter()方法來(lái)篩選元素。filter()可以接受兩種類型的參數(shù),一種與not()方法一樣,接受通用的表達(dá)式。代碼如下:
            $("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></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            以上代碼中其中4個(gè)class屬性為middle,Jq先給所有的div塊都添加了css1樣式,然后通過(guò)filter()方法,把class中包含middle的div添加css2樣式。
            在filter()的參數(shù)中,不能直接的等于匹配(=),只能使用前匹配(^=)、后匹配(&=),或者任意匹配(*=).
            filter()另外一種類型的參數(shù)是函數(shù),對(duì)于返回ture元素匹配保留,否則排除集合。函數(shù)參數(shù)功能十分強(qiáng)大,可以讓用戶自定義篩選函數(shù)。
            例如:
            代碼如下:
            <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執(zhí)行:
            將所有的div添加css1然后利用filter()返回的函數(shù)將div列表中第一個(gè)(index為1),id是fourth的div元素篩選出來(lái),添加css2.
            4.查詢過(guò)濾新元素組
            jq還提供了 一些很有的用的方法組合,通過(guò)查詢來(lái)獲取新元素組合。例如find()方法。通過(guò)匹配選擇器來(lái)篩選元素
            $("p").find("span")
            表示查找到<p>標(biāo)記下含有<span>標(biāo)記的組合
            完全等于
            代碼如下:
            $("span",$("p"))
            $(function(){
            $("p").find("span").addClass("css1");
            });
            <p><span>Hello</span>, how are you?</p>
            表示給Hello添加css1的樣式.
            另外,還可以通過(guò)is()方法來(lái)檢測(cè)是否包含指定的元素,例如可以通過(guò)下面代碼檢測(cè)頁(yè)面中<div>塊中是否包含圖片。
            var himg = $("div").is("img");
            試想下,is()還可以結(jié)合filter()使用,是不是很愜意?
            以上就是本文的全部?jī)?nèi)容了,雖然有點(diǎn)長(zhǎng),但是還是建議小伙伴們仔細(xì)讀一下,希望大家能夠喜歡。