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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
javascript 鼠标滚轮事件
Apr 09 Javascript
js动态创建标签示例代码
Jun 09 Javascript
jquery获取radio值实例
Oct 16 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
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 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
Javascript计算时间差的函数分享
2011/07/04 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
Python中的index()方法使用教程
2015/05/18 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python和opencv实现抠图
2018/07/18 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
毕业自我鉴定范文
2013/11/06 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript