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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
PHP实现图片简单上传
2006/10/09 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
微信小程序排坑指南详解
2018/05/23 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
python比较两个列表大小的方法
2015/07/11 Python
利用Python如何生成随机密码
2016/04/20 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Python3简单实现串口通信的方法
2019/06/12 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
小学防溺水制度
2014/01/29 职场文书
小学校园活动策划
2014/01/30 职场文书
高级编程求职信模板
2014/02/16 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
2015年度企业工作总结
2015/05/21 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA