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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
javascript中this的四种用法
May 11 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
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 DOS攻击实现代码(附如何防范)
2012/05/29 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
JavaScript的Cookies
2008/01/16 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
layui实现数据分页功能
2019/07/27 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python图像处理入门(一)
2019/04/04 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
计算机相关的自我评价
2014/01/15 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
2014年实验室工作总结
2014/12/03 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript