原文:http://www.cr173.com/html/21124_1.html

选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。jQuery选择器完全继承了CSS的风格。

jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。

1.基本选择器

选择器 描 述 返 回 示 例
#id 匹配给定的id 单个元素 $(“header”)
.class 匹配给定的类名 集合元素 $(“.test”)
E 匹配给定的标签名 集合元素 $(“div”)
* 匹配所有元素 集合元素 $(“*’)
E, .class, E… 匹配给定的集合 集合元素 $(“span, .tips”)

2.层次选择器

选择器 描 述 返 回 示 例
$(“ancestor descendant”) 匹配ancestor里的所有
descendant(后代)元素
集合元素 $(“body div”)
$(“parent>child”) 匹配parent下的所有直接
child(子)元素
集合元素 $(“div>span”)
$(“prev+next”) 匹配紧接在prev后的
next元素
集合元素 $(“.error+span”)
$(“prev~siblings”) 匹配prev后的所有
siblings元素
集合元素 $(“span~a”)

3.过滤选择器

3.1 基本过滤选择器

选择器 描 述 返 回 示 例
:first 匹配第一个元素 单个元素 $(“div:first”)
:last 匹配最后一个元素 单个元素 $(“span:last”)
:even 匹配索引是偶数的元素
索引从0开始
集合元素 $(“li:even”)
: odd 匹配索引是奇数的元素
索引从0开始
集合元素 $(“li:odd”)
:eq(index) 匹配索引等于index的元
素(索引从0开始)
单个元素 $(“input:eq(2)”)
:gt(index) 匹配索引大于index的元
素(索引从0开始)
集合元素 $(“input:gt(1)”)
:lt(index) 匹配索引小于index的元
素(索引从0开始)
集合元素 $(“input:lt(5)”)
:header 匹配所有h1,h2…等
标题元素
集合元素 $(“:header”)
:animated 匹配所有正在执行
动画的元素
集合元素 $(“div:animated”)

3.2 内容过滤选择器

选择器 描 述 返 回 示 例
:contains(text) 匹配含有文本内容text
的元素
集合元素 $(“p:contains(今天)”)
:empty 匹配不含子元素或
文本元素的空元素
集合元素 $(“p:empty”)
:has(selector) 匹配包含selector元素
的元素
集合元素 $(“div:has(span)”)
:parent 匹配含有子元素或文本
的元素
集合元素 $(“div:parent”)

3.3 可见性过滤选择器

选择器 描 述 返 回 示 例
:hidden 匹配所有不可见
的元素
集合元素 $(“:hidden”)
:visible 匹配所有可见元素 集合元素 $(“:visible”)

3.4 属性过滤选择器

选择器 描 述 返 回 示 例
[attr] 匹配拥有此属性
的元素
集合元素 $(“img[alt]“)
[attr=value] 匹配属性值为value
的元素
集合元素 $(“a[title=test]“)
[attr!=value] 匹配属性值不等于
value的元素
集合元素 $(“a[title!=test]“)
[attr^=value] 匹配属性值以value
开头的元素
集合元素 $(“img[alt^=welcome]“)
[attr$=value] 匹配属性值以value
结尾的元素
集合元素 $(“img[alt$=last]“)
[attr*=vlaue] 匹配属性值中含有
value的元素
集合元素 $(“div[title*=test]“)
[attr1][attr2]… 通过多个属性
进行匹配
集合元素 $(“div[id][title*=test]“)

3.5 子元素过滤选择器

选择器 描 述 返 回 示 例
:nth-child 匹配每个父元素下的
第index个子元素
索引从1开始
集合元素 $(“div:nth-child(2)”)
:first-child 匹配每个父元素的
第一个子元素
集合元素 $(“div:first-child”)
:last-child 匹配每个父元素的
最后一个子元素
集合元素 $(“div:last-child”)
: only-child 某元素是它父元素中
的唯一的子元素
则匹配它
集合元素 $(“div:only-child”)

3.6 表单对象属性过滤选择器

选择器 描 述 返 回 示 例
:enabled 匹配所有可用元素 集合元素 $(“form :enabled”)
:disabled 匹配所有不可用
的元素
集合元素 $(“form :disabled”)
:checked 匹配所有被选中的元素
(含单选框,复选框)
集合元素 $(“input:checked”)
:selected 匹配所有被选中的
选项元素
集合元素 $(“select :selected”)

