JQuery选择器特辑 详细小结


Posted in Javascript onMay 14, 2012

这是看《锋利的jquery》时,整理出来的一些东西,很多方法,需要大家亲自实践一下,才会理解得更加深刻,切莫眼高手低哦……

Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器

一、基本选择器jquery中最常用的选择器,也是最简单的选择器。通过元素idclass和标签名等来查找DOM元素。

-基本选择器

选择器 描述 返回 示例
#id 根据给定的id匹配一个元素 单个元素 $(“#test”)选取id为test的元素
.class 根据给定的类名匹配元素 集合元素 $(“.test”)选取所有class为test的元素
element 根据给定的的元素名匹配元素 集合元素 $(“p”) 选取所有的

元素

* 匹配所有元素 集合元素 $(“*”)选取所有元素
Selector1,Selector2, ……, SelectorN 将每一个选择器匹配到的元素合并后一起返回 集合元素 $(“div,span,p.myClass”)选取所有
,和拥有class为myClass的

标签的一组元素

二、层次选择器:通过DOM元素之间的层次关系获取特定元素,如后代元素、子元素、相邻元素、兄弟元素等。层次选择器是一个很好的选择

-层次选择器

选择器 描述 返回 示例
$(“ancestor  descendant”) 选取ancestor元素里所有descendant(后代)元素 集合元素 $(“div span”)选取
里所有的元素
$(“parent>child”) 选取父元素下的子元素 集合元素 $(“div>span”)选取
下元素名为的子元素
$(‘prev+next') 选取紧接在prev元素后的next元素 集合元素 $(‘.one+div') 选取class为one的下一个
元素(相邻元素)
$(‘prev~siblings') 选取prev元素之后的所有元素 集合元素 $(‘.one+div') 选取class为one的元素后面所有
兄弟元素

 

注意:

