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..
|
7月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
52 1
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
36 2
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
45 5
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
6月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
39 0
|
6月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JavaScript
jQuery 选择器
jQuery 选择器
29 3
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
33 1
|
4月前
|
JavaScript 索引
jQuery的选择器有几种?
jQuery的选择器有几种?
41 1