當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

JQ选择器逐一测试

發(fā)布時(shí)間：2024/9/5 综合教程 28 生活家

生活随笔收集整理的這篇文章主要介紹了 JQ选择器逐一测试小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在web開(kāi)發(fā)中大部分時(shí)間都在查找DOM元素和對(duì)DOM元素進(jìn)行控制。

從上面就知道JQ為什么那么流行，因?yàn)樗鼧O大的縮短對(duì)DOM元素的查找和控制，讓開(kāi)發(fā)更快。

而它的對(duì)查找DOM的方法也很方便，這歸類(lèi)為選擇器，如果對(duì)它了解，就知道它還有子類(lèi)庫(kù)sizzle，

這是選擇器分出來(lái)的庫(kù)，還有在從源碼里也可以知道選擇器這塊的代碼量，有2000行左右，讓我們

可以像css選擇器一樣，把繁雜的選擇簡(jiǎn)單化，也可以看出它替我們干了多少事，讓我們更快開(kāi)發(fā)。下面測(cè)試

每一個(gè)選擇器的功能。

一般情況下都是$()，它接受兩個(gè)參數(shù)，第一個(gè)參數(shù)不說(shuō)，第二個(gè)參數(shù)可選，它就像以下：

原生：
var oDiv=document.getElementById('div');
JQ：
$("#div",document)

第二參數(shù)就是代表原生的document

如：

var oDiv=obj.getElementById('div');

$("#div",obj)

1、#id

<div id="div"></div>
    <script>
        $(function(){
            $("#div").css({"width":100,"height":100,"border":"1px solid #000"})
        })
    </script>

2、element

var oDiv=document.getElementById('div');
        $(function(){
            $("div",document).css({"width":100,"height":100,"border":"1px solid #000"})
        })

3、class

    <div id="div" class="div"></div>
    <script>
        var oDiv=document.getElementById('div');
        $(function(){
            $(".div",document).css({"width":100,"height":100,"border":"1px solid #000"})
        })
    </script>

4、*

var oDiv=document.getElementById('div');
        $(function(){
            $("*",document).css({"width":100,"height":100,"border":"1px solid #000"})
        })

5、多選擇器：selector1,selector2,selectorN

$("div,.div,#div").css({"width":100,"height":100,"border":"1px solid #000"})

6、ancestor descendant后代選擇器

$("ul li").css({"width":100,"height":100,"border":"1px solid #000"})

7、parent > child

$("ul>li").css({"width":100,"height":100,"border":"1px solid #000"})

8、

$("li+li").css({"width":100,"height":100,"border":"1px solid #000"})

9、prev ~ siblings

$("li~li").css({"width":100,"height":100,"border":"1px solid #000"})

10、:first

$("li:first").css({"width":100,"height":100,"border":"1px solid #000"})

11、:not(selector) 去除匹配元素

$("li:not(.active)").css({"width":100,"height":100,"border":"1px solid #000"})

12、:even 匹配所有索引值為偶數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)

$("li:even").css({"width":100,"height":100,"border":"1px solid #000"})

13、:odd 匹配所有索引值為奇數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)

$("li:odd").css({"width":100,"height":100,"border":"1px solid #000"})

14、:eq(index) 匹配一個(gè)給定索引值的元素

    $("li:eq(0)").css({"width":100,"height":100,"border":"1px solid #000"})

匹配第一個(gè)元素

15、:gt(index) 匹配所有大于給定索引值的元素

$("li:gt(1)").css({"width":100,"height":100,"border":"1px solid #000"})

匹配索引大于1的元素

16、:lang(language) 選擇指定語(yǔ)言的所有元素。

$("li:lang(it)").css({"width":100,"height":100,"border":"1px solid #000"})

17、:last() 獲取最后個(gè)元素

$("li:last").css({"width":100,"height":100,"border":"1px solid #000"})

18、:lt(index) 匹配所有小于給定索引值的元素

$("li:lt(5)").css({"width":100,"height":100,"border":"1px solid #000"})

匹配索引值小于5的元素

19、:header 匹配如 h1, h2, h3之類(lèi)的標(biāo)題元素

