jquery语法
jQuery 语法基础
jQuery 语法基于 CSS 选择器,通过简洁的链式调用操作 DOM 元素。核心语法结构为 $(selector).action(),其中 $ 是 jQuery 的别名,selector 用于查找元素,action() 是对元素执行的操作。
// 示例:隐藏所有 <p> 元素
$("p").hide();
选择器使用
jQuery 支持 CSS 1-3 的所有选择器,并扩展了部分自定义选择器:
// ID 选择器
$("#header").css("color", "red");
// 类选择器
$(".item").addClass("active");
// 属性选择器
$("input[type='text']").val("Hello");
事件处理
通过 .on() 或简写方法(如 .click())绑定事件:
// 点击事件
$("#btn").click(function() {
alert("Button clicked");
});
// 动态事件委托
$("#container").on("click", ".dynamic-item", function() {
$(this).toggleClass("selected");
});
DOM 操作
提供丰富的 DOM 操作方法:

// 插入元素
$("#list").append("<li>New Item</li>");
// 修改属性
$("img").attr("src", "new-image.jpg");
// 遍历元素
$("div").each(function(index) {
console.log(index + ": " + $(this).text());
});
AJAX 请求
简化异步数据请求:
$.ajax({
url: "api/data",
method: "GET",
dataType: "json",
success: function(response) {
console.log(response);
}
});
// 简写形式
$.get("api/data", function(response) {
$("#result").html(response);
});
动画效果
内置多种动画方法:

// 基础显示/隐藏
$("#box").fadeIn(500);
// 自定义动画
$("#element").animate({
left: "+=50px",
opacity: 0.5
}, 1000);
链式调用
jQuery 方法通常返回 jQuery 对象,支持链式操作:
$("#content")
.css("color", "blue")
.slideUp(200)
.slideDown(200);
实用工具方法
提供辅助函数简化开发:
// 数组遍历
$.each([1, 2, 3], function(i, val) {
console.log(val);
});
// 深度合并对象
var settings = $.extend({}, defaults, options);
插件扩展
支持通过 $.fn 扩展自定义方法:
$.fn.highlight = function(color) {
this.css("background-color", color || "yellow");
return this;
};
$("p").highlight("green");






