JavaScipt 源码解析 css选择器
2016-12-27 15:02
239 查看
css1-css3提供了很多选择器,总得来说分为几大类:
群组选择器:逗号","
简单选择器:ID,标签,类,属性,通配符
关系选择器:孩子,后代,兄弟,相邻
伪类选择器:动作伪类,目标伪类,语言伪类,状态伪类,结构伪类,取反伪类。
群组选择器用于分组合并多个处理的结构
selector1,selector2,selectorN
简单选择器# . [ * 这些都有内置原生API的支持,不过存在兼容问题。
属性选择器在css2.1中只有4种。
[attr][attr=val][attr~=val][attr|=val]
css3中又增加了3种:
[attr^=val][attr$=val][attr*=val]
除此外jQuery还实现了自定义的属性选择器
[attrubute!='value'][attributeFilter1][attributeFilter2][attributeFilterN]
关系选择器
parent>child
prev+next
pre~siblings
伪类
基本筛选器:eq get first last it not odd root.....
内容筛选器: contains empty has parent.....
可见筛选器:hidden visible
子元素筛选器:first-child nth-child only-child.......
表单:bottom checkbox foucs input text.......
内置方法的兼容处理
关于属性attributes
简单来说,就是ie8之前的版本,需使用getAttribute('className')才能获得class属性的值,ff以及ie8之后的版本是w3c的标本getAttribute('class').
这是因为ie混淆了DOM对象属性及HTML标签属性attribute,造成了对setAttribute,getAttribute的不正确实现
关于getElementById
查找元素是最常见的DOM操作,我们可以使用document对象提提供的方法。
document.getElementById
取到有id的元素节点
var div = document.getElementById("myDiv");
这个是最常见的处理,但是如果id是小写
var div = document.getElementById(mydiv);//ie7之前是可以的。ie8之前是不区分大小写的
除此外,如果页面有多个id相同,也只会返回文档中第一次出现的元素,ie之前在针对表单的处理时候,表单的name和id重名,并且name在id之前,则会返回表单元素
关于getElementByTagName
如果选择器是通配符 * 的话ie6-8会混杂注释节点,所以针对如果是tag为 *的情况,我们需要做一个兼容的处理。
群组选择器:逗号","
简单选择器:ID,标签,类,属性,通配符
关系选择器:孩子,后代,兄弟,相邻
伪类选择器:动作伪类,目标伪类,语言伪类,状态伪类,结构伪类,取反伪类。
群组选择器用于分组合并多个处理的结构
selector1,selector2,selectorN
简单选择器# . [ * 这些都有内置原生API的支持,不过存在兼容问题。
属性选择器在css2.1中只有4种。
[attr][attr=val][attr~=val][attr|=val]
css3中又增加了3种:
[attr^=val][attr$=val][attr*=val]
除此外jQuery还实现了自定义的属性选择器
[attrubute!='value'][attributeFilter1][attributeFilter2][attributeFilterN]
关系选择器
parent>child
prev+next
pre~siblings
伪类
基本筛选器:eq get first last it not odd root.....
内容筛选器: contains empty has parent.....
可见筛选器:hidden visible
子元素筛选器:first-child nth-child only-child.......
表单:bottom checkbox foucs input text.......
内置方法的兼容处理
关于属性attributes
简单来说,就是ie8之前的版本,需使用getAttribute('className')才能获得class属性的值,ff以及ie8之后的版本是w3c的标本getAttribute('class').
这是因为ie混淆了DOM对象属性及HTML标签属性attribute,造成了对setAttribute,getAttribute的不正确实现
关于getElementById
查找元素是最常见的DOM操作,我们可以使用document对象提提供的方法。
document.getElementById
取到有id的元素节点
var div = document.getElementById("myDiv");
这个是最常见的处理,但是如果id是小写
var div = document.getElementById(mydiv);//ie7之前是可以的。ie8之前是不区分大小写的
除此外,如果页面有多个id相同,也只会返回文档中第一次出现的元素,ie之前在针对表单的处理时候,表单的name和id重名,并且name在id之前,则会返回表单元素
关于getElementByTagName
如果选择器是通配符 * 的话ie6-8会混杂注释节点,所以针对如果是tag为 *的情况,我们需要做一个兼容的处理。
相关文章推荐
- 清除浮动的方法
- Css3新属性
- CardView 造就不一样的样式
- CSS之居中
- Css3:box-sizing属性
- CSS3的4大伪元素选择器详解
- [CSS布局]3列布局:左右两列固定宽度、中间列自适应满宽
- css中图片等比例缩放
- 深入了解 CSS3 新特性
- input type='file'上传控件假样式
- 手机网页图片自适应大小 background-size css 图片全屏 背景尺寸设置
- 各种矩形形状css总结
- Div+CSS命名规范(前端web开发命名规范)
- css中overflow:hidden 不起作用了吗?【非常好的实例讲解】
- CSS网页制作常用标签
- iOS tableView与collectionView的样式切换以及间距问题处理
- 手机网页fixed定位抖动
- 【转】前端工程师必须了解的 谷歌 HTML/CSS 规范
- 巧用ngStyle改变样式
- 样式表中的 element.style样式如何修改