当前位置: 首页 > 编程笔记 >

jQuery选择器querySelector的使用指南

谢豪
2023-03-14
本文向大家介绍jQuery选择器querySelector的使用指南,包括了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 选择器jQuery 选择器 请使用我们的 jQuery 选择器检测器 来演示不同的选择器。 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") class="intro" 的所有元素 .class,.class $(".intro,.demo") class 为 "intro" 或 "demo"

  • 主要内容:jQuery 选择器,元素选择器,实例,#id 选择器,实例,.class 选择器,实例,更多实例,独立文件中使用 jQuery 函数,实例jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。 jQuery 中所有选

  • 如上文(地址)jQuery预先的javascript的编程,提供了计划所有css3下的标准选择器,开发者可以利用这些选择器轻松选择各种元素,供javascript使用。 重要的是jQuery对这些选择器的兼容性特别好,主流的浏览器都测试通过,这使得理论上的css3选择器一下编程了事实。开发者可以按照以前的方法定义各种css类别,然后通过addClass()方法或者className属性将其添加到指

  • 问题内容: 我有以下CSS: 我想使用jQuery更改顶部,左侧和底部边框的边框宽度。我使用什么选择器访问该元素?我尝试了以下方法,但似乎没有用。 问题答案: 您无法操作,因为从技术上讲,它不是DOM的一部分,因此任何JavaScript都无法访问它。但是您 可以 添加具有指定的新类的新类。 CSS: JS: 更新: 虽然不可能 _直接_修改内容,但是有一些方法可以使用JavaScript读取和/

  • 本文向大家介绍jQuery中选择器的基础使用教程,包括了jQuery中选择器的基础使用教程的使用技巧和注意事项,需要的朋友参考一下 其实选择器就像开罐器一样,会用这个工具的人,自然吃的到甜头,但不会用这个工具的人,不管罐头里面的面筋土豆有多美味,吃不到就是吃不到,就如同jquery再怎么强大,也只能看着荧幕,而不知该如何下手,不过虽然选择器不难,也容易上手,但老实说,我用了一年多下来,还是觉得自己

  • 本文向大家介绍jQuery选择器之属性筛选选择器用法详解,包括了jQuery选择器之属性筛选选择器用法详解的使用技巧和注意事项,需要的朋友参考一下 在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="che