JQ选择器逐一测试

在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选择器逐一测试的更多相关文章

jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器
今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别在 dom 想用jquery 必须先引入(顺序问题) 先css 再js: ...
常用jq选择器和遍历的使用
1.jq的选择器,常用有哪些? class id > ~ ul li a 2.遍历的使用(在使用用遍历节点时,我们的注意遍历在不传递参数(也就是传参),代表的是传递局部全局,也就是"* ...
jq选择器基础
Jquery $代表选择器使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
jq 选择器
基本选择器 1. id选择器(指定id元素)将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { ...
JQ选择器
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
jq 选择器基础及拓展
jquery 用的很多,所以jq的选择器就很受欢迎,但是用的过程中有一些小问题,如果不点透就永远不知道. 1:ID选择器:$("#ID"); 得到一个指定对应,并且只能得到一个对象 ...
JQ选择器大全
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
JQ选择器总结
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

随机推荐

linux特殊符号大全
# ; ;; . , / \ 'string'| ! $ ${} $? $$ $* " ...
使用Servlet实现图片下载
package chensi.com; import java.io.FileInputStream; import java.io.IOException; import java.net.URLE ...
rsyslog+mysql+loganalyzer搭建日志服务器<个人笔记>
大概思路如下: 使用Linux自带的rsyslog服务来做底层,然后再使用mysql与rsyslog的模板来存储文件,并且以web来进行显示出来.<模板的存储以日期的树形结构来存储,并且以服务器 ...
Jade之Filters
Filters jade允许将其他语言嵌套到jade语言之中. 支持的有:coffee-script,:babel,:uglify-js, :less,:markdown-it. jade: :mar ...
innobackupex使用实践
先介绍一下环境: MySQL:5.6.19 安装路径:/u01/mysql 数据文件:/u01/mysql/data 备份源:/u02/backup 我是异机恢复,和本机操作一样. 一. 全量备份步 ...
用SQL语句,删除掉重复项只保留一条
用SQL语句,删除掉重复项只保留一条在几千条记录里,存在着些相同的记录,如何能用SQL语句,删除掉重复的呢1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select ...
关于动态生成dom绑定事件失效的原因
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
一个创建Coco2d-x项目的脚本
1.使用环境我测试的环境是Mac OS 10.10 +Coco2d-x 3.2,是使用shell写的脚本,应该linux/unix都应该可以使用. 2.使用可能出现的问题使用中可能会爆权限不足的 ...
Windows,linux快捷键
Window系统按着Alt + 鼠标左键点击 = 直接打开点击空间的属性
安装python 的包 paramiko
安装python 的包 paramiko 安装依赖 yum -y install gcc python-devel 获取安装 pycryptowget https://pypi.python.or ...

JQ选择器逐一测试

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

随机推荐

热门专题