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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
如何用js控制css中的float的代码
Aug 16 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 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
晶体管单管来复再生式收音机
2021/03/02 无线电
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
微信小程序 首页制作简单实例
2017/04/07 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python continue语句实例用法
2020/02/06 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
离婚起诉书范文2015
2015/05/19 职场文书
运动会200米广播稿
2015/08/19 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