上一篇jQuery笔记中介绍了选择器，会了选择器之后咱就可以操作DOM了，jQuery操作DOM也是很简单的。
1 获取
我们一般常用的获取是：
- text()：获取/修改DOM元素中的文本内容。
- html()：获取/修改DOM元素中的所有内容，包括HTML的标记。
- val()：获取/修改表单字段的值。
- attr()：获取/修改DOM元素的属性。
<!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <p id="p">段落中有<b>B标签</b></p> <p>表单字段：<input id="input" type="text" value="ohoho~~"></p> <a href="https://www.cnblogs.com" id="a">链接</a> <br /> <button id="btn1">显示text</button> <button id="btn2">显示html</button> <button id="btn3">显示val</button> <button id="btn4">显示attr</button> </body> {{--js--}} <script> $(document).ready(function() { $("#btn1").click(function (){ alert("Text：" + $("#p").text()); }); $("#btn2").click(function () { alert("HTML：" + $("#p").html()); }); $("#btn3").click(function () { alert("Val：" + $("#input").val()); }); $("#btn4").click(function () { alert("Attr：" + $("#a").attr("href")); }); }) </script> </html>
2 设置
2.1 普通更改
<!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <p id="p">段落中有<b>B标签</b></p> <p>表单字段：<input id="input" type="text" value="ohoho~~"></p> <a href="https://www.cnblogs.com" id="a">链接</a> <br /> <button id="btn1">更改text</button> <button id="btn2">更改html</button> <button id="btn3">更改val</button> <button id="btn4">更改attr</button> </body> {{--js--}} <script> $(document).ready(function() { $("#btn1").click(function (){ $("#p").text("新的文本内容"); }); $("#btn2").click(function () { $("#p").html("新的文本内容 并包含<b>b标签</b>"); }); $("#btn3").click(function () { $("#input").val("我们正在学jQuery"); }); $("#btn4").click(function () { $("#a").attr("href", "https://www.baidu.com"); }); }) </script> </html>
2.2 添加回调
text()等方法可以接受回调函数，这个回调函数接受两个参数：第一个参数是当前元素的下标，第二个参数是修改之前的值。
<!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <p id="p">段落中有<b>B标签</b></p> <p>表单字段：<input id="input" type="text" value="ohoho~~"></p> <a href="https://www.cnblogs.com" id="a">链接</a> <br /> <button id="btn1">更改text</button> <button id="btn2">更改html</button> <button id="btn3">更改val</button> <button id="btn4">更改attr</button> </body> {{--js--}} <script> $(document).ready(function() { $("#btn1").click(function (){ $("#p").text(function (i, oldValue) { return "这个标签的下标：" + i + "。 " + "旧的文本：" + oldValue; }); }); $("#btn2").click(function () { $("#p").html(function (i, oldValue) { return "这个标签的下标：" + i + "。 " + "旧的HTML：" + oldValue; }); }); $("#btn3").click(function () { $("#input").val(function (i, oldValue) { return i + "新的值：jQuery" + "旧的值：" + oldValue }); }); $("#btn4").click(function () { $("#a").attr("href", function (i, oldValue) { return oldValue + "/sun-kang/"; }); }); }) </script> </html>
2.3 attr属性设置多个值
$("#btn4").click(function () {
$("#a").attr({
"href" : "https://www.baidu.com",
"target" : "_blank"
});
});
3 插入元素
添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
3.1 append和prepend
<!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <p id="p">一些段落</p> <ul id="test"> <li>jQuery</li> </ul> <button id="btn1">点击添加文本</button> <button id="btn2">点击列表项目</button> </body> {{--js--}} <script> $(document).ready(function() { $("#btn1").click(function () { $("#p").prepend("<p> 添加一些文本 </p>"); }); $("#btn2").click(function () { var li = $("<li></li>").text("另一个新的列表项"); $("#test").append("<li>新的列表项 </li>", li); }); }); </script> </html>
3.2 after和before
其实它和append和prepend是不同的，after和before呢是在元素的结束符的后面添加、而append和prepend实在元素的结束符里面添加。还是不明白的可以写一下以下代码，然后看HTML的源代码来看：
<!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <ul id="test"> <li>jQuery</li> </ul> <button id="btn1">after</button> <button id="btn2">append</button> </body> {{--js--}} <script> $(document).ready(function() { $("#btn1").click(function () { var li = $("<li></li>").text("另一个after"); $("#test").after("<li>after </li>", li); }); $("#btn2").click(function () { var li = $("<li></li>").text("另一个append"); $("#test").append("<li>append </li>", li); }); }); </script> </html>
4 删除
jQuery提供两种删除方法：
- empty()：清空一个元素的子元素，但是不删除元素。
- remove()：删除一个元素以及其子元素，可给定选择器过滤。
4.1 remove
<!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <p id="p">一些段落<b>包含一个B标签</b></p> <p class="paragraph">一些段落</p> <p class="paragraph1">另一些段落</p> <p class="paragraph">第三个段落</p> <button id="btn1">点击删除文本</button> <button id="btn2">点击删除文本(过滤)</button> </body> {{--js--}} <script> $(document).ready(function() { $("#btn1").click(function () { $("#p").remove(); }); $("#btn2").click(function () { // 首先取到所有p标签 然后只删除class为paragraph的。 $("p").remove(".paragraph"); }); }); </script> </html>
4.2 empty
<!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div class="demo"> <h1>一些内容</h1> <p>一些内容</p> </div> <button id="btn1">点击清空div</button> </body> {{--js--}} <script> $(document).ready(function() { $("#btn1").click(function () { $(".demo").empty(); }); }); </script> </html>