- jQuery是一个快速、简洁并且功能丰富的JavaScript库。它是基于JavaScript开发的，旨在简化HTML文档遍历、事件处理、动画效果和AJAX等常见任务的操作。
- 通过使用jQuery，开发者能够以更简洁的代码实现各种复杂的前端交互效果和功能。它提供了一套易于使用的API，使得选择元素、操作DOM、处理事件、执行动画以及进行AJAX请求变得更加方便和高效。
- jQuery具有跨浏览器兼容性，可以在主流的Web浏览器中运行，并且它的语法简明清晰，易于学习和使用。许多网站和Web应用程序都广泛采用了jQuery来简化前端开发过程，并提升用户体验。
1.选择元素：选择一个或多个DOM元素。
// 选择所有段落元素 $("p"); // 选择ID为"myDiv"的元素 $("#myDiv"); // 选择所有类为"myClass"的元素 $(".myClass");
2.修改文本内容：修改或获取元素的文本内容。
// 获取元素的文本内容 var text = $("#myElement").text(); // 设置元素的文本内容 $("#myElement").text("新文本");
3.修改HTML内容：修改或获取元素的HTML内容。
// 获取元素的HTML内容 var html = $("#myElement").html(); // 设置元素的HTML内容 $("#myElement").html("<strong>新内容</strong>");
4.操作元素属性：修改或获取元素的属性。
// 获取元素的属性值 var src = $("img").attr("src"); // 设置元素的属性值 $("a").attr("href", "https://example.com");
5.修改元素样式：改变元素的样式。
// 隐藏元素 $("#myElement").hide(); // 显示元素 $("#myElement").show(); // 添加或移除类 $("#myElement").addClass("newClass"); $("#myElement").removeClass("oldClass");
6.处理事件：绑定和解绑事件处理程序。
// 在按钮点击时执行函数 $("#myButton").click(function() { // 执行操作 }); // 移除事件处理程序 $("#myButton").off("click");
7.遍历元素：遍历匹配的元素集合。
// 遍历所有段落元素 $("p").each(function() { // 执行遍历操作 });
8.添加和移除元素：添加新元素或移除现有元素。
// 添加新元素 $("#myList").append("<li>New Item</li>"); // 移除元素 $("#oldItem").remove();
9.动画效果：创建动画效果来改变元素的可见性或位置。
// 淡入元素 $("#myElement").fadeIn(); // 淡出元素 $("#myElement").fadeOut(); // 移动元素 $("#myElement").animate({ left: '100px', top: '50px' }, 1000);
10.AJAX请求：通过jQuery执行异步HTTP请求。
$.ajax({ url: 'https://example.com/api/data', method: 'GET', success: function(data) { // 处理返回的数据 }, error: function(error) { // 处理错误 } });
11.添加元素内容：在元素内部添加新内容。
// 在元素末尾添加内容 $("#myElement").append("<p>新内容</p>"); // 在元素前面添加内容 $("#myElement").before("<div>前面的内容</div>");
12.复制和克隆元素：复制或克隆元素。
// 复制元素 var copy = $("#originalElement").clone(); // 克隆元素并插入 $("#myElement").after(copy);
13.表单操作：处理表单元素的值和事件。
// 获取输入框的值 var inputValue = $("input[type='text']").val(); // 提交表单 $("form").submit(function() { // 处理表单提交 });
14.数据存储：在元素上存储和获取数据。
// 存储数据 $("#myElement").data("key", "value"); // 获取存储的数据 var storedValue = $("#myElement").data("key");
15.动态创建元素：动态创建新元素并添加到DOM中。
// 创建新元素 var newElement = $("<div>New Element</div>"); // 添加到页面中 $("#container").append(newElement);
下面是一个使用jQuery实现导航栏收缩的功能实现：
<div class="sidebar"> <ul> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> <li><a href="#">菜单项4</a></li> </ul> </div> <button id="toggleButton">收缩/展开</button>
.sidebar { width: 200px; background-color: #f1f1f1; transition: width 0.3s ease; } .sidebar.collapsed { width: 50px; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 10px; } button { margin-top: 20px; }
$(document).ready(function() { // 点击按钮时切换导航栏收缩状态 $('#toggleButton').click(function() { $('.sidebar').toggleClass('collapsed'); }); });
通过$(document).ready()来确保在文档加载完成后执行相关操作。然后，当点击按钮#toggleButton时，使用.toggleClass()方法在导航栏的容器元素.sidebar上切换collapsed类，从而实现导航栏的收缩和展开效果。
通过设置不同的CSS样式，可以控制导航栏容器元素的宽度和过渡效果，使其在收缩时宽度减小，达到动画效果。
