对比选择:
1. CSS依靠CSS选择器使得网页的结构和表现样式完全分离,CSS选择器能轻松定位并修改指定元素样式,CSS选择器包括标签选择器(以文档元素作为选择器),ID选择器(以文档元素的唯一标识ID作为选择器),类选择器(以文档元素的class作为选择器),群组选择器(多个选择器应用同样的样式规则),后代选择器(元素X的任意后代元素Y),通配选择器(以文档的所有元素作为选择器),伪类选择器(以元素特定行为作为选择器),子选择器(元素X的直接子属元素Y),兄弟选择器(元素X的直属兄弟元素Y),属性选择器(以文档元素特定属性为选择器),详情参考(http://www.w3school.com.cn/css/css_selector_type.asp)
2. jQuery选择器完全继承了CSS选择器的风格,CSS选择器能轻松定位并修改指定元素属性和行为,而无需担心浏览器是否支持这一选择器,jQuery的行为规则都必须在获取到元素后才能生效
说明: jQuery不仅可以像原生CSS样修改元素样式,而且还可以修改元素行为,需要注意的是jQuery中涉及操作CSS样式的部分比单纯的CSS功能更为强大,并且拥有跨浏览器的兼容性.
错误处理:
说明: 原生JS如果返回的对象不存在则浏览器会报错,如果加if判断会增加代码量,而jQuery中$('selector')返回的永远是封装后的jQuery对象,因此不能直接if判断,也不需要if判断,如果非要去判断的话可通过判断$('selector').length属性是否大于0或$('selector')[0]转换为DOM对象(其实是调用的$('selector').toArray()转换为DOM对象数组然后再取指定DOM对象的)判断对象是否存在
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
JQ选择器:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
|
# 基本选择器
说明: 基本选择器包括元素选择器/ID选择器/类选择器/通用选择器/分组选择器.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
# 层次选择器
说明: 层次选择器包括子选择器/后代选择器/兄弟选择器/后续选择器.
1 2 3 4 5 6 7 8 9 10 |
|
扩展: 在层次选择器中子选择器和后代选择器比较常用,而兄弟选择器和后续选择器在jQuery中可以用更简单的方法代替,兄弟选择器可通过.next("selector")代替,而后续选择器可通过.nextAll("selector")代替,需要注意的是.next("selector")和.nextAll("selector")都是基于同级的,还有一个基于同级但是不论前后的兄弟元素获取方法是.siblings("selector")
# 过滤选择器
说明: 过滤选择器包括基本过滤选择器/内容过滤选择器/可见性过滤选择器/属性过滤选择器/子元素过滤选择器/表单属性过滤选择器.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
|
说明: 在可见性过滤选择器中,:hidden不仅包括样式属性display:none的元素,也包括文本隐藏域<input type="hidden">和visible:hidden之类的元素,在子元素过滤选择器中,:nth-child将为每一个符合条件的父元素匹配子元素,但需要注意的是索引是从1开始,而:eq的索引从0开始,同理:first和:first-child,:last和:last-child类似
# 表单选择器
说明: 表单选择器包括表单对象属性过滤选择器和扩展表单过滤选择器.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
最佳实践:
1. 给网页中的所有的<p>元素添加点击事件,点击后弹出元素内的文本内容?
1 2 3 4 5 |
|
2. 使一个特定的表格隔行换色?
1 2 3 |
|
3. 对多选框进行操作,输出选中的个数?
1 2 3 4 5 6 7 |
|
4. 如上要求用户进入页面时,品牌列表默认精简显示(从第5条开始隐藏后面的品牌,除了最后一条),用户单机"显示所有品牌"显示全部品牌同时高亮显示推荐的品牌,且按钮里的文字也换成"精简显示品牌",再次单击"精简显示品牌"恢复初始状态?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
方法 | 说明 |
.show(speed,callback) | 显示隐藏的匹配元素,支持设置显示速度以及回调函数 |
.css(name) | 获取所有匹配元素的样式 |
.css(name, value) | 设置所有匹配元素的单个样式 |
.css(name,function(index,value)) | 设置所有匹配元素的单个样式,index为选择器index的位置,value为当前样式值 |
.css({k: v, k: v}) | 设置所有匹配元素的多个样式 |
.filter(selector) | 以单个过滤器过滤对应的集合 |
.filter(expr) | 以多个过滤器过滤对应的集合,过滤器之间使用,隔开 |
.filter(func) | 以函数过滤对应的集合,函数接收选择器index的值 |
.addClass(class) | 为指定元素添加class |
.removeClass(class) | 为指定元素删除class |
.toggle(func1,func2, func3....) | 用于绑定两个或多个事件处理函数,以响应被选元素的轮流的.click事件 |
登录乐搏学院官网http://www.learnbo.com/
或关注我们的官方微博微信,还有更多惊喜哦~
本文出自 “满满李 - 运维开发之路” 博客,请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1874275