掌握jQuery元素查询技巧提升网页开发效率从基础选择器到高级过滤方法全面解析jQuery元素查找和操作让你成为前端高手

威震华夏关云长

引言

jQuery作为最流行的JavaScript库之一，极大地简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在网页开发中，元素查询是操作DOM的基础，掌握jQuery的元素查询技巧不仅能提高开发效率，还能写出更加优雅、高效的代码。本文将从基础选择器到高级过滤方法，全面解析jQuery元素查找和操作，帮助你成为前端开发高手。

jQuery基础选择器

基本选择器

基本选择器是jQuery中最常用也是最简单的选择器，它们基于CSS1-3选择器，并进行了扩展。

ID选择器通过元素的ID属性来选取元素，使用#符号表示。

2. // 选取ID为"myId"的元素
3. $("#myId")
5. // 实际应用示例
6. $("#header").css("background-color", "#f0f0f0");

复制代码

类选择器通过元素的class属性来选取元素，使用.符号表示。

2. // 选取所有class为"myClass"的元素
3. $(".myClass")
5. // 实际应用示例
6. $(".button").click(function() {
7.     alert("按钮被点击了");
8. });

复制代码

元素选择器根据元素的名称选取元素。

2. // 选取所有的<p>元素
3. $("p")
5. // 实际应用示例
6. $("div").addClass("container");

复制代码

通用选择器*选取所有元素。

2. // 选取文档中的所有元素
3. $("*")
5. // 实际应用示例 - 设置所有元素的边框
6. $("*").css("border", "1px solid #ddd");

复制代码

多元素选择器允许你同时选择多个不同类型的元素，用逗号分隔。

2. // 选取所有的<p>和<div>元素
3. $("p, div")
5. // 实际应用示例
6. $("h1, h2, h3").css("color", "blue");

复制代码

层次选择器

层次选择器基于元素之间的关系来选取元素。

后代选择器选取指定元素的所有后代元素，用空格分隔。

2. // 选取<form>元素内所有的<input>元素
3. $("form input")
5. // 实际应用示例
6. $("#container p").css("margin-bottom", "10px");

复制代码

子元素选择器选取指定元素的直接子元素，用>符号表示。

2. // 选取<ul>元素的直接子元素<li>
3. $("ul > li")
5. // 实际应用示例
6. $("div > p").addClass("direct-child");

复制代码

相邻兄弟选择器选取紧接在指定元素后的第一个兄弟元素，用+符号表示。

2. // 选取紧接在<div>后的第一个<p>元素
3. $("div + p")
5. // 实际应用示例
6. $("h2 + p").css("font-weight", "bold");

复制代码

一般兄弟选择器选取指定元素之后的所有兄弟元素，用~符号表示。

2. // 选取<div>元素之后的所有<p>兄弟元素
3. $("div ~ p")
5. // 实际应用示例
6. $("h1 ~ p").css("text-indent", "20px");

复制代码

jQuery高级过滤方法

jQuery提供了丰富的过滤方法，帮助你更精确地选取需要的元素。

基础过滤方法

:first选取第一个元素，:last选取最后一个元素。

2. // 选取第一个<p>元素
3. $("p:first")
5. // 选取最后一个<li>元素
6. $("li:last")
8. // 实际应用示例
9. $("tr:first").css("background-color", "#yellow");
10. $("tr:last").css("background-color", "#f0f0f0");

复制代码

:even选取索引为偶数的元素（从0开始），:odd选取索引为奇数的元素。

2. // 选取索引为偶数的<tr>元素
3. $("tr:even")
5. // 选取索引为奇数的<tr>元素
6. $("tr:odd")
8. // 实际应用示例 - 表格斑马纹
9. $("tr:even").css("background-color", "#f9f9f9");
10. $("tr:odd").css("background-color", "#ffffff");

复制代码

:eq(index)选取索引等于index的元素，:gt(index)选取索引大于index的元素，:lt(index)选取索引小于index的元素。

2. // 选取索引为2的<li>元素
3. $("li:eq(2)")
5. // 选取索引大于2的<li>元素
6. $("li:gt(2)")
8. // 选取索引小于2的<li>元素
9. $("li:lt(2)")
11. // 实际应用示例
12. $("div:eq(1)").hide();  // 隐藏第二个div
13. $("li:gt(4)").css("color", "red");  // 将索引大于4的li文字设为红色
14. $("p:lt(3)").addClass("highlight");  // 为前三个p元素添加高亮类

复制代码

:not(selector)选取不符合指定选择器的元素。