$(":header").css({"width":100,"height":100,"border":"1px solid #000"})

20、:animated 匹配所有正在執(zhí)行動(dòng)畫(huà)效果的元素

$("div:animated").css({"width":100,"height":100,"border":"1px solid #000"})

21、:focus 匹配當(dāng)前獲取焦點(diǎn)的元素。

$("input:focus").css({"width":100,"height":100,"border":"1px solid #000"})

22、:root 選擇該文檔的根元素。

在HTML中，文檔的根元素，和$(":root")選擇的元素一樣，永遠(yuǎn)是<html>元素。

$(":root").css({"width":100,"height":100,"border":"1px solid #000"})

23、:target 選擇由文檔URI的格式化識(shí)別碼表示的目標(biāo)元素。

$("div:target").css({"width":100,"height":100,"border":"1px solid #000"})

24、:contains(text) 匹配包含給定文本的元素

$("div:contains['zhng']").css({"width":100,"height":100,"border":"1px solid #000"})

選擇包含字符串zhng的元素

25、:empty 匹配所有不包含子元素或者文本的空元素

$("div:empty").css({"width":100,"height":100,"border":"1px solid #000"})

26、:has(selector) 匹配含有選擇器所匹配的元素的元素

$("div:has(p)").css({"width":100,"height":100,"border":"1px solid #000"})

選擇包含p標(biāo)簽的元素

27、:parent 匹配含有子元素或者文本的元素

$("div:parent").css({"width":100,"height":100,"border":"1px solid #000"})

28、:hidden 匹配所有不可見(jiàn)元素，或者type為hidden的元素

<div id="div" class="div"></div>

$("div:hidden").css({"width":100,"height":100,"border":"1px solid #000"})

29、:visible 匹配所有的可見(jiàn)元素

<div id="div" class="div"></div>
<div id="div" class="div"></div>


$("div:visible").css({"width":100,"height":100,"border":"1px solid #000"})

30、[attribute] 匹配包含給定屬性的元素。

$("div[class]").css({"width":100,"height":100,"border":"1px solid #000"})

31、[attribute=value] 匹配給定的屬性是某個(gè)特定值的元素

$("div[class='div']").css({"width":100,"height":100,"border":"1px solid #000"})

