jQuery 是一个基于 JavaScript 的快速、简洁的库，用于简化 HTML 文档遍历、事件处理、动画和Ajax交互等操作。它由John Resig在2006年创建，并迅速成为Web开发中最流行的JavaScript库之一。
jQuery的设计理念是“write Less, Do More”，即通过提供简洁易读的API来减少开发者编写JavaScript代码的负担，同时增强网页动态效果和用户交互体验。jQuery极大地方便了DOM元素的选择、操作以及事件绑定，使得JavaScript编程更加高效和直观。
核心特性包括：
CSS选择器：jQuery提供了类似CSS的选择器语法来查找HTML元素，如
$('div.myClass')可以获取所有类名为myClass的div元素。DOM操作：jQuery简化了对DOM元素的操作，比如添加、删除、替换和修改元素内容及属性，以及插入新的HTML代码。
事件处理：jQuery允许以统一的方式绑定和解绑多种浏览器兼容的事件，例如点击事件（
.click()）、悬停事件（.hover()）等。动画与特效：jQuery内置了一系列方法来实现各种动画效果，包括淡入淡出（
.fadeIn(),.fadeOut()）、滑动（.slideUp(),.slideDown()）等，并且可以通过链式调用连续执行多个动画。Ajax功能：jQuery极大地简化了异步HTTP请求（Ajax），支持GET、POST等多种请求方式，方便地发送和接收JSON数据。
插件机制：jQuery拥有强大的插件生态系统，开发者可以基于jQuery基础库开发自己的扩展功能，或者使用社区中已有的大量第三方插件。
虽然随着时间推移，现代浏览器原生支持的功能越来越多，而且出现了诸如React、Vue等新的前端框架，但jQuery因其易于学习和广泛的应用场景，至今仍被许多项目采用，尤其对于不依赖复杂组件化或单页应用的场景，jQuery依然是一个高效的选择。
1-jquery节点操作
jQuery在DOM节点操作方面提供了丰富的API，下面以.append()方法为例，展示一个如何使用jQuery来动态添加节点到指定元素中的例子：
假设我们有一个HTML结构如下：
<div id="container">
<!-- 这里将插入新的内容 -->
</div>
我们可以使用jQuery的.append()方法向#container容器中追加一个新的段落（<p>）元素：
$(document).ready(function() {
// 创建一个新的段落元素
var newParagraph = $("<p>Hello, World! This is a dynamically added paragraph.</p>");
// 使用.append()方法将新创建的段落元素追加到ID为'container'的元素内部
$("#container").append(newParagraph);
});
当页面加载完成后，上述JavaScript代码将会执行，结果HTML文档结构会变成：
<div id="container">
<p>Hello, World! This is a dynamically added paragraph.</p>
</div>
同样地，jQuery还提供了其他节点操作的方法，如.prepend()、.after()、.before()等，可以方便地在DOM树的不同位置插入或删除节点。例如：
.prepend(content)：将内容添加到每个匹配元素的开头。.after(content)：在每个匹配元素之后插入内容。.before(content)：在每个匹配元素之前插入内容。
以下是.prepend()方法的一个示例：
$(document).ready(function() {
// 创建一个新的标题元素
var newHeading = $("<h2>Inserted Heading</h2>");
// 使用.prepend()方法将新创建的标题元素插入到ID为'container'的元素内部开头
$("#container").prepend(newHeading);
});
这将会把<h2>Inserted Heading</h2>这个标题元素插入到#container容器内的开始处。
2-jquery案例-节点操作
以下是一个使用jQuery进行节点操作的例子，这个例子中我们将创建一个新的<li>元素，并将其添加到一个<ul>列表的开头：
HTML结构：
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button id="addItem">在开头添加新项</button>
jQuery代码：
$(document).ready(function() {
// 获取要操作的<ul>元素和按钮元素
var myList = $("#myList");
var addItemButton = $("#addItem");
// 给按钮绑定点击事件
addItemButton.click(function() {
// 创建新的<li>元素并设置其文本内容
var newItem = $("<li>New Item</li>");
// 使用prepend方法将新创建的<li>元素添加到<ul>的开头
myList.prepend(newItem);
// 可选：为新添加的元素添加动画效果（例如淡入）
newItem.hide().fadeIn('slow');
});
});
在这个例子中，当用户点击“在开头添加新项”按钮时，jQuery会创建一个新的<li>元素，并通过.prepend()方法将其插入到ID为"myList"的<ul>元素的开始位置。如果需要的话，还可以添加一些动画效果，如上述代码中的淡入效果。
3-jquery的ajax请求
jQuery的$.ajax()方法是用于执行异步HTTP（Ajax）请求的核心函数，以下是一个使用jQuery进行Ajax GET请求的例子：
$(document).ready(function() {
// 定义请求URL和数据处理函数
var url = "https://api.example.com/data";
// 使用$.ajax()发起GET请求
$.ajax({
url: url,
type: "GET", // 请求类型，默认为'GET'，这里为了明确可以显示指定
dataType: "json", // 预期服务器返回的数据类型（如json、xml等）
success: function(data, textStatus, jqXHR) { // 请求成功时调用此函数
console.log("数据获取成功:", data);
// 在这里处理从服务器返回的数据，例如更新页面内容
$("#result").html(data.message); // 假设data对象包含一个message属性
},
error: function(jqXHR, textStatus, errorThrown) { // 请求失败时调用此函数
console.error("数据获取失败:", textStatus, ", 错误信息:", errorThrown);
// 在这里处理错误情况，例如显示错误提示
$("#error-message").text("请求出错，请稍后重试！");
}
});
});
在这个例子中，我们向https://api.example.com/data发送了一个GET请求，并期望服务器返回JSON格式的数据。当请求成功时，我们在success回调函数中处理响应数据，并将结果展示在ID为result的HTML元素中；如果请求失败，则在error回调函数中捕获错误并将其显示在ID为error-message的HTML元素中。
4-jquery案例-ajax卖座
以下是一个使用jQuery的$.ajax()方法实现从服务器获取电影票售卖情况（卖座信息）的例子：
HTML部分：
<div id="ticketSales"></div>
<button id="fetchSales">获取当前卖座信息</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
JavaScript部分（jQuery AJAX请求）：
$(document).ready(function() {
$("#fetchSales").click(function() {
// 当按钮被点击时，发起AJAX请求
$.ajax({
type: "GET", // 请求类型为GET
url: "/api/sales", // 这是后端API接口地址，假设它提供卖座信息
dataType: "json", // 预期返回的数据格式是JSON
success: function(data) { // 如果请求成功，执行此回调函数
var salesInfo = ""; // 初始化一个字符串来保存要展示的内容
// 遍历返回的JSON数据并构建显示内容
$.each(data.sales, function(index, sale) {
salesInfo += "<p>电影名称：" + sale.movieName + "，剩余座位：" + sale.remainingSeats + "</p>";
});
// 将构建好的内容插入到DOM中
$("#ticketSales").html(salesInfo);
},
error: function(xhr, status, error) { // 如果请求失败，执行此回调函数
alert("获取卖座信息时发生错误: " + xhr.status + " " + error);
}
});
});
});
在这个例子中，当用户点击“获取当前卖座信息”按钮时，会触发一个GET类型的AJAX请求到指定的服务器API。如果请求成功，服务器返回的JSON数据会被解析并在页面上动态更新"ticketSales"区域的内容，显示每部电影的名称及其剩余座位数。如果请求过程中出现任何错误，则会弹出警告消息。
5-jquery的jsonp请求
jQuery的JSONP请求通常用于跨域获取数据，因为JSONP利用了浏览器允许跨域加载脚本的特性。以下是一个使用jQuery发起JSONP请求的例子：
$(document).ready(function() {
// JSONP服务端接口URL，通常需要指定一个回调函数名
var url = "https://api.example.com/data?callback=?";
// 使用$.getJSON()方法发起JSONP请求（也可以用$.ajax()方法）
$.getJSON(url, function(data) {
console.log("数据获取成功:", data);
// 在这里处理从服务器返回的数据，例如更新页面内容
$("#result").html(data.message); // 假设data对象包含一个message属性
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.error("数据获取失败:", textStatus, ", 错误信息:", errorThrown);
// 在这里处理错误情况，例如显示错误提示
$("#error-message").text("请求出错，请稍后重试！");
});
});
在这个例子中，我们向https://api.example.com/data发送了一个JSONP GET请求，并且在请求的URL中包含了callback=?，jQuery会自动处理这个特殊的占位符并生成一个全局唯一的回调函数名来接收服务器返回的数据。
当服务器接收到这样的请求时，它应该以JavaScript函数调用的形式返回数据，例如：callbackFunction({"message": "Hello from the server!"})。然后，jQuery会捕获到这个响应并在客户端执行相应的回调函数，从而能够处理跨域传来的JSON数据。
请注意，JSONP只支持GET请求方式，并且依赖于服务器正确地格式化响应结果为可执行的JavaScript代码。如果服务器不支持JSONP或者没有正确处理JSONP请求，那么这个请求将不会成功。
6-jquery的ajax钩子函数
jQuery的Ajax请求提供了多个钩子函数，用于在不同的阶段执行回调函数。以下是一个使用了.ajaxStart()和.ajaxStop()钩子函数的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax Hook Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#loading-indicator {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
z-index: 9999;
text-align: center;
padding-top: 20%;
}
</style>
</head>
<body>
<div id="content">
<!-- Your content here -->
<button id="load-data">Load Data</button>
</div>
<div id="loading-indicator">
<img src="loading.gif" alt="Loading...">
</div>
<script>
$(document).ready(function() {
// 当任何Ajax请求开始时显示加载指示器
$(document).ajaxStart(function() {
$("#loading-indicator").show();
});
// 当所有Ajax请求结束时隐藏加载指示器
$(document).ajaxStop(function() {
$("#loading-indicator").hide();
});
// 绑定按钮点击事件以发起一个Ajax请求
$("#load-data").click(function() {
$.ajax({
url: "/api/data",
type: "GET",
dataType: "json",
success: function(data) {
// 处理数据并更新页面内容
console.log("Data loaded successfully:", data);
// 示例：将数据添加到#content区域
$("#content").append("<p>Data from server: " + JSON.stringify(data) + "</p>");
},
error: function(xhr, status, error) {
console.error("Failed to load data:", status, error);
}
});
});
});
</script>
</body>
</html>
在这个例子中：
.ajaxStart()钩子函数会在任何Ajax请求开始时调用，并显示一个全屏的加载指示器。.ajaxStop()钩子函数会在所有Ajax请求都完成（不论成功或失败）后调用，并隐藏加载指示器。- 当用户点击“Load Data”按钮时，会触发一个GET类型的Ajax请求，请求过程中以及完成后，相应的钩子函数会被执行。
7-jquery案例-loading
在jQuery中实现页面加载时的loading效果，通常涉及以下几个步骤：
- 在HTML中添加一个用于显示加载状态的元素，比如一个div：
<!-- 在body标签内或需要的地方放置loading元素 -->
<div id="loading">
Loading... <!-- 或者可以是加载动画等 -->
</div>
- 编写CSS样式来定位和展示loading提示：
#loading {
position: fixed; /* 或absolute，根据需要设置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8); /* 半透明背景色 */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* 确保它覆盖其他内容 */
}
/* 加载动画样式（例如旋转图标） */
#loading-icon {
animation: spin 1s linear infinite;
/* 具体样式根据你的加载图标定义 */
}
@keyframes spin {
to { transform: rotate(360deg); }
}
- 使用jQuery在页面所有资源加载完毕后隐藏loading元素：
$(window).on('load', function() {
$("#loading").fadeOut("slow"); // 使用jQuery的fadeOut方法淡出loading元素
});
或者如果你希望在Ajax请求完成时隐藏loading效果：
// 假设$.ajax请求
$.ajax({
url: 'your-api-url',
type: 'GET',
beforeSend: function() {
$("#loading").show(); // 在发送请求前显示loading
},
complete: function() {
$("#loading").hide(); // 请求完成后隐藏loading
},
success: function(data) {
// 处理成功返回的数据
},
error: function(xhr, status, error) {
// 处理错误情况
}
});
这样，在页面加载时，用户会看到“Loading…”提示或加载动画，直到页面完全加载或Ajax请求完成时，loading提示将会淡出或隐藏。
8-深浅复制
深复制和浅复制是JavaScript中关于对象复制的概念。以下是一个通过JavaScript实现深复制和浅复制的例子：
// 定义一个包含嵌套对象的原始对象
let originalObject = {
name: "John",
age: 30,
address: {
street: "123 Main St.",
city: "New York"
}
};
// 浅复制例子：
let shallowCopy = {...originalObject}; // 使用ES6扩展运算符进行浅复制
// 深复制例子：使用JSON.parse与JSON.stringify方法实现（此方法仅适用于可序列化的简单对象，不包括函数、循环引用等复杂情况）
let deepCopy = JSON.parse(JSON.stringify(originalObject));
// 修改浅复制后的地址属性
shallowCopy.address.street = "456 Broadway";
// 修改深复制后的地址属性
deepCopy.address.street = "789 Market St.";
console.log(originalObject); // 输出：{name: "John", age: 30, address: {street: "123 Main St.", city: "New York"}}
console.log(shallowCopy); // 输出：{name: "John", age: 30, address: {street: "456 Broadway", city: "New York"}}
console.log(deepCopy); // 输出：{name: "John", age: 30, address: {street: "789 Market St.", city: "New York"}}
// 注意：在原始对象和浅复制对象中，地址属性已经关联，修改其中一个会同时影响另一个
在这个例子中，shallowCopy是对originalObject的浅复制，它们共享同一地址对象的引用，所以当修改shallowCopy中的地址时，originalObject的地址也会被改变。
而deepCopy则是对originalObject的深复制，它创建了原始对象所有层级属性的新副本，因此即使修改deepCopy中的地址，也不会影响到originalObject的地址属性。但请注意，由于使用的是JSON序列化的方式，这种方法只适用于能被JSON序列化的数据类型，对于函数、日期、循环引用等复杂情况无法正确处理。
9-jquery的深浅复制
jQuery中的深浅复制主要通过$.extend()方法实现，该方法可以用于合并对象属性。关于深浅复制的例子如下：
浅复制（Shallow Copy）
var originalObject = {
name: "John",
address: {
street: "123 Main St",
city: "New York"
}
};
// 使用$.extend()进行浅复制
var shallowCopy = $.extend({}, originalObject);
// 改变复制后的对象内部嵌套对象的属性
shallowCopy.address.city = "Los Angeles";
console.log(originalObject); // {name: "John", address: {street: "123 Main St", city: "Los Angeles"}}
console.log(shallowCopy); // {name: "John", address: {street: "123 Main St", city: "Los Angeles"}}
// 注意：由于address是引用类型，所以浅复制时只复制了引用地址，因此更改shallowCopy的address会影响到originalObject的address。
深复制（Deep Copy）
若要进行深复制，需要传递一个额外的参数true给$.extend()以执行深度遍历和复制。
var originalObject = {
name: "John",
address: {
street: "123 Main St",
city: "New York"
}
};
// 使用$.extend(true, {}, originalObject)进行深复制
var deepCopy = $.extend(true, {}, originalObject);
// 改变复制后的对象内部嵌套对象的属性
deepCopy.address.city = "Los Angeles";
console.log(originalObject); // {name: "John", address: {street: "123 Main St", city: "New York"}}
console.log(deepCopy); // {name: "John", address: {street: "123 Main St", city: "Los Angeles"}}
// 注意：因为进行了深度复制，所以更改deepCopy的address属性不会影响到originalObject的address属性。
在上述例子中，深复制确保了原始对象和复制对象之间的嵌套对象完全独立，修改其中一个对象的嵌套属性不会影响另一个对象。而在浅复制中，如果对象包含其他对象或数组，它们之间的关系仍然是共享引用，而非创建新的独立实例。
10-jquery多库并存
jQuery库和其他JavaScript库可能会使用相同的全局变量（如 $ 或 jQuery），这可能导致冲突。为了解决这个问题，jQuery提供了.noConflict()方法来释放对 $ 符号的控制权，以便其他库可以安全地使用它。
以下是一个简单的例子：
假设我们有一个页面同时使用了另一个也依赖 $ 符号的库（例如 Prototype.js）和 jQuery：
<script src="prototype.js"></script>
<script>
// Prototype.js 使用 $ 符号
$('someElement').doSomething();
</script>
<script src="jquery.js"></script>
<script>
// jQuery 会覆盖 $ 符号，为了与 Prototype.js 共存，我们需要恢复原始的 $
var jq = $.noConflict();
// 现在我们可以用 jq 而不是 $ 来调用 jQuery 方法
jq(document).ready(function() {
jq('#myDiv').hide(); // 使用 jq 替换 $
});
</script>
在这个例子中：
- 首先加载了Prototype.js库，这个库可能也使用
$符号。 - 然后加载jQuery库，并立即调用
.noConflict()方法，将$控制权交还给之前占用它的库（在这里是Prototype.js）。 - 为了避免与 Prototype.js 冲突，我们在之后的代码中使用
jq变量来代替$调用 jQuery 的功能。
这样，两个库就可以在一个页面中共存且不会互相影响。
11-jquery扩展机制
jQuery的扩展机制允许开发者向jQuery的核心功能中添加自定义方法，或者扩展jQuery对象（$.fn）以增强对DOM元素的操作能力。下面是一个简单的jQuery扩展例子：
// 扩展 $.fn （即 jQuery 对象）
$.fn.myPlugin = function(options) {
// 插件的默认配置选项
var defaults = {
color: 'red',
duration: 'slow'
};
// 合并用户传递的选项与默认选项
var settings = $.extend({}, defaults, options);
// 遍历当前选择器匹配到的所有元素
return this.each(function() {
var $this = $(this); // 获取当前元素
// 根据选项设置文本颜色和淡入动画
$this.css('color', settings.color).fadeIn(settings.duration);
// 添加点击事件处理程序，扩展了元素的功能
$this.click(function() {
alert('Hello from my custom plugin!');
});
});
};
// 使用自定义插件
$(document).ready(function() {
$('p').myPlugin({
color: 'blue', // 覆盖默认颜色为蓝色
duration: 'fast' // 设置淡入速度为快速
});
});
在这个例子中，我们创建了一个名为myPlugin的jQuery插件，它接受两个选项参数：color用于设置文本颜色，duration用于设置淡入动画的速度。通过调用.each()遍历所有选中的元素，并根据传入的选项设置样式和绑定事件。这样，当我们在文档加载完成后对<p>元素应用这个插件时，它们将按照指定的颜色和速度进行动画效果，并且点击时会弹出提示框。
这种扩展机制使得jQuery库具有极高的灵活性和可定制性，开发者可以根据需求方便地构建和复用各种功能模块。
12-jquery自定义插件-选项卡
以下是一个使用jQuery实现的自定义选项卡插件的例子：
// 自定义选项卡插件代码
(function($) {
$.fn.customTabs = function(options) {
var settings = $.extend({
activeClass: 'active', // 激活选项卡的CSS类名
contentClass: 'tab-content', // 内容区域容器的CSS类名
triggerEvent: 'click' // 触发选项卡切换的事件类型
}, options);
return this.each(function() {
var $tabs = $(this); // 获取当前实例的选项卡元素集合
var $panels = $($tabs.find('a').attr('href')); // 获取第一个对应的内容面板
// 绑定事件
$tabs.on(settings.triggerEvent, 'a', function(e) {
e.preventDefault(); // 阻止链接默认行为
var $this = $(this);
var targetPanelId = $this.attr('href'); // 获取目标内容面板ID
// 移除所有激活状态并隐藏所有内容面板
$tabs.find('a').removeClass(settings.activeClass);
$this.addClass(settings.activeClass);
$panels.hide().removeClass(settings.activeClass);
// 显示目标内容面板，并添加激活状态
$(targetPanelId).show().addClass(settings.activeClass);
});
// 初始状态下显示第一个选项卡和对应内容面板
$tabs.find('a:first').trigger(settings.triggerEvent);
});
};
})(jQuery);
// 使用示例
$(document).ready(function() {
$('.tabs').customTabs();
});
HTML结构示例：
<div class="tabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1" class="tab-content">这是Tab 1的内容...</div>
<div id="tab2" class="tab-content">这是Tab 2的内容...</div>
<div id="tab3" class="tab-content">这是Tab 3的内容...</div>
</div>
在上述例子中，我们创建了一个名为customTabs的jQuery插件，它可以处理具有相应链接标签（<a>）的选项卡元素。当点击选项卡时，它会切换到对应的内容面板。初始状态下，会自动激活第一个选项卡及其对应的内容。
13-jquery插件-轮播
jQuery插件开发中，轮播（Carousel）是一个非常常见的功能。下面是一个简单的jQuery轮播插件示例，它实现了一个基础的图片轮播效果：
(function($) {
// 定义轮播插件
$.fn.carousel = function(options) {
var settings = $.extend({
duration: 1000, // 切换动画时长
interval: 3000, // 图片自动切换间隔时间
items: this.children('img') // 默认获取当前元素下所有图片作为轮播项目
}, options);
// 初始化轮播状态
var currentIndex = 0;
var $items = $(settings.items);
var totalItems = $items.length;
// 显示初始项
$items.eq(currentIndex).show();
// 定义轮播切换函数
function slideTo(index) {
$items.hide().eq(index).fadeIn(settings.duration);
currentIndex = index;
}
// 自动播放
setInterval(function() {
slideTo((currentIndex + 1) % totalItems);
}, settings.interval);
// 绑定上一张和下一张按钮点击事件（假设存在这样的DOM结构）
$('.carousel-prev').click(function() {
slideTo((currentIndex - 1 + totalItems) % totalItems);
});
$('.carousel-next').click(function() {
slideTo((currentIndex + 1) % totalItems);
});
return this; // 为了保持链式调用
};
})(jQuery);
// 使用轮播插件
$(document).ready(function() {
$('#myCarousel').carousel();
});
这个示例中，$.fn.carousel是定义的自定义jQuery插件，它会寻找包含在目标元素内的图片，并实现一个基础的自动轮播功能。用户可以通过选项来自定义动画时长、切换间隔等参数。此外，假设页面上有.carousel-prev和.carousel-next两个按钮分别用于手动触发向前和向后切换。
请注意，这只是一个简化版的示例，实际的轮播插件通常需要处理更多边界条件、添加导航指示器、支持触摸滑动切换等功能，并且可能需要更复杂的CSS样式来完善视觉效果。
14-轮播库-swiper
Swiper是一个功能强大的移动触摸滑动插件，适用于移动端和现代浏览器的轮播、滑块等效果。以下是一个使用Swiper库创建基础轮播图的例子：
首先，请确保在项目中引入Swiper库：
<!-- 引入Swiper样式 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- 引入Swiper JavaScript库 -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
然后，在HTML中设置轮播内容结构：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
最后，通过JavaScript初始化Swiper：
document.addEventListener('DOMContentLoaded', function () {
var swiper = new Swiper('.swiper-container', {
// 参数配置
slidesPerView: 1, // 每次显示的slide数量
spaceBetween: 30, // 滑块之间的间距（可选）
pagination: {
el: '.swiper-pagination', // 分页器元素选择器
clickable: true, // 分页器是否可以点击切换
},
autoplay: {
delay: 3000, // 自动播放间隔时间（可选）
},
loop: true, // 是否开启循环播放
});
});
在这个例子中，我们创建了一个包含三个滑块的基本轮播，并添加了分页器以及自动播放功能。根据需要，您可以自定义Swiper的各种参数以满足不同需求。
15-案例-swiper
Swiper 是一个非常流行的轮播组件，适用于现代浏览器，并且广泛用于各种项目中，包括但不限于 Vue.js、React、Angular 以及原生 JavaScript。以下是一个在原生 JavaScript 中使用 Swiper 的基本示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper 轮播图示例</title>
<!-- 引入 Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<style>
/* 自定义样式 */
.swiper-container {
width: 100%;
height: 400px;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #fff;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 轮播内容 -->
<div class="swiper-slide" style="background-image: url('slide1.jpg')"></div>
<div class="swiper-slide" style="background-image: url('slide2.jpg')"></div>
<div class="swiper-slide" style="background-image: url('slide3.jpg')"></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<!-- 引入 Swiper JavaScript -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
// 初始化 Swiper
var swiper = new Swiper('.swiper-container', {
// 参数配置
loop: true, // 循环播放
autoplay: {
delay: 3000, // 自动切换间隔
},
pagination: {
el: '.swiper-pagination', // 分页器容器选择器
clickable: true,
},
});
</script>
</body>
</html>
在这个示例中，我们首先引入了 Swiper 的 CSS 和 JavaScript 文件，然后创建了一个 .swiper-container 容器，并在其内部放置了一系列的 .swiper-slide 子元素作为轮播的内容。通过 JavaScript 初始化 Swiper 实例并设置了一些基础参数，如循环播放和自动切换等。
请确保替换 'slide1.jpg', 'slide2.jpg', 'slide3.jpg' 等为实际要使用的图片路径。同时，请根据实际情况更新 Swiper CDN 链接以指向最新版本或本地资源文件。
16-jquery案例-滑动选项卡
以下是一个使用jQuery实现滑动选项卡功能的简单示例：
HTML结构：
<div class="tabs">
<div class="tab-buttons">
<button class="tab-btn active" data-tab="tab1">Tab 1</button>
<button class="tab-btn" data-tab="tab2">Tab 2</button>
<button class="tab-btn" data-tab="tab3">Tab 3</button>
</div>
<div id="tab1" class="tab-content active">
Tab 1的内容...
</div>
<div id="tab2" class="tab-content">
Tab 2的内容...
</div>
<div id="tab3" class="tab-content">
Tab 3的内容...
</div>
</div>
CSS样式（可选，用于显示效果）：
.tab-content {
display: none;
padding: 20px;
}
.tab-content.active {
display: block;
}
jQuery代码：
$(document).ready(function() {
// 获取所有的选项卡按钮和内容区域
var $tabButtons = $('.tab-buttons .tab-btn');
var $tabContents = $('.tab-content');
// 绑定选项卡按钮点击事件
$tabButtons.click(function(e) {
e.preventDefault();
// 移除所有激活状态并隐藏所有内容
$tabButtons.removeClass('active');
$(this).addClass('active');
$tabContents.removeClass('active');
// 显示对应的内容区域
var targetTabId = $(this).data('tab');
$('#' + targetTabId).addClass('active');
});
});
在这个例子中，当用户点击一个选项卡按钮时，jQuery会通过data-tab属性找到对应的.tab-content元素，并将它设置为可见，同时将其他选项卡的内容隐藏。这样就实现了滑动选项卡的功能，当切换不同按钮时，内容区域也会相应地滑动或淡入/淡出（取决于具体的CSS动画）。
最后求点赞，求分享，求抱抱…
