jQuery选择器querySelector的使用指南
简介
html5向web api新引入了document.queryselector以及document.queryselectorall两个方法用来更方便地从dom选取元素,功能类似于jquery的选择器。这使得在编写原生javascript代码时方便了许多。
用法
两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的css选择语法。
代码如下:
element = document.queryselector('selectors');
elementlist = document.queryselectorall('selectors');
其中参数selectors 可以包含多个css选择器,用逗号隔开。
代码如下:
element = document.queryselector('selector1,selector2,...');
elementlist = document.queryselectorall('selector1,selector2,...');
使用这两个方法无法查找带伪类状态的元素,比如queryselector(':hover')不会得到预期结果。
queryselector
代码如下:
element = document.queryselector('p#container');//返回id为container的首个p
element = document.queryselector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
queryselectorall
该方法返回所有满足条件的元素,结果是个nodelist集合。查找规则与前面所述一样。
elements = document.queryselectorall('p.foo');//返回所有带foo类样式的p
需要注意的是返回的nodelist集合中的元素是非实时的.
上一篇: oracle监听无法启动解决办法
推荐阅读
-
h5中类jQuery选择器querySelector的使用解析
-
jquery 中多条件选择器,相对选择器,层次选择器的区别
-
jquery选择器排除某个DOM元素的方法
-
h5中类jQuery选择器querySelector的使用解析
-
解决自定义$(id)的方法与jquery选择器$冲突的问题
-
jquery获取css中的选择器(实例讲解)
-
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
-
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
-
jquery如何给对象动态添加属性以及选择器、事件的绑定?(代码教程)
-
用Jquery选择器计算table中的某一列某一行的合计