JQ选择器逐一测试

时间：2022-02-17 15:12:14

在web开发中大部分时间都在查找DOM元素和对DOM元素进行控制。

从上面就知道JQ为什么那么流行，因为它极大的缩短对DOM元素的查找和控制，让开发更快。

而它的对查找DOM的方法也很方便，这归类为选择器，如果对它了解，就知道它还有子类库sizzle，

这是选择器分出来的库，还有在从源码里也可以知道选择器这块的代码量，有2000行左右，让我们

可以像css选择器一样，把繁杂的选择简单化，也可以看出它替我们干了多少事，让我们更快开发。下面测试

每一个选择器的功能。

一般情况下都是$()，它接受两个参数，第一个参数不说，第二个参数可选，它就像以下：

原生：

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

JQ：

$("#div",document)

第二参数就是代表原生的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  匹配所有索引值为偶数的元素，从 0 开始计数

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

13、:odd  匹配所有索引值为奇数的元素，从 0 开始计数

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

14、:eq(index) 匹配一个给定索引值的元素

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

匹配第一个元素

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

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

匹配索引大于1的元素

16、:lang(language) 选择指定语言的所有元素。

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

17、:last() 获取最后个元素

$("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之类的标题元素

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

20、:animated 匹配所有正在执行动画效果的元素

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

21、:focus 匹配当前获取焦点的元素。

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

22、:root 选择该文档的根元素。

在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。

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

23、:target 选择由文档URI的格式化识别码表示的目标元素。

$("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标签的元素

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

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

28、:hidden 匹配所有不可见元素，或者type为hidden的元素

<div id="div" class="div" style="display: none;"></div>

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

29、:visible 匹配所有的可见元素

<div id="div" class="div" style="display: none;"></div>

<div id="div" class="div" style="display: block;"></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]  匹配给定的属性是某个特定值的元素

$("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] 匹配给定的属性是以某些值开始的元素

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

33、[attribute$=value]  匹配给定的属性是以某些值结尾的元素

$("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] 复合属性选择器，需要同时满足多个条件时使用。

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

36、:first-child 匹配第一个子元素

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

37、:first-of-type 结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于 :nth-of-type(1)  选择器。

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

38、:last-child  匹配最后一个子元素

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

39、:last-of-type 结构化伪类，匹配E的父元素的最后一个E类型的孩子

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

40、:nth-child 匹配其父元素下的第N个子或奇偶元素

要匹配元素的序号，从1开始

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

第一个子元素

41、:nth-last-child(n|even|odd|formula) 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。

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

42、nth-last-of-type(n|even|odd|formula) 选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。

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

选中最后一个子元素

43、:nth-of-type(n|even|odd|formula) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。

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

44、:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配,如果父元素中含有其他元素，那将不会被匹配

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

当p是唯一的时候选中

45、:only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素。

$("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标签

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 匹配所有复选框

$(":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 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected

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

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

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

扩展：

var jQuery=window.jQuery=window.$=function(selector,context){

            return new jQuery.fn.init(selector,context)

        }

        /*这是jquery的总入口，所有的调用都基于这个入口*/

        /*在一些jq插件里源码看到这个jQuery.fn,其实它是如下*/

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

相关文章