在前端开发中，jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及AJAX交互等操作。本文将通过一个示例页面，详细介绍jQuery的选择器和一些常用的自带函数。
示例代码优化
首先，我们来优化和完善给出的代码片段，使其更加规范且易于理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Selectors and Functions Demo</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h2><a href="#">Title Content</a></h2>
<h2>Another Title <a href="#">Content</a></h2>
<script>
$(document).ready(function() {
// 使用ID选择器，这里假设有一个ID为showDiv的元素
$("#showDiv").text("Selected by ID");
// 类选择器示例，先确保页面中有class为'SomeClass'的元素
$(".SomeClass").css("color", "red");
// 选择所有奇数行的段落
$("p:odd").addClass("highlight");
// 选择每行的第一个单元格
$("td:nth-child(1)").html("<First Cell>");
// 选择所有列表项中的链接
$("li > a").attr("target", "_blank");
// 选择所有指向pdf文件的链接
$("a[href$='.pdf']").text("PDF Link");
// 修改所有h2下的链接文本
$("h2 a").each(function(index) {
$(this).text("Link " + (index + 1));
});
// 使用$.trim去除字符串首尾空白
let sString = " 123456789 ";
let trimmedString = $.trim(sString);
alert("Trimmed length: " + trimmedString.length);
});
</script>
<!-- 添加一个样式，用于演示 -->
<style>
.highlight { background-color: yellow; }
</style>
</body>
</html>
jQuery选择器
基本选择器
$("#elementId")：通过ID选择元素。$(".className")：通过类名选择元素。$("tag")：通过标签名选择元素。
过滤选择器
$("selector:odd")：选择奇数位置的元素。$("selector:nth-child(index)")：根据索引选择子元素。$("parent > child")：直接子元素选择器。
属性选择器
$("a[href$='.pdf']")：选择所有href属性以.pdf结尾的a元素。
jQuery自带函数
$.trim()
用于移除字符串两端的空白字符。在上述示例中，我们使用此函数清理了字符串sString的首尾空格。
其他常用函数
.text(content)：设置或返回所选元素的文本内容。.css(property, value)：设置或返回样式属性的值。.addClass(className)：向匹配的元素添加指定的类名。.html(content)：设置或返回所选元素的内容（包括HTML）。.attr(attributeName, value)：设置或返回元素的属性值。.each(callback)：对匹配元素集合执行迭代操作。
通过以上代码优化和解释，我们可以看到jQuery如何通过其强大的选择器和内置函数简化DOM操作，提高开发效率。掌握这些基础将极大提升你的前端开发能力。
