基本选择器

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. 安装.NET Framework后程序无法启动的错误处理

    最近发现一直在使用的Database.NET软件无法正常使用了,表现为当尝试进行Sql Server的连接创建时,直接报错 在事件查看器具体错误信息为: 日志名称:          Applicat ...

  2. (404) 未找到 获取StatusCode状态码

    异常代码: (HttpWebResponse)req.GetResponse(); 当执行这段代码出现异常 解决问题 那如果我们想获得错误发生时候服务器段错误页面的源代码该如何做呢? 其实非常非常简单 ...

  3. 生成短链(网址) ShortUrlLink

    建表 CREATE TABLE [dbo].[ShortUrl]( [Id] [,) NOT NULL, [LongUrl] [nvarchar]() NOT NULL, [BaseUri] [int ...

  4. [BZOJ2768][JLOI2010]冠军调查(最小割)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2768 分析: 如果一个点i认为是0,则连一条S->i,如果认为是1,则i-> ...

  5. java中的枚举类型

    枚举类型是那些字段由一组固定常量组成的类型.常见的例子有:东南西北四个方向,星期几等. 所有枚举类型都隐式继承java.lang.Enum类型,因为java不支持多重继承,所以枚举不能继承其他任何类. ...

  6. 东大OJ-Max Area

    1034: Max Area 时间限制: 1 Sec  内存限制: 128 MB 提交: 40  解决: 6 [提交][状态][讨论版] 题目描述 又是这道题,请不要惊讶,也许你已经见过了,那就请你再 ...

  7. Ubuntu安装出现左上角光标一直闪解决方式

    Ubuntu安装出现左上角光标一直闪解决方式: 01下载ubunu http://cn.ubuntu.com/download/ 02.软碟通 http://pan.baidu.com/s/1qY8O ...

  8. Qt做动画旋转旋转图片

    今天看到百度首页的音乐播放有个图片可以旋转,感觉很酷就用qt做了一个类似的,关键时刻还是要发挥数学功底,静下心来,写一写,画一画,编程对数学分析能力要求还是不小的,以后要经常锻炼数学分析能力啊! Wi ...

  9. [转]fastjson

    原文地址:http://www.cnblogs.com/zhenmingliu/archive/2011/12/29/2305775.html FastJSON是一个很好的java开源json工具类库 ...

  10. EditText 几种显示方式,固定行数,自适应行数

    1.显示7行,超过7行自动向下补充行数 <EditText android:id="@+id/edt_content" android:layout_width=" ...