什么是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选择器内容比较多,将分为三篇博客来讲述,这是第一篇
感谢大家的阅读,如有不对的地方,可以私信我,感谢大家!