jQuery是一个快速、简洁且功能丰富的JavaScript库。
它使HTML文档遍历和操作、事件处理、动画和Ajax等操作变得更加简单，并具有易于使用的API，可以在多种浏览器中工作。jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。
jQuery设计的宗旨是'Write Less，Do More'，即倡导写更少的代码，做更多的事情。它的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
以下是 jQuery 的主要作用，并附带详细代码示例：
1. 文档对象模型（DOM）操作
jQuery 提供了简洁的语法来查找（选择）HTML 元素，并对它们进行操作。
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery DOM 操作</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <p id="myParagraph">Hello, World!</p> <script> // 使用 jQuery 选择器获取元素 var paragraph = $("#myParagraph"); // 修改元素内容 paragraph.text("新的内容"); // 添加新元素 var newElement = $("<p>这是新添加的段落。</p>"); $("body").append(newElement); // 删除元素 paragraph.remove(); // 替换元素 var replacement = $("<p>替换了原内容。</p>"); $("body").replaceWith(replacement); </script> </body> </html>
2. 事件处理
jQuery 简化了 JavaScript 中的事件处理，可以方便地为元素绑定事件。
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 事件处理</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button id="myButton">点击我</button> <script> // 绑定点击事件 $("#myButton").click(function() { alert("按钮被点击了！"); }); // 绑定多个事件 $("#myButton").on({ click: function() { alert("按钮被点击了！"); }, mouseenter: function() { alert("鼠标进入了按钮区域！"); } }); </script> </body> </html>
3. 动画和效果
jQuery 提供了简单易用的动画效果，如淡入淡出、滑动等。
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 动画效果</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #animateBox { width: 100px; height: 100px; background-color: red; margin: 50px; } </style> </head> <body> <div id="animateBox"></div> <script> // 淡入效果 $("#animateBox").fadeIn(2000); // 淡出效果 $("#animateBox").fadeOut(2000); // 滑动效果 $("#animateBox").slideUp(2000); // 自定义动画 $("#animateBox").animate({ left: '+=250', opacity: '0.5', width: 'toggle' }, 5000); </script> </body> </html>
4. Ajax
jQuery 提供了简洁的 Ajax 函数，用于创建异步 HTTP（Ajax）请求。
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Ajax</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="result"></div> <script> $.ajax({ url: "https://api.example.com/data", // 你的API端点 type: "GET", // 请求类型 dataType: "json", // 期望的返回数据类型 success: function(data) { // 请求成功时调用的函数 $("#result").text(JSON.stringify(data));
