jQuery 选择器

请使用我们的 jQuery 选择器检测器 来演示不同的选择器。

选择器 实例 选取
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") class="intro" 的所有元素
.class,.class $(".intro,.demo") class 为 "intro" 或 "demo" 的所有元素
element $("p") 所有 <p> 元素
el1,el2,el3 $("h1,div,p") 所有 <h1>、<div> 和 <p> 元素
     
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
     
:first-child $("p:first-child") 属于其父元素的第一个子元素的所有 <p> 元素
:first-of-type $("p:first-of-type") 属于其父元素的第一个 <p> 元素的所有 <p> 元素
:last-child $("p:last-child") 属于其父元素的最后一个子元素的所有 <p> 元素
:last-of-type $("p:last-of-type") 属于其父元素的最后一个 <p> 元素的所有 <p> 元素
:nth-child(n) $("p:nth-child(2)") 属于其父元素的第二个子元素的所有 <p> 元素
:nth-last-child(n) $("p:nth-last-child(2)") 属于其父元素的第二个子元素的所有 <p> 元素,从最后一个子元素开始计数
:nth-of-type(n) $("p:nth-of-type(2)") 属于其父元素的第二个 <p> 元素的所有 <p> 元素
:nth-last-of-type(n) $("p:nth-last-of-type(2)") 属于其父元素的第二个 <p> 元素的所有 <p> 元素,从最后一个子元素开始计数
:only-child $("p:only-child") 属于其父元素的唯一子元素的所有 <p> 元素
:only-of-type $("p:only-of-type") 属于其父元素的特定类型的唯一子元素的所有 <p> 元素
     
parent > child $("div > p") <div> 元素的直接子元素的所有 <p> 元素
parent descendant $("div p") <div> 元素的后代的所有 <p> 元素
element + next $("div + p") 每个 <div> 元素相邻的下一个 <p> 元素
element ~ siblings $("div ~ p") <div> 元素同级的所有 <p> 元素
     
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(index 值从 0 开始)
:gt(no) $("ul li:gt(3)") 列举 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列举 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的输入元素
     
:header $(":header") 所有标题元素 <h1>, <h2> ...
:animated $(":animated") 所有动画元素
:focus $(":focus") 当前具有焦点的元素
:contains(text) $(":contains('Hello')") 所有包含文本 "Hello" 的元素
:has(selector) $("div:has(p)") 所有包含有 <p> 元素在其内的 <div> 元素
:empty $(":empty") 所有空元素
:parent $(":parent") 所有是另一个元素的父元素的元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
:root $(":root") 文档的根元素
:lang(language) $("p:lang(de)") 所有带有以 "de" 开头的 lang 属性值的 <p> 元素
     
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='default.htm']") 所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value] $("[href!='default.htm']") 所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value] $("[href$='.jpg']") 所有带有 href 属性且值以 ".jpg" 结尾的元素
[attribute|=value] $("[title|='Tomorrow']") 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
[attribute^=value] $("[title^='Tom']") 所有带有 title 属性且值以 "Tom" 开头的元素
[attribute~=value] $("[title~='hello']") 所有带有 title 属性且值包含单词 "hello" 的元素
[attribute*=value] $("[title*='hello']") 所有带有 title 属性且值包含字符串 "hello" 的元素
     
:input $(":input") 所有 input 元素
:text $(":text") 所有带有 type="text" 的 input 元素
:password $(":password") 所有带有 type="password" 的 input 元素
:radio $(":radio") 所有带有 type="radio" 的 input 元素
:checkbox $(":checkbox") 所有带有 type="checkbox" 的 input 元素
:submit $(":submit") 所有带有 type="submit" 的 input 元素
:reset $(":reset") 所有带有 type="reset" 的 input 元素
:button $(":button") 所有带有 type="button" 的 input 元素
:image $(":image") 所有带有 type="image" 的 input 元素
:file $(":file") 所有带有 type="file" 的 input 元素
:enabled $(":enabled") 所有启用的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有选定的 input 元素
:checked $(":checked") 所有选中的 input 元素

jQuery 选择器【1】的更多相关文章

  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. 初学acm感想

    初学acm,觉得大部分题对我来说都是陌生的,好多类型没见过,好多题没思路,打击确实不小,或许这个阶段正是比较能考验人的时候吧,因为只有坚持下来才有收获,没有人生下来就是大神,所以不能气馁更不能放弃,有 ...

  2. Unity优化之纹理集

    发现了一个比较好用的插件:ProDrawCallOptimizer. 它是用来合并纹理和材质的,而且用起来非常简便. 操作方法: 1.将包拖入Unity5中:ps:由于版本问题,直接双击包时导入不了 ...

  3. java NIO 资料总结

    1.http://developer.51cto.com/art/201204/328340.htm 2.http://ifeve.com/file-channel/并发编程网系列 3 http:// ...

  4. css权威指南(下)

    第七章 基本视觉格式化 正常流(没有浮动和定位元素).非替换元素(包含在文档中).替换元素(用作其它内容的占位符,如img).块级元素(会和其它元素形成换行,如div).行内元素(span之类的元素) ...

  5. win8下Oracle 12c 创建新用户并分配表空间

    这个应该算还是比较简单吧,找了个博客照着搞,有点不同的地方改改,自己再记录下. 步骤是这样: 1.先用SYSTEM登录SOL Plus, 2.创建一个临时表空间,再创建一个表空间,然后再创建一个用户 ...

  6. 控制反转(IoC)与依赖注入(DI)

    前言 最近在学习Spring框架,它的核心就是IoC容器.要掌握Spring框架,就必须要理解控制反转的思想以及依赖注入的实现方式.下面,我们将围绕下面几个问题来探讨控制反转与依赖注入的关系以及在Sp ...

  7. Yii rabc角色权限管理文章推荐

    yii的这个rbac太通用,太灵活,有时候理解起来有困难.也是初学这个,推荐一个不错的文章:http://www.yiiframework.com/wiki/136/getting-to-unders ...

  8. Linux达人养成计划1(第2章 Linux系统安装)

    2.3 系统分区之分区与格式化 1. 分区类型 主分区:最多只能有四个. 扩展分区: 最多只能有1个. 主分区加扩展分区最多有4个. 不能写入数据,只能包含逻辑分区. 逻辑分区: 2. 格式化(高级格 ...

  9. 基于url的权限管理

    基于url权限管理流程 完成权限管理的数据模型创建. 1.     系统登陆 系统 登陆相当 于用户身份认证,用户成功,要在session中记录用户的身份信息. 操作流程: 用户进行登陆页面 输入用户 ...

  10. String+,StringBuilder,String.format运行效率比较

    实现String字符串相加的方法有很多,常见的有直接相加,StringBuilder.append和String.format,这三者的运行效率是有差异的,String是final类型的,每次相加都会 ...