2023.3.2 jQuery 的属性操作与DOM 的增删改
jQuery 的属性操作
jQuery 属性操作
-
html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。
-
text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
-
val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样
1 <!DOCTYPE html> 2 <html lang="zh_CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="script/jquery-1.7.2.js"></script> 7 <script type="text/javascript"> 8 9 $(function () { 10 //不传参数,是获取,传递参数是设置 11 alert($("div").html());//我是div标签 <span>我是div中的span标签</span> 12 // $("div").html("<h1>我是div中标题</h1>");//设置div中内容 标签会转化为标签 13 14 //不传参数,是获取,传递参数是设置 15 alert($("div").text());//我是div标签 我是div中的span标签 16 // $("div").html("<h1>我是div中标题 1</h1>");//设置div中内容 标签不会转化为标签 17 18 //不传参数,是获取,传递参数是设置 19 $("button").click(function () { 20 alert($("#username").val());//点击按钮得到value值(输入框中内容) 21 // $("#username").val("设置文本框中的内容"); 22 }) 23 24 }); 25 26 </script> 27 </head> 28 <body> 29 <body> 30 <div>我是div标签 <span>我是div中的span标签</span></div> 31 <input type="text" name="username" id="username"/> 32 <button>操作输入框</button> 33 </body> 34 </body> 35 </html>
val 方法同时设置多个表单项的选中状态
1 <!DOCTYPE html> 2 <html lang="zh_CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="script/jquery-1.7.2.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 // 批量操作单选 10 $(":radio").val(["radio2"]);//选中value为radio2 11 // 批量操作筛选框的选中状态 12 $(":checkbox").val(["checkbox3","checkbox2"]); 13 // 批量操作多选的下拉框选中状态 14 $("#multiple").val(["mul2","mul3","mul4"]);//#multiple是得到select标签 15 // 操作单选的下拉框选中状态 16 $("#single").val(["sin2"]);//#single是得到select标签 17 18 //一次性操作 19 // $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]); 20 }); 21 </script> 22 </head> 23 <body> 24 <body> 25 单选： 26 <input name="radio" type="radio" value="radio1" />radio1 27 <input name="radio" type="radio" value="radio2" />radio2 28 <br/> 29 多选： 30 <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1 31 <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2 32 <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3 33 <br/> 34 下拉多选 ： 35 <select id="multiple" multiple="multiple" size="4"> 36 <option value="mul1">mul1</option> 37 <option value="mul2">mul2</option> 38 <option value="mul3">mul3</option> 39 <option value="mul4">mul4</option> 40 </select> 41 <br/> 42 下拉单选 ： 43 <select id="single"> 44 <option value="sin1">sin1</option> 45 <option value="sin2">sin2</option> 46 <option value="sin3">sin3</option> 47 </select> 48 </body> 49 </body> 50 </html>
-
attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等 ，attr 方法还可以操作非标准的属性。比如自定义属性
-
prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等
1 <!DOCTYPE html> 2 <html lang="zh_CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="script/jquery-1.7.2.js"></script> 7 <script type="text/javascript"> 8 9 $(function () { 10 //attr 11 alert( $(":checkbox:first").attr("name") ); // 获取第一个复选的name属性值 12 $(":checkbox:first").attr("name","abc") ; // 设置第一个复选的name属性值,将name属性设置为abc 13 14 // $(":checkbox:first").attr("checked") ; //没有写checked属性 返回undefined 存在则返回checked属性的值 15 // 官方觉得返回undefined是一个错误,所以有了prop方法 16 17 $(":checkbox:first").prop("checked");//返回false 存在checked属性返回true而不是checked属性值 18 $(":checkbox").prop("checked",false);//设置为都不选中 都选中设置为true 19 20 $(":checkbox:first").attr("abc","abcValue");//attr可以设置自定义属性与自定义属性的值 21 alert( $(":checkbox:first").attr("abc") );//abcValue 22 23 }); 24 25 26 </script> 27 </head> 28 <body> 29 <body> 30 <br/> 31 多选： 32 <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1 33 <input name="checkbox" type="checkbox" checked="checked" value="checkbox2" />checkbox2 34 35 </body> 36 </body> 37 </html>
练习全选，全不选，反选
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script> 7 <script type="text/javascript"> 8 9 $(function(){ 10 11 var $items = $(":checkbox[name=items]"); 12 var items = $("[name='items']"); 13 //全选按钮 14 $("#checkedAllBtn").click(function(){ 15 items.attr("checked",true); 16 $("#checkedAllBox").attr("checked",true); 17 }); 18 //全不选按钮 19 $("#checkedNoBtn").click(function(){ 20 items.attr("checked",false); 21 $("#checkedAllBox").attr("checked",false); 22 }); 23 24 //反选按钮 25 $("#checkedRevBtn").click(function(){ 26 //查询全部复选框 27 $items.each(function(){ 28 this.checked = !this.checked; 29 }); 30 //检查是否满选(全部选中的话,上面的全选需要勾上) 31 //获取复选全部个数 32 var allCount = $(":checkbox[name='items']").length; 33 //获取选中的个数 34 var checkedCount = $(":checkbox[name='items']:checked").length; 35 $("#checkedAllBox").attr("checked",allCount == checkedCount);//allCount == checkedCount相等返回true 36 }); 37 38 //提交按钮 39 $("#sendBtn").click(function(){ 40 //获取选中的 41 $(":checkbox[name='items']:checked").each(function(){ 42 alert(this.value); 43 }); 44 }); 45 46 //全选/全不选复选框 47 $("#checkedAllBox").click(function(){ 48 $items.prop("checked",this.checked);//this.checked点击复选框获取自己有没有被选中的状态 然后将checked属性值改变 49 }); 50 51 //全选/全不选复选框与items状态同步 (当没有全选中时,将全选复选框的 √ 去掉) 52 $("[name='items']").click(function(){//需要绑定所有球类的复选框 53 54 //获取复选全部个数 55 var allCount = $(":checkbox[name='items']").length; 56 //获取选中的个数 57 var checkedCount = $(":checkbox[name='items']:checked").length; 58 $("#checkedAllBox").attr("checked",allCount == checkedCount); 59 }); 60 }); 61 62 </script> 63 </head> 64 <body> 65 66 <form method="post" action=""> 67 68 你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 69 70 <br /> 71 <input type="checkbox" name="items" value="足球" />足球 72 <input type="checkbox" name="items" value="篮球" />篮球 73 <input type="checkbox" name="items" value="羽毛球" />羽毛球 74 <input type="checkbox" name="items" value="乒乓球" />乒乓球 75 <br /> 76 <input type="button" id="checkedAllBtn" value="全 选" /> 77 <input type="button" id="checkedNoBtn" value="全不选" /> 78 <input type="button" id="checkedRevBtn" value="反 选" /> 79 <input type="button" id="sendBtn" value="提 交" /> 80 </form> 81 82 </body> 83 </html>
DOM （就是标签）的增删改
-
内部插入：
-
append() a.append(b) 把 b 插入到 a 子元素末尾，成为最后一个子元素
-
appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
-
prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素
-
-
外部插入：
-
insertAfter() a.insertAfter(b) 得到 ba
-
insertBefore() a.insertBefore(b) 得到 ab
-
-
替换:
-
replaceWith() a.replaceWith(b) 用 b 替换掉 a
-
replaceAll() a.replaceAll(b) 用 a 替换掉所有 b
-
-
删除：
-
remove() a.remove(); 删除 a 标签
-
empty() a.empty(); 清空 a 标签里的内容
-
1 <!DOCTYPE html> 2 <html lang="zh_CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="script/jquery-1.7.2.js"></script> 7 <script type="text/javascript"> 8 9 $(function () { 10 //$("<h1>标题</h1>") 相当于创建了一个标签对象 11 $("<h1>标题</h1>").prependTo( $("div") );//将<h1>标题</h1>放到所有div的子元素的前面 子级 12 // $("<h1>标题</h1>").prependTo("div");//与上面一样 可以直接放选择器 也可以自己查 13 14 15 $("<h1>标题</h1>").insertAfter("div");//在div后面创建h1 平级 16 // $("<h1>标题</h1>").insertBefore( $("div") ); 17 18 19 $("div").replaceWith( $("<h1>标题</h1>") );//用h1标题替换div标签 所有的div替换成一个h1标题 20 $("<h1>标题</h1>").replaceAll( "div" );//用h1标题替换div标签 一个替换一个 21 22 $("div").empty();//清空div标签里的内容(包括子标签) 23 24 }); 25 26 27 </script> 28 </head> 29 <body> 30 <body> 31 <br/> 32 多选： 33 <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1 34 <input name="checkbox" type="checkbox" checked="checked" value="checkbox2" />checkbox2 35 <br/><br/> 36 <div>1234</div> 37 <div>1234</div> 38 </body> 39 </body> 40 </html>
练习从左到右，从右到左练习
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 select { 8 width: 100px; 9 height: 140px; 10 } 11 12 div { 13 width: 130px; 14 float: left; 15 text-align: center; 16 } 17 </style> 18 <script type="text/javascript" src="script/jquery-1.7.2.js"></script> 19 <script type="text/javascript"> 20 $(function(){ 21 //第一个按钮：选中添加到右边 22 $("button:eq(0)").click(function(){ 23 $("select[name=sel01] :selected").each(function(){ 24 //alert(this); 25 $(this).appendTo("select[name=sel02]"); 26 }); 27 }); 28 29 //全部添加到右边 30 $("button:eq(1)").click(function(){ 31 $("select[name=sel01] option").each(function(){ 32 //alert(this); 33 $(this).appendTo("select[name=sel02]"); 34 }); 35 }); 36 37 //选中删除到左边 38 $("button:eq(2)").click(function(){ 39 $("select[name=sel02] :selected").each(function(){ 40 //alert(this); 41 $(this).appendTo("select[name=sel01]"); 42 }); 43 }); 44 //全部删除到左边 45 $("button:eq(3)").click(function(){ 46 $("select[name=sel02] option").each(function(){ 47 //alert(this); 48 $(this).appendTo("select[name=sel01]"); 49 }); 50 }); 51 }); 52 53 </script> 54 </head> 55 <body> 56 57 <div id="left"> 58 <select multiple="multiple" name="sel01"> 59 <option value="opt01">选项1</option> 60 <option value="opt02">选项2</option> 61 <option value="opt03">选项3</option> 62 <option value="opt04">选项4</option> 63 <option value="opt05">选项5</option> 64 <option value="opt06">选项6</option> 65 <option value="opt07">选项7</option> 66 <option value="opt08">选项8</option> 67 </select> 68 69 <button>选中添加到右边</button> 70 <button>全部添加到右边</button> 71 </div> 72 <div id="rigth"> 73 <select multiple="multiple" name="sel02"> 74 </select> 75 <button>选中删除到左边</button> 76 <button>全部删除到左边</button> 77 </div> 78 79 </body> 80 </html>
动态添加、删除表格记录
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Untitled Document</title> 6 <link rel="stylesheet" type="text/css" href="styleB/css.css" /> 7 <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script> 8 <script type="text/javascript"> 9 10 $(function(){ 11 12 //添加员工 13 $("#addEmpButton").click(function(){ 14 //获取用户填写的内容 15 var name = $("#empName").val(); 16 var email = $("#email").val(); 17 var salary = $("#salary").val(); 18 19 //创建tr 20 var $trObj = $("<tr></tr>").append("<td>"+name+"</td>") 21 .append("<td>"+email+"</td>") 22 .append("<td>"+salary+"</td>") 23 .append("<td><a href='#'>Delete</a></td>") 24 .appendTo("#employeeTable"); 25 26 //给新增的行元素 的删除键绑定事件 27 $trObj.find("a").click(function () { 28 //在事件响应的function函数中,有一个this对象,为当前正在响应事件的dom对象 29 var $trObj = $(this).parent().parent();//得到行 a标签的父级的父级 30 31 var name = $trObj.find("td:first").text();//得到这一行的第一列 32 /** 33 * confirm是JS的一个确认提示框函数,传什么就提示什么 34 * 用户点击确定返回true,点击取消返回false 35 */ 36 if (confirm("确认删除" + name + "吗？")) { 37 $trObj.remove();//删除行 38 } 39 //取消跳转 取消元素的默认行为,a标签的默认行为就是跳转 40 return false; 41 }); 42 43 }); 44 45 //删除 46 $("a").click(function () { 47 //在事件响应的function函数中,有一个this对象,为当前正在响应事件的dom对象 48 var $trObj = $(this).parent().parent();//得到行 a标签的父级的父级 49 50 var name = $trObj.find("td:first").text();//得到这一行的第一列 51 /** 52 * confirm是JS的一个确认提示框函数,传什么就提示什么 53 * 用户点击确定返回true,点击取消返回false 54 */ 55 if (confirm("确认删除" + name + "吗？")) { 56 $trObj.remove();//删除行 57 } 58 //取消跳转 取消元素的默认行为,a标签的默认行为就是跳转 59 return false; 60 }) 61 }); 62 63 64 </script> 65 </head> 66 <body> 67 68 <table id="employeeTable"> 69 <!--第一行--> 70 <tr> 71 <th>Name</th> 72 <th>Email</th> 73 <th>Salary</th> 74 <th> </th> 75 </tr> 76 <tr> 77 <td>Tom</td> 78 <td>tom@tom.com</td> 79 <td>5000</td> 80 <td><a href="#">Delete</a></td> 81 </tr> 82 <tr> 83 <td>Jerry</td> 84 <td>jerry@sohu.com</td> 85 <td>8000</td> 86 <td><a href="#">Delete</a></td> 87 </tr> 88 <tr> 89 <td>Bob</td> 90 <td>bob@tom.com</td> 91 <td>10000</td> 92 <td><a href="#">Delete</a></td> 93 </tr> 94 </table> 95 96 <div id="formDiv"> 97 98 <h4>添加新员工</h4> 99 100 <table> 101 <tr> 102 <td class="word">name: </td> 103 <td class="inp"> 104 <input type="text" name="empName" id="empName" /> 105 </td> 106 </tr> 107 <tr> 108 <td class="word">email: </td> 109 <td class="inp"> 110 <input type="text" name="email" id="email" /> 111 </td> 112 </tr> 113 <tr> 114 <td class="word">salary: </td> 115 <td class="inp"> 116 <input type="text" name="salary" id="salary" /> 117 </td> 118 </tr> 119 <tr> 120 <td colspan="2" align="center"> 121 <button id="addEmpButton" value="abc"> 122 Submit 123 </button> 124 </td> 125 </tr> 126 </table> 127 128 </div> 129 130 </body> 131 </html>
简化
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Untitled Document</title> 6 <link rel="stylesheet" type="text/css" href="styleB/css.css" /> 7 <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script> 8 <script type="text/javascript"> 9 10 $(function(){ 11 12 var del = function () { 13 14 //在事件响应的function函数中,有一个this对象,为当前正在响应事件的dom对象 15 var $trObj = $(this).parent().parent();//得到行 a标签的父级的父级 16 17 var name = $trObj.find("td:first").text();//得到这一行的第一列 18 /** 19 * confirm是JS的一个确认提示框函数,传什么就提示什么 20 * 用户点击确定返回true,点击取消返回false 21 */ 22 if (confirm("确认删除" + name + "吗？")) { 23 $trObj.remove();//删除行 24 } 25 //取消跳转 取消元素的默认行为,a标签的默认行为就是跳转 26 return false; 27 }; 28 29 30 //添加员工 31 $("#addEmpButton").click(function(){ 32 //获取用户填写的内容 33 var name = $("#empName").val(); 34 var email = $("#email").val(); 35 var salary = $("#salary").val(); 36 //创建tr 37 var $trObj = $("<tr></tr>").append("<td>"+name+"</td>") 38 .append("<td>"+email+"</td>") 39 .append("<td>"+salary+"</td>") 40 .append("<td><a href='#'>Delete</a></td>") 41 .appendTo("#employeeTable"); 42 43 //给新增的行元素 的删除键绑定事件 44 $trObj.find("a").click(del); 45 }); 46 47 //删除 48 $("a").click(del);//del为这个事件响应的函数 49 50 // $("a").click(del());//错误 del()返回的是返回值 click需要的是一个函数 51 52 // $("a").click(function () { 53 // del(); 54 // }); 错误： del()中的this 是click中function 55 56 }); 57 58 59 </script> 60 </head> 61 <body> 62 63 <table id="employeeTable"> 64 <!--第一行--> 65 <tr> 66 <th>Name</th> 67 <th>Email</th> 68 <th>Salary</th> 69 <th> </th> 70 </tr> 71 <tr> 72 <td>Tom</td> 73 <td>tom@tom.com</td> 74 <td>5000</td> 75 <td><a href="#">Delete</a></td> 76 </tr> 77 <tr> 78 <td>Jerry</td> 79 <td>jerry@sohu.com</td> 80 <td>8000</td> 81 <td><a href="#">Delete</a></td> 82 </tr> 83 <tr> 84 <td>Bob</td> 85 <td>bob@tom.com</td> 86 <td>10000</td> 87 <td><a href="#">Delete</a></td> 88 </tr> 89 </table> 90 91 <div id="formDiv"> 92 93 <h4>添加新员工</h4> 94 95 <table> 96 <tr> 97 <td class="word">name: </td> 98 <td class="inp"> 99 <input type="text" name="empName" id="empName" /> 100 </td> 101 </tr> 102 <tr> 103 <td class="word">email: </td> 104 <td class="inp"> 105 <input type="text" name="email" id="email" /> 106 </td> 107 </tr> 108 <tr> 109 <td class="word">salary: </td> 110 <td class="inp"> 111 <input type="text" name="salary" id="salary" /> 112 </td> 113 </tr> 114 <tr> 115 <td colspan="2" align="center"> 116 <button id="addEmpButton" value="abc"> 117 Submit 118 </button> 119 </td> 120 </tr> 121 </table> 122 123 </div> 124 125 </body> 126 </html>