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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
分页栏的web标准实现
Nov 01 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
js验证上传图片的方法
May 12 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
python实现下载文件的三种方法
2017/02/09 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
10张动图学会python循环与递归问题
2021/02/06 Python
大学生职业生涯规划书范文
2014/01/04 职场文书
建筑安全生产责任书
2014/07/22 职场文书
学生会辞职信
2015/03/02 职场文书
天气温馨提示语
2015/07/14 职场文书
2016年情人节广告语
2016/01/28 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript