jquery调用
jQuery 基本调用方法
使用 jQuery 需要先引入库文件,可以通过 CDN 或本地文件加载。以下是一个基本的引入示例:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
选择器与 DOM 操作
jQuery 通过选择器获取元素并操作。$ 符号是 jQuery 的别名,用于选择元素或执行操作:
// 选择所有段落元素并隐藏
$("p").hide();
// 选择 ID 为 myDiv 的元素并修改内容
$("#myDiv").html("新内容");
// 选择类名为 highlight 的元素并添加样式
$(".highlight").css("color", "red");
事件处理
jQuery 简化了事件绑定和处理:
// 点击事件
$("#myButton").click(function() {
alert("按钮被点击");
});
// 表单提交事件
$("#myForm").submit(function(e) {
e.preventDefault();
console.log("表单已提交");
});
AJAX 请求
jQuery 提供了简洁的 AJAX 方法:
// GET 请求
$.get("https://api.example.com/data", function(response) {
console.log("获取的数据:", response);
});
// POST 请求
$.post("https://api.example.com/submit", { name: "John" }, function(response) {
console.log("服务器响应:", response);
});
动画效果
jQuery 内置了多种动画效果:
// 淡入淡出
$("#myElement").fadeIn(1000).delay(500).fadeOut(1000);
// 滑动效果
$("#myPanel").slideUp(500).slideDown(500);
链式调用
jQuery 支持链式调用,可以在一行代码中执行多个操作:
$("#myDiv")
.css("background", "yellow")
.animate({ opacity: 0.5 }, 1000)
.fadeOut(500);
实用工具方法
jQuery 提供了一些实用工具函数:
// 遍历数组
$.each([1, 2, 3], function(index, value) {
console.log(index + ": " + value);
});
// 扩展对象
var settings = { speed: 100 };
$.extend(settings, { color: "blue" });
插件扩展
jQuery 可以通过插件扩展功能:
// 自定义插件示例
$.fn.highlight = function(color) {
return this.css("background-color", color || "yellow");
};
// 使用插件
$("p").highlight("green");






