一、jQuery选择器简介
jQuery选择器是一种强大的工具，用于在HTML文档中快速、便捷地选取一个或多个DOM元素，以便对这些元素进行后续的操作，比如修改样式、添加事件处理函数、获取或修改元素内容等。它提供了多种类型的选择器，每种类型都有其特定的用途和语法，使得开发者可以根据元素的不同属性（如id、class、标签名等）以及元素之间的关系来准确地定位到想要操作的元素。
以下是一些常见的jQuery选择器类型：
-
ID选择器：通过元素的唯一ID属性来选取元素。在HTML中，ID应该是唯一的，所以使用ID选择器通常会选取到唯一一个特定的元素。语法为
$('#id-value')，其中id-value是元素的ID值。例如，如果有一个元素<div id="myDiv">，那么可以使用$('#myDiv')来选取它。 -
类选择器：根据元素的class属性来选取元素。一个元素可以有多个class属性值，并且多个元素可以共享同一个class值。语法为
$('.class-value')，其中class-value是元素的class值。比如，对于元素<p class="myClass">和<div class="myClass">，都可以使用$('.myClass')来选取它们。 -
标签选择器：按照元素的标签名来选取元素。语法为
$('tag-name')，其中tag-name是元素的标签名，如$('p')会选取页面中所有的段落元素<p>，$('div')会选取所有的div元素等。 -
后代选择器：用于选取某个元素的后代元素（子元素、孙元素等）。语法为
$('ancestor descendant')，其中ancestor是祖先元素，descendant是要选取的后代元素。例如，$('div p')会选取所有在div元素内部的段落元素。 -
子选择器：专门用来选取某个元素的直接子元素。语法为
$('parent > child')，其中parent是父元素，child是要选取的直接子元素。比如，$('ul > li')会选取所有在ul列表下的直接子元素li。 -
属性选择器：依据元素的某个属性及其属性值来选取元素。语法有多种形式，比如：
$('[attribute]')：选取具有指定属性的所有元素，无论其属性值是什么。例如，$('[href]')会选取所有具有href属性的元素。$('[attribute=value]')：选取具有指定属性且属性值等于给定值的所有元素。例如，$('[class=myClass]')会选取所有class属性值为myClass的元素。$('[attribute!=value]')：选取具有指定属性但属性值不等于给定值的所有元素。
-
多选择器：可以将多个选择器组合在一起，同时选取多种类型的元素。语法为
$(selector1, selector2, selector3,...)。例如，$('p, div, #myButton')会同时选取所有的段落元素、所有的div元素以及id为myButton的元素。
二、代码样例
以下是一些展示不同类型jQuery选择器用法的代码样例：
示例1：ID选择器
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">这是一个div元素。</div>
<script>
// 使用ID选择器选取元素并修改其文本内容
$(document).ready(function() {
$('#myDiv').text('这是被修改后的div元素内容。');
});
</script>
</body>
</html>
在这个示例中，通过$('#myDiv')使用ID选择器选取了id为myDiv的div元素，然后使用.text()方法修改了它的文本内容。
示例2：类选择器
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器示例</title>
<script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p class="myClass">这是一个段落元素。</p>
<div class="myClass">这是一个div元素。</div>
<script>
// 使用类选择器选取元素并修改其文本内容
$(document).ready(function() {
$('.myClass').text('这是被修改后的类元素内容。');
});
</script>
</body>
</html>
这里，通过$('.myClass')使用类选择器选取了所有class属性值为myClass的元素（包括段落元素和div元素），然后同样使用.text()方法修改了它们的文本内容。
示例3：标签选择器
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器示例</title>
<script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>这是一个段落元素。</p>
<p>这是另一个段落元素。</p>
<div>这是一个div元素。</div>
<script>
// 使用标签选择器选取元素并修改其文本内容
$(document).ready(function() {
$('p').text('这是被修改后的段落元素内容。');
});
</script>
</body>
</html>
在该示例中，通过$('p')使用标签选择器选取了所有的段落元素，然后使用.text()方法修改了它们的文本内容。
示例4：后代选择器
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器示例</title>
<script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
<p>这是div里面的一个段落元素。</p>
<div>
<p>这是嵌套在div里面的另一个段落元素。</p>
</div>
</div>
<script>
// 使用后代选择器选取元素并修改其文本内容
$(document).ready(function() {
$('div p').text('这是被修改后的后代元素内容。');
});
</script>
</body>
</html>
此示例中，通过$('div p')使用后代选择器选取了所有在div元素内部的段落元素（包括嵌套在多层div中的段落元素），然后使用.text()方法修改了它们的文本内容。
示例5：子选择器
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器示例</title>
<script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>这是ul列表的第一个直接子元素li。</li>
<li>这是ul列表的第二个直接子元素li。</li>
<li>这是ul列表的第三个直接子元素li。</li>
</ul>
<script>
// 使用子选择器选取元素并修改其文本内容
$(document).ready(function() {
('ul > li').text('这是被修改后的直接子元素内容。');
});
</script>
</body>
</html>
这里，通过('ul > li')使用子选择器选取了所有在ul列表下的直接子元素li，然后使用.text()方法修改了它们的文本内容。
示例6：属性选择器
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器示例</title>
<script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<a href="https://www.example.com">这是一个具有href属性的链接元素。</a>
<img src="image.jpg" alt="这是一个具有src和alt属性的图片元素。">
<script>
// 使用属性选择器选取元素并修改其文本内容
$(document).ready(function() {
$('[href]').text('这是被修改后的具有href属性的元素内容。');
$('[src]').text('这是被修改后的具有src属性的元素内容。');
});
</script>
</body>
</html>
在这个示例中，通过$('[href]')和$('[src]')使用属性选择器分别选取了所有具有href属性的元素和所有具有src属性的元素，然后使用.text()方法修改了它们的文本内容。
示例7：多选择器
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器示例</title>
<script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>这是一个段落元素。</p>
<div>这是一个div元素。</td>
<button id="myButton">这是一个按钮元素。</button>
<script>
// 使用多选择器选取元素并修改其文本内容
$(document).ready(function() {
$('p, div, #myButton').text('这是被修改后的多选择器选取的元素内容。');
});
</script>
</body>
</html>
在此示例中，通过$('p, div, #myButton')使用多选择器同时选取了所有的段落元素、所有的div元素以及id为myButton的元素，然后使用.text()方法修改了它们的文本内容。
这些代码样例展示了不同类型的jQuery选择器如何在实际中用于选取DOM元素并进行相关操作。在实际应用中，可以根据具体的需求灵活运用这些选择器来实现丰富多样的网页功能。
标签：jQuery,示例,元素,样例,选取,div,选择器,属性 From： https://blog.csdn.net/alankuo/article/details/143658213