jQuery选择器

jQuery选择器

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年4月18日

jQuery提供了一系列的选择器让开发者能更快速高效找到指定的节点。在HTML DOM术语中，jQuery选择器允许你对元素组或单个元素进行操作。jQuery选择器又可以细分为id选择器、类选择器、层级选择器、内容筛选选择器、可见性筛选选择器、属性筛选选择器、元素筛选选择器、表单元素选择器、表单对象属性筛选选择器。

下面用一个小案例来展示一下jQuery几种选择器实现的效果。代码截图如下：

如图，jQuery中的各种选择器的写法看是相同，实现效果却有所差异。各选择器的含义如下

jQuery id选择器：$(“#id”);

id选择器：一个用来查找的ID，即元素的id属性。id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

jQuery类选择器: 描述：$( ".class" )

类选择器，顾名思义，通过class样式类名来获取节点  类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选

jQuery元素选择器: $("element");

元素选择器：根据给定（html）标记名称选择所有的元素

jQuery CSS 选择器：

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

jQuery使用CSS选择器来选取HTML元素：

$(“p”)选取<p>元素

$(“p.intro”)选取所有class=”intro”的<p>元素

$(“p#demo”)选取所有id=”demo”的<p>元素

jQuery属性选择器：

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery全选择器（*选择器）: $( "*" )

jQuery中我们也可以通过传递*选择器来选中文档页面中的元素

jQuery层级选择器层级选择器用于处理文档中所有节点之间联系，

jQuery基本筛选选择器：

jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器的用法与CSS中的伪元素相似，选择器用冒号":"开头。看下面的几个函数值：

$(":first") 获取匹配第一个元素   

$(":last") 获取匹配的最后个元素  

$(":not(selector)") 去除所有与给定选择器匹配的元素

$(":even")  匹配所有索引值为偶数的元素，从 0 开始计数

$(":odd")  匹配所有索引值为奇数的元素，从 0 开始计数

$(":animated")  匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效) 例如:$(":header").css("background", "#EEE");

最后是实现的效果，见截图如下：

                      图（1）                                                                           图（2）

点击按钮会出现图（1）到图（2）效果变化。