jQuery选择器

简介: jQuery选择器

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

示例:

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

获取并设置网页中所有<h3>元素的背景“h3”为选择器语法,必须放在$()$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法

2.jQuery基本选择器

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

名称

语法构成

描述

示例

标签选择器

element

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

$(h2 )选取所有h2元素

类选择器

.class

根据给定的class匹配元素

$( .title)选取所有class为title的元素

ID选择器

#id

根据给定的id匹配元素

$( #title)选取id为title的元素

并集选择器

selector1,selector2,...,selectorN

将每一个选择器匹配的元素合并后一起返回

$(div,p,.title )选取所有div、p和拥有class为title的元素

全局选择器

*

匹配所有元素

$(* )选取所有元素

3.jQuery层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素

名称

语法构成

描述

示例

后代选择器

ancestor descendant

选取ancestor元素里的所有descendant(后代)元素

$(#menu span )选取#menu下的元素

子选择器

parent>child

选取parent元素下的child(子)元素

$( #menu>span )选取#menu的子元素

相邻元素选择器

prev+next

选取紧邻prev元素之后的next元素

$( h2+dl  )选取紧邻

元素之后的同辈元素

同辈元素选择器

prev~sibings

选取prev元素之后的所有siblings元素

$( h2~dl  )选取

元素之后所有的同辈元素

4.jQuery属性选择器

(1)属性选择器通过HTML元素的属性来选

语法构成

描述

示例

[attribute^=value]

选取给定属性是以某些特定值开始的元素

$( [href^='en'] )选取href属性值以en开头的元素

[attribute$=value]

选取给定属性是以某些特定值结尾的元素

$( [href$='.jpg'] )选取href属性值以.jpg结尾的元素

[attribute*=value]

选取给定属性是以包含某些值的元素

$( [href* ='txt'] )选取href属性值中含有txt的元素

(2)属性选择器可以根据是否包含某属性来选取元素

示例:a标签带有class属性

$("#news a[class]").css("background","#c9cbcb");

(3)属性选择器可以根据属性的值来选取元素

示例:class属性值为hot

$("#news a[class='hot']").css("background","#c9cbcb");

(4)属性选择器可以指定选取不等于属性是某个特定值的元素

示例:class值不等于hot

$("#news a[class!='hot']").css("background","#c9cbcb");

(5)属性选择器可以指定属性值以指定值开头的元素

示例:a标签href属性值以www开头

$("#news a[href^='www']").css("background","#c9cbcb");

(6)属性选择器可以指定属性值以指定值结尾的元素

示例:a标签href属性值以html结尾

$("#news a[href$='html']").css("background","#c9cbcb");

(7)属性选择器可以指定属性值包含指定值的元素

示例:a标签href属性值包含“k2”的元素

$("#news a[href*='k2']").css("background","#c9cbcb");

5.过滤选择器

通过特定的过滤规则来筛选出所需的元素

主要分类

基本过滤选择器可见性过滤选择器表单对象过滤选择器内容过滤选择器、子元素过滤选择器……

6.基本过滤选择器

语法

描述

示例

:eq(index)

选取索引等于index的元素(index从0开始)

$(li:eq(1) )选取索引等于1的

  • 元素

:gt(index)

选取索引大于index的元素(index从0开始)

$( li:gt(1) )选取索引大于1的

  • 元素(注:大于1,不包括1)

:lt(index)

选取索引小于index的元素(index从0开始)

$(“li:lt(1)” )选取索引小于1的

  • 元素(注:小于1,不包括1)

:header

选取所有标题元素,如h1~h6

$(:header )选取网页中所有标题元素

:focus

选取当前获取焦点的元素

$(:focus )选取当前获取焦点的元素

:animated

选择所有动画

$(:animated )选取当前所有动画元素

7.可见性过滤选择器

通过元素显示状态来选取元素

语法

描述

示例

:visible

选取所有可见的元素

$(:visible )选取所有可见的元素

:hidden

选取所有隐藏的元素

$(:hidden ) 选取所有隐藏的元素

$("p:hidden").show();
$("p:visible").hide();

8.jQuery选择器注意事项

(1)特殊符号的转义

<divid="id#a">aa</div><divid="id[2]">cc</div>

(2)获取这两个元素的选择器

image.png

相关文章
N..
|
2月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
16 1
|
4月前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
29 2
|
4月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
41 5
|
7天前
|
JavaScript 前端开发 开发者
jquery选择器有哪些
jquery选择器有哪些
|
12天前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
17天前
|
JavaScript 索引
jQuery 选择器有几种,分别是什么
jQuery 选择器有几种,分别是什么
25 5
|
1月前
|
Web App开发 JavaScript 前端开发
JQuery的选择器有哪些?
JQuery的选择器有哪些?
12 1
|
2月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
2月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
2月前
|
JavaScript 前端开发
jQuery选择器整理
jQuery选择器整理
14 0