2. // 选取所有class不是"special"的<p>元素
3. $("p:not(.special)")
5. // 实际应用示例
6. $("input:not(:checked)").css("border", "1px solid red");

复制代码

:header选取所有的标题元素，如h1, h2, h3等。

2. // 选取所有的标题元素
3. $(":header")
5. // 实际应用示例
6. $(":header").css("font-family", "Arial, sans-serif");

复制代码

内容过滤方法

:contains(text)选取包含指定文本的元素。

2. // 选取包含文本"jQuery"的<p>元素
3. $("p:contains('jQuery')")
5. // 实际应用示例
6. $("div:contains('重要信息')").css("border", "2px solid red");

复制代码

:empty选取不包含子元素或文本的空元素。

2. // 选取所有空的<td>元素
3. $("td:empty")
5. // 实际应用示例
6. $("td:empty").text("N/A").css("color", "#999");

复制代码

:has(selector)选取含有选择器所匹配的元素的元素。

2. // 选取含有<p>元素的<div>元素
3. $("div:has(p)")
5. // 实际应用示例
6. $("li:has(ul)").css("font-weight", "bold");  // 为包含子列表的列表项加粗

复制代码

:parent选取含有子元素或文本的元素。

2. // 选取所有含有子元素或文本的<td>元素
3. $("td:parent")
5. // 实际应用示例
6. $("td:parent").css("padding", "10px");

复制代码

可见性过滤方法

:visible选取所有可见的元素，:hidden选取所有隐藏的元素。

2. // 选取所有可见的<p>元素
3. $("p:visible")
5. // 选取所有隐藏的<div>元素
6. $("div:hidden")
8. // 实际应用示例
9. $("div:visible").click(function() {
10.     $(this).fadeOut("slow");
11. });
13. $("button").click(function() {
14.     $("div:hidden").fadeIn("slow");
15. });

复制代码

属性过滤方法

[attribute]选取拥有指定属性的元素。

2. // 选取所有拥有href属性的<a>元素
3. $("a[href]")
5. // 实际应用示例
6. $("input[id]").css("border", "1px solid blue");

复制代码

[attribute=value]选取指定属性等于特定值的元素。

2. // 选取所有type属性为"checkbox"的<input>元素
3. $("input[type='checkbox']")
5. // 实际应用示例
6. $("input[type='text']").addClass("text-input");

复制代码

[attribute!=value]选取指定属性不等于特定值的元素。

2. // 选取所有href属性不等于"#"的<a>元素
3. $("a[href!='#']")
5. // 实际应用示例
6. $("input[name!='username']").css("background-color", "#f9f9f9");

复制代码

[attribute^=value]选取指定属性以特定值开始的元素。

2. // 选取所有href属性以"https://"开始的<a>元素
3. $("a[href^='https://']")
5. // 实际应用示例
6. $("img[src^='images/']").css("border", "2px solid green");

复制代码

[attribute$=value]选取指定属性以特定值结束的元素。

2. // 选取所有src属性以".jpg"结束的<img>元素
3. $("img[src$='.jpg']")
5. // 实际应用示例
6. $("a[href$='.pdf']").after("<span>(PDF)</span>");

复制代码

[attribute*=value]选取指定属性包含特定值的元素。

2. // 选取所有name属性包含"user"的<input>元素
3. $("input[name*='user']")
5. // 实际应用示例
6. $("div[class*='container']").css("margin", "10px");

复制代码

子元素过滤方法

:nth-child选取父元素下的第N个子元素或奇偶元素。

2. // 选取每个<ul>父元素下的第2个<li>子元素
3. $("ul li:nth-child(2)")
5. // 选取每个父元素下的偶数子元素
6. $("li:nth-child(even)")
8. // 实际应用示例
9. $("tr:nth-child(3n)").css("background-color", "#f0f0f0");  // 每3行设置一次背景色

复制代码

:first-child选取父元素的第一个子元素，:last-child选取父元素的最后一个子元素。

2. // 选取每个<ul>父元素的第一个<li>子元素
3. $("ul li:first-child")
5. // 选取每个<ul>父元素的最后一个<li>子元素
6. $("ul li:last-child")
8. // 实际应用示例
9. $("p:first-child").css("font-weight", "bold");
10. $("p:last-child").css("margin-bottom", "0");

复制代码

:only-child选取父元素的唯一子元素。

2. // 选取作为父元素唯一子元素的<p>元素
3. $("p:only-child")
5. // 实际应用示例
6. $("div:only-child").css("width", "100%");

复制代码

表单过滤方法

这些选择器用于选取不同类型的表单元素。

