jquery代码
以下是关于jQuery代码的常见用法和示例，涵盖基础操作、事件处理、DOM操作等核心功能：
基础语法
jQuery通过$()函数选择元素，支持CSS选择器语法：
// 选择所有<p>元素
$("p").hide();
// 选择class为test的元素
$(".test").css("color", "red");
// 选择id为demo的元素
$("#demo").html("Hello World");事件处理
jQuery简化了事件绑定：
// 点击事件
$("#btn").click(function() {
alert("Button clicked");
});
// 表单提交事件
$("form").submit(function(e) {
e.preventDefault();
console.log("Form submitted");
});DOM操作
常见DOM操作方法：
// 插入内容
$("#container").append("<div>New element</div>");
// 修改属性
$("img").attr("src", "new-image.jpg");
// 遍历元素
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});AJAX请求
简化异步数据请求：
$.ajax({
url: "api/data",
method: "GET",
dataType: "json",
success: function(response) {
$("#result").text(response.message);
},
error: function(xhr, status, error) {
console.error("Error:", error);
}
});动画效果
内置动画方法：
// 显示/隐藏
$("#box").fadeIn(500);
$("#box").slideUp(300);
// 自定义动画
$("#element").animate({
opacity: 0.5,
left: "+=50"
}, 1000);链式调用
jQuery支持方法链式调用：
$("div")
.addClass("highlight")
.css("font-weight", "bold")
.fadeOut(1000);插件扩展
自定义jQuery插件示例：
$.fn.greenify = function() {
this.css("color", "green");
return this; // 保持链式调用
};
$("p").greenify();注意事项
- 使用
$(document).ready()确保DOM加载完成：$(document).ready(function() { // 初始化代码 }); - 现代浏览器已原生支持多数jQuery功能，考虑项目需求决定是否引入jQuery
- jQuery 3.x版本移除了旧版API，需注意兼容性