4.表单选择器

选择器 描 述 返 回 示 例
:input 匹配所有input, textarea,
select, button元素
集合元素 $(“input”)
:text 匹配所有文本框 集合元素 $(“:text”)
:password 匹配所有密码框 集合元素 $(“:password”)
:radio 匹配所有单选框 集合元素 $(“:radio”)
:checkbox 匹配所有所有多选框 集合元素 $(“:checkbox”)
:submit 匹配所有提交按钮 集合元素 $(“:submit”)
:image 匹配所有图像按钮 集合元素 $(“:image”)
:reset 匹配所有重置按钮 集合元素 $(“:reset”)
:button 匹配所有按钮 集合元素 $(“:button”)
:file 匹配所有上传域 集合元素 $(“:file”)

jQuery选择器--简洁又全面(转)的更多相关文章

  1. JQuery 选择器

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

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

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

  3. 在.NET中使用JQuery 选择器精确提取网页内容

    1. 前言 相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...

  4. 我人生中的jQuery选择器

    Jquery选择器 一.Jquery选择器简介 JavaScript只是一种运行于客户端,可以被客户端浏览器解析的一段代码.它和java没有任何关系.JavaScript简称JS.jQuery是对JS ...

  5. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  6. jQuery选择器(一)

    晚上闲着没事,正好用来整理下jQuery的选择器,毕竟没有总结就不算学习嘛. 首先,对事件处理.遍历DOM和Ajax操作,都依赖于选择器. 1.CSS选择器 要使用某个HTML元素,就先要找到它,而c ...

  7. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  8. 浅谈jquery选择器

    首先来说说jquery选择器的优势: 1.简洁的写法  2.支持css1.0到3.0选择器 3.完善的处理机制. 再来说说分类: jquery选择器分为基本选择器.层次选择器.属性选择器.基本过滤选择 ...

  9. 【前端学习】【jQuery选择器】

    jQuery选择器     jQuery选择器 本文内容引自于单东林<锋利的jQuery>,未经原作者准许,禁止以商业目的转载发布! 选择器是jQuery的根基,在jQuery中,对事件处 ...

随机推荐

  1. 虚拟机中liunx安装教程

    目标:在Linux服务器上部署Java开发的网站  工具 VirtualBox-4.3.8:下载后安装. linux系统镜像: Centos国内镜像文件下载地址: http://centos.ustc ...

  2. 前端必须掌握的30个CSS选择器

    也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手. ...

  3. [整理]win7下VS2010遇到内存不足解决方发

    电脑重装Win7 64bit不久后,一天内VS2010使用久了,就会出现内存不足,实际内存使用情况却不是,显示内存已使用70%.以前没有遇到过,经网上查找,貌似是VS2010对内存计算会在某些情况下计 ...

  4. CSS图片下面产生间隙的6种解决方案

    CSS图片下面产生间隙的6种解决方案 在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是 ...

  5. Django中合并同一个model的多个QuerySet

    [1]相同modelarticles1 = Article.objects.order_by("autoid").filter(autoid__lt = 16).values('a ...

  6. Linux下可以使用ps命令来查看Oracle相关的进程

    Linux下可以使用ps命令来查看Oracle相关的进程 Oracle Listener 这个命令会列出Oracle Net Listener的进程 [oracle@ www.linuxidc.com ...

  7. 【ARTS】01_04_左耳听风-20181203~1209

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  8. shell-拷贝指定目录外其他全部目录

    shopt -s extglob if [ ! -d "desdir" ]; then mkdir desdir fi cp -r Oozie/!(.svn*) desdir/

  9. appium-Could not obtain screenshot: [object Object]

    原因 App页面已经被禁止截屏,禁用用户截屏的代码如下: getWindow().addFlags(WindowManager.LayoutParams.FLAG_SECURE); setConten ...

  10. 006使用Grafana展示时间序列数据

    简介 Grafana是一个独立运行的系统,内置了Web服务器.它可以基于仪表盘的方式来展示.分析时间序列数据. Grafana支持多种数据源,例如:Graphite.OpenTSDB.InfluxDB ...