31、[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等于特定值的元素。

$("div[class!='div']").css({"width":100,"height":100,"border":"1px solid #000"})

32、[attribute^=value] 匹配給定的屬性是以某些值開(kāi)始的元素

$("div[class^='d']").css({"width":100,"height":100,"border":"1px solid #000"})

33、[attribute$=value] 匹配給定的屬性是以某些值結(jié)尾的元素

$("div[class$='v']").css({"width":100,"height":100,"border":"1px solid #000"})

34、[attribute*=value] 匹配給定的屬性是以包含某些值的元素

$("div[class*='i']").css({"width":100,"height":100,"border":"1px solid #000"})

35、[selector1][selector2][selectorN] 復(fù)合屬性選擇器，需要同時(shí)滿(mǎn)足多個(gè)條件時(shí)使用。

$("div[id][class*='i']").css({"width":100,"height":100,"border":"1px solid #000"})

36、:first-child 匹配第一個(gè)子元素

$("div p:first-child").css({"width":100,"height":100,"border":"1px solid #000"})

37、:first-of-type 結(jié)構(gòu)化偽類(lèi)，匹配E的父元素的第一個(gè)E類(lèi)型的孩子。等價(jià)于 :nth-of-type(1) 選擇器。

$("div p:first-of-type").css({"width":100,"height":100,"border":"1px solid #000"})

38、:last-child 匹配最后一個(gè)子元素

    $("div p:last-child").css({"width":100,"height":100,"border":"1px solid #000"})

39、:last-of-type 結(jié)構(gòu)化偽類(lèi)，匹配E的父元素的最后一個(gè)E類(lèi)型的孩子

$("div p:last-of-type").css({"width":100,"height":100,"border":"1px solid #000"})

40、:nth-child 匹配其父元素下的第N個(gè)子或奇偶元素

要匹配元素的序號(hào)，從1開(kāi)始

$("div p:nth-child(1)").css({"width":100,"height":100,"border":"1px solid #000"})

第一個(gè)子元素

41、:nth-last-child(n|even|odd|formula) 選擇所有他們父元素的第n個(gè)子元素。計(jì)數(shù)從最后一個(gè)元素開(kāi)始到第一個(gè)。

$("div p:nth-last-child(1)").css({"width":100,"height":100,"border":"1px solid #000"})

42、nth-last-of-type(n|even|odd|formula) 選擇的所有他們的父級(jí)元素的第n個(gè)子元素，計(jì)數(shù)從最后一個(gè)元素到第一個(gè)。

$("div p:nth-last-of-type(1)").css({"width":100,"height":100,"border":"1px solid #000"})

選中最后一個(gè)子元素

43、:nth-of-type(n|even|odd|formula) 選擇同屬于一個(gè)父元素之下，并且標(biāo)簽名相同的子元素中的第n個(gè)。

$("div p:nth-of-type(1)").css({"width":100,"height":100,"border":"1px solid #000"})

44、:only-child 如果某個(gè)元素是父元素中唯一的子元素，那將會(huì)被匹配,如果父元素中含有其他元素，那將不會(huì)被匹配

$("div p:only-child").css({"width":100,"height":100,"border":"1px solid #000"})

當(dāng)p是唯一的時(shí)候選中

45、:only-of-type 選擇所有沒(méi)有兄弟元素，且具有相同的元素名稱(chēng)的元素。

$("div p:only-of-type").css({"width":100,"height":100,"border":"1px solid #000"})

46、:input 匹配所有 input, textarea, select 和 button 元素

$(":input").css({"width":100,"height":100,"border":"1px solid #000"})

匹配所有的input標(biāo)簽

47、:text 匹配所有的單行文本框

$(":text").css({"width":100,"height":100,"border":"1px solid #000"})

匹配單行文本框

48、:password 匹配所有密碼框

$(":password").css({"width":100,"height":100,"border":"1px solid #000"})

匹配密碼框

49、:radio 匹配所有單選按鈕

$(":radio").css({"width":100,"height":100,"border":"1px solid #000"})

50、:checkbox 匹配所有復(fù)選框

$(":checkbox").css({"width":100,"height":100,"border":"1px solid #000"})

51、:submit 匹配所有提交按鈕

$(":submit").css({"width":100,"height":50,"border":"1px solid #000"})

52、:image 匹配所有圖像域

<input type="image" />


$(":image").css({"width":100,"height":50,"border":"1px solid #000"})

匹配<input type="image" />

53、:reset 匹配所有重置按鈕

$(":reset").css({"width":100,"height":50,"border":"1px solid #000"})

54、:button 匹配所有按鈕

$(":button").css({"width":100,"height":50,"border":"1px solid #000"})

55、:file 匹配所有文件域

$(":file").css({"width":100,"height":50,"border":"1px solid #000"})

56、:enabled 匹配所有可用元素

$(":enabled").css({"width":100,"height":50,"border":"1px solid #000"})

57、:disabled 匹配所有不可用元素

$(":disabled").css({"width":100,"height":50,"border":"1px solid #000"})

58、:checked 匹配所有選中的被選中元素(復(fù)選框、單選框等，select中的option)，對(duì)于select元素來(lái)說(shuō)，獲取選中推薦使用 :selected

$(":checked").css({"width":100,"height":50,"border":"1px solid #000"})

59、:selected 匹配所有選中的option元素

$(":selected").css({"width":100,"height":50,"border":"1px solid #000"})

擴(kuò)展：

var jQuery=window.jQuery=window.$=function(selector,context){
            return new jQuery.fn.init(selector,context)
        }

        /*這是jquery的總?cè)肟冢械恼{(diào)用都基于這個(gè)入口*/

        /*在一些jq插件里源碼看到這個(gè)jQuery.fn,其實(shí)它是如下*/

        jQuery.fn.init.prototype=jQuery.fn;

總結(jié)

以上是生活随笔為你收集整理的JQ选择器逐一测试的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：股市高开和低开的区别
下一篇：元宇宙可以做什么现阶段已经有不少功能可