jQuery的基本语法是什么？ - Riesenzahn - 沸点 - 掘金

3月前

jQuery的基本语法是什么？
jQuery 的基本语法遵循 `$(selector).action()` 模式，核心是通过 CSS 选择器获取 DOM 元素并执行操作。以下是关键语法要点：

### 1. 选择器语法
```javascript
$("p") // 选择所有<p>元素
$("#demo") // 选择id="demo"的元素
$(".test") // 选择class="test"的元素
$("div.test") // 选择class="test"的<div>
```

### 2. 文档就绪事件
```javascript
$(document).ready(function(){
// 页面加载完成后执行的代码
});

// 简写版本（推荐）
$(function(){
// 等同于ready事件
});
```

### 3. 常用方法示例
```javascript
// 修改内容
$("#demo").text("Hello"); // 设置文本
$("#demo").html("<b>Hi</b>");// 设置HTML

// 修改样式
$("p").css("color", "red"); // 单一样式
$("p").css({ // 多样式
"color": "red",
"background": "yellow"
});

// 事件绑定
$("button").click(function(){
alert("Clicked!");
});
```

### 4. 链式调用
```javascript
$("#box")
.css("color", "blue")
.slideUp(200)
.slideDown(200);
```

### 注意事项
1. `$` 是 `jQuery` 的别名，冲突时可用 `jQuery.noConflict()`
2. 选择器返回的是 jQuery 对象，不是原生 DOM
3. 方法调用顺序会影响链式操作结果

> 最佳实践：优先使用 `.on()` 替代 `.click()` 等直接事件方法，便于动态元素处理。现代开发建议结合原生JS或现代框架使用。

展开

今天学到了