jquery的选择器有哪些举例说明,jquery选择器的基本语法

jquery的选择器有哪些举例说明,jquery选择器的基本语法,jQuery选择器用法介绍

本文介绍了jQuery选择器的用法，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。

I、jQuery选择器II、基本选择器III、层次选择器IV、属性选择器V、过滤器选择器1、基本过滤器选择器2、可见性过滤器选择器3、内容过滤器VI、表单选择器VII、补充1、特殊符号的转义2、选择器jQuery选择器中的空格类似于CSS选择器，用于选择网页中的元素。例如：

$(h3 )。css(背景色，红色)；

描述：

并获取网页中所有h3元素的背景色。“h3”是选择器语法，必须放在$()中。$(h3 )返回一个jQuery对象。

一、jQuery选择器

JQuery选择器功能强大，种类繁多，可以分类如下：

1.类CSS选择器

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

2.滤波器选择器

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

3.表单选择器

4.内容过滤器

二、基本选择器

基本选择器语法如下图所示：

示例：

！文档类型html

html lang=en

头

meta charset=UTF-8

meta name= viewport content= width=device-width，initial-scale=1.0

meta http-equiv= X-UA-Compatible content= ie=edge

jquery基本选择器/标题示例

风格

#框{

背景色：# ffffff

边框：2px solid # 000000

填充：5px

}

/风格

script src= jquery-3 . 3 . 1 . js /script

脚本

$(function(){

//id选择器

$(#btn )。单击(函数(){

//标签选择器选择h3标签并添加其背景色。

$(h3 )。css(背景色，红色)；

//类选择器选择并设置所有带有类标题的元素的背景色。

$(.标题)。css(背景色， # 09F )；

//id选择器选择并设置ID框元素的背景色。

$(#box )。css(背景色， # 09F )；

//union选择器相当于css中的group选择器来选择并设置所有h2、dt和class为title。

//元素的背景色

$(h2，dt，标题)。css(背景色， # 09A )；

//交集选择器相当于CSS中指定的标签选择器来选择和设置带有类标题的h3标签的背景色。

$(h3.title )。css(背景色，黄色)；

//全局选择器更改所有元素的字体颜色

$(*).css(color ， blue )；

});

/脚本

/头

身体

Type= button id= BTN value=显示效果/

div id= box style= margin-top:10px；

带id框的Div

H2 class=titleclass是标题的H2标签/h2

H3=标题类是标题的H3标签/h3

H3最高排名/h3

分升

dt img src= QQ . jpg width= 391 height= 220 alt=斗地主//dt

房东/dd

休闲游戏/dd

DdQQ斗地主是国内同时在线人数最多的桌游./dd

/dl

/div

/body

/html

效果：

三、层次选择器

层次选择器通过DOM元素之间的层次关系获取元素。语法如下：

看下面这个例子。

描述：单击标题并使用层次选择器选择不同的元素，使它们的背景颜色为蓝色，如下图所示：

代码：

！文档类型html

html lang=en

头

meta charset=UTF-8

meta name= viewport content= width=device-width，initial-scale=1.0

meta http-equiv= X-UA-Compatible content= ie=edge

标题层次选择器演示示例/标题

！- css样式-

风格

边距：0px

填充：0px

行高：30px

}

正文{

边距：10px

}

#菜单{

边框：2px solid # 0033cc

填充：10px

}

一个{

文字-装饰：无；

右边距：5px

}

跨度{

字体粗细：粗体；

填充：3px

}

h2{

边距：10px

光标：指针；/*鼠标为手状*/

}

/风格

！-引入jQuery -

脚本src= jquery-3。3 .1 .js /脚本

！- javascript -

脚本

$(function(){

//点击氘标题时改变背景色

$(h2 ).单击（函数(){

//后代选择器获取并设置#菜单下的跨度元素的背景色

$(#menu span ).css(背景色,蓝色);

//子选择器获取并设置#旅行下的a元素的背景色

$(#travela ).css(背景色,红色);

//相邻选择器只会选择第一个相邻的元素

//获取并设置#门票下的第一个a元素的背景色

$( #票a’).css(背景色,红色);

//同辈选择器会选择所有的元素

//获取并设置#休息下的所有a元素的背景色

$(#rest~a ).css(背景色,黄色);

});

/脚本

/头

身体

div id=menu

h2 title=点击查看效果全部旅游产品分类/h2

分升

震颤性精神错乱震颤性谵妄的缩写)北京周边旅游跨度特价/span/dt

dd id=旅行

a href=# rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部“不跟随”按天数/a

/dd

/dl

分升

震颤性精神错乱震颤性谵妄的缩写)景点门票/dt

截止日期(截止日期的缩写)

/dd

截止日期(截止日期的缩写)

a href= # rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 id= rest 山水/a

/dd

/dl

跨度更多分类/span

/div

/body

/html

效果：

四、属性选择器

属性选择器通过超文本标记语言元素的属性来选择元素。语法如下：

示例：

！文档类型超文本标记语言

html lang=en

头

meta charset=UTF-8

meta name= viewport content= width=device-width，initial-scale=1.0

meta http-equiv= X-UA-Compatible content= ie=edge

标题属性选择器演示示例/标题

！- css样式-

风格

#框{

背景色：# ffffff

边框：2px固体# 000000

填充：5px

}

h2{

光标：指针；

}

/风格

！-引入jQuery -

脚本src= jquery-3。3 .1 .js /脚本

！- javascript -

脚本

$(function(){

$(h2 ).单击（函数(){

//改变含有标题属性的氘元素的背景颜色

$(h2[title]).css(背景色,蓝色);

//改变含有班级属性为可能性元素的背景颜色

$([class=odds]).css(背景色,红色);

//改变含有班级属性不等于可能性元素的字体颜色

//$([类！=奇数])。css(颜色,绿色);

//改变含有标题属性以h开头的元素的字体颜色区分大小写

$([title^=h]).css(颜色,绿色);

//改变含有标题属性以治安官结尾的元素的字体颜色区分大小写

$([title$=jp]).css(颜色,黄色);

//改变含有标题属性中含有s的元素的字体颜色区分大小写

$([title*=s]).css(颜色,粉色);

//改变含有班级属性并且标题属性中含有y的里元素的字体颜色区分大小写

$(li[class][title*=y]).css(颜色,紫色);

});

/脚本

/头

body class=odd

div id=box class=odd

h2 class=odd title=卡通列表动画列表/h2

保险商实验所

李赔率title=kn_jp 名侦探柯南/李

李火影忍者/李

李赔率标题=ss_JP 死神/李

李妖精的尾巴/李

李赔率标题=yh_jp 银魂/李

李：晚上好黑猫警长/李

li class=odds title=xl_ds 仙履奇缘/李

/ul

/div

/body

/html

效果：

五、过滤选择器

过滤选择器通过特定的过滤规则来刷选元素。

语法特点是使用":",例如：

$(《李：第一》)

表示选取第一个里元素。

1、基本过滤选择器

基本过滤选择器可以选择第一个元素、最后一个元素、索引为奇数或偶数的元素，语法如下：

基本过滤选择器还可以根据索引的值选取元素

基本过滤选择器还支持一些特殊的选择方式

示例：

！文档类型超文本标记语言

html lang=en

头

meta charset=UTF-8

meta name= viewport content= width=device-width，initial-scale=1.0

meta http-equiv= X-UA-Compatible content= ie=edge

标题基本过滤选择器/标题

风格

h2{

光标：指针；

}

/风格

！-引入jQuery -

脚本src= jquery-3。3 .1 .js /脚本

！- javascript -

脚本

$(function(){

$(h2 ).单击（函数(){

//选取第一个里标签并设置背景色

//$(李：第一)。css(背景色,蓝色);

//选取第一个里标签并设置背景色

//$(李：最后)。css(背景色,红色);

//选取偶数行的里标签并设置背景色

//$(李：偶)。css(背景色,绿色);

//选取奇数行的里标签并设置背景色

//$(李：奇)。css(背景色,粉红色);

//改变索引值为一的里标签的背景色

//$(李：等式(1)’).css(背景色,粉红色);

//改变索引值大于四的里标签的背景色

//$(li:gt(4)).css(背景色,绿色);

//改变索引值小于四的里标签的背景色

//$(li:lt(4)).css(背景色,红色);

//选取班级不是三的元素并设置背景色

$(李：不是(。三))。css(背景色,绿色);

//选取所有标题元素并设置背景色

$(:header ).css(背景色,红色);

});

$(input[type=text]).单击（函数(){

//设置当前获取焦点的元素的背景色

$(:focus ).css(背景色,黄色);

});

/脚本

/头

身体

氘网络小说/h2

保险商实验所

里王妃不好当/李

里致命交易/李

李=三个珈蓝寺/李

里逆天至宠/李

里交错时光的爱恋/李

里张震讲鬼故事/李

里第一次亲密接触/李

/ul

输入类型=文本值=Hello World /

/body

/html

结果：

2、可见性过滤选择器

可见性过滤选择器可以通过元素的显示状态来选取元素，语法如下：

例如：

示例：

！文档类型超文本标记语言

html lang=en

头

meta charset=UTF-8

meta name= viewport content= width=device-width，initial-scale=1.0

meta http-equiv= X-UA-Compatible content= ie=edge

标题可见性元素选择器演示示例/标题

风格

显示：无；

}

/风格

！-引入jQuery -

脚本src= jquery-3。3 .1 .js /脚本

！- javascript -

脚本

$(function(){

$(#show ).单击（函数(){

$(p:hidden ).show()；

});

$(#hidden ).单击（函数(){

$(p:visible ).hide()；

});

/脚本

/头

身体

输入类型=button id=show value=显示 /

输入类型=按钮id=隐藏值=隐藏 /

p嗨，您好！/p

/body

/html

效果：

点击显示：

点击隐藏：

3、内容过滤器

内容过滤器根据内容来选取元素，语法如下：

示例：

！文档类型超文本标记语言

html lang=en

头

meta charset=UTF-8

meta name= viewport content= width=device-width，initial-scale=1.0

meta http-equiv= X-UA-Compatible content= ie=edge

标题内容过滤器演示示例/标题

风格。标题{

背景色：灰色；

}

/风格

！-引入jQuery -

脚本src= jquery-3。3 .1 .js /脚本

！- javascript -

脚本

$(function(){

//改变包含"运动鞋"的表格背景色设置为蓝色

$(td:包含(运动鞋)).css(背景色,蓝色);

//没有内容的单元格的背景色设置为红色

$(td:empty ).css(背景色,红色);

//包含链接的单元格的背景色设置为绿色

$(td:has(a )).css(背景色,绿色);

//含有子节点或文本的表格的背景色设置为灰色

$(td:parent ).css(背景色,灰色);

});

/脚本

/头

身体

桌子

四羟乙基己二酰胺

tr class=标题

泰国(泰国)序号/th

泰国(泰国)订单号/th

泰国(泰国)商品名称/th

泰国(泰国)价格（元)/th

/tr

/thead

tbody

td1/td

td10035900/td

TDA href= # rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 Nike透气减震运动鞋/a/td

td231.00/td

/tr

td2/td

td10036114/td

（美)财政部(财政部)天美太阳伞/td

td51.00/td

/tr

td3/td

td10035110/td

tda href=# rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部“不跟随”万圣节儿童蜘蛛侠装/a/td

td31.00/td

/tr

td4/td

td10035120/td

（美)财政部(财政部)匹克篮球运动鞋/td

td231.00/td

/tr

td5/td

td10032900/td

tdjQuery权威指南/td

td/td

/tr

/tbody

/表格

/body

/html

效果：

六、表单选择器

表单选择器根据不同类型的表单元素进行选取，语法如下：

示例：

！文档类型超文本标记语言

html lang=en

头

meta charset=UTF-8

meta name= viewport content= width=device-width，initial-scale=1.0

meta http-equiv= X-UA-Compatible content= ie=edge

标题表单选择器演示示例/标题

！-引入jQuery -

脚本src= jquery-3。3 .1 .js /脚本

！- javascript -

脚本

$(function(){

//点击提交按钮，如果为空则设置边框为红色

$(:submit ).单击（函数(){

//获取用户名

var username=$(:input[name= username ])；

//获取密码

var pwd=$(:password[name= pwd ])；

//获取确认密码

var repwd=$(:password[name= repwd ])；

//获取昵称

var nickname=$(:input[name= nickname ])；

//获取已选的单选按钮

var radio=$(:radio:checked )；

//获取已选的复选框

var chk=$(:复选框：已选中)

//获取已选的下拉框

var sel=$(:selected )；

红色集合(用户名);

redSet(pwd)；

redSet(repwd)；

红色集合(昵称);

红色集合2(收音机);

redset 3(chk)；

redset 4(sel)；

});

函数redSet(obj){

if(obj.val()==){

obj.css(border ， 1px纯红);

}否则{

obj.css(border ， 1px纯黄);

}

};

函数redSet2(obj){

if(obj.length==0){

$(:radio ).父级()。css(边框， 1px纯红)

}否则{

$(:radio ).父级()。css(边框， 1px纯黄)

}

};

函数redSet3(obj){

if(obj.length==0){

$(:复选框).父级()。css(边框， 1px纯红)

}否则{

$(:复选框).父级()。css(边框， 1px纯黄)

}

};

函数redSet4(obj){

if(obj.val()==){

$(select ).css(边框， 1px纯红)

}否则{

$(select ).css(边框， 1px纯黄)

}

};

});

