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='title'class是标题的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选择器用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

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

目录

一、jQuery选择器

二、基本选择器

三、层次选择器

四、属性选择器

五、过滤选择器

1、基本过滤选择器

2、可见性过滤选择器

3、内容过滤器

六、表单选择器

七、补充

1、特殊符号的转义

2、选择器中的空格

相关文章阅读