2. // 选取所有的<input>、<textarea>、<select>和<button>元素
3. $(":input")
5. // 选取所有的文本框
6. $(":text")
8. // 选取所有的密码框
9. $(":password")
11. // 选取所有的单选按钮
12. $(":radio")
14. // 选取所有的复选框
15. $(":checkbox")
17. // 选取所有的提交按钮
18. $(":submit")
20. // 选取所有的图像按钮
21. $(":image")
23. // 选取所有的重置按钮
24. $(":reset")
26. // 选取所有的按钮
27. $(":button")
29. // 选取所有的文件上传域
30. $(":file")
32. // 实际应用示例
33. $(":text").addClass("text-field");
34. $(":password").addClass("password-field");
35. $(":submit").addClass("submit-button");

复制代码

这些选择器用于选取表单元素的不同状态。

2. // 选取所有可用的表单元素
3. $(":enabled")
5. // 选取所有禁用的表单元素
6. $(":disabled")
8. // 选取所有被选中的复选框或单选按钮
9. $(":checked")
11. // 选取所有被选中的<option>元素
12. $(":selected")
14. // 实际应用示例
15. $(":disabled").css("opacity", "0.5");
16. $(":checked").parent().css("background-color", "#ffffcc");
17. $(":selected").each(function() {
18.     alert("已选择: " + $(this).text());
19. });

复制代码

jQuery元素操作技巧

DOM操作

jQuery提供了简单的方法来创建新元素。

2. // 创建一个新的<div>元素
3. var newDiv = $("<div></div>");
5. // 创建带有内容和属性的<div>元素
6. var newDivWithContent = $("<div>", {
7.     "class": "myClass",
8.     "id": "myId",
9.     "text": "这是一个新div",
10.     "click": function() {
11.         alert("点击了新div");
12.     }
13. });
15. // 实际应用示例
16. var newItem = $("<li>", {
17.     "text": "新列表项",
18.     "class": "item",
19.     "click": function() {
20.         $(this).toggleClass("active");
21.     }
22. });
24. $("#myList").append(newItem);

复制代码

jQuery提供了多种方法来插入元素。

2. // 在元素内部末尾插入内容
3. $("#container").append("<p>新段落</p>");
4. $("<p>新段落</p>").appendTo("#container");
6. // 在元素内部开头插入内容
7. $("#container").prepend("<p>新段落</p>");
8. $("<p>新段落</p>").prependTo("#container");
10. // 在元素之后插入内容
11. $("#container").after("<div>新div</div>");
12. $("<div>新div</div>").insertAfter("#container");
14. // 在元素之前插入内容
15. $("#container").before("<div>新div</div>");
16. $("<div>新div</div>").insertBefore("#container");
18. // 实际应用示例 - 动态添加列表项
19. $("#addItem").click(function() {
20.     var itemText = $("#itemInput").val();
21.     if (itemText) {
22.         var newItem = $("<li>", {
23.             "text": itemText,
24.             "class": "list-item"
25.         });
26.         $("#itemList").append(newItem);
27.         $("#itemInput").val("");
28.     }
29. });

复制代码

jQuery允许你替换已存在的元素。

2. // 替换元素
3. $("p.oldParagraph").replaceWith("<div>新div</div>");
4. $("<div>新div</div>").replaceAll("p.oldParagraph");
6. // 实际应用示例
7. $(".old-button").replaceWith("<button class='new-button'>新按钮</button>");

复制代码

jQuery提供了多种方法来删除元素。

2. // 删除元素及其子元素
3. $("#myDiv").remove();
5. // 删除元素的子元素，但保留元素本身
6. $("#myDiv").empty();
8. // 删除匹配元素集合中不符合指定选择器的元素
9. $("p").not(".keep").remove();
11. // 实际应用示例
12. $("#removeButton").click(function() {
13.     $("#itemList li.selected").remove();
14. });

复制代码

jQuery允许你克隆元素。

2. // 克隆元素
3. var clonedElement = $("#myDiv").clone();
5. // 克隆元素及其事件
6. var clonedElementWithEvents = $("#myDiv").clone(true);
8. // 实际应用示例
9. $("#cloneButton").click(function() {
10.     var clonedItem = $("#templateItem").clone(true);
11.     clonedItem.removeAttr("id").show();
12.     $("#itemList").append(clonedItem);
13. });

复制代码

CSS操作

jQuery提供了简单的方法来获取和设置CSS属性。

