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 相关文章推荐
jQuery 表单验证扩展(三)
Oct 20 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
vue 获取url里参数的两种方法小结
Nov 12 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
python实现贪吃蛇游戏
2020/03/21 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
详解python with 上下文管理器
2020/09/02 Python
Python之字典添加元素的几种方法
2020/09/30 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
大学生新闻专业个人自我评价
2013/11/12 职场文书
高一数学教学反思
2014/02/07 职场文书
尼克胡哲观后感
2015/06/08 职场文书
考试后的感想
2015/08/07 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python