Jquery关于CSS选择器
2016-01-28 11:03
387 查看
关于CSS选择器
jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离。
同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器。
常用的CSS选择器如下:
以上选择器为主流浏览器支持的,此外CSS还有伪类选择器、子选择器、临近选择器和属性选择器。(理论上来说,现在都应该是支持了的,这本书大概2012年的)
关于jQuery选择器
jQuery选择器与CSS选择器的写法极为相似,只不过jQuery选择器还能操作行为而已。而jQuery中操作CSS样式的部分比单纯的CSS更为强大,并且拥有跨浏览器的兼容性。
jQuery选择器来操作对比一般的DOM操作的优势,不仅仅体现在简洁明了方面,也在于获取网页中不存在的元素也不会报错。
因为jQuery选择器选择出来的永远是jQuery对象,所以在判断是否取到值的时候,不能直接if判断,而是判断$(“#divId”).length>0。
基本选择器
层次选择器
扩展一下$(div).siblings(“span”)选取的是div元素同级的所有的span元素,不分前后,而上面的同级元素选择器只能选择div后面的元素
过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象属性过滤选择器
表单选择器
选择器注意事项
jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离。
同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器。
常用的CSS选择器如下:
标签选择器 以文档元素作为选择符 a{ text-decoration:none; } ID选择器 以文档元素的唯一标识符ID作为选择符 #myNameDiv{ font-size:14px; width:120px; } 类选择器 以文档元素的class作为选择符 div.note{ font-size:14px; } .noDivNote{ font-size:10px; } 群组选择器 多个选择符应用同样的样式规则 td,p,div,a{ font-size:14px; } 后代选择器 元素的任意后代元素 #parentElement a{ color:red; } 通配选择器 以文档的所有元素作为选择符 *{ font-size:14px; }
以上选择器为主流浏览器支持的,此外CSS还有伪类选择器、子选择器、临近选择器和属性选择器。(理论上来说,现在都应该是支持了的,这本书大概2012年的)
关于jQuery选择器
jQuery选择器与CSS选择器的写法极为相似,只不过jQuery选择器还能操作行为而已。而jQuery中操作CSS样式的部分比单纯的CSS更为强大,并且拥有跨浏览器的兼容性。
jQuery选择器来操作对比一般的DOM操作的优势,不仅仅体现在简洁明了方面,也在于获取网页中不存在的元素也不会报错。
因为jQuery选择器选择出来的永远是jQuery对象,所以在判断是否取到值的时候,不能直接if判断,而是判断$(“#divId”).length>0。
基本选择器
标签选择器 $("div") ID选择器 $("#myId") 类选择器 $(".myClass") 群组选择器 $("div,span,p.myClass,#myId") 通配选择器 $("*")
层次选择器
后代选择器 $(div span) 选取div里所有的span 下级选择器 $(div>span) 选取div里为span的下一级元素 相邻元素选择器 $(div+span) 选取紧挨着div元素后面的下一个span元素,等价于$(div).next("span") 同级元素选择器 $(div~span ) 选取div元素后面的所有span元素,等价于$(div).nextALL("span")
扩展一下$(div).siblings(“span”)选取的是div元素同级的所有的span元素,不分前后,而上面的同级元素选择器只能选择div后面的元素
过滤选择器
:first 选取第一个元素,如$(div:first)就是选取所有div元素中的第一个div元素 :last 选取最后一个元素 :even 选取索引是偶数的所有元素,元素从0开始 :odd 选取索引是奇数的所有元素,元素从0开始 :eq(index) 选取索引等于index的元素 :gt(index) 选取索引大于index的元素 :lt(index) 选取索引小于index的元素 :header 选取所有的标题元素,如h1,h2,h3 :animated 选取当前正在执行动画的所有元素 :focus 选取当前获取焦点的元素
内容过滤选择器
:contains(text) 选取含有文本内容为text的元素,如$(div:contains('Troy')) :empty 选取不包含子元素或者文本的空元素 :has(selector) 选取含有选择器所匹配的元素的元素 :not(selector) 去除所有与给定选择器匹配的元素 :parent 选取含有子元素或者文本的元素
可见性过滤选择器
:hidden 选取所有隐藏的元素 :visible 选取所有可见的元素
属性过滤选择器
[attribute] 选择拥有此属性的元素 [attribute=value] 选择属性的值为value的元素 [attribute!=value] 选择属性的值不为value的元素 [attribute1][attributeN] 选取同时满足多种属性的元素 ------------------------------------我是一个分割线,我就觉得我应该出现在这里了,虽然我不知道为什么---------------------- [attribute^=value] 选择属性的值以value开始的元素 [attribute$=value] 选择属性的值以value结束的元素 [attribute*=value] 选择属性的值含有value的元素 [attribute|=value] 选取属性等于给定字符串或者以该字符串为前缀的元素(就是该字符串后面跟着一个"-"的元素) [attribute~=value] 选取属性用空格分隔的值中包含一个给定的值的元素 复制代码 <div title="en"></div> //能选取到:$('div[title*="en"]'),$('div[title^="en"]'),$('div[title|="en"]') <div title="en-UK"></div> //能选取到:$('div[title*="en"]'),$('div[title^="en"]'),$('div[title|="en"]') <div title="english"></div> //能选取到:$('div[title*="en"]'),$('div[title^="en"]') <div title="en uk"></div> //能选取到:$('div[title*="en"]'),$('div[title^="en"]'),$('div[title~="en"]') <div title="uken"></div> //能选取到:$('div[title*="en"]'),$('div[title$="en"]') 复制代码
子元素过滤选择器
:nth-child(index/even/odd/equation) 选取每个父元素下的的第index个子集元素或者奇偶元素,且index从1算起,而:eq(index)只能匹配一个元素 :first-child 选取每个父元素的第1个子元素 :last-child 选取每个父元素的最后一个子元素 :only-child 如果此元素是其父元素的唯一一个子元素则匹配
表单对象属性过滤选择器
:enabled 选取所有可用的元素 :disabled 选取所有不可用的元素 :checked 选取所有被选中的元素(单选框,复选框) :selected 选取所有被选中的元素(下拉列表)
表单选择器
:input 选取所有input,textarea,select,button的元素,不仅仅是input :text 选取所有单行的文本框 :password 选取所有的密码框 :radio 选取所有的单选框 :checkbox 选取所有的多选框 :submit 选取所有的提交按钮 :image 选取所有的图像 :reset 选取所有的重置按钮 :button 选取所有的按钮 :file 选取所有的上传域 :hidden 选取所有不可见元素
选择器注意事项
对于 . # ( ) [ ]等特殊字符可以通过在前面加\\形成转义字符,如$("#id\\[sad\\]")
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Web布局连载——两栏固定布局(五)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- [div+css]晒晒最新制作专题推广页模板
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- Mootools 1.2教程(2) DOM选择器
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法