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 22 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
浅谈javascript的调试
Jan 28 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
js实现点击烟花特效
Oct 14 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
微信小程序中的swiper组件详解
2017/04/14 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python二分法实现实例
2013/11/21 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
基层党支部整改方案
2014/10/25 职场文书
2014年居委会工作总结
2014/12/09 职场文书
求职意向书范本
2015/05/11 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers