jQuery选择器

最新推荐文章于 2020-11-04 21:13:09 发布

m_syndra

最新推荐文章于 2020-11-04 21:13:09 发布

阅读量965

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/m_syndra/article/details/79319412

本文详细介绍了jQuery选择器的使用方法，包括基本选择器、层次选择器、过滤选择器及表单选择器等，通过示例代码帮助读者更好地理解和掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery选择器

jQuery选择器是什么？

jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。

jQuery选择器的优势

1.代码更简单
2.支持CSS1到CSS3选择器
3.完善的处理机制

jQuery选择器分类

jQuery选择器详细介绍：

1. 基本选择器（jQuery对象获取）

基本选择器是jQuery中使用最多的选择器，它由元素Id、class、元素名、多个元素符组成。

基本选择器

选择器	功能
#ID	通过ID名获取jQuery对象
.class	通过class名获取jQuery对象
element	通过标签名获取jQuery对象
*	获取所有jQuery对象
selector1，selector2	混合写法（中间用“，”连接）

实例：

$("button").css("border","solid3px yellow");//使用标签名进行获取对象

$(".txt").css("border","solid 3pxyellow");//使用class名进行获取对象

$("#test").css("border","solid 3pxyellow");//使用id名进行获取对象

$("*").css("border","solid3px yellow");//表示获取所有对象

$(".txt,#test").css("border","solid3px yellow");//表示获取所有对象

2. 层次选择器

层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。

层次选择器

选择器	功能
ancestor descendant（空格）	根据祖先元素获取所有的后代元素
parent>child（>）	根据父元素获取所有的子元素
prev+next（+）	获取所有紧接在prev元素后的相邻元素
prev~siblings（~）	获取prev元素之后的所有兄弟元素

3. 过滤选择器

过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头。

（1）简单过滤选择器

简单过滤选择器是过滤选择器中使用最广泛的一种。

简单过滤选择器

选择器	功能
first()/:first	获取第一个元素
last()/:last	获取最后一个元素
:not()	获取不是（）内的所有元素
:even	获取所有索引值为偶数的元素[索引从零开始]
:odd	获取所有索引值为奇数的元素[索引从零开始]
:eq()	获取指定索引值的元素[索引从零开始]
:gt()	获取所有大于给定索引值的元素[索引从零开始]
:lt()	获取所有小于给定索引值的元素[索引从零开始]
:header	获取所有标题类型的元素，如h1,h2…
:animated	获取正在执行动画效果的元素

实例：

<!DOCTYPEhtml>

<html>

<headlang="en">

<title>过滤选择器---简单过滤选择器</title>

<style>

.block{

width: 400px;

border: solid 1px black;

border-collapse: collapse;

margin: 0 auto;

}

td{

height: 100px;

border: solid 1px black;

}

</style>

<scriptsrc="jquery-3.0.0.js"></script>

$(function(){

$("td:first").css("backgroundColor","lightpink");

$("td:last").css("backgroundColor","skyblue");

$("td:not(.smallone)").css("backgroundColor","yellow");//:not()获取不是括号内元素的东西

$("td:even").css("border","solid 2pxorange");//:even获取所有索引值为偶数的元素，索引从零开始

$("td:odd").css("border","solid 2pxpink");//:odd获取所有索引值为奇数的元素，索引从零开始

$("td:eq(2)").css("backgroundColor","blue");//:eq()获取的是指定索引值的元素，索引从零开始

$("td:gt(2)").css("backgroundColor","white");//:gt()获取的是所有大于索引的元素，索引从零开始

$("td:lt(2)").css("backgroundColor","black");//:lt()获取的是所有小于索引的元素，索引从零开始

$(":header").css("color","lightgreen");//:header()获取的是所有的标题类型的元素

})

</script>

</head>

<body>

<tableclass="block">

<tr>

<tdclass="smallone"></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<span>helloworld</span>

</body>

</html>

（2）内容过滤选择器

内容过滤选择器是根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

内容过滤选择器

选择器	功能
:contains()	获取包含给定文本的元素（相当于模糊查询，即查找关键字）
:empty	获取所有不包含子元素或文本的空元素（什么都没有）
:has()	获取含有选择器所匹配的元素的元素
:parent	获取含有子元素或文本的元素（一定要有子元素或文本）

实例：

<!DOCTYPEhtml>

<html>

<headlang="en">

<title>内容过滤选择器</title>

<scriptsrc="jquery-3.0.0.js"></script>

$(function () {

$("span:contains('一')").css("color","red");//:contains('')获取的是包含给定文本的元素

alert($(".block:empty"));//:empty指什么都没有，有回车或者换行都不算空

$("div:has('p')").css("color","blue");//:has()获取含有选择器所匹配的元素的元素

$("span:parent").css({"backgroundColor":"pink"});//:parent获取含有子元素或者文本的元素

})

</script>

</head>

<body>

<divclass="block">

<span>这是一个span</span>

<span>这是第二个span</span>

<span>这还是一个span</span>

</div>

</body>

</html>

（3）可见性过滤选择器

可见性过滤选择器根据元素是否可见的特征来获取元素。

可见性过滤选择器

选择器	功能
:hidden	获取所有不可见元素，或type为hidden的元素
:visible	获取所有可见元素

实例：

<!DOCTYPEhtml>

<html>

<headlang="en">

<title>可见性过滤选择器</title>

<style>