2. // 获取CSS属性值
3. var color = $("#myDiv").css("color");
5. // 设置单个CSS属性
6. $("#myDiv").css("color", "red");
8. // 设置多个CSS属性
9. $("#myDiv").css({
10.     "color": "red",
11.     "background-color": "yellow",
12.     "font-size": "14px"
13. });
15. // 实际应用示例
16. $("#styleButton").click(function() {
17.     $("#targetDiv").css({
18.         "background-color": "#f0f0f0",
19.         "border": "1px solid #ccc",
20.         "padding": "10px",
21.         "border-radius": "5px"
22.     });
23. });

复制代码

jQuery提供了简单的方法来操作元素的类。

2. // 添加类
3. $("#myDiv").addClass("highlight");
5. // 添加多个类
6. $("#myDiv").addClass("highlight important");
8. // 移除类
9. $("#myDiv").removeClass("highlight");
11. // 移除多个类
12. $("#myDiv").removeClass("highlight important");
14. // 切换类
15. $("#myDiv").toggleClass("highlight");
17. // 实际应用示例
18. $("#toggleButton").click(function() {
19.     $("#targetDiv").toggleClass("highlight");
20.     $(this).text(function(i, text) {
21.         return text === "高亮显示" ? "取消高亮" : "高亮显示";
22.     });
23. });

复制代码

jQuery提供了获取和设置元素尺寸的方法。

2. // 获取宽度
3. var width = $("#myDiv").width();
5. // 设置宽度
6. $("#myDiv").width(200);
8. // 获取高度
9. var height = $("#myDiv").height();
11. // 设置高度
12. $("#myDiv").height(100);
14. // 获取内部宽度（包括padding，不包括border）
15. var innerWidth = $("#myDiv").innerWidth();
17. // 获取内部高度（包括padding，不包括border）
18. var innerHeight = $("#myDiv").innerHeight();
20. // 获取外部宽度（包括padding和border）
21. var outerWidth = $("#myDiv").outerWidth();
23. // 获取外部高度（包括padding和border）
24. var outerHeight = $("#myDiv").outerHeight();
26. // 获取外部宽度（包括padding、border和margin）
27. var outerWidthMargin = $("#myDiv").outerWidth(true);
29. // 获取外部高度（包括padding、border和margin）
30. var outerHeightMargin = $("#myDiv").outerHeight(true);
32. // 实际应用示例
33. $("#resizeButton").click(function() {
34.     var currentWidth = $("#targetDiv").width();
35.     var currentHeight = $("#targetDiv").height();
36.    
37.     $("#targetDiv").width(currentWidth + 50);
38.     $("#targetDiv").height(currentHeight + 30);
39.    
40.     $("#sizeInfo").text("新尺寸: " + $("#targetDiv").width() + "x" + $("#targetDiv").height());
41. });

复制代码

属性操作

jQuery提供了简单的方法来获取和设置元素属性。

2. // 获取属性值
3. var id = $("#myDiv").attr("id");
5. // 设置属性
6. $("#myDiv").attr("title", "这是一个div");
8. // 设置多个属性
9. $("#myDiv").attr({
10.     "title": "这是一个div",
11.     "data-info": "重要信息"
12. });
14. // 移除属性
15. $("#myDiv").removeAttr("title");
17. // 实际应用示例
18. $("#imageGallery img").each(function() {
19.     var altText = $(this).attr("alt") || "图片";
20.     $(this).attr("title", altText);
21. });

复制代码

jQuery提供了data()方法来存储和获取与元素相关的数据。

2. // 存储数据
3. $("#myDiv").data("key", "value");
5. // 获取数据
6. var value = $("#myDiv").data("key");
8. // 存储多个数据
9. $("#myDiv").data({
10.     "name": "John",
11.     "age": 30,
12.     "city": "New York"
13. });
15. // 获取多个数据
16. var data = $("#myDiv").data();
18. // 实际应用示例
19. $(".product-item").click(function() {
20.     var productId = $(this).data("id");
21.     var productName = $(this).data("name");
22.     var productPrice = $(this).data("price");
23.    
24.     $("#selectedProduct").text("已选择: " + productName + " - $" + productPrice);
25.     $("#productId").val(productId);
26. });

复制代码

jQuery提供了val()方法来获取和设置表单元素的值。

