在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;

JQ选择器逐一测试的更多相关文章

  1. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  2. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  3. 常用jq选择器和遍历的使用

    1.jq的选择器,常用有哪些? class id > ~ ul li a 2.遍历的使用(在使用用遍历节点时,我们的注意遍历在不传递参数(也就是传参),代表的是传递局部全局,也就是"* ...

  4. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

  5. jq 选择器

    基本选择器 1. id选择器(指定id元素)将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () {    ...

  6. JQ选择器

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  7. jq 选择器基础及拓展

    jquery 用的很多,所以jq的选择器就很受欢迎,但是用的过程中有一些小问题,如果不点透就永远不知道. 1:ID选择器:$("#ID"); 得到一个指定对应,并且只能得到一个对象 ...

  8. JQ选择器大全

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  9. JQ选择器总结

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

随机推荐

  1. python-->基础-->003->字符串处理

    一.去除字符串首尾白空格 说明:即为去除字符串的首尾(即头部和尾部)的白空格(空格本身,回车\r,换行\n,制表符\t, 换页符\f ) 实例: str01 = ' abc def # ' print ...

  2. BIEE 11g学习

    biee 11g学习1. 创建资料档案库文件(RPD)  文件数据库 1.1 创建数据源连接          运行Net Manager 用于BIEE的数据库服务 1.2 模型的建立   1.运行o ...

  3. CSS样式之语法

    选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用 ...

  4. 扩展Smack Message

    XMPP是一种基于标准通用标记语言的子集XML的协议,它继承了在XML环境中灵活的发展性. Smack是一个开源的用 java 写的XMPP(jabber)客户端代码库 因为XMPP是XML,所以进行 ...

  5. Spring 4 官方文档学习（十一）Web MVC 框架之异常处理

    1.HandlerExceptionResolver Spring HandlerExceptionResolver的实现们会处理controller执行过程中发送的unexpected except ...

  6. 安装数据库出现错误vc_red.msi找不到

    用虚拟光驱安装数据的时候可能会出现,找不到vc_red.msi的问题,通过加载的虚拟光驱目录设置,可能 仍然后问题,比如程序停止运行. 解决方法是:解压iso文件,用解压后的文件安装.然后在解压文件夹 ...

  7. 纯css用图片代替checkbox和radio,无js实现方法

    html <ul id="is_offical_post_links"> <li> <label> <input type="c ...

  8. css定位的简单总结

    关于css的定位,相信初接触css的同学都头疼不已.相对定位.绝对定位连名字都这么像,用起来更是一会被遮住一会被挤出去,踩了很多坑之后,对css的定位进行一个简单的总结,以免重蹈覆辙. 其实掌握好几种 ...

  9. 如何优化cocos2d程序的内存使用和程序大小：第一部分

    译者: 在我完成第一个游戏项目的时候,我深切地意识到“使用cocos2d来制作游戏的开发者们,他们大多会被cocos2d的内存问题所困扰”.而我刚开始接触cocos2d的时候,社区里面的人们讨论了一个 ...

  10. 使用的组件：ckeditor

    老牌Web文本编辑器,无需多言. 官网地址:http://ckeditor.com/