.block{

width: 100px;

height: 100px;

margin: 0 auto;

background-color: #35c7ff;

}

</style>

<scriptsrc="jquery-3.0.0.js"></script>

$(function(){

$(":visible").hide();//:visible获取所有可见元素这句话的意思是让所有显示的隐藏起来

$(":hidden").show();//:hidden 获取所有不可见元素这句话的意思是让所有隐藏的显示出来

})

</script>

</head>

<body>

<divclass="block"></div>

<divclass="block2"></div>

</body>

</html>

（4）属性过滤选择器

属性过滤选择器根据元素的某个属性获取元素。

属性过滤选择器

选择器	功能
[attribute]	获取包含给定属性的元素
[attribute=value]	获取等于给定的属性value
[attribute!=value]	获取不等于给定的属性value
[attribute^=value]	获取开始的是给定的属性value
[attribute$=value]	获取结束的是给定的属性value
[attribute*=value]	获取包含给定的属性value
[selector1] [selector2] [selectorN]	复合属性选择器，同时满足多个属性

实例：

<!DOCTYPEhtml>

<html>

<headlang="en">

<title>属性过滤选择器</title>

<scriptsrc="jquery-3.0.0.js"></script>

$(function(){

$("input[type]").css("backgroundColor","lightpink");//[type]获取包含所有给定属性的元素

$("input[type=text]").css("backgroundColor","skyblue");//[type=text]获取等于给定的属性value

$("input[type!=text]").css("border","solid 1pxred");//[type!=text] 获取不等于给定的属性value

$("input[type^='s']").css("border","solid 1pxblack");//[type^='s'] 获取type是以s开头的value

$("input[type$='t']").css("backgroundColor","yellow");//[type$='t']获取type是以t结尾的value

$("input[type*=button]").css("backgroundColor","green");//[type*=button]获取包含type是button的

$("input[type][class][value]").css("border","solid2px lightgreen");//[type][class][value] 同时满足这三个[]的

})

</script>

</head>

<body>

<inputtype="text"/>

<inputtype="text" class="txt"/>

<inputtype="button" class="btn" value="请点击"/>

<inputtype="submit"/>

<inputtype="reset"/>

</body>

</html>

（5）子元素过滤选择器

子元素过滤选择器获取所有父元素中指定的某个元素。

子元素过滤选择器

选择器	功能
:nth-child	获取每个父元素下的特定位置元素（索引号从1开始）
:first-child	获取每个父元素下的第一个子元素
:last-child	获取每个父元素下的最后一个子元素
:only-child	获取每个父元素下的仅有一个子元素（要保证它的父元素里只有它这一个子元素，文本不算子元素）

实例：

<!DOCTYPEhtml>

<html>

<headlang="en">

<title>子元素过滤选择器</title>

<scriptsrc="jquery-3.0.0.js"></script>

$(function(){

$("span:nth-child(2)").css("color","yellow");//:nth-child()获取每个父元素下面特定位置元素索引号从一开始

$("span:first-child").css("color","green");//:first-child 获取每个父元素下面的第一个子元素

$("span:last-child").css("color","pink");//:last-child 获取每个父元素下面的最后一个子元素

$("span:only-child").css("color","blue");//span:only-child 获取仅有唯一一个子元素的父元素(指span是only-child)

});

</script>

</head>

<body>

<div>

</div>

<p><span>hello</span></p>

<p><span>hello</span><span>world</span></p>

</body>

</html>

（6）表单对象属性过滤选择器

表单对象属性过滤选择器主要是对所选择的表单元素进行过滤，如选择被选中的下拉框，多选框等元素。

表单对象属性过滤选择器

选择器	功能
:enabled	选取所有可用元素
:disabled	选取所有不可用元素
:checked	选取所有被选中的元素（单选框、复选框）
:selected	选取所有被选中的选项元素（下拉框）

实例：

<!DOCTYPEhtml>

<html>

<headlang="en">

<title>表单对象属性过滤选择器</title>

<scriptsrc="jquery-3.0.0.js"></script>

$(function(){

$(".txt:disabled").css("backgroundColor","yellow");//:disabled 获取所有不可用元素

$(".txt1:enabled").css("backgroundColor","pink");//:enabled 获取所有可用元素

console.log($("option:selected").length);//:selected 获取所有被选中选项元素(下拉框)

alert($("input[type=checkbox]:checked").length);//:checked 获取所有被选中的元素(单选框复选框)

})

</script>

</head>

<body>

<inputtype="text" class="txt" disabled="disabled"/>

<inputtype="text" class="txt1"/>

<inputtype="checkbox" checked="checked"/>闯关

<inputtype="checkbox"/>时间段

<inputtype="checkbox" checked="checked"/>会计师法

<inputtype="checkbox"/>打瞌睡

<selectname="select1" id="sel">

<optionselected="selected">唱歌</option>

<optionselected="selected">游戏</option>

</select>

</body>

</html>

4. 表单选择器

表单选择器专为表单设计，通过它可用在页面中快速定位某表单对象。

表单选择器

选择器	功能
:input	获取所有input、textarea、select
:text	获取所有单行文本框
:password	获取所有密码框
:radio	获取所有单选按钮
:checkbox	获取所有复选框
:submit	获取所有提交按钮
:image	获取所有图像域
:reset	获取所有重置按钮
:button	获取所有按钮
:file	获取所有文件域