jQuery选择器querySelector的使用指南

简介

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

赞 (0)

相关推荐

  • jQuery中:selected选择器用法实例

    本文实例讲述了jQuery中:selected选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配被选择的<option>元素. 语法结构: 复制代码 代码如下: $(":selected") 此选择器可以和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $(".myselect :selected").css("color","red") 以上代码能够将类名为myse

  • JQuery选择器绑定事件及修改内容的方法

    本文实例讲述了JQuery选择器绑定事件及修改内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World jQuery!</title> <script type="text/javascript" src="jquery-1.3.2.min.js&

  • jQuery选择器总结之常用元素查找方法

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $

  • jquery通过closest选择器修改上级元素的方法

    本文实例讲述了jquery通过closest选择器修改上级元素的方法.分享给大家供大家参考.具体如下: 这段代码演示了jQuery通过closest选择器获取上一级的元素,然后修改其text()内容. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>

  • jQuery插件实现适用于移动端的地址选择器

    jQuery插件实现适用于移动端的地址选择器

    最近在工作中需要用到地址选择器,像下面这样的,本想在网上找一个,可是没找到,于是自己写了个jquery插件. 直接上代码吧: var provinces = { "A": { "安徽":["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市&qu

  • jQuery大于号(>)选择器的作用解释

    jQuery选择器中的大于号>作用是什么: jQuery灵活多样的选择器是jQuery的优点之一. 下面就介绍一下其中的一个选择器,用大于号表示. 代码示例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>蚂蚁部落</title> <style type="text/css">

  • jQuery中:first-child选择器用法实例

    本文实例讲述了jQuery中:first-child选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配父元素的第一个子元素. 语法结构: 复制代码 代码如下: $(":first-child") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $("ul li:first-child").css("color","blue") 以上代码能够将父元素下的第一个li

  • jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

    jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

    我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用. 在线演示       源码下载 日期选择器datedropper 使用非常简单,分三步, 1.引入相关js和css文件.注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件. <scr

  • NodeJS使用jQuery选择器操作DOM

    注* 这是一个两年多的"老"项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:   Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速,灵活,在服务器端使用的jQuery. 简介 测试你的服务器端HTML: 复制代码 代码如下: var cheerio = require('cheerio'), $

  • jQuery中:nth-child选择器用法实例

    本文实例讲述了jQuery中:nth-child选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配其父元素下的第N个子或奇偶元素. :eq(index)选择器只匹配一个元素,而:nth-child选择器将为每一个父元素匹配子元素. :nth-child从1开始的,而:eq()是从0开始. 语法结构: 复制代码 代码如下: $(":nth-child") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $("li:n

  • 浅析jQuery事件之on()方法绑定多个选择器,多个事件

    $(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function()

随机推荐