基本选择器

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. 3到6年的.NETer应该掌握哪些知识?

    我们组的开发人力一直比较紧张,今年春节后,高层终于给了几个headcount,我们可以开始招人了.从三月初我们就开始找简历,渠道有拉钩,内推,我司自己的招聘网站和智联等.简历筛了很多,也打了很多电话, ...

  2. word-wrap,word-break和white-space总结

    最近网页布局中遇到得比较多,所以打算总结总结. word-wrap: 1.normal(使用浏览器默认的换行规则) 2.break-word(内容将在边界内换行,但是英文换行会按词断句) word-b ...

  3. 初用protobuf-csharp-port

    下面这个用法是参照protobuf-csharp-port的官方wiki,参见: https://code.google.com/p/protobuf-csharp-port/wiki/Getting ...

  4. html+js实现图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. [转]领域驱动设计系列文章(2)——浅析VO、DTO、DO、PO的概念、区别和用处

    原文地址:http://www.blogjava.net/johnnylzb/archive/2010/05/27/321968.html 上一篇文章作为一个引子,说明了领域驱动设计的优势,从本篇文章 ...

  6. git 常用命令使用

    1. 初始化仓库 git init 2. 查看当前状态 git status(1)Changes not staged for commit:(2)Changes to be committed: 3 ...

  7. 【BZOJ 1014】【JSOI 2008】火星人prefix

    看了<Hash在信息学竞赛中的一类应用>中的例题3,这道题很类似啊,只不过没有删点和区间翻转. 用Splay维护字符串哈希,加点改点什么的就不用说了,查询时二分答案,这样时间复杂度是$O( ...

  8. hdu3572 最大流

    Task Schedule Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submi ...

  9. python日常-list and dict

    什么是list: list 觉得算是python日常编程中用的最多的python自带的数据结构了.但是python重的list跟其他语言中的并不相同. 少年..不知道你听说过python中的appen ...

  10. 使用AOP 实现多数据源 切换

    多数据源的实现,这里就来个实例吧 1.在 spring 的配置文件中数据源信息 <?xml version="1.0" encoding="UTF-8"? ...