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简化JavaScript开发分析
Feb 19 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
vue实现分页组件
Jun 16 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 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中如何定义和使用常量
2013/02/28 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php计算整个目录大小的方法
2015/06/01 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
javascript基本语法分析说明
2008/06/15 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
最新奶茶店创业计划书
2014/01/25 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
文艺晚会策划方案
2014/06/11 职场文书
教师职位说明书
2014/07/29 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
导游词之湖北武当山
2019/09/23 职场文书