jQuery选择器

什么是jQuery选择器？

jQuery选择器 是指对#JavaScript# 选取元素的操作进行了封装，使选择 Html 元素时更加的容易。

jQuery选择器作用？

jQuery 选择器类似于 CSS 选择器，用来选取网页中的元素

$("h3").css("background","#09F");

获取并设置网页中所有 <h3> 元素的背景

“h3” 为选择器语法，必须放在 $() 中

$(“h3”) 返回 jQuery 对象

.css() 是为 jQuery 对象设置样式的方法

一、 jQuery 选择器分类

jQuery 选择器功能强大，种类也很多，需要学习的分类有以下几个：

1 、类 CSS 选择器

基本选择器 ，层次选择器 ，属性选择器

2 、过滤选择器

基本过滤选择器 ,可见性过滤选择器

在 jQuery 中，选择器的操作最终的结果都是一个集合，需要进一步处理集合中的元素，然后进行操

作。使用 jQuery 选择器，可以对一个或多个选取的 Html 元素进行操作，以达到完成指定的任务。

注意： 在 jQuery 中， $(*) 表示选取 Html 页面中的全部元素，选取的是一个具有 HTML DOM 树形结构的集合。

二、基本选择器

基本选择器包括标签选择器、类选择器、 ID 选择器、并集选择器、交集选择器和全局选择器

名称	语法构成	描述	示例
标签选择 器	element	根据给定的标签名匹配元素	$("h2" )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title") 选取所有 class 为 title 的元 素
ID 选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素

名 称	语法构成	描述	示例
并 集	selector1,...selectorN	将每一个选择器匹配的元素合并后一起返回	$("div,p,.title" ) 选取所有 div 、 p和 <br />拥有 class 为 title 的元素
交 集	element.class 或 element#id	匹配指定 class 或 id 的某元素或元素集合	$("h2.title") 选取所有拥有 class 为 title 的 h2 元素
全 局	*	匹配所有元素	$("*" )选取所有元素

示例

<div id="box"> id为box的div
<h2 class="title">class为title的h2</h2>
<h3 class="title">class为title的h3</h3>
<h3>热门排行</h3>
<dl>
<dt><img src="images/ch04/case_1.gif" width="93" height="99"
alt="斗地主" /></dt>
<dd class="title">斗地主</dd>
<dd>休闲游戏</dd>
<dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
</dl>
</div>

1 、标签选择器

标签选择器根据给定的标签名匹配元素

作用范围：当前 css 作用范围内所有叫该名字的标签被选中

使用说明：当所有的同一种标签需要设置相同的效果，那么我们可以用标签选择器

$("h3").css("background","#09F")

获取并设置所有 <h3> 元素的背景颜色

2 、类选择器

类选择器根据给定的 class 匹配元素

使用说明： 1 、在同一种标签使用，表示选中这类标签中的一部分 ( 加上相同 class 属性 )

2 、可以跨标签使用 ( 加上相同的 class 属性 )

$(".title").css("background","#09F")

获取并设置所有 class 为 title 的元素的背景颜色

3 、 ID 选择器

ID 选择器根据给定的 id 匹配元素

使用说明：一个 id 值在一个页面只能使用一次，在页面中我们更多的是用来布局

$("#box").css("background","#09F")

获取并设置 id 为 box 的元素的背景颜色

小结：样式的优先级：就近原则

ID 选择器 > 类选择器 > 标签选择器

4 、并集选择器

并集选择器用来合并元素集合，由多个基本 ( 单个 ) 选择器任意组合，每个选择器之间用逗号分隔

使用场景：当有很多种元素对象需要选择，但没有什么规律，用多个基本选择器选中。

$("h2,dt,.title").css("background","#09F")

获取并设置所有 <h2> 、 <dt> 、 class 为 title 的元素的背景颜色

5 、交集选择器

交集选择器可以对元素集合根据 class 或 id 再筛选

使用需要同时满足两个基本条件，再把两个选择器直接组合起来

A 、第一个基本选择器必须为标签选择器

B 、第二个基本选择器为非标签选择器（类、 id 选择器）

使用场景：通常是为了选择同一种 标签中的一部分对象元素

$("h2.title").css("background","#09F") 1

6 、全局选择器

全局选择器可以获取所有元素

改变所有元素的字体颜色

$("*").css("color","red")

jQuery选择器内容比较多，将分为三篇博客来讲述，这是第一篇

感谢大家的阅读，如有不对的地方，可以私信我，感谢大家！