jQuery选择器querySelector的使用指南

 更新时间:2015年01月23日 11:29:49   投稿:hebedich  
这篇文章主要介绍了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集合中的元素是非实时的.

相关文章

  • jQuery中live方法的重复绑定说明

    jQuery中live方法的重复绑定说明

    使用jQuery的live()方法绑定事件,有时会出现重复绑定的情况,如,当点击一个按钮时,此按钮所绑定的事件会并执行n遍
    2011-10-10
  • jQuery 改变P标签文本值方法

    jQuery 改变P标签文本值方法

    下面小编就为大家分享一篇jQuery 改变P标签文本值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • jQuery实现点击图标div循环放大缩小功能

    jQuery实现点击图标div循环放大缩小功能

    这篇文章主要介绍了jQuery实现点击图标div循环放大缩小功能,这是一个很常见很基础的功能,下面小编通过实例代码给大家介绍,需要的朋友可以参考下
    2018-09-09
  • jquery可定制的在线UEditor编辑器

    jquery可定制的在线UEditor编辑器

    这篇文章主要介绍了jquery可定制的在线UEditor编辑器,UEditor的功能非常强大,ueditor更具有功能插件接口,很轻松地添加自己定义功能到编辑器中,方便项目的不同需求,需要的朋友可以参考下
    2015-11-11
  • jQuery实现合并/追加数组并去除重复项的方法

    jQuery实现合并/追加数组并去除重复项的方法

    这篇文章主要介绍了jQuery实现合并/追加数组并去除重复项的方法,可实现合并两个数组并出去重复项的功能,涉及数组的遍历、判断、追加等相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例

    jquery实现弹出div,始终显示在屏幕正中间的简单实例

    本篇文章主要是对jquery实现弹出div,始终显示在屏幕正中间的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JQuery中$.each 和$(selector).each()的区别详解

    JQuery中$.each 和$(selector).each()的区别详解

    这篇文章主要介绍了JQuery中$.each 和$(selector).each()的区别详解,本文给出了多个例子讲解了它们之间的不同之处,需要的朋友可以参考下
    2015-03-03
  • Jquery进度条插件 Progress Bar小问题解决

    Jquery进度条插件 Progress Bar小问题解决

    今天遇到一个进度条的小问题,搞的我小纠结了一会,最后感谢同事分享文章,得以结局,呵呵,小经验还是要保存的
    2011-07-07
  • jQuery插件MixItUp实现动画过滤和排序

    jQuery插件MixItUp实现动画过滤和排序

    MixItUp过滤排序jQuery插件是一款鼠标滑过图片显示描述的jQuery过滤排序插件。是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能。特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容。
    2015-04-04
  • jQuery EasyUI学习教程之datagrid点击列表头排序

    jQuery EasyUI学习教程之datagrid点击列表头排序

    这篇文章主要介绍了jQuery EasyUI学习教程之datagrid点击列表头排序的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07

最新评论