jQuery 1.11 完整手册 开发者必备资源 全面覆盖API参考 实例教程 常见问题解答 从入门到精通 助力高效开发 解决实际项目问题

威震华夏关云长

1. jQuery简介与1.11版本概述

jQuery是一个快速、小型且功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等事情变得更加简单，具有易于使用的API，可在多种浏览器上工作。jQuery 1.11版本是1.x系列中的一个重要版本，它专注于兼容性和稳定性，特别适合需要支持旧版浏览器的项目。

1.1 jQuery的优势

• 跨浏览器兼容性：jQuery处理了不同浏览器之间的差异，使开发者不必担心兼容性问题
• 简洁的语法：jQuery提供了简洁易用的API，可以用更少的代码完成更多的工作
• 丰富的插件生态系统：有大量可用的插件，扩展了jQuery的功能
• 强大的功能集：包括DOM操作、事件处理、动画效果和AJAX等功能

1.2 jQuery 1.11版本特点

jQuery 1.11版本发布于2014年，具有以下特点：

• 继续支持IE 6/7/8等旧版浏览器
• 修复了1.10版本中的一些bug
• 性能优化和内存泄漏修复
• 与jQuery 2.x系列并行开发，但保持对旧浏览器的支持

1.3 引入jQuery

在HTML文档中引入jQuery 1.11有两种方式：

方式一：使用CDN

2. <!-- 从jQuery CDN引入 -->
3. <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
5. <!-- 或者使用Google CDN -->
6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
8. <!-- 或者使用Microsoft CDN -->
9. <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>

复制代码

方式二：下载本地文件

2. <!-- 下载到本地后引入 -->
3. <script src="js/jquery-1.11.3.min.js"></script>

复制代码

2. jQuery基础

2.1 jQuery语法基础

jQuery语法是为HTML元素的选取和操作而特别设计的。基本语法是$(selector).action()：

• $：定义jQuery
• selector：查询和查找HTML元素
• action()：执行对元素的操作

文档就绪处理

为了防止文档在完全加载（就绪）之前运行jQuery代码，所有的jQuery函数都应放在文档就绪处理函数中：

2. $(document).ready(function(){
3.    // jQuery代码写在这里
4. });
6. // 简写形式
7. $(function(){
8.    // jQuery代码写在这里
9. });

复制代码

2.2 jQuery选择器

jQuery选择器允许您对HTML元素组或单个元素进行操作。jQuery选择器基于元素的id、类、类型、属性、属性值等”查找”（或选择）HTML元素。

2. // 元素选择器
3. $("p")         // 选取所有<p>元素
5. // ID选择器
6. $("#test")     // 选取id="test"的元素
8. // 类选择器
9. $(".test")     // 选取所有class="test"的元素
11. // 全局选择器
12. $("*")         // 选取所有元素
14. // 多元素选择器
15. $("p.intro")   // 选取所有class="intro"的<p>元素
16. $("p#demo")    // 选取所有id="demo"的<p>元素

复制代码

2. // 后代选择器
3. $("div p")     // 选取<div>元素内的所有<p>元素
5. // 子选择器
6. $("div > p")   // 选取<div>元素的所有直接子元素<p>
8. // 相邻兄弟选择器
9. $("div + p")   // 选取<div>元素之后的下一个<p>元素
11. // 一般兄弟选择器
12. $("div ~ p")   // 选取<div>元素之后的所有兄弟<p>元素

复制代码

2. // :first选择器
3. $("p:first")   // 选取第一个<p>元素
5. // :last选择器
6. $("p:last")    // 选取最后一个<p>元素
8. // :even选择器
9. $("tr:even")   // 选取所有偶数位置的<tr>元素
11. // :odd选择器
12. $("tr:odd")    // 选取所有奇数位置的<tr>元素
14. // :eq(index)选择器
15. $("ul li:eq(3)") // 选取列表中的第四个元素（index从0开始）
17. // :gt(index)选择器
18. $("ul li:gt(3)") // 选取列表中index大于3的元素
20. // :lt(index)选择器
21. $("ul li:lt(3)") // 选取列表中index小于3的元素
23. // :not(selector)选择器
24. $("input:not(:empty)") // 选取所有不为空的input元素

复制代码

2. // [attribute]选择器
3. $("[href]")      // 选取所有带有href属性的元素
5. // [attribute=value]选择器
6. $("[href='#']")  // 选取所有带有href属性且值等于"#"的元素
8. // [attribute!=value]选择器
9. $("[href!='#']") // 选取所有带有href属性且值不等于"#"的元素
11. // [attribute$=value]选择器
12. $("[href$='.jpg']") // 选取所有href属性值以".jpg"结尾的元素
14. // [attribute^=value]选择器
15. $("[href^='https']") // 选取所有href属性值以"https"开头的元素
17. // [attribute*=value]选择器
18. $("[href*='jquery']") // 选取所有href属性值包含"jquery"的元素

复制代码

2. // :input选择器
3. $(":input")     // 选取所有<input>, <textarea>, <select>和<button>元素
5. // :text选择器
6. $(":text")      // 选取所有type="text"的<input>元素
8. // :password选择器
9. $(":password")  // 选取所有type="password"的<input>元素
11. // :radio选择器
12. $(":radio")     // 选取所有type="radio"的<input>元素
14. // :checkbox选择器
15. $(":checkbox")  // 选取所有type="checkbox"的<input>元素
17. // :submit选择器
18. $(":submit")    // 选取所有type="submit"的<input>元素
20. // :reset选择器
21. $(":reset")     // 选取所有type="reset"的<input>元素
23. // :button选择器
24. $(":button")    // 选取所有type="button"的<input>元素和<button>元素
26. // :image选择器
27. $(":image")     // 选取所有type="image"的<input>元素
29. // :file选择器
30. $(":file")      // 选取所有type="file"的<input>元素
32. // :enabled选择器
33. $(":enabled")   // 选取所有启用的表单元素
35. // :disabled选择器
36. $(":disabled")  // 选取所有禁用的表单元素
38. // :selected选择器
39. $(":selected")  // 选取所有被选中的<option>元素
41. // :checked选择器
42. $(":checked")   // 选取所有被选中的复选框和单选按钮

复制代码

2.3 jQuery事件处理

jQuery事件处理方法是jQuery中的核心功能之一。事件处理程序指的是当HTML中发生某些事件时所调用的方法。

2. // click()方法
3. $("p").click(function(){
4.     $(this).hide();
5. });
7. // dblclick()方法
8. $("p").dblclick(function(){
9.     $(this).hide();
10. });
12. // mouseenter()方法
13. $("#p1").mouseenter(function(){
14.     alert("您进入了 p1!");
15. });
17. // mouseleave()方法
18. $("#p1").mouseleave(function(){
19.     alert("再见，您离开了 p1!");
20. });
22. // mousedown()方法
23. $("#p1").mousedown(function(){
24.     alert("鼠标在该段落上按下！");
25. });
27. // mouseup()方法
28. $("#p1").mouseup(function(){
29.     alert("鼠标在段落上松开！");
30. });
32. // hover()方法
33. $("#p1").hover(
34.     function(){
35.         alert("你进入了 p1!");
36.     },
37.     function(){
38.         alert("再见，你现在离开了 p1!");
39.     }
40. );
42. // focus()方法
43. $("input").focus(function(){
44.     $(this).css("background-color","#cccccc");
45. });
47. // blur()方法
48. $("input").blur(function(){
49.     $(this).css("background-color","#ffffff");
50. });

复制代码

on()方法是jQuery 1.7版本引入的，用于绑定事件处理程序，提供了比bind()、live()和delegate()方法更灵活的功能。

2. // 基本用法
3. $("p").on("click", function(){
4.     $(this).hide();
5. });
7. // 绑定多个事件
8. $("p").on({
9.     mouseenter: function(){
10.         $(this).css("background-color", "lightgray");
11.     },
12.     mouseleave: function(){
13.         $(this).css("background-color", "white");
14.     },
15.     click: function(){
16.         $(this).css("background-color", "yellow");
17.     }
18. });
20. // 事件委托
21. $(document).on("click", "p", function(){
22.     $(this).hide();
23. });

复制代码

当事件被触发时，事件对象（event object）会被传递给事件处理函数：

2. $("p").click(function(event){
3.     // 阻止默认行为
4.     event.preventDefault();
5.    
6.     // 阻止事件冒泡
7.     event.stopPropagation();
8.    
9.     // 获取事件类型
10.     alert(event.type); // "click"
11.    
12.     // 获取触发事件的元素
13.     alert(event.target);
14.    
15.     // 获取页面X坐标
16.     alert(event.pageX);
17.    
18.     // 获取页面Y坐标
19.     alert(event.pageY);
20. });

复制代码

jQuery允许你创建自定义事件：

2. // 绑定自定义事件
3. $("p").on("myCustomEvent", function(event, myName, myValue){
4.     $(this).text(myName + ", 你好! " + myValue);
5. });
7. // 触发自定义事件
8. $("button").click(function(){
9.     $("p").trigger("myCustomEvent", ["John", "工程师"]);
10. });

复制代码

2.4 jQuery DOM操作

jQuery提供了多种方法来操作DOM元素，包括获取和设置内容、属性、样式等。

2. // text() - 设置或返回所选元素的文本内容
3. $("#test").text(); // 获取文本内容
4. $("#test").text("Hello world!"); // 设置文本内容
6. // html() - 设置或返回所选元素的内容（包括HTML标记）
7. $("#test").html(); // 获取内容
8. $("#test").html("<b>Hello world!</b>"); // 设置内容
10. // val() - 设置或返回表单字段的值
11. $("#test").val(); // 获取值
12. $("#test").val("John Doe"); // 设置值

复制代码

2. // attr() - 设置或返回属性值
3. $("#w3s").attr("href"); // 获取href属性值
4. $("#w3s").attr("href", "https://www.w3schools.com/jquery/"); // 设置href属性值
6. // 同时设置多个属性
7. $("#w3s").attr({
8.     "href" : "https://www.w3schools.com/jquery/",
9.     "title" : "jQuery Tutorial"
10. });
12. // prop() - 设置或返回属性值（适用于checked、selected、disabled等属性）
13. $("#checkbox1").prop("checked"); // 获取checked属性
14. $("#checkbox1").prop("checked", true); // 设置checked属性
16. // removeAttr() - 移除属性
17. $("#w3s").removeAttr("title");

复制代码

2. // append() - 在被选元素的结尾插入内容
3. $("p").append("Some appended text.");
5. // prepend() - 在被选元素的开头插入内容
6. $("p").prepend("Some prepended text.");
8. // after() - 在被选元素之后插入内容
9. $("img").after("Some text after");
11. // before() - 在被选元素之前插入内容
12. $("img").before("Some text before");

复制代码

2. // remove() - 删除被选元素（及其子元素）
3. $("#div1").remove();
5. // empty() - 从被选元素中删除子元素
6. $("#div1").empty();
8. // remove()方法可接受一个参数，允许您对被删元素进行过滤
9. $("p").remove(".italic"); // 删除所有class="italic"的<p>元素

复制代码

2. // addClass() - 向被选元素添加一个或多个类
3. $("h1, h2, p").addClass("blue");
4. $("div").addClass("important blue");
6. // removeClass() - 从被选元素删除一个或多个类
7. $("h1, h2, p").removeClass("blue");
9. // toggleClass() - 对被选元素进行添加/删除类的切换操作
10. $("h1, h2, p").toggleClass("blue");
12. // hasClass() - 检查被选元素是否包含指定的类
13. $("h1").hasClass("blue"); // 返回true或false

复制代码

2. // css() - 设置或返回样式属性
3. $("p").css("background-color"); // 返回背景颜色
4. $("p").css("background-color", "yellow"); // 设置背景颜色
6. // 设置多个CSS属性
7. $("p").css({
8.     "background-color": "yellow",
9.     "font-size": "200%"
10. });
12. // 尺寸相关方法
13. // width()和height()方法
14. $("#div1").width(); // 返回宽度
15. $("#div1").width(500); // 设置宽度
16. $("#div1").height(); // 返回高度
17. $("#div1").height(500); // 设置高度
19. // innerWidth()和innerHeight()方法
20. $("#div1").innerWidth(); // 返回宽度（包括内边距）
21. $("#div1").innerHeight(); // 返回高度（包括内边距）
23. // outerWidth()和outerHeight()方法
24. $("#div1").outerWidth(); // 返回宽度（包括内边距和边框）
25. $("#div1").outerHeight(); // 返回高度（包括内边距和边框）
26. $("#div1").outerWidth(true); // 返回宽度（包括内边距、边框和外边距）
27. $("#div1").outerHeight(true); // 返回高度（包括内边距、边框和外边距）

复制代码

2. // parent() - 返回被选元素的直接父元素
3. $("span").parent();
5. // parents() - 返回被选元素的所有祖先元素
6. $("span").parents();
8. // parentsUntil() - 返回介于两个给定元素之间的所有祖先元素
9. $("span").parentsUntil("div");
11. // children() - 返回被选元素的所有直接子元素
12. $("div").children();
14. // find() - 返回被选元素的后代元素
15. $("div").find("span");
17. // siblings() - 返回被选元素的所有同胞元素
18. $("h2").siblings();
20. // next() - 返回被选元素的下一个同胞元素
21. $("h2").next();
23. // nextAll() - 返回被选元素的所有跟随的同胞元素
24. $("h2").nextAll();
26. // nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素
27. $("h2").nextUntil("h6");
29. // prev(), prevAll()和prevUntil()方法的工作方式与上面的方法类似，只不过方向相反
31. // first() - 返回被选元素的首个元素
32. $("div p").first();
34. // last() - 返回被选元素的最后一个元素
35. $("div p").last();
37. // eq() - 返回被选元素中带有指定索引号的元素
38. $("p").eq(1);
40. // filter() - 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
41. $("p").filter(".intro");
43. // not() - 返回不匹配标准的所有元素
44. $("p").not(".intro");

复制代码

3. jQuery高级特性

3.1 jQuery AJAX

AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

2. // load()方法 - 从服务器加载数据，并把返回的数据放入被选元素中
3. $("#div1").load("demo_test.txt"); // 加载文件内容
4. $("#div1").load("demo_test.txt #p1"); // 加载文件中id="p1"的元素
6. // $.get()方法 - 通过HTTP GET请求从服务器上请求数据
7. $.get("demo_test.php", function(data, status){
8.     alert("数据: " + data + "\n状态: " + status);
9. });
11. // $.post()方法 - 通过HTTP POST请求从服务器上请求数据
12. $.post("demo_test_post.php",
13.     {
14.         name: "John",
15.         city: "Boston"
16.     },
17.     function(data, status){
18.         alert("数据: " + data + "\n状态: " + status);
19.     }
20. );
22. // $.ajax()方法 - 执行异步HTTP(Ajax)请求
23. $.ajax({
24.     url: "test.html",
25.     context: document.body,
26.     success: function(){
27.         $(this).addClass("done");
28.     }
29. });
31. // 更复杂的$.ajax()示例
32. $.ajax({
33.     type: "POST",
34.     url: "some.php",
35.     data: { name: "John", location: "Boston" },
36.     dataType: "json",
37.     success: function(data){
38.         // 处理返回的数据
39.     },
40.     error: function(xhr, status, error){
41.         // 处理错误
42.     },
43.     complete: function(xhr, status){
44.         // 请求完成后调用的函数
45.     }
46. });

复制代码

jQuery提供了一组用于AJAX事件的全局事件处理程序：

2. // ajaxStart() - 在AJAX请求开始前执行
3. $(document).ajaxStart(function(){
4.     $(this).html("<img src='demo_wait.gif' />");
5. });
7. // ajaxSend() - 在AJAX请求发送前执行
8. $(document).ajaxSend(function(event, xhr, options){
9.     $(this).html("正在发送请求...");
10. });
12. // ajaxSuccess() - 在AJAX请求成功时执行
13. $(document).ajaxSuccess(function(event, xhr, options){
14.     $(this).html("请求成功！");
15. });
17. // ajaxError() - 在AJAX请求失败时执行
18. $(document).ajaxError(function(event, xhr, options, exc){
19.     $(this).html("请求出错：" + xhr.statusText);
20. });
22. // ajaxComplete() - 在AJAX请求完成时执行（无论成功或失败）
23. $(document).ajaxComplete(function(event, xhr, options){
24.     $(this).html("请求完成");
25. });
27. // ajaxStop() - 在所有AJAX请求完成后执行
28. $(document).ajaxStop(function(){
29.     $(this).html("所有请求完成");
30. });

