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 相关文章推荐
JavaScript 学习笔记(十五)
Jan 28 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
javascript制作2048游戏
Mar 30 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
微信小程序实现转盘抽奖
Sep 21 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
建立文件交换功能的脚本(二)
2006/10/09 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
python实现简单成绩录入系统
2019/09/19 Python
Python解析多帧dicom数据详解
2020/01/13 Python
浅谈Python3中print函数的换行
2020/08/05 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
金融专业大学生自我评价
2014/01/09 职场文书
物业管理计划书
2014/01/10 职场文书
六年级数学教学反思
2014/02/03 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
ant design vue的form表单取值方法
2022/06/01 Vue.js