jquery 语法

jQuery 语法基础

jQuery 的核心是通过选择器选取 DOM 元素并对其执行操作。基本语法结构为：

$(selector).action()

• $ 是 jQuery 的别名，可用 jQuery 替代。
• selector 用于查找 HTML 元素（基于 CSS 选择器）。
• action() 是对元素执行的操作（如事件、动画等）。

选择器示例

通过 ID、类、标签名等选取元素：

$("#id")         // 通过 ID 选取  
$(".class")      // 通过类名选取  
$("p")           // 通过标签名选取  
$("div.highlight") // 组合选择器  

常见操作

修改内容或属性

$("#demo").text("Hello");    // 修改文本  
$("#demo").html("<b>Hi</b>"); // 修改 HTML  
$("img").attr("src", "new.jpg"); // 修改属性  

事件处理

$("button").click(function() {  
  alert("Clicked!");  
});  

CSS 操作

$("p").css("color", "red");  // 单一样式  
$("p").css({ "color": "red", "font-size": "20px" }); // 多样式  

链式调用

多个操作可链式书写：

$("#box").hide().delay(500).fadeIn();  

文档就绪事件

确保代码在 DOM 加载完成后执行：

$(document).ready(function() {  
  // jQuery 代码  
});  
// 简写形式  
$(function() {  
  // jQuery 代码  
});  

Ajax 请求

发起异步请求示例：

$.ajax({  
  url: "data.json",  
  method: "GET",  
  success: function(data) {  
    console.log(data);  
  }  
});  

注意事项

• 避免重复选择同一元素，可通过变量缓存：

  var $element = $("#box");  
  $element.hide();  

• 使用 .on() 替代已废弃的 .bind() 或 .delegate()。
• 通过 .prop() 操作布尔属性（如 checked），.attr() 操作其他属性。