基本选择器

1. id选择器(指定id元素)

2. class选择器(遍历css类元素)

3. element选择器(遍历html元素)

4. * 选择器(遍历所有元素)

5. 并列选择器$('p,div').css('margin', '0');

层次选择器

1. parent > child(直系子元素)

2. prev + next(下一个兄弟元素,等同于next()方法)

3. prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)

过滤选择器

1. 基本过滤选择器

——1.1 :first和:last(取第一个元素或最后一个元素)

——1.2 :not(取非元素)

  $('div:not(.wrap)').css('color', '#FF0000');

——1.3 :even和:odd(取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数)

——1.4 :eq(x) (取指定索引的元素)

——1.5 :gt(x)和:lt(x)(取大于x索引或小于x索引的元素)

       $('ul li:gt(2)').css('color', '#FF0000');
$('ul li:lt(2)').css('color', '#0000FF');

——1.6 :header(取H1~H6标题元素)

 $(':header').css('background', '#EFEFEF');

2. 内容过滤选择器

——2.1 :contains(text)(取包含text文本的元素)

$('dd:contains("jQuery")').css('color', '#FF0000');

——2.2 :empty(取不包含子元素或文本为空的元素)

 $('dd:empty').html('没有内容');
——2.3 :has(selector)(取选择器匹配的元素)
$('div:has(span)').css('border', '1px solid #000');

——2.4 :parent(取包含子元素或文本的元素)
$('ol li:parent').css('border', '1px solid #000');

3. 可见性过滤选择器

——3.1 :hidden(取不可见的元素)

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<input type="hidden" />的元素,而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素,像visibility:hidden或opactity:0的元素占据了空间,会被排除在外。

——3.2 :visible(取可见的元素)

4. 属性过滤选择器

——4.1 [attribute](取拥有attribute属性的元素)

$('a[title]').css('text-decoration', 'none');

——4.2 [attribute = value]和[attribute != value](取attribute属性值等于value或不等于value的元素)

$('a[class=item]').css('color', '#FF99CC');

$('a[class!=item]').css('color', '#FF6600');

——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value](attribute属性值以value开始,以value结束,或包含value值)

——4.4 [selector1][selector2](复合型属性过滤器,同时满足多个条件)

5. 子元素过滤选择器

——5.1 :first-child和:last-child

——5.2 :only-child

当某个元素有且仅有一个子元素时,:only-child才会生效。

——5.3 :nth-child

:nth-child有三种用法:

1) :nth-child(x),获取第x个子元素
2) :nth-child(even)和:nth-child(odd),从1开始,获取第偶数个元素或第奇数个元素

3) :nth-child(xn+y),x>=0,y>=0。例如x = 3, y = 0时就是3n,表示取第3n个元素(n>=0)。实际上xn+y是上面两种的通项式。(当x=0,y>=0时,等同于:hth-child(x);当x=2,y=0时,等同于nth-child(even);当x=2,y=1时,等同于:nth-child(odd))

6. 表单对象属性过滤选择器

——6.1 :enabled和:disabled(取可用或不可用元素)

:enabled和:diabled的匹配范围包括input, select, textarea。

——6.2 :checked(取选中的单选框或复选框元素)

下面的代码,更改边框或背景色仅在IE下有效果,chrome和firefox不会改变,但是alert都会弹出来。

——6.3 :selected(取下拉列表被选中的元素)

表单选择器

1. :input(取input,textarea,select,button元素)

:input元素这里就不再多说了,前面的一些例子中也已经囊括了。

2. :text(取单行文本框元素)和:password(取密码框元素)

这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。

3. :radio(取单选框元素)

:radio选择器和属性选择器$('input[type=radio]')等同

4. :checkbox(取复选框元素)

:checkbox选择器和属性选择器$('input[type=checkbox]')等同

5. :submit(取提交按钮元素)

:submit选择器和属性选择器$('input[type=submit]')等同

6. :reset(取重置按钮元素)

:reset选择器和属性选择器$('input[type=reset]')等同

7. :button(取按钮元素)

:button选择器和属性选择器$('input[type=button]')等同

8. :file(取上传域元素)

:file选择器和属性选择器$('input[type=file]')等同

9. :hidden(取不可见元素)

:hidden选择器和属性选择器$('input[type=hidden]')等同

总结jQuery选择器的更多相关文章

  1. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  2. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  3. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  4. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  5. 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

  6. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  7. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  8. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  9. jQuery-1.9.1源码分析系列(二)jQuery选择器

    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

  10. jQuery-1.9.1源码分析系列(二)jQuery选择器续1

    在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...

随机推荐

  1. 网游中的网络编程系列1:UDP vs. TCP

    原文:UDP vs. TCP,作者是Glenn Fiedler,专注于游戏网络编程相关工作多年. 目录 网游中的网络编程系列1:UDP vs. TCP 网游中的网络编程2:发送和接收数据包 网游中的网 ...

  2. vNext之旅(1):从概念和基础开始

    ASP.NET vNext or .NET vNext? vNext在曝光以来绝大多数以ASP.NET vNext这样的的字眼出现,为什么这边会提及.NET vNext?原因是我认为ASP.NET只是 ...

  3. PKI系统深入介绍

    公钥基础设施(Public Key Infrastructure,简称PKI)是目前网络安全建设的基础与核心,是电子商务安全实施的基本保障,因 此,对PKI技术的研究和开发成为目前信息安全领域的热点. ...

  4. jsp还是html+ajax

    1.有人说JSP会泄露源码(可能会有一些代码痕迹,但肯定没啥大事)2.又说,Ajax是为了分离前后台,让控制部分在前台处理,降低代码耦合度,后台只相当于服务. 3.能够让前台移植,降低后期维护成本.纯 ...

  5. MVC认知路【点点滴滴支离破碎】【二】----Razor服务器标记语言

    Razor 代码块包含在 @{....}中 内嵌表达式(变量和函数)已 @ 开头 代码语句用分号结束 变量使用 var 关键字声明 字符创用引号括起来 C#代码区分大小写 C#文件的扩展是 .csht ...

  6. 15-grep 简明笔

    在文件中搜索模式 grep [options] pattern [file-list] 参数 pattern为正则表达式,file-list为grep要搜索的普通文本文件的路径名列表 选项 -c    ...

  7. webpack 插件: html-webpack-plugin

    插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在 ...

  8. Beta版本冲刺———第六天

    会议照片: 项目燃尽图: 1.项目进展: 该项目的Beta版本冲刺到今天就大体结束,但是小组依然困在"如何保存每次游戏的分数,并将其排序列在排行榜中"的问题上,小组四个人都在一起解 ...

  9. 1014mysqldumpslow.pl简单分析慢日志 WINDOW平台

    转自http://www.th7.cn/db/mysql/201507/113998.shtml 要想运行mysqldumpslow.pl(这是perl程序),下载perl编译器.下载地址:http: ...

  10. IE6和IE7中<a>标签宽高设置无效的问题

    昨天写了一个引导界面, 发现界面中的IE67存在一个问题, 在某些情况下,  A锚链接如果设置了宽高,而且position:absolute的情况下, A标签的宽高无效, 至于总体的效果, 因为这个A ...