增删改元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>17_文档_增删改</title> </head> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 20px; left: 10px; background: blue; } .div2 { position: absolute; width: 100px; height: 100px; /*top: 50px;*/ background: red; } .div3 { position: absolute; top: 250px; } </style> <body> <ul id="ul1"> <li>AAAAA</li> <li title="hello">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two">EEEEE</li> <li>FFFFF</li> </ul> <br> <br> <ul id="ul2"> <li>aaa</li> <li title="hello">bbb</li> <li class="box">ccc</li> <li title="hello">ddd</li> <li title="two">eee</li> </ul> <!-- 1. 添加/替换元素 * append(content) 向当前匹配的所有元素内部的最后插入指定内容 * prepend(content) 向当前匹配的所有元素内部的最前面插入指定内容 * before(content) 将指定内容插入到当前所有匹配元素的前面 * after(content) 将指定内容插入到当前所有匹配元素的后面替换节点 * replaceWith(content) 用指定内容替换所有匹配的标签删除节点 2. 删除元素 * empty() 删除所有匹配元素的子元素 * remove() 删除所有匹配的元素 --> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 向id为ul1的ul下添加一个span(最后) 2. 向id为ul1的ul下添加一个span(最前) 3. 在id为ul1的ul下的li(title为hello)的前面添加span 4. 在id为ul1的ul下的li(title为hello)的后面添加span 5. 将在id为ul2的ul下的li(title为hello)全部替换为p 6. 移除id为ul2的ul下的所有li */ //1. 向id为ul1的ul下添加一个span(最后) var $ul1 = $('#ul1') // $ul1.append('<span>append()添加的span</span>') $('<span>appendTo()添加的span</span>').appendTo($ul1) //2. 向id为ul1的ul下添加一个span(最前) // $ul1.prepend('<span>prepend()添加的span</span>') $('<span>prependTo()添加的span</span>').prependTo($ul1) //3. 在id为ul1的ul下的li(title为hello)的前面添加span $ul1.children('li[title=hello]').before('<span>before()添加的span</span>') //4. 在id为ul1的ul下的li(title为hello)的后面添加span $ul1.children('li[title=hello]').after('<span>after()添加的span</span>') //5. 将在id为ul2的ul下的li(title为hello)全部替换为p $('#ul2>li[title=hello]').replaceWith('<p>replaceAll()替换的p</p>')
//6. 移除id为ul2的ul下的所有li // $('#ul2').empty() // <p>也会删除 $('#ul2>li').remove() </script> </body> </html>
练习:添加删除记录
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel="stylesheet" type="text/css" href="css.css"/> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="empName" id="empName"/> </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email"/> </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary"/> </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript"> /* 1. 添加 2. 删除 */ $('#addEmpButton').click(function () { //1. 收集输入的数据 var $empName = $('#empName') var $email = $('#email') var $salary = $('#salary') var empName = $empName.val() var email = $email.val() var salary = $salary.val() //2. 生成对应的<tr>标签结构, 并插入#employeeTable的tbody中 /* <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> */ var $xxx = $('<tr></tr>') .append('<td>'+empName+'</td>') // 拼串 .append('<td>'+email+'</td>') .append('<td>'+salary+'</td>') .append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>') .appendTo('#employeeTable>tbody') //3. 清除输入 $empName.val('') $email.val('') $salary.val('') }) // 通过table实现对所有a的click事件委托 $('#employeeTable').delegate('a', 'click', clickDelete) /* 点击删除的回调函数 */ function clickDelete () { var $tr = $(this).parent().parent() var name = $tr.children(':first').html() if(confirm('确定删除'+name+'吗?')) { $tr.remove() } return false } </script> </body> </html>