jQuery 选择器理解


Posted in Javascript onMarch 16, 2010

$的选择器部分:
凡是运用$,其返回值是一个object
$选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的.
1.基本选择器(3种): ----凡是运用$,其返回值是一个object
$("标签名"),如$("p")是选取了所有的p标签节点
$("#id名"),如$("#test")是选取了id为test的标签节点
$(".class名"),如$(".test")是选取了所有class为test的标签节点
上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt等等.
2.组选择器: ----3种基本选择器的组合,“,”隔开
下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class.
$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")

3.后代选择器: ----3种基本选择器的组合,“ ”隔开,直系皆生效
$("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test的标签)

4.子选择器: ----3种基本选择器的组合,“>”隔开,只亲子有效
$("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子:
$("div>.test")
<div><p class="test"></p></div>对这里的p段落标签有效.但对
<div><p><p class="test"></p></p></div>对这里的p段落标签无效,这里要用
$("div .test)
5.临近选择器: ----3种基本选择器的组合,“+”隔开,只下一个兄弟节点
$("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点.
<div></div><p id="test"></p>在$("div + #test")中能取到p段落节点
<div></div><p></p><p id="test"></p>则不能取到
6.属性选择器: ----“ |=|^|$|*”
把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法:
$("mix[@attr]"):选取所有该mix且具有attr属性的节点
$("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点
$("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的
$("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的
$("mix[@attr*=a_value"]):attr属性的属性值中包含a_value

7. 限定选择器:
这个名称是我自己起的,其实选择器组合都有限定的意思,你明白后面所介绍的知识即可.
具有限定子节点选择器:$("mix1[mix2]"):返回包含mix2的mix1节点.如:$("div[a]"):包含a标签的div.
这个和$("div a")不相同.后者表示div中的a标签,返回的是a标签对象,前者返回的是div标签对象
冒号限定结点选择器:$("mix:condition"):mix标签,并且满足限定条件.
E:root:类型为E,并且是文档的根元素
E:nth-child(n):是其父元素的第n个类型为E的子元素 ,基数从1开始
E:first-child:是其父元素的第1个类型为E的子元素
E:last-child:是其父元素的最后一个类型为E的子元素
E:only-child:且是其父元素的唯一一个类型为E的子元素

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
vue v-model动态生成详解
Jun 30 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
jQuery 学习入门篇附实例代码
Mar 16 #Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 #Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 #Javascript
javascript 二维数组的实现与应用
Mar 16 #Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 #Javascript
jQuery MD5加密实现代码
Mar 15 #Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 #Javascript
You might like
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
js读取cookie方法总结
2014/10/31 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
2014年国培研修感言
2014/03/09 职场文书
护理专业求职信
2014/06/15 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书