复制代码

3.2 jQuery动画

jQuery提供了一组用于创建自定义动画的函数。

2. // hide()和show()方法
3. $("#hide").click(function(){
4.     $("p").hide();
5. });
6. $("#show").click(function(){
7.     $("p").show();
8. });
10. // toggle()方法
11. $("button").click(function(){
12.     $("p").toggle();
13. });
15. // 可以使用speed参数控制速度
16. $("button").click(function(){
17.     $("p").toggle(1000); // 1000毫秒
18. });
20. // 可以使用callback参数在动画完成后执行函数
21. $("button").click(function(){
22.     $("p").toggle(1000, function(){
23.         alert("动画完成");
24.     });
25. });

复制代码

2. // fadeIn()方法
3. $("button").click(function(){
4.     $("#div1").fadeIn();
5.     $("#div2").fadeIn("slow");
6.     $("#div3").fadeIn(3000);
7. });
9. // fadeOut()方法
10. $("button").click(function(){
11.     $("#div1").fadeOut();
12.     $("#div2").fadeOut("slow");
13.     $("#div3").fadeOut(3000);
14. });
16. // fadeToggle()方法
17. $("button").click(function(){
18.     $("#div1").fadeToggle();
19.     $("#div2").fadeToggle("slow");
20.     $("#div3").fadeToggle(3000);
21. });
23. // fadeTo()方法 - 允许渐变为给定的不透明度（值介于0与1之间）
24. $("button").click(function(){
25.     $("#div1").fadeTo("slow", 0.15);
26.     $("#div2").fadeTo("slow", 0.4);
27.     $("#div3").fadeTo("slow", 0.7);
28. });

复制代码

2. // slideDown()方法
3. $("#flip").click(function(){
4.     $("#panel").slideDown();
5. });
7. // slideUp()方法
8. $("#flip").click(function(){
9.     $("#panel").slideUp();
10. });
12. // slideToggle()方法
13. $("#flip").click(function(){
14.     $("#panel").slideToggle();
15. });

复制代码

2. // animate()方法 - 创建自定义动画
3. $("button").click(function(){
4.     $("div").animate({left: '250px'});
5. });
7. // 操作多个属性
8. $("button").click(function(){
9.     $("div").animate({
10.         left: '250px',
11.         opacity: '0.5',
12.         height: '150px',
13.         width: '150px'
14.     });
15. });
17. // 使用相对值
18. $("button").click(function(){
19.     $("div").animate({
20.         left: '250px',
21.         height: '+=150px',
22.         width: '+=150px'
23.     });
24. });
26. // 使用预定义的值
27. $("button").click(function(){
28.     $("div").animate({
29.         height: 'toggle'
30.     });
31. });
33. // 使用队列功能
34. $("button").click(function(){
35.     var div = $("div");
36.     div.animate({height: '300px', opacity: '0.4'}, "slow");
37.     div.animate({width: '300px', opacity: '0.8'}, "slow");
38.     div.animate({height: '100px', opacity: '0.4'}, "slow");
39.     div.animate({width: '100px', opacity: '0.8'}, "slow");
40. });
42. // 停止动画
43. $("#stop").click(function(){
44.     $("#panel").stop();
45. });

复制代码

3.3 jQuery插件开发

jQuery插件是扩展jQuery功能的一种方式，可以让您创建可重用的代码。

2. // 创建一个简单的插件
3. (function($) {
4.     $.fn.greenify = function() {
5.         this.css("color", "green");
6.         return this; // 支持链式调用
7.     };
8. }(jQuery));
10. // 使用插件
11. $("a").greenify().addClass("greenified");

复制代码

2. (function($) {
3.     $.fn.greenify = function(options) {
4.         // 设置默认值
5.         var settings = $.extend({
6.             color: "#556b2f",
7.             backgroundColor: "white"
8.         }, options);
9.         
10.         // 应用设置
11.         return this.css({
12.             color: settings.color,
13.             backgroundColor: settings.backgroundColor
14.         });
15.     };
16. }(jQuery));
18. // 使用带选项的插件
19. $("div").greenify({
20.     color: "orange"
21. });

复制代码

2. (function($) {
3.     var methods = {
4.         init: function(options) {
5.             // 初始化代码
6.         },
7.         show: function() {
8.             // 显示代码
9.         },
10.         hide: function() {
11.             // 隐藏代码
12.         },
13.         update: function(content) {
14.             // 更新代码
15.         }
16.     };
17.    
18.     $.fn.tooltip = function(method) {
19.         // 方法调用
20.         if (methods[method]) {
21.             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
22.         } else if (typeof method === 'object' || !method) {
23.             return methods.init.apply(this, arguments);
24.         } else {
25.             $.error('Method ' + method + ' does not exist on jQuery.tooltip');
26.         }
27.     };
28. }(jQuery));
30. // 使用带方法的插件
31. $('div').tooltip(); // 初始化
32. $('div').tooltip('show'); // 调用show方法
33. $('div').tooltip('hide'); // 调用hide方法
34. $('div').tooltip('update', '新内容'); // 调用update方法

复制代码

4. 实例教程

4.1 表单验证实例

2. $(document).ready(function() {
3.     // 表单验证
4.     $("#myForm").submit(function(event) {
5.         var isValid = true;
6.         
7.         // 验证用户名
8.         var username = $("#username").val();
9.         if (username.length < 3) {
10.             $("#usernameError").text("用户名必须至少3个字符");
11.             isValid = false;
12.         } else {
13.             $("#usernameError").text("");
14.         }
15.         
16.         // 验证邮箱
17.         var email = $("#email").val();
18.         var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
19.         if (!emailRegex.test(email)) {
20.             $("#emailError").text("请输入有效的邮箱地址");
21.             isValid = false;
22.         } else {
23.             $("#emailError").text("");
24.         }
25.         
26.         // 验证密码
27.         var password = $("#password").val();
28.         if (password.length < 6) {
29.             $("#passwordError").text("密码必须至少6个字符");
30.             isValid = false;
31.         } else {
32.             $("#passwordError").text("");
33.         }
34.         
35.         // 验证确认密码
36.         var confirmPassword = $("#confirmPassword").val();
37.         if (password !== confirmPassword) {
38.             $("#confirmPasswordError").text("两次输入的密码不匹配");
39.             isValid = false;
40.         } else {
41.             $("#confirmPasswordError").text("");
42.         }
43.         
44.         // 如果表单无效，阻止提交
45.         if (!isValid) {
46.             event.preventDefault();
47.         }
48.     });
49.    
50.     // 实时验证
51.     $("#username").on("input", function() {
52.         var username = $(this).val();
53.         if (username.length < 3) {
54.             $("#usernameError").text("用户名必须至少3个字符");
55.         } else {
56.             $("#usernameError").text("");
57.         }
58.     });
59.    
60.     $("#email").on("input", function() {
61.         var email = $(this).val();
62.         var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
63.         if (!emailRegex.test(email)) {
64.             $("#emailError").text("请输入有效的邮箱地址");
65.         } else {
66.             $("#emailError").text("");
67.         }
68.     });
69.    
70.     $("#password").on("input", function() {
71.         var password = $(this).val();
72.         if (password.length < 6) {
73.             $("#passwordError").text("密码必须至少6个字符");
74.         } else {
75.             $("#passwordError").text("");
76.         }
77.         
78.         // 检查确认密码
79.         var confirmPassword = $("#confirmPassword").val();
80.         if (confirmPassword && password !== confirmPassword) {
81.             $("#confirmPasswordError").text("两次输入的密码不匹配");
82.         } else {
83.             $("#confirmPasswordError").text("");
84.         }
85.     });
86.    
87.     $("#confirmPassword").on("input", function() {
88.         var confirmPassword = $(this).val();
89.         var password = $("#password").val();
90.         if (password !== confirmPassword) {
91.             $("#confirmPasswordError").text("两次输入的密码不匹配");
92.         } else {
93.             $("#confirmPasswordError").text("");
94.         }
95.     });
96. });

复制代码

4.2 图片轮播实例

2. $(document).ready(function() {
3.     // 设置轮播间隔时间（毫秒）
4.     var intervalTime = 3000;
5.    
6.     // 获取轮播图片数量
7.     var slideCount = $('#slider ul li').length;
8.    
9.     // 计算轮播宽度
10.     var slideWidth = $('#slider').width();
11.    
12.     // 计算总宽度
13.     var totalWidth = slideCount * slideWidth;
14.    
15.     // 设置轮播列表宽度
16.     $('#slider ul').css('width', totalWidth);
17.    
18.     // 添加导航点
19.     for (var i = 0; i < slideCount; i++) {
20.         $('#slider-nav').append('<a href="#" class="slide-nav" data-index="' + i + '"></a>');
21.     }
22.    
23.     // 激活第一个导航点
24.     $('#slider-nav a:first-child').addClass('active');
25.    
26.     // 自动轮播函数
27.     function autoSlide() {
28.         var currentSlide = parseInt($('#slider ul').css('margin-left')) / slideWidth;
29.         var nextSlide = currentSlide - 1;
30.         
31.         if (nextSlide < -(slideCount - 1)) {
32.             nextSlide = 0;
33.         }
34.         
35.         moveSlider(nextSlide);
36.     }
37.    
38.     // 移动轮播函数
39.     function moveSlider(slideIndex) {
40.         var slidePosition = slideIndex * slideWidth;
41.         $('#slider ul').animate({
42.             'margin-left': -slidePosition
43.         }, 500);
44.         
45.         // 更新导航点状态
46.         $('#slider-nav a').removeClass('active');
47.         $('#slider-nav a[data-index="' + (-slideIndex) + '"]').addClass('active');
48.     }
49.    
50.     // 设置自动轮播定时器
51.     var timer = setInterval(autoSlide, intervalTime);
52.    
53.     // 鼠标悬停时停止轮播
54.     $('#slider').hover(
55.         function() {
56.             clearInterval(timer);
57.         },
58.         function() {
59.             timer = setInterval(autoSlide, intervalTime);
60.         }
61.     );
62.    
63.     // 点击导航点切换轮播
64.     $('#slider-nav a').click(function(e) {
65.         e.preventDefault();
66.         var slideIndex = $(this).data('index');
67.         moveSlider(-slideIndex);
68.     });
69.    
70.     // 点击上一张按钮
71.     $('#prev').click(function(e) {
72.         e.preventDefault();
73.         var currentSlide = parseInt($('#slider ul').css('margin-left')) / slideWidth;
74.         var prevSlide = currentSlide + 1;
75.         
76.         if (prevSlide > 0) {
77.             prevSlide = -(slideCount - 1);
78.         }
79.         
80.         moveSlider(prevSlide);
81.     });
82.    
83.     // 点击下一张按钮
84.     $('#next').click(function(e) {
85.         e.preventDefault();
86.         var currentSlide = parseInt($('#slider ul').css('margin-left')) / slideWidth;
87.         var nextSlide = currentSlide - 1;
88.         
89.         if (nextSlide < -(slideCount - 1)) {
90.             nextSlide = 0;
91.         }
92.         
93.         moveSlider(nextSlide);
94.     });
95.    
96.     // 响应式调整
97.     $(window).resize(function() {
98.         slideWidth = $('#slider').width();
99.         totalWidth = slideCount * slideWidth;
100.         $('#slider ul').css('width', totalWidth);
101.         
102.         // 调整当前位置
103.         var currentSlide = parseInt($('#slider ul').css('margin-left')) / slideWidth;
104.         var newSlidePosition = currentSlide * slideWidth;
105.         $('#slider ul').css('margin-left', newSlidePosition);
106.     });
107. });

复制代码

4.3 AJAX加载内容实例

2. $(document).ready(function() {
3.     // 加载文章列表
4.     function loadArticles(page) {
5.         // 显示加载指示器
6.         $("#loading").show();
7.         
8.         // 发送AJAX请求
9.         $.ajax({
10.             url: "get_articles.php",
11.             type: "GET",
12.             data: { page: page },
13.             dataType: "json",
14.             success: function(response) {
15.                 // 隐藏加载指示器
16.                 $("#loading").hide();
17.                
18.                 // 清空当前文章列表
19.                 $("#articles").empty();
20.                
21.                 // 添加新文章
22.                 if (response.articles.length > 0) {
23.                     $.each(response.articles, function(index, article) {
24.                         var articleHtml = '<div class="article">';
25.                         articleHtml += '<h2>' + article.title + '</h2>';
26.                         articleHtml += '<div class="meta">发布于 ' + article.date + ' 作者：' + article.author + '</div>';
27.                         articleHtml += '<div class="content">' + article.content + '</div>';
28.                         articleHtml += '<div class="actions">';
29.                         articleHtml += '<button class="read-more" data-id="' + article.id + '">阅读更多</button>';
30.                         articleHtml += '<button class="like" data-id="' + article.id + '">点赞 (' + article.likes + ')</button>';
31.                         articleHtml += '</div>';
32.                         articleHtml += '</div>';
33.                         
34.                         $("#articles").append(articleHtml);
35.                     });
36.                     
37.                     // 更新分页
38.                     updatePagination(response.currentPage, response.totalPages);
39.                 } else {
40.                     $("#articles").html("<p>没有找到文章。</p>");
41.                 }
42.             },
43.             error: function(xhr, status, error) {
44.                 // 隐藏加载指示器
45.                 $("#loading").hide();
46.                
47.                 // 显示错误信息
48.                 $("#articles").html("<p>加载文章时出错: " + error + "</p>");
49.             }
50.         });
51.     }
52.    
53.     // 更新分页
54.     function updatePagination(currentPage, totalPages) {
55.         $("#pagination").empty();
56.         
57.         // 上一页按钮
58.         if (currentPage > 1) {
59.             $("#pagination").append('<button class="page-btn" data-page="' + (currentPage - 1) + '">上一页</button>');
60.         }
61.         
62.         // 页码按钮
63.         for (var i = 1; i <= totalPages; i++) {
64.             if (i === currentPage) {
65.                 $("#pagination").append('<button class="page-btn active" data-page="' + i + '">' + i + '</button>');
66.             } else {
67.                 $("#pagination").append('<button class="page-btn" data-page="' + i + '">' + i + '</button>');
68.             }
69.         }
70.         
71.         // 下一页按钮
72.         if (currentPage < totalPages) {
73.             $("#pagination").append('<button class="page-btn" data-page="' + (currentPage + 1) + '">下一页</button>');
74.         }
75.     }
76.    
77.     // 加载第一页
78.     loadArticles(1);
79.    
80.     // 分页按钮点击事件
81.     $(document).on("click", ".page-btn", function() {
82.         var page = $(this).data("page");
83.         loadArticles(page);
84.         
85.         // 滚动到顶部
86.         $("html, body").animate({ scrollTop: 0 }, "slow");
87.     });
88.    
89.     // 阅读更多按钮点击事件
90.     $(document).on("click", ".read-more", function() {
91.         var articleId = $(this).data("id");
92.         
93.         // 显示加载指示器
94.         $("#loading").show();
95.         
96.         // 发送AJAX请求获取完整文章
97.         $.ajax({
98.             url: "get_article.php",
99.             type: "GET",
100.             data: { id: articleId },
101.             dataType: "json",
102.             success: function(response) {
103.                 // 隐藏加载指示器
104.                 $("#loading").hide();
105.                
106.                 // 显示文章详情模态框
107.                 $("#modal-title").text(response.title);
108.                 $("#modal-content").html(response.fullContent);
109.                 $("#modal-meta").text("发布于 " + response.date + " 作者：" + response.author);
110.                 $("#article-modal").show();
111.             },
112.             error: function(xhr, status, error) {
113.                 // 隐藏加载指示器
114.                 $("#loading").hide();
115.                
116.                 // 显示错误信息
117.                 alert("加载文章详情时出错: " + error);
118.             }
119.         });
120.     });
121.    
122.     // 点赞按钮点击事件
123.     $(document).on("click", ".like", function() {
124.         var button = $(this);
125.         var articleId = button.data("id");
126.         
127.         // 发送AJAX请求点赞
128.         $.ajax({
129.             url: "like_article.php",
130.             type: "POST",
131.             data: { id: articleId },
132.             dataType: "json",
133.             success: function(response) {
134.                 if (response.success) {
135.                     // 更新点赞数
136.                     button.text("点赞 (" + response.likes + ")");
137.                     
138.                     // 添加点赞动画效果
139.                     button.addClass("liked");
140.                     setTimeout(function() {
141.                         button.removeClass("liked");
142.                     }, 1000);
143.                 } else {
144.                     alert(response.message);
145.                 }
146.             },
147.             error: function(xhr, status, error) {
148.                 alert("点赞时出错: " + error);
149.             }
150.         });
151.     });
152.    
153.     // 关闭模态框
154.     $(".close-modal").click(function() {
155.         $("#article-modal").hide();
156.     });
157.    
158.     // 点击模态框外部关闭模态框
159.     $(window).click(function(event) {
160.         if ($(event.target).is("#article-modal")) {
161.             $("#article-modal").hide();
162.         }
163.     });
164. });