/脚本

/头

身体

字段集

神话；传奇注册表单/图例

form onsubmit= return false

输入类型=hidden name=pid value=1 /

账号：输入类型=text name=username /

密码：输入类型=密码名称=密码/

确认密码：输入类型=password name=repwd /

昵称：输入类型=text name=nickname /

性别：

输入t

ype="radio" name="sex" value="1" id="man"><label for="man">男</label> <input type="radio" name="sex" value="2" id="woman"><label for="woman">女</label> </p> <p> 爱好: <input type="checkbox" name="hobby" value="篮球" id="basketball" /><label for="basketball">篮球</label> <input type="checkbox" name="hobby" value="足球" id="football" /><label for="football">足球</label> <input type="checkbox" name="hobby" value="羽毛球" id="badminton" /><label for="badminton">羽毛球</label> <input type="checkbox" name="hobby" value="其他" id="other" /><label for="other">其他</label> </p> <p> 省份： <select> <option value="">--省份--</option> <option value="北京">北京</option> <option value="云南">云南</option> <option value="河北">河北</option> <option value="河南">河南</option> </select> </p> <input type="submit" value="提交" /> </form> </fieldset></body></html>

效果：

七、补充1、特殊符号的转义2、选择器中的空格

到此这篇关于jQuery选择器用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

jquery的选择器有哪些举例说明,jquery选择器的基本语法