基本选择器

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. idea 生成代码中带参数final修饰

  2. 为Visual Studio更换皮肤和背景图

    最近在博客上别人在老早之前就有加了背景图,想想怎么能这么out,于是乎,百度一下,能否知道? 咳咳,资源还是有滴!可惜都是比较旧的跟新版本的配置方法可能有点不一样, 可能会有很多人会觉得不适应,不过没 ...

  3. Android之Activity跳转

    简述 如果把每个activity看成一个页面的话,那么activity之间的跳转和页面的之间的跳转基本上是一样的.首先需要监听一个事件,当这个事件发生的时候,就进行跳转.html中有个<a sr ...

  4. STL中的next_permutation

    给定一个数组a[N],求下一个数组. 2 1 3 4 2 1 4 3 2 3 1 4 2 3 4 1 ..... 在STL中就有这个函数: 1.参数是(数组的第一个元素,数组的末尾),注意这是前闭后开 ...

  5. Eclipse添加代码注释模板

    Eclipse支持我们自定义模板,比如文件的注释,类注释,函数注释等功能.eclipse自身有自带的模板,我们也可以自己定义.一次点击:windows->preference—>java- ...

  6. Tomcat5通过cardadm.xml启动项目

    配置tomcat5\conf\Catalina\localhost下的   cardadm.xml  ,然后在MyEclipse中,直接启动Tomcat5,不需要部署项目

  7. Value cannot be null or empty. 参数名: contentPath

    代码:<img src="@Url.Content(item.ThumbPath)" width="160" height="250" ...

  8. 毕向东JAVA基础25天教程目录

    视频目录:day01-01-基本常识day01-02-Java的跨平台性day01-03-Java环境搭建(安装)day01-04-Java环境搭建(环境变量配置)day01-05-Java环境搭建( ...

  9. java 枚举的常见使用方法

    JDK1.5引入了新的类型-枚举,枚举的出现在日常开发中带来了极大的方便. 常用方法一:常量 JDK1.5之前我们平时定义系统常量,基本都是用public static final ... 出现枚举以 ...

  10. iOS开发--QQ音乐练习,后台播放和锁屏界面

    一.设置后台播放 首先允许程序后台播放 代码实现 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOpti ...