jQuery选择器querySelector的使用指南


Posted in Javascript onJanuary 23, 2015

简介

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集合中的元素是非实时的.

Javascript 相关文章推荐
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
jQuery中DOM操作实例分析
Jan 23 #Javascript
jquery实现点击页面计算点击次数
Jan 23 #Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 #Javascript
PHP实现的各种中文编码转换类分享
Jan 23 #Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 #Javascript
PHPExcel中的一些常用方法汇总
Jan 23 #Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 #Javascript
You might like
PHP+DBM的同学录程序(2)
2006/10/09 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
详解Python命令行解析工具Argparse
2016/04/20 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
python实现门限回归方式
2020/02/29 Python
Python 去除字符串中指定字符串
2020/03/05 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
python 判断文件或文件夹是否存在
2022/03/18 Python