2. // 获取表单元素的值
3. var inputValue = $("#myInput").val();
5. // 设置表单元素的值
6. $("#myInput").val("新值");
8. // 获取下拉框的选中值
9. var selectValue = $("#mySelect").val();
11. // 设置下拉框的选中值
12. $("#mySelect").val("option2");
14. // 获取复选框的选中状态
15. var isChecked = $("#myCheckbox").prop("checked");
17. // 设置复选框的选中状态
18. $("#myCheckbox").prop("checked", true);
20. // 获取多个选中的复选框的值
21. var checkedValues = $("input[name='checkboxGroup']:checked").map(function() {
22.     return $(this).val();
23. }).get();
25. // 实际应用示例
26. $("#submitForm").click(function() {
27.     var formData = {
28.         username: $("#username").val(),
29.         email: $("#email").val(),
30.         interests: $("input[name='interests']:checked").map(function() {
31.             return $(this).val();
32.         }).get()
33.     };
34.    
35.     console.log(formData);
36.     // 这里可以添加AJAX提交表单的代码
37. });

复制代码

性能优化建议

缓存jQuery对象

重复使用同一个jQuery选择器会影响性能，最好将jQuery对象缓存起来。

2. // 不好的做法
3. $("#myDiv").css("color", "red");
4. $("#myDiv").addClass("highlight");
5. $("#myDiv").fadeIn();
7. // 好的做法
8. var $myDiv = $("#myDiv");
9. $myDiv.css("color", "red");
10. $myDiv.addClass("highlight");
11. $myDiv.fadeIn();

复制代码

使用链式操作

jQuery支持链式操作，可以减少代码量并提高性能。

2. // 不好的做法
3. $("#myDiv").css("color", "red");
4. $("#myDiv").addClass("highlight");
5. $("#myDiv").fadeIn();
7. // 好的做法
8. $("#myDiv").css("color", "red").addClass("highlight").fadeIn();

复制代码

使用更具体的选择器

更具体的选择器可以提高性能，因为jQuery需要遍历的元素更少。

2. // 不好的做法
3. $(".myClass");
5. // 好的做法
6. $("div.myClass");  // 更具体，只查找div元素
7. $("#container .myClass");  // 在指定容器内查找

复制代码

避免过度使用通用选择器

通用选择器*会匹配所有元素，性能较差，应尽量避免使用。

2. // 不好的做法
3. $("#container *").hide();
5. // 好的做法
6. $("#container").children().hide();

复制代码

使用原生JavaScript方法

对于简单的操作，使用原生JavaScript方法可能更快。

2. // 不好的做法
3. $("#myDiv").attr("id");
5. // 好的做法
6. document.getElementById("myDiv").id;
8. // 不好的做法
9. $("#myDiv").css("display", "none");
11. // 好的做法
12. document.getElementById("myDiv").style.display = "none";

复制代码

使用事件委托

对于动态添加的元素，使用事件委托比直接绑定事件更高效。

2. // 不好的做法 - 直接绑定
3. $(".item").click(function() {
4.     $(this).toggleClass("active");
5. });
7. // 好的做法 - 事件委托
8. $("#itemList").on("click", ".item", function() {
9.     $(this).toggleClass("active");
10. });

复制代码

实际应用案例

动态表格操作

下面是一个完整的动态表格操作示例，包括添加、删除、编辑和排序功能。

