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脚本编程解决考试分数统计问题
Oct 18 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
Element Input组件分析小结
Oct 11 Javascript
解决Vue动态加载本地图片问题
Oct 09 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
javascript document.referrer 用法
2009/04/30 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python字典的核心底层原理讲解
2019/01/24 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
留学自荐信写作方法
2014/01/27 职场文书
入股协议书
2014/04/14 职场文书
经典毕业生求职信
2014/07/12 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
全陪导游词
2015/02/04 职场文书