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 学习历程和心得分享
Dec 12 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
js实现3D旋转效果
Aug 18 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
利用js对象弹出一个层
2008/03/26 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
实例分析js事件循环机制
2017/12/13 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
深入理解Django中内置的用户认证
2017/10/06 Python
对Python中range()函数和list的比较
2018/04/19 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
基于PyTorch中view的用法说明
2021/03/03 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
酒吧员工的岗位职责
2013/11/26 职场文书
运动会表扬稿大全
2014/01/16 职场文书
上课迟到检讨书
2014/02/19 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
vue自定义右键菜单之全局实现
2022/04/09 Vue.js