2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>动态表格操作示例</title>
8.     <style>
9.         body {
10.             font-family: Arial, sans-serif;
11.             margin: 20px;
12.         }
13.         table {
14.             border-collapse: collapse;
15.             width: 100%;
16.         }
17.         th, td {
18.             border: 1px solid #ddd;
19.             padding: 8px;
20.             text-align: left;
21.         }
22.         th {
23.             background-color: #f2f2f2;
24.             cursor: pointer;
25.         }
26.         tr:nth-child(even) {
27.             background-color: #f9f9f9;
28.         }
29.         tr:hover {
30.             background-color: #f1f1f1;
31.         }
32.         .form-group {
33.             margin-bottom: 10px;
34.         }
35.         .form-group label {
36.             display: inline-block;
37.             width: 100px;
38.         }
39.         .form-group input {
40.             padding: 5px;
41.             width: 200px;
42.         }
43.         button {
44.             padding: 6px 12px;
45.             margin-right: 5px;
46.             cursor: pointer;
47.         }
48.         .edit-mode input {
49.             border: 1px solid #4CAF50;
50.             background-color: #f9f9f9;
51.         }
52.         .notification {
53.             padding: 10px;
54.             margin: 10px 0;
55.             border-radius: 4px;
56.             display: none;
57.         }
58.         .success {
59.             background-color: #dff0d8;
60.             color: #3c763d;
61.         }
62.         .error {
63.             background-color: #f2dede;
64.             color: #a94442;
65.         }
66.     </style>
67. </head>
68. <body>
69.     <h1>动态表格操作示例</h1>
70.    
71.     <div id="notification" class="notification"></div>
72.    
73.     <div class="form-group">
74.         <label for="name">姓名:</label>
75.         <input type="text" id="name" placeholder="输入姓名">
76.     </div>
77.    
78.     <div class="form-group">
79.         <label for="age">年龄:</label>
80.         <input type="number" id="age" placeholder="输入年龄">
81.     </div>
82.    
83.     <div class="form-group">
84.         <label for="email">邮箱:</label>
85.         <input type="email" id="email" placeholder="输入邮箱">
86.     </div>
87.    
88.     <button id="addRow">添加行</button>
89.     <button id="clearForm">清空表单</button>
90.    
91.     <h2>用户数据表</h2>
92.     <table id="dataTable">
93.         <thead>
94.             <tr>
95.                 <th data-sort="name">姓名 ↕</th>
96.                 <th data-sort="age">年龄 ↕</th>
97.                 <th data-sort="email">邮箱 ↕</th>
98.                 <th>操作</th>
99.             </tr>
100.         </thead>
101.         <tbody>
102.             <tr>
103.                 <td>张三</td>
104.                 <td>25</td>
105.                 <td>zhangsan@example.com</td>
106.                 <td>
107.                     <button class="edit-btn">编辑</button>
108.                     <button class="delete-btn">删除</button>
109.                 </td>
110.             </tr>
111.             <tr>
112.                 <td>李四</td>
113.                 <td>30</td>
114.                 <td>lisi@example.com</td>
115.                 <td>
116.                     <button class="edit-btn">编辑</button>
117.                     <button class="delete-btn">删除</button>
118.                 </td>
119.             </tr>
120.             <tr>
121.                 <td>王五</td>
122.                 <td>28</td>
123.                 <td>wangwu@example.com</td>
124.                 <td>
125.                     <button class="edit-btn">编辑</button>
126.                     <button class="delete-btn">删除</button>
127.                 </td>
128.             </tr>
129.         </tbody>
130.     </table>
132.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
133.     <script>
134.         $(document).ready(function() {
135.             // 显示通知
136.             function showNotification(message, type) {
137.                 var $notification = $("#notification");
138.                 $notification.removeClass("success error").addClass(type);
139.                 $notification.text(message);
140.                 $notification.fadeIn();
141.                
142.                 setTimeout(function() {
143.                     $notification.fadeOut();
144.                 }, 3000);
145.             }
146.             
147.             // 添加行
148.             $("#addRow").click(function() {
149.                 var name = $("#name").val().trim();
150.                 var age = $("#age").val().trim();
151.                 var email = $("#email").val().trim();
152.                
153.                 if (!name || !age || !email) {
154.                     showNotification("请填写所有字段", "error");
155.                     return;
156.                 }
157.                
158.                 var $newRow = $("<tr>");
159.                 $newRow.append("<td>" + name + "</td>");
160.                 $newRow.append("<td>" + age + "</td>");
161.                 $newRow.append("<td>" + email + "</td>");
162.                
163.                 var $actions = $("<td>");
164.                 $actions.append("<button class='edit-btn'>编辑</button>");
165.                 $actions.append("<button class='delete-btn'>删除</button>");
166.                 $newRow.append($actions);
167.                
168.                 $("#dataTable tbody").append($newRow);
169.                 clearForm();
170.                 showNotification("行添加成功", "success");
171.             });
172.             
173.             // 清空表单
174.             $("#clearForm").click(function() {
175.                 clearForm();
176.             });
177.             
178.             function clearForm() {
179.                 $("#name").val("");
180.                 $("#age").val("");
181.                 $("#email").val("");
182.             }
183.             
184.             // 删除行 - 使用事件委托
185.             $("#dataTable tbody").on("click", ".delete-btn", function() {
186.                 if (confirm("确定要删除这一行吗？")) {
187.                     $(this).closest("tr").remove();
188.                     showNotification("行删除成功", "success");
189.                 }
190.             });
191.             
192.             // 编辑行 - 使用事件委托
193.             $("#dataTable tbody").on("click", ".edit-btn", function() {
194.                 var $row = $(this).closest("tr");
195.                 var $cells = $row.find("td:not(:last-child)");
196.                
197.                 if ($row.hasClass("edit-mode")) {
198.                     // 保存编辑
199.                     $cells.each(function() {
200.                         var value = $(this).find("input").val();
201.                         $(this).text(value);
202.                     });
203.                     $row.removeClass("edit-mode");
204.                     $(this).text("编辑");
205.                     showNotification("行更新成功", "success");
206.                 } else {
207.                     // 进入编辑模式
208.                     $cells.each(function() {
209.                         var text = $(this).text();
210.                         $(this).html("<input type='text' value='" + text + "'>");
211.                     });
212.                     $row.addClass("edit-mode");
213.                     $(this).text("保存");
214.                 }
215.             });
216.             
217.             // 排序功能
218.             var sortOrder = {};
219.             
220.             $("th[data-sort]").click(function() {
221.                 var column = $(this).data("sort");
222.                 var $tbody = $("#dataTable tbody");
223.                 var $rows = $tbody.find("tr").get();
224.                
225.                 // 切换排序顺序
226.                 sortOrder[column] = sortOrder[column] === "asc" ? "desc" : "asc";
227.                
228.                 // 排序行
229.                 $rows.sort(function(a, b) {
230.                     var aValue = $(a).children("td").eq($(this).index()).text();
231.                     var bValue = $(b).children("td").eq($(this).index()).text();
232.                     
233.                     // 数字比较
234.                     if (!isNaN(aValue) && !isNaN(bValue)) {
235.                         aValue = parseFloat(aValue);
236.                         bValue = parseFloat(bValue);
237.                     }
238.                     
239.                     if (sortOrder[column] === "asc") {
240.                         return aValue > bValue ? 1 : -1;
241.                     } else {
242.                         return aValue < bValue ? 1 : -1;
243.                     }
244.                 }.bind(this));
245.                
246.                 // 重新排列行
247.                 $.each($rows, function(index, row) {
248.                     $tbody.append(row);
249.                 });
250.                
251.                 // 更新排序指示器
252.                 $("th[data-sort]").each(function() {
253.                     if ($(this).data("sort") === column) {
254.                         $(this).text($(this).text().replace(/ ↕| ↑| ↓/, "") +
255.                                     (sortOrder[column] === "asc" ? " ↑" : " ↓"));
256.                     } else {
257.                         $(this).text($(this).text().replace(/ ↕| ↑| ↓/, "") + " ↕");
258.                     }
259.                 });
260.             });
261.         });
262.     </script>
263. </body>
264. </html>

