jQuery - DOM相关

1. 操作文本

console.log($("#t1").html()); // 获取span元素中的内容, 包含html标签
$("#t1").html("<h3>World</h3>"); // 修改span中的内容, 会解析html标签

console.log($("#t1").text()); // 修改span中的内容, 不包含html标签
$("#t1").text("<h3>World</h3>"); // 修改span中的内容, 不会解析html标签

console.log($("#i1").val()); // 获取到input元素的value值
$("#i1").val("bbb"); // 修改input元素的value值

<span id="t1"><h1>Hello</h1></span>
<input id="i1" type="text" value="aaa" />

2. 操作属性

console.log($("#i1").attr("value")); // 获取属性的值
$("#i1").attr("value", "ccc"); // 修改属性的值
$("#i1").removeAttr("value"); // 移除指定属性

处理 checked/disabled/readonly/selected 等属性需要使用prop()
console.log($("#i1").prop("readonly")); // 获取属性的值
$("#i1").prop("readonly", true); // 修改属性的值

<input id="i1" type="text" value="aaa" />

3. 操作元素

// 创建元素
var ele = $("<h1>Hello</h1>");
console.log(ele);

// 给元素添加子元素
$("#txt").append(ele); // 添加到所有子元素末尾
$("#txt").prepend(ele); // 添加到所有子元素开头

// 添加兄弟元素
$("#h").before(ele); // 添加到元素的前面
$("#h").after(ele); // 添加到元素的后面

// 替换元素
$("#h").replaceWith(ele);
$("#h").replaceAll(ele); // 全部替换

// 删除元素
$("#h").remove(); // 删除自己
$("#txt").empty(); // 删除子元素

// 查找元素
console.log($("#h").parent()); // 获取父元素
console.log($("#txt").children()); // 获取子元素

<span id="txt">
    <h1 id="h">jQuery</h1>
    <h1>!!!</h1>
    <span>aaa</span>
</span>

4. 操作CSS

// 获取CSS的值
console.log($("span").css("font-size"));

// 设置CSS的值
$("span").css("font-size", "30px");

// 追加方式设置CSS的值
$("span").css("color", "red").css("background-color", "green");

// JSON方式设置CSS的值
$("span").css({"font-size": "30px", "color": "red"});

// 直接添加class, 这里添加的样式, 会追加在已有的样式之后
$("span").addClass("cls");

// 移除class样式
$("span").removeClass("cls");

<style>
    .cls {
        font-size: 30px;
        color: red;
    }
</style>

<span>Hello,jQuery</span>