js基本知识比较系列一:获取元素
来源:互联网 发布:yum erase remove区别 编辑:程序博客网 时间:2024/05/22 03:53
一、获取元素
原生javascript:
(1) document.getElementById()
(2) document.getElementsByTagName()
(3) document.getElementsByClassName(): IE9以上
document.getElementsByClassName("example color"): 获取class="example color" 类名的所有元素
(4) document.querySelector() 、document.querySelectorAll() IE8以上
document.querySelector("#demo"): 匹配指定css选择器中的一个元素,匹配所有的元素用querySelectorAll()
jquery:
jquery有多种选择器
基本选择器:#id、 .class 、element、 *、selector1,selector2
层次选择器:$("ancestor descendant")、$("parent>child")、$("prev+next")、$("prev~siblings"):prev之后的所有siblings元素
过滤选择器:
(1) 基本过滤选择器::first 、:last、:not(selector)、:even、 :odd、 :eq(index)、 :gt(index)、 :lt(index)、 :header、 :animated、 :focus
(2) 内容过滤选择器::contains(text) :empty :has(selector) :parent选取含有子元素的元素
$("div:has(p)"):含有p元素的div元素 、 $("div:parent"):拥有子元素的div元素
(3) 可见性过滤选择器::hidden :visible
(4) 属性过滤选择器:[attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attribute|=value] [attribute~=value]
$("div[title*=test]"):选择属性title含有test的<div>元素
$("div[title|="en"]"):属性title为en,或以en 开头
$("div[title~='en']"): 属性title用空格分隔的值中,包括‘en’字符的元素
(5)子元素过滤选择器 :nth-child :first-child :last-child 每个父元素下的元素
:nth-child: index从1开始,:eq(index)的index从0开始 ;:nth-child(3n):选取每个父元素下的索引值是3的倍数的元素,n从1开始。
(6) 表单对象属性过滤选择器::enabled :disabled :checked :selected
$("select option:selected"):选取所有被选中的选项元素
表单选择器::input :text :password : radio :checkbox :submit :image :reset :button :file :hidden
css选择器
1. CSS1定义的选择器
2. CSS2定义的选择器
3. CSS3新增属性选择器
4. 结构伪类选择器
结构伪类利用DOM实现元素过滤,通过DOM的相互关系来匹配特定的元素,减少文档内对class属性和ID属性的定义,使得文档更加简洁。
注意,参数n可以是数字(1、2、3)、关键字(odd、even)、公式(2n、2n+3)参数的索引从1开始。
tr:nth-child(3)匹配所有表格中第3排的tr;
tr:nth-child(2n+1)匹配所有表格的奇数行;
tr:nth-child(2n)匹配所有表格的偶数行;
tr:nth-child(odd)匹配所有表格的奇数行;
tr:nth-child(even)匹配所有表格的偶数行;E:nth-last-child(n)选择所有在其父元素中倒数第n个位置的匹配E的子元素E:nth-of-type(n)选择父元素中第n个位置,且匹配E的子元素。
注意,所有匹配E的子元素被分离出来单独排序。非E的子元素不参与排序。参数n可以是数字,关键字、公式。
例:p:nth-of-type(1)E:nth-last-of-type(n)选择父元素中倒数第n个位置,且匹配E的子元素。E:last-child选择位于其父元素中最后一个位置,且匹配E的子元素。E:first-of-type选择位于其父元素中且匹配E的第一个同类型的子元素。
该选择器的功能类似于 E:nth-of-type(1)E:last-of-type选择位于其父元素中且匹配E的最后第一个同类型的子元素。
该选择器的功能类似于 E:nth-last-of-type(1)E:only-child选择其父元素只包含一个子元素,且该子元素匹配E。E:only-of-type选择其父元素只包含一个同类型的子元素,且该子元素匹配E。E:empty选择匹配E的元素,且该元素不包含子节点。
5. UI状态伪类选择器
例:input:checked匹配input type为radio及checkbox元素
6. CSS3其他选择器
选择匹配F的所有元素,且匹配元素位于匹配E的元素后面。
在DOM结构树中,E和F所匹配的元素应该在同一级结构上。E:not(s)否定伪类选择器类型。
选择匹配E的所有元素,且过滤掉匹配s选择符的任意元素。
s是一个简单结构的选择器,不能使用符合选择器,E:target目标伪类选择器类型。
选择匹配E的所有元素,且匹配元素被相关URL指向。
注意:该选择器是动态选择器,只有存在URL指向该匹配元素时,样式才起效果。
例:demo.html#id
css3浏览器兼容性:转载:https://labs.qianduan.net/css-selector/
CSS选择器的浏览器支持
下面是一系列关于最流行的浏览器对CSS选择器和伪选择器的支持情况的测试。该测试包括从过去美好的CSS1到当前时髦的CSS3最基本的东西。如果你想了解关于CSS的选择器的更多内容,W3C官方文档绝对是个好地方!
如果你发现了任何错误(这个,大家都会发生的)或者有任何看法,请在前端观察联系我们。
浏览器 →
浏览器 →
浏览器 →
浏览器 →
浏览器 →
浏览器 →
只支持-MOZ-YES
只支持-MOZ-YESYESYESYES
- :hover 在IE6中只有
a
元素可用。 - E:empty 貌似在webkit核心浏览器中有些小bug。
- 如果这个bug依然存在,不太确定如何测试。
- IE6不支持.class1{}.class2{}双类选择器。
IE8注意事项:
- E[attr]选择器在值为空的时候或者写错的时候,将不会生效;
- IE8支持CSS2.1的所有属性,支持伪类,但是不支持伪元素。
IE8中的IE7兼容模式
- E[attr] 和IE8一样,值为空或写错的时候,无效;
- E[attr~=val]这里唯一需要注意的是,属性的值,区分大小写;
- E[attr|=val]IE7有一些大小写敏感的问题,但是通常可以正常使用;
- :first-child IE7 会将一个注释或者文字节点当成first-child,而不是只有元素才是“子”元素。所以,如果在第一个子元素前有注释或文字,IE7会匹配之而不是去匹配第一个子元素。
Safari/Chrome
- Safari3.2(事实上可以追溯到3.1)以上的版本已经完全的支持所有CSS选择器了。
- Safari3.0基本上对CSS 2的选择器支持很好,但不支持CSS3大部分新增的选择器,而且对属性选择器的支持不是很完整。
- iPhone中的Safari有3.0和3.2两个版本,对CSS的支持情况与PC/Mac版的支持情况一致。
- Android系统自带的浏览器基本上也是基于webkit核心的,其对于CSS选择器的支持情况待测。
- js基本知识比较系列一:获取元素
- js基本知识比较系列二:DOM操作
- js基本知识比较系列三:事件
- js基本知识比较系列四:动画
- js获取元素高度比较
- js基本知识比较系列四:表单和表格
- Android基本知识系列一之android生命周期
- JMS系列之 (一)基本知识
- js获取元素坐标
- js获取元素宽度
- JS获取元素
- js 获取元素坐标
- js获取页面元素
- js获取元素
- Js获取元素位置
- js 获取元素位置
- js获取元素对象
- js获取元素
- JS底层实现canvas在线画板
- ArcGIS API for JavaScript 4.x中的3D部分(3)
- Java流程控制的陷阱——for循环和foreach循环的陷阱
- 浅谈React的createFactory()方法
- window平台下搭建kafka
- js基本知识比较系列一:获取元素
- 201612-3 权限查询
- HM代码阅读:帧内预测(一)
- SpringMVC集成shiro权限(附源码)
- 给csdn童鞋们的一封信 (csdn为什么不能粘贴图片写博客?)
- Mysql忘记root密码
- HDU 1083 Courses 匈牙利算法二分匹配(邻接矩阵存关系)
- 【编程题目】Pq.10--合并两个排序链表
- 类的加载、连接与初始化