Jquery实战_读书笔记2 选择器


Posted in Javascript onJanuary 22, 2010

基本的CSS选择器
熟悉web开发的人员一定对css的选择功能相当的了解,通过css选择功能,我们可以在css样式文件里轻松的将样式应用到选择的页面元素上。jQuery也正是采用了这样的机制,使jQuery的元素选择能力易常强大。
a——选择所有<a>元素
#specialID——选择匹配id为specialID的元素
.specialClass——选择匹配拥有css类sepcialClass的元素
a#specialID.specialClass——选择匹配id为specialID、有用css类specialClass的<a>元素
p a.specialClass——匹配拥有css类specialClass、在<p>元素内的<a>元素
除了支持传统的css选择器,Jquery还支持CSS3选择功能。

 

子节点选择器
$("p > a") 选择元素<p> 的直接子节点的<a>元素,非直接子节点的<a>元素将不会被选择到

特性选择器
特性选择器在匹配的选择元素上过滤满足某特性(属性)的元素
如我们需要做如下的选择:匹配所有指向本网站之外地址的链接,我们可以这样选择
$("a[href^=http://")  该选择器选择具有href属性,且href属性值以http://开始的链接元素
特性选择的语法是:
选择具有某特性(属性)的元素
form[method]
选择具有某特性,且属性值为指定值的元素
input[type=text]
选择匹配特性以特定字符开头的元素
div[title^=my]  ——选择匹配title特性值已my开头的所有div元素
选择匹配特性以特定字符结束的元素
a[href$=.pdf] ——选择引用了pdf文件的所有链接元素
其他
a[href*=jquery.com]选择引用jQuery网站的所有链接元素

过滤符
通过过滤符选择器可以在已选择的元素中过滤出需要的元素,上面的特性选择器也属于过滤符,另外还有“:”字符
如:
li:has(a)—— 选择匹配包含<a>元素的所有<li>元素

1. 基础过滤符:
:first:匹配多个对象中的第一个对象
:last:匹配多个对象中的最后一个对象
:not(selector):匹配去除了not后面选择符中内容的项,not中的selector只能是过滤选择器,不能是查找选择器
:even:匹配所有对象中的第偶数个
:odd:匹配所有对象中的第奇数个
:eq(index):匹配某一下表的单独某元素
:gt(index):匹配大于某一下标的所有元素
:lt(index):匹配小于某一下标的所有元素
:header:匹配所有的header元素,例如h1,h2,h3,h4,h5,h6
:animated:匹配所有有动画效果的元素
2. 内容过滤符:
:contains(text):匹配内部拥有该文本元素的对象,包含间接有用的情况
:empty:匹配所有没有子元素的对象
:has(selector):匹配所有至少含有一个子选择符的对象
:parent:匹配元素,这些元素包含子元素(包括文本元素)
3. 可见性过滤符:
:hidden:匹配所有隐藏对象,或者input中的hidden类型
:visible:匹配所有可见的对象
4. 子过滤符:
:nth-child(index/even/odd/equation):匹配子元素中的某一下标/偶数/奇数/等式的对象,:eq(index)只能匹配某单一对象的子元素特征,而这个方法可以匹配多个对象的某一子元素共同特征  nth-child过滤器,从1开始计数,这主要是与css标准兼容。
:first-child:匹配第一个子元素
:last-child:匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作
:only-child:如果一个父元素只有一个子元素,就匹配这个子元素
5. 表单过滤符
:input  :匹配表单内input元素
:text  :匹配表单内input type为text的元素
:password  :匹配表单内input type为password的元素
:radio  :匹配表单内input type为radio的元素
:checkbox  :匹配表单内input type为checkbox的元素
:submit  :匹配表单内input type为submit的元素
:image  :匹配表单内image的元素
:reset  :匹配表单内input type为reset的元素 
:button  :匹配表单内input type为button的元素
:file  :匹配表单内input type为file的元素.
:hidden  :匹配表单内input type为hidden的元素或者hidden区域
:enabled  :匹配所有启用元素
:disabled  :匹配所有非启用元素
:checked  :匹配所有选中元素
:selected  :匹配所有下拉列表选中元素

查找选择器和筛选选择器的概念区别
为了能灵活的使用jQuery,认清查找选择器、筛选选择器之间的区别是非常重要的。筛选选择器,通过对元素应用更高的选择标准(如过滤特性或或其他相关值),缩小正在匹配的元素的集合;查找选择器,比如后代选择器(空格)、子节点选择器(>)以及兄弟节点选择器(+)等,则查找与已选择元素具有某种关系的其他元素,而不是通过把标准应用于已匹配元素来限制匹配范围。

Javascript 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 #Javascript
jquery last-child 列表最后一项的样式
Jan 22 #Javascript
javascript 拖放效果实现代码
Jan 22 #Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 #Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 #Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 #Javascript
JavaScript 学习笔记(十二) dom
Jan 21 #Javascript
You might like
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
js Function类型
2011/12/04 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
Element-UI+Vue模式使用总结
2020/01/02 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
在Python中使用成员运算符的示例
2015/05/13 Python
Python数组定义方法
2016/04/13 Python
详解Python装饰器由浅入深
2016/12/09 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python语言进阶知识点总结
2019/05/28 Python
python列表生成器迭代器实例解析
2019/12/19 Python
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
《争吵》教学反思
2014/02/15 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
我爱我校演讲稿
2014/05/21 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS