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>