jquery 调用
jQuery 调用方法
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 的常见调用方式。
引入 jQuery 库
在 HTML 文件中通过 <script> 标签引入 jQuery 库。可以从 CDN 或本地文件加载。
<!-- 通过 CDN 引入 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 通过本地文件引入 -->
<script src="path/to/jquery.min.js"></script>基本语法
jQuery 的核心是通过 $ 或 jQuery 函数选择元素并操作。基本语法为：
$(selector).action();selector 是 CSS 选择器，action() 是对选中元素执行的操作。
常见调用示例
选择元素并修改内容
$("p").text("Hello, jQuery!"); // 修改所有 <p> 元素的内容绑定事件
$("#myButton").click(function() {
alert("Button clicked!");
});修改 CSS
$(".myClass").css("color", "red"); // 将所有 class 为 myClass 的元素文字颜色改为红色Ajax 请求
$.ajax({
url: "https://api.example.com/data",
method: "GET",
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});链式调用
jQuery 支持链式调用，可以在一个语句中执行多个操作。
$("#myDiv")
.css("background-color", "blue")
.height(200)
.fadeIn();文档就绪事件
为确保代码在 DOM 完全加载后执行，将代码包裹在 $(document).ready() 中。
$(document).ready(function() {
// jQuery 代码
});
// 简写形式
$(function() {
// jQuery 代码
});动态加载内容
通过 load() 方法从服务器加载数据并插入到元素中。
$("#content").load("data.html");遍历元素
使用 each() 方法遍历匹配的元素集合。
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});动画效果
jQuery 提供多种动画效果，如 hide()、show()、toggle()、fadeIn()、fadeOut() 等。
$("#box").fadeOut(1000); // 1 秒内淡出通过以上方法，可以灵活使用 jQuery 完成各种前端交互和动态效果。
