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值不能重复在文档中只能有一个 ...

随机推荐

Eclipse 3.5使用dropins的插件安装方式
以前安装Eclipse插件有两种方式 1 直接copy插件到features/plugins目录 2 在links目录下创建链接文件. 而 Eclipse 3.5又推出另一种新的安装途径, 更加灵活. ...
【jQuery】：定时刷新页面
<%@page import="qflag.ucstar.seatmonitor.manager.SeatMonitorManager"%><%@ page la ...
ubuntu12.04安装svn 1.7(转载)
ubuntu12.04安装svn 1.7 分类: ubuntu2013-10-22 16:03 239人阅读评论(0) 收藏举报 svnubuntu 目录(?)[+] 1.问题在 ...
Android瀑布流照片墙实现，体验不规则排列的美感
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10470797 传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在 ...
JS-怎么得到局部域中的数据
1,使用全局变量 var str = '';function fn1(){ var a = '大鸡腿~'; str = a;} 2,使用一个局部函数 function fn2(){ ...
SQL Server高级性能调优策略
论坛里经常有人问“我的数据库很慢,有什么办法提高速度呢?”.这是个古老的话题,又是常见的问题,也是DBA们最想解决的问题之一.我想就SQLServer调优大家一起论一论,如果可以的话尽量发表自己观点, ...
Young氏矩阵
一个 m x n 的Young氏矩阵是指,每一行数据都是从左到右排好序,每一列的数据也都是从上到下排好序.其中也可能存在一些INF的数据,表示不存在的元素,一个mxn的Young氏矩阵最多用来存放 r ...
Linq To Object
//SelectMany List<List<int>> Numbers = new List<List<int>>() { new List<i ...
Dynamic CRM 2013学习笔记（十四）复制/克隆记录
经常有这样的需求,一个单据上有太多要填写的内容,有时还关联多个子单据,客户不想一个一个地填写,他们想从已有的单据上复制数据,克隆成一条新的记录.本文将介绍如何克隆一条记录,包括它的子单据以生成一条新的 ...
Dynamic CRM 2013学习笔记（三十七）自定义审批流7 - 初始化（整套审批流下载、安装）
前面介绍了自定义审批流的配置.使用,这篇介绍下如何进行初始化. 一. 下载从下面的地址下载整个审批流: http://yunpan.cn/cZ5Rdx5HCt3VF 下载完后,一共有三块内容: 二. ...

JQ选择器逐一测试

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

随机推荐

热门专题