jQuery基础选择器详解与实战-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40337430/article/details/105919992

本文详细介绍了jQuery的基础选择器，包括基本选择器、层次选择器和属性选择器，并给出了相关练习题目和解答，帮助读者掌握jQuery选择器的用法。

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

jquery基础选择器

1.基本选择器

1. 元素选择器：$("attr"):例如选取div元素：$("div")
2. id选择器:$("#id"):例如选取id为attr的元素：$("#attr")
3. 类选择器:$(".class"):例如选取class为attr的元素：$(".attr")
4. 群组选择器:$("1,2,3,4,5"):要用逗号分离

2. 层次选择器

$("M , N"):后代选择器选择M内部的后代N元素及全部N元素
$("M > N"):子代选择器，元素M的内部的自带N元素所有第一级N元素
$("M ~ N"):兄弟选择器，M后面的所有同级元素N
$("M + N"):相邻选择器，选择M元素相邻的下一个元素

3.属性选择器

E[attr]:选取元素E，E必须有属性attr
E[attr="value"]:选取元素E，E必须有属性attr取值为value
E[attr！="value"]:选取元素E，E必须有属性attr取值不是value
E[attr^="value"]:选取元素E，E必须有属性attr取值以value开头
E[attr$="value"]:选取元素E，E必须有属性attr取值以value结尾
E[attr*="value"]:选取元素E，E必须有属性attr取值包含value
E[attr|="value"]:选取元素E，E必须有属性attr取值以value开头或者等于
E[attr~="value"]:选取元素E，E必须有属性attr取值以value包含或者等于

练习题目

下面有一段代码，其中能获取第2个div元素的是（）。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

A. $("#first div") B. $("#first>div")

C. $("#first~div") D. $("#first+div")

答案：D

D中，$("#first+div")表示获取id="#first"元素相邻的下一个div元素

2、下面有一段代码，如果想要为两个li元素之间添加一个10px的间距，正确的jQuery写法应该是（）。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</body>

</html>

A. $("li+li").css("margin-left", "10px");

B. $("li+li").css("margin-left", "-10px");

C. $("li+li").css("margin-right", "10px");

D. $("li+li").css("margin-right", "-10px");

答案：A

二、编程题

1、请写出下面对应的jQuery选择器，每一项对应一个。

（1）选取含有href属性的a元素。

（2）选取type取值为radio的input元素。

（3）选取type取值不是checkbox的input元素。

（4）选取class属性包含nav的div元素（class属性可以包含多个值）。

（5）选取class属性以article开头的div元素，例如<div class="article-title"></div>。

（6）选取class属性以content结尾的div元素，例如<div class="article-content"></div>。

（7）选取带有id属性并且class属性是以article开头的div元素，例如<div id="container" class="article-title"></div>。

答案如下：

（1）$("a[href]")

（2）$("input[type = 'radio']")

（3）$("input[type != 'checkbox']")

（4）$("div[class *= 'nav']")

（5）$("div[class ^= 'article']")

（6）$("div[class $= 'content']")

（7）$("div[id][class ^='article']")