17-DOM-操作文本
-
常用方法
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作文本</title> </head> <body> <div id="div">我是div</div> <input type="button" id="btn1" value="获取div的文本"> <input type="button" id="btn2" value="设置div的文本"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //1. html() 获取标签的文本内容 $("#btn1").click(function(){ //获取div标签的文本内容 let value = $("#div").html(); alert(value); }); //2. html(value) 设置标签的文本内容,解析标签 $("#btn2").click(function(){ //设置div标签的文本内容 //$("#div").html("我真的是div"); $("#div").html("<b>我真的是div</b>"); }); </script> </html>
18-DOM-操作对象
-
常用方法
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作对象</title> </head> <body> <div id="div"></div> <input type="button" id="btn1" value="添加一个span到div"> <br><br><br> <input type="button" id="btn2" value="将加油添加到城市列表最下方"> <input type="button" id="btn3" value="将加油添加到城市列表最上方"> <input type="button" id="btn4" value="将雄起添加到上海下方"> <input type="button" id="btn5" value="将雄起添加到上海上方"> <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">广州</li> <li id="sz">深圳</li> </ul> <ul id="desc"> <li id="jy">加油</li> <li id="xq">雄起</li> </ul> <br><br><br> <input type="button" id="btn6" value="将雄起删除"> <input type="button" id="btn7" value="将描述列表全部删除"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> /* 1. $("元素") 创建指定元素 2. append(element) 添加成最后一个子元素,由添加者对象调用 3. appendTo(element) 添加成最后一个子元素,由被添加者对象调用 4. prepend(element) 添加成第一个子元素,由添加者对象调用 5. prependTo(element) 添加成第一个子元素,由被添加者对象调用 6. before(element) 添加到当前元素的前面,两者之间是兄弟关系,由添加者对象调用 7. after(element) 添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用 8. remove() 删除指定元素(自己移除自己) 9. empty() 清空指定元素的所有子元素 */ // 按钮一:添加一个span到div $("#btn1").click(function(){ let span = $("<span>span</span>"); $("#div").append(span); }); //按钮二:将加油添加到城市列表最下方 $("#btn2").click(function(){ //$("#city").append($("#jy")); $("#jy").appendTo($("#city")); }); //按钮三:将加油添加到城市列表最上方 $("#btn3").click(function(){ //$("#city").prepend($("#jy")); $("#jy").prependTo($("#city")); }); //按钮四:将雄起添加到上海下方 $("#btn4").click(function(){ $("#sh").after($("#xq")); }); //按钮五:将雄起添加到上海上方 $("#btn5").click(function(){ $("#sh").before($("#xq")); }); //按钮六:将雄起删除 $("#btn6").click(function(){ $("#xq").remove(); }); //按钮七:将描述列表全部删除 $("#btn7").click(function(){ $("#desc").empty(); }); </script> </html>
19-DOM-操作样式
-
常用方法
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作样式</title> <style> .cls1{ background: pink; height: 30px; } </style> </head> <body> <div style="border: 1px solid red;" id="div">我是div</div> <input type="button" id="btn1" value="获取div的样式"> <input type="button" id="btn2" value="设置div的背景色为蓝色"> <br><br><br> <input type="button" id="btn3" value="给div设置cls1样式"> <input type="button" id="btn4" value="给div删除cls1样式"> <input type="button" id="btn5" value="给div设置或删除cls1样式"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> // 1.css(name) 获取css样式 $("#btn1").click(function(){ alert($("#div").css("border")); }); // 2.css(name,value) 设置CSS样式 $("#btn2").click(function(){ $("#div").css("background","blue"); }); // 3.addClass(value) 给指定的对象添加样式类名 $("#btn3").click(function(){ $("#div").addClass("cls1"); }); // 4.removeClass(value) 给指定的对象删除样式类名 $("#btn4").click(function(){ $("#div").removeClass("cls1"); }); // 5.toggleClass(value) 如果没有样式类名,则添加。如果有,则删除 $("#btn5").click(function(){ $("#div").toggleClass("cls1"); }); </script> </html>
20-DOM-操作属性
-
常用方法
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作属性</title> </head> <body> <input type="text" id="username"> <br> <input type="button" id="btn1" value="获取输入框的id属性"> <input type="button" id="btn2" value="给输入框设置value属性"> <br><br> <input type="radio" id="gender1" name="gender">男 <input type="radio" id="gender2" name="gender">女 <br> <input type="button" id="btn3" value="选中女"> <br><br> <select> <option>---请选择---</option> <option id="bk">本科</option> <option id="zk">专科</option> </select> <br> <input type="button" id="btn4" value="选中本科"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> // 1.attr(name,[value]) 获得/设置属性的值 //按钮一:获取输入框的id属性 $("#btn1").click(function(){ alert($("#username").attr("id")); }); //按钮二:给输入框设置value属性 $("#btn2").click(function(){ $("#username").attr("value","hello..."); }); // 2.prop(name,[value]) 获得/设置属性的值(checked,selected) //按钮三:选中女 $("#btn3").click(function(){ $("#gender2").prop("checked",true); }); //按钮四:选中本科 $("#btn4").click(function(){ $("#bk").prop("selected",true); }); </script> </html>
21-DOM-DOM操作的小结
- 操作文本
- html() html(…):获取或设置标签的文本,解析标签。
- 操作对象
- $(“元素”):创建指定元素。
- append(element):添加成最后一个子元素,由添加者对象调用。
- prepend(element):添加成第一个子元素,由添加者对象调用。
- before(element):添加到当前元素的前面,两者之间是兄弟关系,由添加者对象调用。
- after(element):添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用。
- remove():删除指定元素(自己移除自己)。
- 操作样式
- addClass(value):给指定的对象添加样式类名。
- removeClass(value):给指定的对象删除样式类名。
- 操作属性
- attr(name,[value]):获得/设置属性的值。
- prop(name,[value]):获得/设置属性的值(checked,selected)。