$(‘prev+next')选择器与next()方法的等价关系

$(‘.one+div')    等价于     $(“.one”).next(“div”)

$(‘prev~siblings')选择器与nextAll()方法的等价关系

$(‘.one~div')     等价于    $(“.one”).nextAll(“div”)

 

三、过滤选择器:主要是通过特定的过滤选择器规则来筛选出所需的DOM元素,过滤规则与css中伪类选择器语法相同,即选择器都以一个冒号(:)开头。

按照不同的过滤规则,过滤选择器分为:基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性座率选择器

 

1-基本过滤选择器

 

选择器 描述 返回 示例
:first 选取第一个元素 单个元素 $(“div:first”)选取所有
元素中第一个
元素
:last 选取最后一个元素 单个元素 $(“div:last”)选取所有
元素中最后一个
元素
:not(selector) 去除所有与给定选择器匹配的元素 集合元素 $(“input:not(.myClass)”) 选取class为不是myClass的元素
:even 选取索引是偶数的所有元素,索引从0开始 集合元素 $(“input:even”) 选取索引是偶数的元素
:odd 选取索引是奇数的所有元素,索引从0开始 集合元素 $(“input:odd”) 选取索引是奇数的元素
:eq(index) 选取索引等于index的元素(index从0开始) 单个元素 $(“input:eq(1)”选取索引为1的元素
:gt(index) 选取索引大于index的元素(index从0开始) 集合元素 $(“input:gt(1)”) 选取索引大于1的元素(注:大于1,而不包括1)
:lt(index) 选取索引小于index的元素(index从0开始) 集合元素 $(“input:gt(1)”) 选取索引小于1的元素(注:小于1,而不包括1)
:header 选取所有的标题元素,例如h1,h2,h3等待 集合元素 $(“:header”)选取网页中所有的

……

:animated 选取当前正在执行动画的所有元素 集合元素 $(“div:animated”)选取正在执行动画的
元素

 

2-内容过滤选择器

 

选择器 描述 返回 示例
:contains(text) 选取含有文本内容为”text”的元素 集合元素 $(“div:contains(‘我')”)选取含有文本“我”的
元素
:empty 选取不包含子元素或者文本的空元素 集合元素 $(“div:empty”)选取不包含子元素(包括文本元素)的
空元素
:has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $(“div:has(p)”) 选取含有

元素的

元素
:parent 选取含有子元素或者文本元素 集合元素 $(“div:parent”) 选取拥有子元素(包括文本元素)的
元素

 

3-可见性过滤选择器

 

选择器 描述 返回 示例
:hidden 选取所有不可见的元素 集合元素 $(“:hidden”)选取所有不可见的元素。包括
等元素。如果只想选取元素,可以使用$(“input:hidden”)
:visible 选取不包含子元素或者文本的空元素 集合元素 $(“div:visible”)选取所有可见的
元素

 

4-属性过滤选择器

 

选择器 描述 返回 示例
[attribute] 选取拥有此属性的元素 集合元素 $(“div[id]”)选取拥有属性id的元素
[attribute=value] 选取属性的值为value的元素 集合元素 $(“div[title=test]”)选取属性title为”test”的
元素
[attribute!=value] 选取属性的值不等于value的元素 集合元素 $(“div[title!=test]”)选取属性title不等于”test”的
元素(注意:没有属性的title的
元素也会被选取)
[attribute^=value] 选取属性的值以value开始的元素 集合元素 $(“div[title^=test]”)选取属性title以”test”开始的
元素
[attribute$=value] 选取属性的值以value结束的元素 集合元素 $(“div[title$=test]”)选取属性title以”test”结束的
元素
[attribute*=value] 选取属性值含有value的元素 集合元素 $(“div[title*=test]”)选取属性title含有”test”的
元素
[selector1][selector2][selectorN] 用属性选择器合并成一个复合属性选择器,满足多个条件。每个选择一次,缩小一次范围 集合元素 $(“div[id][title$='tets']”)选取拥有属性id,并且属性title以”test”结束的
元素

5-子元素过滤选择器

 

选择器 描述 返回 示例
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起) 集合元素 :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起
:first-child 选取每个父元素的第一个子元素 集合元素 :first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素
:last-child 选取每个父元素的最后一个子元素 集合元素 :last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素
:only-child 如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配 集合元素  

:nth-child()选择器详细功能

1:nth-child(even)能选取每个父元素下的索引值是偶数的元素。

2:nth-child(odd) 能选取每个父元素下的索引值是奇数的元素。

3:nth-child(2)能选取每个父元素下的索引值等于2的元素

4:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素,(n0开始)。

5:nth-child(3n+1)能选取每个父元素的索引值是(3n+1)的元素。(n0开始)

6-表单对象属性过滤选择器

 

选择器 描述 返回 示例
:enabled 选取所有可用元素 集合元素 $(“#form1:enabled”) ;选取id为”form1”的表单内的所有可用元素
:disabled 选取所有不可用元素 集合元素 $(“#form1:disabled”) ;选取id为”form1”的表单内的所有不可用元素
:checked 选取所有被选中的元素(单选框,复选框) 集合元素 $(“input:checked”);选取所有被选中的元素
:selected 选取所有被选中的选项元素(下拉列表) 集合元素 $(“select:selected”);选取所有被选中的选项元素

四、表单选择器

-表单对象属性过滤示例

 

选择器 描述 返回 示例
:input 选取所有可用元素 集合元素 $(“:input”) 选取所有
:text 选取所有不可用元素 集合元素 $(“:text”) 选取所有的单行文本
:password 选取所有的密码框 集合元素 $(“: password”)选取所有的密码框
:radio 选取所有的单选框 集合元素 $(“:radio”)选取所有的单选框
:checkbox 选取所有的多选框 集合元素 $(“:checkbox”)选取所有的多选框
:submit 选取所有的提交按钮 集合元素 $(“:submit”)选取所有的提交按钮
:image 选取所有的图像按钮 集合元素 $(“:image”)选取所有的图像按钮
:reset 选取所有的重置按钮 集合元素 $(“:reset”)选取所有的重置按钮
:button 选取所有的按钮 集合元素 $(“:button”)选取所有按钮
:file 选取所有的上传域 集合元素 $(:file)选取所有的上传域
:hidden 选取所有不可见元素 集合元素 $(“:hidden”)选取所有不可见元素
紫陌言:吾生也有涯而知也无涯……
Javascript 相关文章推荐
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
原生JS中应该禁止出现的写法
May 05 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 #Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 #Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 #Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 #Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 #Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 #Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 #Javascript
You might like
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
python编写简单爬虫资料汇总
2016/03/22 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
开放系统互连参考模型
2016/06/29 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
开学典礼策划方案
2014/05/28 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
辅导员学期工作总结
2015/08/14 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA