jQuery 核心 API 与实战应用指南

2.2 层次选择器

• 后代选择器：$('#parent div') (包含所有子孙节点)
• 子选择器：$('#parent > div') (仅直接子节点)
• 相邻兄弟选择器：$('#child + img') (紧接其后)
• 通用兄弟选择器：$('#child ~ img') (同辈节点)

let div1 = $('#parent div');
let div2 = $('#parent > div');
let div4 = $('img + img');

2.3 表单选择器

用于快速定位表单相关元素。

// 匹配 input, textarea, select, button 等
let input = $(':input');

操作元素

1. 属性操作

• attr(): 获取或设置普通属性值。对于布尔属性（如 checked），返回字符串或 undefined。
• prop(): 获取或设置 DOM 属性值。推荐用于布尔类型属性（checked, disabled 等），返回 true/false。

// 固有属性
let name = $('#aa').attr('name');

// 布尔属性对比
let checkAttr = $('#aa').attr('checked'); // "checked"
let checkProp = $('#aa').prop('checked'); // true

// 自定义属性
$('#aa').attr('uname', 'admin');

2. 样式操作

• addClass()/removeClass(): 添加或移除 CSS 类名。
• css(): 设置或获取行内样式。

// 添加样式
$('#1').addClass('green');

// 设置单个样式
$('h3').css('font-size', '20px');

// 设置多个样式
$('h3').css({ 'color': 'blue', 'background': 'red' });

// 移除样式
$('#1').removeClass('green');

3. 内容操作

• html(): 获取或设置元素的 HTML 内容（包含标签）。
• text(): 获取或设置元素的纯文本内容（不包含标签）。
• val(): 获取或设置表单元素的值。

// 设置 HTML 内容
$('#html1').html('<span>年后</span>');

// 设置纯文本
$('#text1').text('<h4>上海</h4>'); // 页面显示 <h4>上海</h4>

// 表单值
let val = $('#o').val();
$('#o').val('你好');

删除与遍历

1. 删除元素

• remove(): 删除元素及其子元素。
• empty(): 清空元素内容，保留标签。

$('.blue').remove();
$('.green').empty();

2. 遍历内容

使用 each() 方法遍历集合中的每个元素。

$('.item').each(function(index, element) {
    console.log(index, $(element));
});

事件处理

1. 加载事件

当 DOM 结构加载完毕后执行，常用简写形式。

$(document).ready(function() {
    console.log('DOM Ready');
});
// 简写
$(function() {
    console.log('DOM Ready');
});

2. 绑定事件

• bind(): 绑定事件处理器。
• click(): 快捷绑定点击事件。

// 绑定点击事件
$('#myButton').on('click', function() {
    console.log('按钮被点击了！');
});

// 简写
$('#myButton').click(function() {
    console.log('按钮被点击了！');
});

AJAX 请求

jQuery 提供了便捷的 AJAX 接口，配置灵活。

$.ajax({
    url: 'https://api.example.com/data',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('成功:', data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('请求失败:', textStatus);
    }
});

注意：参数中 success 是回调函数，确保拼写正确；dataType 指定预期返回的数据类型，有助于自动解析响应。