jQuery选择器querySelector的使用指南
更新时间：2015年01月23日 11:29:49 投稿：hebedich
这篇文章主要介绍了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('div#container');//返回id为container的首个div
element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
querySelectorAll
该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。
elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div
需要注意的是返回的nodeList集合中的元素是非实时的.
相关文章
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
在Ajax横道的今天，我们在页面交互上有了更高的要求，动态生成HTML毫无疑问是其中的一种。动态生成HTML的方式多种多样，最终通过一定的方法输出给用户innerHTML、documentWrite等方式2013-04-04
后台action产生json数据，js获取json数据分页显示，详细的示例代码如下，需要的朋友可以学习下2014-07-07
详解JavaScript异步编程中jQuery的promise对象的作用
这篇文章主要介绍了JavaScript异步编程中jQuery的promise对象的作用,同时也谈到了js的Dojo框架中promise模式的实现,需要的朋友可以参考下2016-05-05
有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。其实你只是了解一点皮毛，并不知道其中的道理，下面通过本篇文章给大家介绍jquery定义插件的相关知识，感兴趣的朋友一起学习吧2015-12-12
本文为大家介绍下jquery1.9 下如何检测浏览器类型和版本，下面有个不错的示例，大家可以参考下2013-12-12
jquery checkbox选择器在程序开发中经常会用到，接下来通过实例代码给大家介绍jquery获取checkbox选中的值，需要的朋友参考下2016-01-01
这篇文章主要介绍了jQuery使用fadein方法实现渐出效果的方法,以一个简单实例形式分析了jQuery中fadein方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了Jquery焦点与失去焦点示例应用,需要的朋友可以参考下2014-06-06
jQuery实现的表头固定效果实例【附完整demo源码下载】
这篇文章主要介绍了jQuery实现的表头固定效果,结合完整实例形式分析了jQuery基于插件实现的表头固定功能与用法,非常简单实用,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了jquery使整个div区域可以点击的方法,涉及jQuery操作页面元素与鼠标事件的技巧,需要的朋友可以参考下2015-06-06
最新评论