复制代码

这个示例展示了如何使用jQuery实现以下功能：

1. 添加新行到表格
2. 删除表格中的行
3. 编辑表格中的行数据
4. 按列对表格进行排序
5. 表单验证和用户通知
6. 事件委托处理动态添加的元素

图片懒加载

下面是一个图片懒加载的示例，当用户滚动到图片位置时才加载图片，提高页面加载性能。

2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>图片懒加载示例</title>
8.     <style>
9.         body {
10.             font-family: Arial, sans-serif;
11.             margin: 0;
12.             padding: 20px;
13.         }
14.         .container {
15.             max-width: 1200px;
16.             margin: 0 auto;
17.         }
18.         .image-gallery {
19.             display: grid;
20.             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
21.             gap: 20px;
22.         }
23.         .image-item {
24.             border: 1px solid #ddd;
25.             border-radius: 4px;
26.             overflow: hidden;
27.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
28.         }
29.         .image-item img {
30.             width: 100%;
31.             height: 200px;
32.             object-fit: cover;
33.             display: block;
34.             background-color: #f9f9f9;
35.         }
36.         .image-item .caption {
37.             padding: 10px;
38.             text-align: center;
39.         }
40.         .loading {
41.             text-align: center;
42.             padding: 20px;
43.             font-style: italic;
44.             color: #666;
45.         }
46.         .notification {
47.             position: fixed;
48.             bottom: 20px;
49.             right: 20px;
50.             padding: 15px;
51.             background-color: #4CAF50;
52.             color: white;
53.             border-radius: 4px;
54.             box-shadow: 0 2px 10px rgba(0,0,0,0.2);
55.             display: none;
56.             z-index: 1000;
57.         }
58.     </style>
59. </head>
60. <body>
61.     <div class="container">
62.         <h1>图片懒加载示例</h1>
63.         <p>向下滚动页面，当图片进入视口时才会加载。</p>
64.         
65.         <div class="image-gallery">
66.             <!-- 图片将通过JavaScript动态添加 -->
67.         </div>
68.         
69.         <div class="loading" id="loading">加载中...</div>
70.     </div>
71.    
72.     <div class="notification" id="notification"></div>
74.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
75.     <script>
76.         $(document).ready(function() {
77.             // 显示通知
78.             function showNotification(message) {
79.                 var $notification = $("#notification");
80.                 $notification.text(message);
81.                 $notification.fadeIn();
82.                
83.                 setTimeout(function() {
84.                     $notification.fadeOut();
85.                 }, 2000);
86.             }
87.             
88.             // 创建图片项
89.             function createImageItem(index) {
90.                 var $item = $("<div class='image-item'>");
91.                 var $img = $("<img>", {
92.                     "data-src": "https://picsum.photos/seed/img" + index + "/400/300.jpg",
93.                     "alt": "图片 " + index,
94.                     "class": "lazy-load"
95.                 });
96.                 var $caption = $("<div class='caption'>图片 " + index + "</div>");
97.                
98.                 $item.append($img);
99.                 $item.append($caption);
100.                
101.                 return $item;
102.             }
103.             
104.             // 检查元素是否在视口中
105.             function isElementInViewport(el) {
106.                 var rect = el.getBoundingClientRect();
107.                 return (
108.                     rect.top >= 0 &&
109.                     rect.left >= 0 &&
110.                     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
111.                     rect.right <= (window.innerWidth || document.documentElement.clientWidth)
112.                 );
113.             }
114.             
115.             // 加载图片
116.             function loadImages() {
117.                 var $images = $(".lazy-load:not(.loaded)");
118.                 var loadedCount = 0;
119.                
120.                 $images.each(function() {
121.                     if (isElementInViewport(this)) {
122.                         var $img = $(this);
123.                         $img.attr("src", $img.data("src"));
124.                         $img.addClass("loaded");
125.                         loadedCount++;
126.                     }
127.                 });
128.                
129.                 if (loadedCount > 0) {
130.                     showNotification("已加载 " + loadedCount + " 张图片");
131.                 }
132.             }
133.             
134.             // 初始化图片画廊
135.             function initGallery() {
136.                 var $gallery = $(".image-gallery");
137.                
138.                 // 添加初始图片
139.                 for (var i = 1; i <= 12; i++) {
140.                     $gallery.append(createImageItem(i));
141.                 }
142.                
143.                 // 初始加载可见图片
144.                 loadImages();
145.                
146.                 // 滚动时加载图片
147.                 $(window).on("scroll", function() {
148.                     loadImages();
149.                 });
150.                
151.                 // 模拟加载更多图片
152.                 var loading = false;
153.                 $(window).on("scroll", function() {
154.                     if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && !loading) {
155.                         loading = true;
156.                         $("#loading").show();
157.                         
158.                         // 模拟网络延迟
159.                         setTimeout(function() {
160.                             var currentIndex = $(".image-item").length;
161.                             for (var i = currentIndex + 1; i <= currentIndex + 6; i++) {
162.                                 $gallery.append(createImageItem(i));
163.                             }
164.                            
165.                             loadImages();
166.                             $("#loading").hide();
167.                             loading = false;
168.                         }, 1000);
169.                     }
170.                 });
171.             }
172.             
173.             // 初始化
174.             initGallery();
175.         });
176.     </script>
177. </body>
178. </html>

