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 定义初始化数组函数
Sep 07 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
理解AngularJs指令
Dec 10 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 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中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
js实现选项卡效果
2020/03/07 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python命名空间的本质和加载顺序
2018/12/17 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
浅析Python 多行匹配模式
2020/07/24 Python
详解KMP算法以及python如何实现
2020/09/18 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
Python创建自己的加密货币的示例
2021/03/01 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
Java程序员面试题
2016/09/27 面试题
大学生励志演讲稿
2014/04/25 职场文书
建筑管理专业求职信
2014/07/28 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2015新学期家长寄语
2015/02/26 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
使用Python开发冰球小游戏
2022/04/30 Python