jQuery DOM 操作
一、JQuery 的DOM 操作
1、操作文本
操作文本- 常用方法:
1. 方法 : html() 作用 : 获取标签的文本内容
2. 方法 : html(value) 作用 : 设置标签的文本内容，解析标签
示例代码 :
<!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>
2、操作对象
操作对象- 常用方法:
1. $("元素") 作用 : 创建指定元素 2. append(element) 作用 : 添加成最后一个子元素，由添加者对象调用 3. appendTo(element) 作用 : 添加成最后一个子元素，由被添加者对象调用 4. prepend(element) 作用 : 添加成第一个子元素，由添加者对象调用 5. prependTo(element) 作用 : 添加成第一个子元素，由被添加者对象调用 6. before(element) 作用 : 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 7. after(element) 作用 : 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 8. remove() 作用 : 删除指定元素(自己移除自己) 9. empty() 作用 : 清空指定元素的所有子元素
示例代码 :
<!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>城市列表 </li> <li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">广州</li> <li id="sz">深圳</li> </ul> <ul id="desc"> <li>描述列表 </li> <li id="mx1">描述1</li> <li id="mx2">描述2</li> <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"));//prepend(element) 添加成第一个子元素，由添加者对象调用 $("#jy").prependTo($("#city"));// prependTo(element) 添加成第一个子元素，由被添加者对象调用 }); //按钮四：将雄起添加到上海下方 $("#btn4").click(function(){ $("#sh").after($("#xq"));//after(element) 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 }); //按钮五：将雄起添加到上海上方 $("#btn5").click(function(){ $("#sh").before($("#xq"));//before(element) 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 }); //按钮六：将雄起删除 $("#btn6").click(function(){ $("#xq").remove();//remove() 删除指定元素(自己移除自己) }); //按钮七：将描述列表全部删除 $("#btn7").click(function(){ $("#desc").empty();//empty() 清空指定元素的所有子元素 <ul id="desc"><ul> 还在 // $("#desc").remove(); // }); </script> </html>
3、操作样式
操作样式- 常用方法:
1.css(name) 作用 : 获取css样式
2.css(name,value) 作用 : 设置CSS样式
3.addClass(value) 作用 : 给指定的对象添加样式类名
4.removeClass(value) 作用 : 给指定的对象删除样式类名
5.toggleClass(value) 作用 : 如果没有样式类名，则添加。如果有，则删除
示例代码 :
<!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的背景为蓝色"> <input type="button" id="btn6" value="获取背景样式"> <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"); // alert($("#div").css("background")); }); $("#btn6").click(function(){ // $("#div").css("background","blue"); alert($("#div").css("background")); }); // 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");//设置或删除cls1 样式 }); </script> </html>
4、操作属性
操作属性- 常用方法:
1.attr(name,[value]) 作用 : 获得/设置属性的值
2.prop(name,[value]) 作用 : 获得/设置属性的值(checked，selected)
示例 代码 :
<!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","设置username "); }); // 2.prop(name,[value]) 获得/设置属性的值(checked，selected) //按钮三：选中女 $("#btn3").click(function(){ $("#gender2").prop("checked",true); }); //按钮四：选中本科 $("#btn4").click(function(){ $("#bk").prop("selected",true); }); </script> </html>
二、总结
- 操作文本
- html() html(…)：获取或设置标签的文本，解析标签。
- 操作对象
- $(“元素”)：创建指定元素。
- append(element)：添加成最后一个子元素，由添加者对象调用。
- prepend(element)：添加成第一个子元素，由添加者对象调用。
- before(element)：添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用。
- after(element)：添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用。
- remove()：删除指定元素(自己移除自己)。
- 操作样式
- addClass(value)：给指定的对象添加样式类名。
- removeClass(value)：给指定的对象删除样式类名。
- 操作属性
- attr(name,[value])：获得/设置属性的值。
- prop(name,[value])：获得/设置属性的值(checked，selected)。