复制代码

这个示例展示了如何使用jQuery实现图片懒加载功能：

1. 创建图片项并设置data-src属性而不是直接设置src
2. 检测元素是否进入视口
3. 当图片进入视口时，将data-src的值赋给src属性，开始加载图片
4. 滚动时持续检查并加载进入视口的图片
5. 实现无限滚动加载更多图片的功能

总结

jQuery元素查询和操作是前端开发的基础技能，掌握这些技巧可以显著提高开发效率。本文从基础选择器到高级过滤方法，全面解析了jQuery元素查找和操作的各种技巧，并通过实际案例展示了这些技巧的应用。

通过学习本文，你应该能够：

1. 熟练使用jQuery的各种选择器，包括基本选择器、层次选择器和各种过滤选择器
2. 掌握jQuery的DOM操作、CSS操作和属性操作方法
3. 了解jQuery性能优化的最佳实践
4. 能够将所学知识应用到实际项目中，解决复杂的交互问题

jQuery虽然已经不再是前端开发的首选库（现在更流行React、Vue等框架），但它的设计思想和API设计仍然值得学习。许多现代框架的设计理念也受到了jQuery的影响。掌握jQuery元素查询技巧，不仅能提高你处理遗留jQuery代码的能力，还能帮助你更好地理解前端开发的基本原理。

希望本文能帮助你成为前端开发高手，在实际项目中更加高效地使用jQuery进行元素查询和操作！

版权声明

1、转载或引用本网站内容(掌握jQuery元素查询技巧提升网页开发效率从基础选择器到高级过滤方法全面解析jQuery元素查找和操作让你成为前端高手)须注明原网址及作者(威震华夏关云长)，并标明本网站网址(https://pixtech.cc/)。

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本文地址: https://pixtech.cc/thread-41634-1-1.html