jquery调用
jQuery 调用方法
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互的操作。以下是 jQuery 的常见调用方法：
引入 jQuery 库
在 HTML 文件中通过 <script> 标签引入 jQuery 库。可以从 CDN 或本地文件加载：
<!-- 使用 CDN 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 或本地文件引入 -->
<script src="path/to/jquery.min.js"></script>基本语法
jQuery 的核心语法是 $(selector).action()，其中：
$是 jQuery 的别名，也可以使用jQuery。selector用于选择 HTML 元素。action()是对选中元素执行的操作。
// 选择所有 <p> 元素并隐藏
$("p").hide();
// 选择 ID 为 "test" 的元素并修改内容
$("#test").text("Hello, jQuery!");
// 选择 class 为 "demo" 的元素并添加点击事件
$(".demo").click(function() {
alert("Clicked!");
});文档就绪事件
为了确保代码在 DOM 完全加载后执行，使用 $(document).ready() 或简写形式：
$(document).ready(function() {
// jQuery 代码
});
// 简写形式
$(function() {
// jQuery 代码
});常用方法示例
-
修改内容
$("#element").html("<b>New HTML content</b>"); $("#element").text("New text content"); -
修改样式
$("#element").css("color", "red"); $("#element").addClass("highlight"); -
事件处理
$("#button").click(function() { alert("Button clicked!"); }); -
Ajax 请求
$.ajax({ url: "api/data", method: "GET", success: function(response) { console.log(response); }, error: function(error) { console.error(error); } });
链式调用
jQuery 支持链式调用，可以在一个语句中执行多个操作：
$("#element").css("color", "blue").slideUp(2000).slideDown(2000);注意事项
- 确保在调用 jQuery 代码之前正确引入 jQuery 库。
- 使用开发者工具检查是否存在冲突或错误。
- 对于现代项目，可以考虑使用原生 JavaScript 或其他现代框架（如 Vue、React），但 jQuery 在旧项目或简单场景中仍然有用。