复制代码

4.4 拖放功能实例

2. $(document).ready(function() {
3.     // 使元素可拖动
4.     $(".draggable").draggable({
5.         revert: "invalid", // 如果不被接受，则返回原位置
6.         cursor: "move",
7.         start: function(event, ui) {
8.             // 拖动开始时的操作
9.             $(this).css("opacity", "0.7");
10.         },
11.         stop: function(event, ui) {
12.             // 拖动结束时的操作
13.             $(this).css("opacity", "1");
14.         }
15.     });
16.    
17.     // 设置放置区域
18.     $(".droppable").droppable({
19.         accept: ".draggable", // 接受的元素
20.         hoverClass: "droppable-hover", // 悬停时的样式
21.         drop: function(event, ui) {
22.             // 放置时的操作
23.             var draggedItem = ui.draggable;
24.             var droppedIn = $(this);
25.             
26.             // 复制拖动的元素到放置区域
27.             var clone = draggedItem.clone();
28.             clone.draggable({
29.                 revert: "invalid",
30.                 cursor: "move"
31.             });
32.             
33.             droppedIn.append(clone);
34.             
35.             // 添加放置效果
36.             droppedIn.addClass("dropped");
37.             setTimeout(function() {
38.                 droppedIn.removeClass("dropped");
39.             }, 500);
40.             
41.             // 更新计数
42.             updateCounts();
43.         },
44.         out: function(event, ui) {
45.             // 离开放置区域时的操作
46.             $(this).removeClass("droppable-hover");
47.         }
48.     });
49.    
50.     // 更新计数函数
51.     function updateCounts() {
52.         // 更新源区域的计数
53.         $("#source-count").text($("#source .draggable").length);
54.         
55.         // 更新目标区域的计数
56.         $("#target-count").text($("#target .draggable").length);
57.     }
58.    
59.     // 初始化计数
60.     updateCounts();
61.    
62.     // 添加重置按钮功能
63.     $("#reset").click(function() {
64.         // 清空目标区域
65.         $("#target").empty();
66.         
67.         // 重置源区域
68.         $("#source").html(
69.             '<div class="draggable" id="item1">项目 1</div>' +
70.             '<div class="draggable" id="item2">项目 2</div>' +
71.             '<div class="draggable" id="item3">项目 3</div>' +
72.             '<div class="draggable" id="item4">项目 4</div>' +
73.             '<div class="draggable" id="item5">项目 5</div>'
74.         );
75.         
76.         // 重新使元素可拖动
77.         $(".draggable").draggable({
78.             revert: "invalid",
79.             cursor: "move",
80.             start: function(event, ui) {
81.                 $(this).css("opacity", "0.7");
82.             },
83.             stop: function(event, ui) {
84.                 $(this).css("opacity", "1");
85.             }
86.         });
87.         
88.         // 更新计数
89.         updateCounts();
90.     });
91.    
92.     // 添加排序功能
93.     $("#source, #target").sortable({
94.         connectWith: ".connected-sortable", // 连接可排序区域
95.         placeholder: "sortable-placeholder", // 占位符样式
96.         tolerance: "pointer", // 指定用于测试项目是否在另一项目上的模式
97.         cursor: "move",
98.         opacity: 0.7,
99.         update: function(event, ui) {
100.             // 排序更新时的操作
101.             updateCounts();
102.         }
103.     }).disableSelection(); // 防止文本选择
104. });

复制代码

5. 常见问题解答

5.1 jQuery与其他库冲突问题

问题：当我在同一页面使用jQuery和其他JavaScript库（如Prototype、MooTools等）时，出现冲突，导致代码无法正常工作。

解决方案：

jQuery使用$作为其别名，但其他库也可能使用$符号。为了解决冲突，jQuery提供了noConflict()方法：

2. // 方法1：完全放弃$控制权
3. jQuery.noConflict();
4. // 现在可以使用jQuery代替$
5. jQuery(document).ready(function(){
6.     jQuery("p").text("Hello, world!");
7. });
9. // 方法2：自定义别名
10. var jq = jQuery.noConflict();
11. // 使用jq作为jQuery的别名
12. jq(document).ready(function(){
13.     jq("p").text("Hello, world!");
14. });
16. // 方法3：在内部使用$
17. jQuery.noConflict();
18. jQuery(document).ready(function($) {
19.     // 在这个函数内部，$仍然指向jQuery
20.     $("p").text("Hello, world!");
21. });
23. // 方法4：使用立即执行函数表达式(IIFE)
24. jQuery.noConflict();
25. (function($) {
26.     $(function() {
27.         // $在这里指向jQuery
28.         $("p").text("Hello, world!");
29.     });
30. })(jQuery);

复制代码

5.2 jQuery选择器性能问题

问题：我的页面中有大量元素，使用jQuery选择器时性能很差，页面响应缓慢。

解决方案：

优化jQuery选择器性能的几种方法：

2. // 1. 使用ID选择器
3. // 快速
4. $("#myId");
6. // 慢速
7. $("div#myId");
9. // 2. 缓存选择器结果
10. // 不好的做法
11. for (var i = 0; i < 100; i++) {
12.     $("#myElement").append(i);
13. }
15. // 好的做法
16. var myElement = $("#myElement");
17. for (var i = 0; i < 100; i++) {
18.     myElement.append(i);
19. }
21. // 3. 使用find()代替上下文选择器
22. // 不好的做法
23. $("div", "#myContainer");
25. // 好的做法
26. $("#myContainer").find("div");
28. // 4. 避免通用选择器
29. // 不好的做法
30. $(".container > *");
32. // 好的做法
33. $(".container").children();
35. // 5. 使用更具体的选择器
36. // 不好的做法
37. $("div.data");
39. // 好的做法
40. $("div.data-table");
42. // 6. 使用原生DOM方法获取元素，然后传递给jQuery
43. // 不好的做法
44. $("#myId .myClass");
46. // 好的做法
47. var element = document.getElementById("myId");
48. var myElements = $(element).find(".myClass");

复制代码

5.3 AJAX请求缓存问题

问题：在IE浏览器中，我的AJAX请求被缓存，导致我获取不到最新的数据。

解决方案：

2. // 方法1：禁用AJAX缓存（全局设置）
3. $.ajaxSetup({
4.     cache: false
5. });
7. // 方法2：在单个AJAX请求中禁用缓存
8. $.ajax({
9.     url: "myurl.php",
10.     cache: false,
11.     success: function(data) {
12.         // 处理数据
13.     }
14. });
16. // 方法3：在URL中添加时间戳或随机数
17. $.ajax({
18.     url: "myurl.php?t=" + new Date().getTime(),
19.     success: function(data) {
20.         // 处理数据
21.     }
22. });
24. // 方法4：使用POST方法代替GET方法
25. $.ajax({
26.     type: "POST",
27.     url: "myurl.php",
28.     success: function(data) {
29.         // 处理数据
30.     }
31. });

复制代码

5.4 事件委托问题

问题：我动态添加了元素到页面中，但是这些元素上的事件处理程序不起作用。

解决方案：

使用事件委托（Event Delegation）来处理动态添加的元素：

2. // 不好的做法 - 直接绑定事件
3. $(".myButton").click(function() {
4.     alert("按钮被点击");
5. });
7. // 动态添加按钮
8. $("#container").append("<button class='myButton'>新按钮</button>");
9. // 这个新按钮不会响应点击事件
11. // 好的做法 - 使用事件委托
12. $("#container").on("click", ".myButton", function() {
13.     alert("按钮被点击");
14. });
16. // 动态添加按钮
17. $("#container").append("<button class='myButton'>新按钮</button>");
18. // 这个新按钮会响应点击事件
20. // 对于jQuery 1.11，也可以使用delegate()方法
21. $("#container").delegate(".myButton", "click", function() {
22.     alert("按钮被点击");
23. });

复制代码

5.5 动画队列问题

问题：当用户快速多次触发动画时，动画效果会排队执行，导致动画效果与用户操作不同步。

解决方案：

2. // 不好的做法
3. $("#myElement").hover(
4.     function() {
5.         $(this).animate({height: "200px"}, 500);
6.     },
7.     function() {
8.         $(this).animate({height: "100px"}, 500);
9.     }
10. );
12. // 好的做法 - 使用stop()方法
13. $("#myElement").hover(
14.     function() {
15.         $(this).stop().animate({height: "200px"}, 500);
16.     },
17.     function() {
18.         $(this).stop().animate({height: "100px"}, 500);
19.     }
20. );
22. // 更好的做法 - 使用stop(true, true)
23. $("#myElement").hover(
24.     function() {
25.         $(this).stop(true, true).animate({height: "200px"}, 500);
26.     },
27.     function() {
28.         $(this).stop(true, true).animate({height: "100px"}, 500);
29.     }
30. );
32. // 或者使用finish()方法（jQuery 1.9+）
33. $("#myElement").hover(
34.     function() {
35.         $(this).finish().animate({height: "200px"}, 500);
36.     },
37.     function() {
38.         $(this).finish().animate({height: "100px"}, 500);
39.     }
40. );

复制代码

5.6 内存泄漏问题

问题：我的单页应用在使用一段时间后变得越来越慢，内存使用量不断增加。

解决方案：

2. // 1. 解除不再需要的事件绑定
3. function setupEvents() {
4.     $("#myButton").on("click", handleClick);
5. }
7. function cleanupEvents() {
8.     $("#myButton").off("click", handleClick);
9. }
11. // 2. 在移除元素前解除事件绑定
12. $("#myElement").remove(); // 这会自动解除事件绑定
14. // 或者
15. $("#myElement").empty(); // 这会解除所有子元素的事件绑定
17. // 3. 使用命名空间事件，便于批量解除
18. $("#myElement").on("click.myNamespace", function() {
19.     // 处理点击事件
20. });
22. // 解除特定命名空间的所有事件
23. $("#myElement").off(".myNamespace");
25. // 4. 避免在循环中创建闭包
26. // 不好的做法
27. for (var i = 0; i < 10; i++) {
28.     $("#myElement" + i).click(function() {
29.         alert("元素 " + i + " 被点击"); // 这总是显示10
30.     });
31. }
33. // 好的做法
34. for (var i = 0; i < 10; i++) {
35.     (function(index) {
36.         $("#myElement" + index).click(function() {
37.             alert("元素 " + index + " 被点击");
38.         });
39.     })(i);
40. }
42. // 5. 使用data()方法存储数据而不是DOM属性
43. // 不好的做法
44. $("#myElement").attr("data-mydata", JSON.stringify(largeObject));
46. // 好的做法
47. $("#myElement").data("mydata", largeObject);
49. // 6. 在不再需要时清除数据
50. $("#myElement").removeData("mydata");

复制代码

5.7 跨域请求问题

问题：当我尝试从不同的域获取数据时，浏览器阻止了我的AJAX请求。

解决方案：

2. // 方法1：使用JSONP
3. $.ajax({
4.     url: "https://example.com/data",
5.     dataType: "jsonp",
6.     success: function(data) {
7.         // 处理数据
8.     }
9. });
11. // 方法2：使用CORS（需要服务器支持）
12. $.ajax({
13.     url: "https://example.com/data",
14.     xhrFields: {
15.         withCredentials: true
16.     },
17.     crossDomain: true,
18.     success: function(data) {
19.         // 处理数据
20.     }
21. });
23. // 方法3：使用服务器代理
24. // 在同域的服务器上创建一个代理脚本，然后通过该脚本请求跨域数据
25. $.ajax({
26.     url: "/proxy.php?url=" + encodeURIComponent("https://example.com/data"),
27.     success: function(data) {
28.         // 处理数据
29.     }
30. });
32. // proxy.php示例代码
33. /*
34. <?php
35. $url = $_GET['url'];
36. echo file_get_contents($url);
37. ?>
38. */

复制代码

6. 最佳实践和性能优化

6.1 代码组织最佳实践

2. // 1. 使用立即执行函数表达式(IIFE)避免全局变量污染
3. (function($) {
4.     // 你的jQuery代码在这里
5.    
6.     // 定义私有变量和函数
7.     var privateVar = "I'm private";
8.    
9.     function privateFunction() {
10.         // 私有函数实现
11.     }
12.    
13.     // 定义公共API
14.     $.fn.myPlugin = function(options) {
15.         // 插件实现
16.     };
17.    
18. })(jQuery);
20. // 2. 使用对象字面量组织代码
21. var myApp = {
22.     settings: {
23.         apiUrl: "https://api.example.com",
24.         timeout: 5000
25.     },
26.    
27.     init: function() {
28.         this.cacheDom();
29.         this.bindEvents();
30.         this.loadData();
31.     },
32.    
33.     cacheDom: function() {
34.         this.$container = $("#container");
35.         this.$button = $("#button");
36.     },
37.    
38.     bindEvents: function() {
39.         var self = this;
40.         this.$button.on("click", function() {
41.             self.handleButtonClick();
42.         });
43.     },
44.    
45.     handleButtonClick: function() {
46.         // 处理按钮点击
47.     },
48.    
49.     loadData: function() {
50.         var self = this;
51.         $.ajax({
52.             url: this.settings.apiUrl,
53.             timeout: this.settings.timeout,
54.             success: function(data) {
55.                 self.processData(data);
56.             },
57.             error: function() {
58.                 self.handleError();
59.             }
60.         });
61.     },
62.    
63.     processData: function(data) {
64.         // 处理数据
65.     },
66.    
67.     handleError: function() {
68.         // 处理错误
69.     }
70. };
72. // 初始化应用
73. $(document).ready(function() {
74.     myApp.init();
75. });
77. // 3. 使用模块模式
78. var Module = (function($) {
79.     // 私有变量
80.     var privateVar = "I'm private";
81.    
82.     // 私有函数
83.     function privateFunction() {
84.         return privateVar;
85.     }
86.    
87.     // 返回公共API
88.     return {
89.         publicVar: "I'm public",
90.         publicFunction: function() {
91.             return privateFunction();
92.         }
93.     };
94. })(jQuery);
96. // 使用模块
97. console.log(Module.publicVar); // "I'm public"
98. console.log(Module.publicFunction()); // "I'm private"
99. console.log(Module.privateVar); // undefined
100. console.log(Module.privateFunction()); // TypeError

复制代码

6.2 性能优化技巧

2. // 1. 缓存jQuery对象
3. // 不好的做法
4. function updateElements() {
5.     $("#element1").addClass("active");
6.     $("#element2").addClass("active");
7.     $("#element3").addClass("active");
8. }
10. // 好的做法
11. function updateElements() {
12.     var $element1 = $("#element1");
13.     var $element2 = $("#element2");
14.     var $element3 = $("#element3");
15.    
16.     $element1.addClass("active");
17.     $element2.addClass("active");
18.     $element3.addClass("active");
19. }
21. // 2. 使用链式调用减少DOM查询
22. // 不好的做法
23. $("#myElement").addClass("active");
24. $("#myElement").css("color", "red");
25. $("#myElement").show();
27. // 好的做法
28. $("#myElement").addClass("active").css("color", "red").show();
30. // 3. 批量DOM操作
31. // 不好的做法
32. for (var i = 0; i < 100; i++) {
33.     $("#container").append("<div>Item " + i + "</div>");
34. }
36. // 好的做法
37. var items = [];
38. for (var i = 0; i < 100; i++) {
39.     items.push("<div>Item " + i + "</div>");
40. }
41. $("#container").append(items.join(""));
43. // 4. 使用文档片段
44. var fragment = document.createDocumentFragment();
45. for (var i = 0; i < 100; i++) {
46.     var div = document.createElement("div");
47.     div.textContent = "Item " + i;
48.     fragment.appendChild(div);
49. }
50. $("#container").append(fragment);
52. // 5. 事件委托
53. // 不好的做法
54. $(".item").click(function() {
55.     // 处理点击
56. });
58. // 好的做法
59. $("#container").on("click", ".item", function() {
60.     // 处理点击
61. });
63. // 6. 减少重绘和回流
64. // 不好的做法
65. var element = document.getElementById("myElement");
66. element.style.width = "100px";
67. element.style.height = "100px";
68. element.style.backgroundColor = "red";
70. // 好的做法
71. var element = document.getElementById("myElement");
72. element.style.cssText = "width: 100px; height: 100px; background-color: red;";
74. // 7. 使用原生方法代替jQuery方法
75. // 不好的做法
76. var id = $("#myElement").attr("id");
78. // 好的做法
79. var id = document.getElementById("myElement").id;
81. // 8. 延迟加载
82. // 不好的做法
83. $(document).ready(function() {
84.     // 加载所有资源
85.     loadAllResources();
86. });
88. // 好的做法
89. $(document).ready(function() {
90.     // 只加载必要的资源
91.     loadEssentialResources();
92.    
93.     // 延迟加载其他资源
94.     setTimeout(loadNonEssentialResources, 2000);
95. });
97. // 9. 使用requestAnimationFrame进行动画
98. // 不好的做法
99. function animate() {
100.     $("#myElement").css("left", "+=1px");
101.     setTimeout(animate, 16);
102. }
104. // 好的做法
105. function animate() {
106.     $("#myElement").css("left", "+=1px");
107.     requestAnimationFrame(animate);
108. }

复制代码

6.3 错误处理和调试

2. // 1. 全局AJAX错误处理
3. $(document).ajaxError(function(event, jqXHR, settings, thrownError) {
4.     console.error("AJAX错误:", thrownError);
5.     console.error("URL:", settings.url);
6.     console.error("状态:", jqXHR.status);
7.     console.error("响应文本:", jqXHR.responseText);
8.    
9.     // 显示用户友好的错误消息
10.     showError("发生了一个错误，请稍后再试。");
11. });
13. // 2. 封装AJAX调用以便统一处理错误
14. function safeAjax(options) {
15.     var defaultOptions = {
16.         error: function(jqXHR, textStatus, errorThrown) {
17.             console.error("AJAX错误:", textStatus, errorThrown);
18.             showError("请求失败，请稍后再试。");
19.         },
20.         timeout: 10000 // 10秒超时
21.     };
22.    
23.     return $.ajax($.extend({}, defaultOptions, options));
24. }
26. // 使用封装的AJAX函数
27. safeAjax({
28.     url: "/api/data",
29.     success: function(data) {
30.         processData(data);
31.     }
32. });
34. // 3. 使用try-catch处理可能的错误
35. function riskyOperation() {
36.     try {
37.         // 可能出错的代码
38.         var result = potentiallyRiskyFunction();
39.         return result;
40.     } catch (error) {
41.         console.error("操作失败:", error);
42.         showError("操作失败，请稍后再试。");
43.         return null;
44.     }
45. }
47. // 4. 使用jQuery的deferred对象处理异步操作
48. function fetchData() {
49.     var deferred = $.Deferred();
50.    
51.     $.ajax({
52.         url: "/api/data",
53.         success: function(data) {
54.             deferred.resolve(data);
55.         },
56.         error: function() {
57.             deferred.reject("获取数据失败");
58.         }
59.     });
60.    
61.     return deferred.promise();
62. }
64. // 使用deferred对象
65. fetchData().done(function(data) {
66.     processData(data);
67. }).fail(function(error) {
68.     showError(error);
69. });
71. // 5. 使用console.log进行调试
72. function debugLog(message) {
73.     if (window.console && window.console.log) {
74.         console.log(message);
75.     }
76. }
78. // 6. 使用jQuery的data方法存储调试信息
79. $("#myElement").data("debug", {
80.     created: new Date(),
81.     createdBy: "John Doe",
82.     purpose: "Example element"
83. });
85. // 检索调试信息
86. var debugInfo = $("#myElement").data("debug");
87. console.log(debugInfo);

复制代码

7. jQuery与其他库的集成

7.1 jQuery与Bootstrap集成

2. // 1. 使用Bootstrap的模态框
3. $(document).ready(function() {
4.     // 显示模态框
5.     $("#showModalBtn").click(function() {
6.         $("#myModal").modal("show");
7.     });
8.    
9.     // 隐藏模态框
10.     $("#hideModalBtn").click(function() {
11.         $("#myModal").modal("hide");
12.     });
13.    
14.     // 监听模态框事件
15.     $("#myModal").on("show.bs.modal", function(e) {
16.         console.log("模态框即将显示");
17.     });
18.    
19.     $("#myModal").on("shown.bs.modal", function(e) {
20.         console.log("模态框已显示");
21.     });
22.    
23.     $("#myModal").on("hide.bs.modal", function(e) {
24.         console.log("模态框即将隐藏");
25.     });
26.    
27.     $("#myModal").on("hidden.bs.modal", function(e) {
28.         console.log("模态框已隐藏");
29.     });
30. });
32. // 2. 使用Bootstrap的标签页
33. $(document).ready(function() {
34.     // 监听标签页切换事件
35.     $('a[data-toggle="tab"]').on("shown.bs.tab", function(e) {
36.         var target = $(e.target).attr("href"); // 激活的标签页
37.         var previous = $(e.relatedTarget).attr("href"); // 上一个标签页
38.         
39.         console.log("切换到: " + target);
40.         console.log("上一个: " + previous);
41.     });
42.    
43.     // 通过JavaScript激活标签页
44.     $("#activateTabBtn").click(function() {
45.         $('#myTabs a[href="#profile"]').tab("show");
46.     });
47. });
49. // 3. 使用Bootstrap的警告框
50. $(document).ready(function() {
51.     // 关闭警告框
52.     $(".alert").alert();
53.    
54.     // 监听关闭事件
55.     $("#myAlert").on("close.bs.alert", function() {
56.         console.log("警告框即将关闭");
57.     });
58.    
59.     $("#myAlert").on("closed.bs.alert", function() {
60.         console.log("警告框已关闭");
61.     });
62.    
63.     // 通过JavaScript关闭警告框
64.     $("#closeAlertBtn").click(function() {
65.         $("#myAlert").alert("close");
66.     });
67. });
69. // 4. 使用Bootstrap的下拉菜单
70. $(document).ready(function() {
71.     // 监听下拉菜单事件
72.     $(".dropdown").on("show.bs.dropdown", function() {
73.         console.log("下拉菜单即将显示");
74.     });
75.    
76.     $(".dropdown").on("shown.bs.dropdown", function() {
77.         console.log("下拉菜单已显示");
78.     });
79.    
80.     $(".dropdown").on("hide.bs.dropdown", function() {
81.         console.log("下拉菜单即将隐藏");
82.     });
83.    
84.     $(".dropdown").on("hidden.bs.dropdown", function() {
85.         console.log("下拉菜单已隐藏");
86.     });
87.    
88.     // 通过JavaScript切换下拉菜单
89.     $("#toggleDropdownBtn").click(function() {
90.         $("#myDropdown").dropdown("toggle");
91.     });
92. });

复制代码

7.2 jQuery与AngularJS集成

2. // 1. 在AngularJS控制器中使用jQuery
3. angular.module("myApp", []).controller("myController", function($scope) {
4.     // 使用jQuery选择元素
5.     $scope.init = function() {
6.         // 等待DOM渲染完成
7.         setTimeout(function() {
8.             // 使用jQuery操作DOM
9.             $("#myElement").addClass("highlight");
10.             
11.             // 使用jQuery绑定事件
12.             $("#myButton").click(function() {
13.                 $scope.$apply(function() {
14.                     $scope.message = "按钮被点击";
15.                 });
16.             });
17.         }, 0);
18.     };
19.    
20.     $scope.init();
21. });
23. // 2. 在AngularJS指令中使用jQuery
24. angular.module("myApp").directive("myDirective", function() {
25.     return {
26.         restrict: "A",
27.         link: function(scope, element, attrs) {
28.             // element是一个jQuery对象（如果jQuery在Angular之前加载）
29.             element.css("color", "red");
30.             
31.             // 使用jQuery事件
32.             element.on("click", function() {
33.                 scope.$apply(function() {
34.                     scope.message = "指令元素被点击";
35.                 });
36.             });
37.         }
38.     };
39. });
41. // 3. 解决jQuery和AngularJS的冲突
42. // 确保在加载Angular之前加载jQuery
43. // 然后Angular会自动使用jQuery而不是jQLite
45. // 4. 在AngularJS服务中使用jQuery
46. angular.module("myApp").service("myService", function($q) {
47.     this.loadData = function() {
48.         var deferred = $q.defer();
49.         
50.         // 使用jQuery的AJAX
51.         $.ajax({
52.             url: "/api/data",
53.             success: function(data) {
54.                 deferred.resolve(data);
55.             },
56.             error: function() {
57.                 deferred.reject("加载数据失败");
58.             }
59.         });
60.         
61.         return deferred.promise;
62.     };
63. });
65. // 在控制器中使用服务
66. angular.module("myApp").controller("anotherController", function($scope, myService) {
67.     myService.loadData().then(function(data) {
68.         $scope.data = data;
69.     }, function(error) {
70.         $scope.error = error;
71.     });
72. });

复制代码

7.3 jQuery与React集成

2. // 1. 在React组件中使用jQuery
3. class MyComponent extends React.Component {
4.     componentDidMount() {
5.         // 在组件挂载后使用jQuery
6.         $(this.refs.myElement).addClass("highlight");
7.         
8.         // 使用jQuery绑定事件
9.         $(document).on("click", this.handleDocumentClick);
10.     }
11.    
12.     componentWillUnmount() {
13.         // 在组件卸载前清理jQuery事件
14.         $(document).off("click", this.handleDocumentClick);
15.     }
16.    
17.     handleDocumentClick = (e) => {
18.         // 检查点击是否在组件外部
19.         if (!$(this.refs.myElement).has(e.target).length) {
20.             this.setState({ isOpen: false });
21.         }
22.     }
23.    
24.     render() {
25.         return (
26.             <div ref="myElement">
27.                 {/* 组件内容 */}
28.             </div>
29.         );
30.     }
31. }
33. // 2. 使用jQuery插件包装React组件
34. class JqueryPluginWrapper extends React.Component {
35.     componentDidMount() {
36.         // 初始化jQuery插件
37.         this.$element = $(this.refs.element);
38.         this.$element.jqueryPluginName(this.props.options);
39.     }
40.    
41.     componentDidUpdate(prevProps) {
42.         // 如果props改变，更新插件
43.         if (prevProps.options !== this.props.options) {
44.             this.$element.jqueryPluginName("destroy");
45.             this.$element.jqueryPluginName(this.props.options);
46.         }
47.     }
48.    
49.     componentWillUnmount() {
50.         // 销毁插件
51.         this.$element.jqueryPluginName("destroy");
52.     }
53.    
54.     render() {
55.         return <div ref="element">{this.props.children}</div>;
56.     }
57. }
59. // 使用包装器
60. function App() {
61.     return (
62.         <JqueryPluginWrapper options={{ speed: 500 }}>
63.             <div>内容</div>
64.         </JqueryPluginWrapper>
65.     );
66. }
68. // 3. 使用React Portals和jQuery模态框
69. class JqueryModal extends React.Component {
70.     componentDidMount() {
71.         // 创建模态框容器
72.         this.modalContainer = document.createElement("div");
73.         document.body.appendChild(this.modalContainer);
74.         
75.         // 使用jQuery初始化模态框
76.         this.$modal = $(this.modalContainer);
77.         this.$modal.html(this.props.children);
78.         this.$modal.modal({
79.             backdrop: "static",
80.             keyboard: false,
81.             show: true
82.         });
83.         
84.         // 监听关闭事件
85.         this.$modal.on("hidden.bs.modal", this.props.onClose);
86.     }
87.    
88.     componentWillUnmount() {
89.         // 销毁模态框
90.         this.$modal.modal("hide");
91.         this.$modal.off("hidden.bs.modal");
92.         document.body.removeChild(this.modalContainer);
93.     }
94.    
95.     render() {
96.         return null; // React Portal不在这里渲染
97.     }
98. }
100. // 使用模态框
101. class App extends React.Component {
102.     state = { showModal: false };
103.    
104.     openModal = () => {
105.         this.setState({ showModal: true });
106.     }
107.    
108.     closeModal = () => {
109.         this.setState({ showModal: false });
110.     }
111.    
112.     render() {
113.         return (
114.             <div>
115.                 <button onClick={this.openModal}>打开模态框</button>
116.                 {this.state.showModal && (
117.                     <JqueryModal onClose={this.closeModal}>
118.                         <div className="modal-dialog">
119.                             <div className="modal-content">
120.                                 <div className="modal-header">
121.                                     <h4 className="modal-title">jQuery模态框</h4>
122.                                 </div>
123.                                 <div className="modal-body">
124.                                     <p>这是一个使用jQuery和React的模态框</p>
125.                                 </div>
126.                                 <div className="modal-footer">
127.                                     <button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
128.                                 </div>
129.                             </div>
130.                         </div>
131.                     </JqueryModal>
132.                 )}
133.             </div>
134.         );
135.     }
136. }

复制代码

8. 总结

jQuery 1.11是一个功能强大且稳定的JavaScript库，它为开发者提供了简洁易用的API，使HTML文档遍历和操作、事件处理、动画和Ajax等任务变得更加简单。本手册全面覆盖了jQuery 1.11的各个方面，从基础的选择器、事件处理、DOM操作到高级的AJAX、动画和插件开发。

通过学习本手册，你应该已经掌握了：

1. jQuery的基本语法和核心概念
2. 各种选择器的使用方法和性能考虑
3. 事件处理机制和最佳实践
4. DOM操作的全面技术
5. AJAX请求的处理和错误处理
6. 动画效果的创建和控制
7. 插件开发的方法和模式
8. 常见问题的解决方案
9. 性能优化和最佳实践
10. 与其他库的集成技巧

在实际项目开发中，jQuery 1.11可以帮助你：

• 提高开发效率，减少代码量
• 解决跨浏览器兼容性问题
• 创建丰富的用户交互体验
• 简化复杂的DOM操作和事件处理
• 实现动态内容加载和表单验证
• 开发自定义插件扩展功能

尽管现代前端框架如React、Vue和Angular等已经成为主流，但jQuery仍然在许多现有项目和特定场景中发挥着重要作用。掌握jQuery 1.11的知识和技能，将使你能够更好地维护和开发基于jQuery的应用程序。

最后，记住学习是一个持续的过程。不断实践、探索和分享你的经验，你将能够更加熟练地使用jQuery 1.11，并在实际项目中发挥其最大的价值。

版权声明

1、转载或引用本网站内容(jQuery 1.11 完整手册 开发者必备资源 全面覆盖API参考 实例教程 常见问题解答 从入门到精通 助力高效开发 解决实际项目问题)须注明原网址及作者(威震华夏关云长)，并标明本网站网址(https://pixtech.cc/)。

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

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

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