这篇博客对比了使用DOM和jQuery来实现全选、取消、反选功能，创建tab菜单栏以及模态框的方法。DOM实现包括删除器的三种方式，jQuery实现则展示了其简洁性。同时，DOM和jQuery分别用于创建横竖两种显示效果的tab菜单栏，以及模态框的显示和隐藏。博客提供了详细的执行结果和代码示例。
上一篇：前端之jQuery常用总结 点击跳转
目录篇：前端(html,css,js)目录篇 点击跳转
下一篇：web框架的本质（socket,WSGI） 点击跳转
目录
删除器（全选，取消，反选）
-
DOM实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } /*display:none；不显示该标签*/ .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; /* position:fixed； 固定页面某个位置，（多层，这里第二层） left: 0;top: 0;right: 0;bottom: 0; 覆盖全背景层（第一层） background-color: black; 背景颜色：黑色 opacity: 0.6;透明度 z-index: 9; 层优先级，越大越上层 */ } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } /* width: 500px;height: 400px; 该标签的宽度高度 position:fixed； 固定页面某个位置，（多层，这里第三层） background-color: white; 背景颜色:白色 left: 50%; top: 50%;margin-left: -250px;margin-top: -200px; 该标签居中 z-index: 10; 层优先级，越大越上层 */ </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全选" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反选" onclick="ReverseAll();" /> <!--onclick="ShowModel();"点击该添加按钮就调用的ShowModel()函数--> <table> <!--table：表--> <thead> <!--thead：表头部--> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> <!--tr：行 th：列--> </thead> <tbody id="tb"> <!--tbody：表内容--> <tr> <td> <input type="checkbox" checked="true" /> <!--input type="checkbox" 多选择框 checked="true" 有该了属性等于默认勾上--> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"f id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> <!--tr：行 td：列--> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <!--文本输入框--> <p> <input type="button" value="取消" onclick="HideModel();"/> <!-- onclick="HideModel();"点击该添加按钮就调用的HideModel()函数--> <input type="button" value="确定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } /* 获取id=i1的标签并且去掉该标签的class属性的value:hide 获取id=i2的标签并且去掉该标签的class属性的value:hide */ function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } /* 获取id=i1的标签并且增加该标签的class属性的value:hide 获取id=i2的标签并且增加该标签的class属性的value:hide */ function ChooseAll(){ var tbody = document.getElementById('tb'); //获取id=tb的标签 var tr_list = tbody.children; //获取该标签的所有子标签tr for(var i=0;i<tr_list.length;i++){ //循环所有的tr标签，current_tr var current_tr = tr_list[i]; //获取所有tr的下标的元素赋值给current_tr var checkbox = current_tr.children[0].children[0]; //取出该tr下标0的元素（该tr标签的第一个子标签）的下标0的元素（tr标签的第一个子标签下的第一子标签） checkbox.checked = true; /* checkbox.checked = false;修改该标签的checked属性=true checked 是input标签checkbox多选择框的属性 checked=true;等于选择默认勾上 checked=false; 等于选择默认不勾 */ } } function CancleAll(){ var tbody = document.getElementById('tb'); //获取id=tb的标签 var tr_list = tbody.children; //获取该标签的所有子标签tr for(var i=0;i<tr_list.length;i++){ //循环所有的tr标签，current_tr var current_tr = tr_list[i]; //获取所有tr的下标的元素赋值给current_tr var checkbox = current_tr.children[0].children[0]; //取出该tr下标0的元素（该tr标签的第一个子标签）的下标0的元素（tr标签的第一个子标签下的第一子标签） checkbox.checked = false; /* checkbox.checked = false;修改该标签的checked属性=false checked 是input标签checkbox多选择框的属性 checked=true;等于选择默认勾上 checked=false; 等于选择默认不勾 */ } } function ReverseAll(){ var tbody = document.getElementById('tb'); //获取id=tb的标签 var tr_list = tbody.children; //获取该标签的所有子标签tr for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; //获取所有tr的下标的元素赋值给current_tr var checkbox = current_tr.children[0].children[0]; //取出该tr下标0的元素（该tr标签的第一个子标签）的下标0的元素（tr标签的第一个子标签下的第一子标签） if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} /* 假如该标签的checked属性是true的话 那么久执行checkbox.checked = false; 假如该标签的checked属性是false的话 那么久执行checkbox.checked = true; */ </script> </body> </html>执行结果：
-
jQuery实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();" /> <input type="button" value="反选" onclick="reverseAll();" /> <input type="button" value="取消" onclick="cancleAll();"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <!--type="checkbox" #选择框--> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true) } function cancleAll() { $('#tb :checkbox').prop('checked',false); } /* $('#tb :checkbox') #获取id=tb的标签的子标签匹配的input标签内部属性checkbox的标签 .prop #选中所有匹配的标签 ('checked',true) #修改checked="true" 意味选择框选择 ('checked',false) #修改checked="false" 意味选择框不选择 */ function reverseAll() { $(':checkbox').each(function (k) { /* $(':checkbox') #获取匹配的input标签内部属性checkbox的标签 .each #自动循环的所有匹配的标签（所有的元素（匹配的标签装入列表）） （function{}）执行函数 */ console.log(this); console.log($(this)); console.log(k); /* (按反选按键的时候console页会打印可看上面3个结果） this==每一个元素（dom对象，状态：标签<>） $(this)==每一个元素（jQuery对象，状态:列表[]） k==每一个元素下标（0开头） */ //第一种方式解决使用DOM的if判断语句解决反选问题 /* if(this.checked){ this.checked = false; }else{ this.checkd = true; } //DOM方式进行判断：如果该标签（元素）checked=true就执行修改成false,否则执行修改true */ //第二种方式使用jQuery的if判断语句解决反选问题 /* if($(this).prop('checked')){ $(this).prop('checked',false); }else{ $(this).prop('checked',true); } //jQuery方式进行判断 //prop：选定 //假如该标签被选择状态是checked=true，那么该被选择的标签状态更改checked=false //其他如该被选择的标签状态是checked=false，那么该被选择的标签状态更改checked=true */ // 第三种方式解决使用jQuery三元运算解决反选问题（DOM也可以三元运算) var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); // 三元运算： var v = 条件？真值：假值 //prop：选定 // 假如该被选择的标签值checked=true就是真，就返回false赋值给v ，该被选择标签更改成v //假如该被选择的标签值checked=false就是假，就返或true赋值给v，该被选择标签更改成v }) } </script> </body> </html>执行结果：
tab菜单栏
-
DOM实现（三种方式）
传入id值方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } /*display:none；不显示该标签*/ .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <!-- 通过class关键字装饰 点击该标签触发onclick：执行ChangeMenu('i1')函数 i1：作为实参 class="content"通过class关键字调取content样式（装饰功能）--> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header = document.getElementById(nid); //获取该形参的id标签 var item_list = current_header.parentElement.parentElement.children; //获取该标签的父标签的父标签的所有子标签 for(var i=0;i<item_list.length;i++){ //循环该标签的所有子标签 var current_item = item_list[i]; //所有子标签标签的下标元素赋值到current_item current_item.children[1].classList.add('hide'); //所有子标签下标2的元素（第二个子标签）增加class装饰功能hide（加上就等于不显示该标签） } current_header.nextElementSibling.classList.remove('hide'); //该标签的下一个兄弟标签移除class属性的hide样式（装饰功能） } </script> </body> </html>
ths模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } /*display:none；不显示该标签*/ .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div class="header" onclick="ChangeMenu(this);">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <!-- 通过class关键字装饰 点击该标签触发onclick：执行ChangeMenu('i1')函数 i1：作为实参 class="content"通过class关键字调取content样式（装饰功能）--> <div class="item"> <div class="header" onclick="ChangeMenu(this);">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> </div> <script> function ChangeMenu(ths){ /* var current_header = document.getElementById(nid); //获取该形参的id标签 */ current_header = ths; var item_list = current_header.parentElement.parentElement.children; //获取该标签的父标签的父标签的所有子标签 for(var i=0;i<item_list.length;i++){ //循环该标签的所有子标签 var current_item = item_list[i]; //所有子标签标签的下标元素赋值到current_item current_item.children[1].classList.add('hide'); //所有子标签下标2的元素（第二个子标签）增加class装饰功能hide（加上就等于不显示该标签） } current_header.nextElementSibling.classList.remove('hide'); //该标签的下一个兄弟标签移除class属性的hide样式（装饰功能） } </script> </body> </html>相分离模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } /*display:none；不显示该标签*/ .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div class="header">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div class="header">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> </div> <script> var mydiv = document.getElementsByClassName("header"); // 通过class关键值以列表形式获取所有匹配标签 var len = mydiv.length; // 该列表长度（下标长度） for(var i=0;i<len;i++){ // 循环 mydiv[i].onclick = function () { // mydiv[i]=该列表的所有标签增加了（事件功能onclick = 匿名函数执行） mydiv01 = this.parentElement.parentElement.children; /* 获取该标签的父标签的父标签的所有子标签； 这里的this和JavaScript的面向对象this不一样（严重记住） 这里的this含义：谁调用这个函数，这个函数就执行谁（非常重要要记住） 简单理解就是：目前所有匹配class关键字'header'的标签都增加了（事件功能onclick） 而onclick标签的作用：点击该便签就触发执行函数 为了区别那个标签点击，this起到了作用就是 哪个标签被点击，那么该标签就触发（事件功能onclick）执行该函数 为什么不用 myTrs01[i].parentElement.parentElement.children; 原因是作用域的执行顺序问题，循环的时候i=0;i=1; 当i=0的时候，我们根本就没有去触发事件功能，那么他就会继续循环 所以最终i=1，这个时候我们才有可能触发，这样就达不到我们的效果， 所以this：可以理解成循环等待，等待触发 */ len = mydiv01.length; // 标签的长度 for(var i=0;i<len;i++){ //循环 var current_item = mydiv01[i]; //current_item==取触发标签的父标签的父标签的所有子标签 current_item.children[1].classList.add('hide'); //current_item的子标签的下标1的标签移除class属性的hide样式 } this.nextElementSibling.classList.remove('hide'); //触发该函数的标签的下面兄弟标签增加class属性的hide样式 } } </script> </body> </html>以上三种方式执行结果：
--点击菜单2-->
-
jQuery实现（两种显示：横竖）
竖行显示实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">标题一</div> <div id="i1" class="content hide">内容</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.header').click(function() { // 获取匹配标签添加click事件按钮（绑定事件） /* 进入需求分析（匹配到的都是标题标签） $(this) 获取当前标签(lable)（jQuery对象，状态：列表） 1.点击该标签的时候的下一个兄弟标签的内容标签会弹出所以需要： (获取当前标签的下一个兄弟标签) (移除内容标签的hide样式：内容标签显示) 2.需要把其他的标题标签的内容标签进行隐藏所以需要： (获取当前标签的上级标签的兄弟标签的下级内容标签) （添加内容标签的hide样式：内容标签不显示） 3.需要用到的语句 $('.i1').addClass('hide') 匹配class key=i1的标签添加hide样式 $('#i1').removeClass('hide') 匹配id=i1的标签移除hide样式 如何获取当前标签的下一个兄弟标签？使用筛选器 筛选器：选择器选择的标签基础上在选择一次， 链式编程：只要是jQuery对象，可以无限次.xxx() 为标签不断递加操作 格式：$(this).xxx().xxx() $(this).next(); 获取当前标签的下一个兄弟标签 $(this).prev(); 获取当前标签的上一个兄弟标签 $(this).parent(); 获取当前标签的父标签 $(this).children(); 获取当前标签的所有子标签 $(this).silbings(); 获取当前标签的所有的兄弟标签 $(this).text(); 获取当前标签的内容 $(this).parent().silbings().find('.comtent'); 找当前标签的父标签的所有兄弟标签的所有子孙标签匹配class key=content .find 条件查找==>标签下的所有标签 */ /* // 开始写执行代码（第一种方式） $(this).next().removeClass('hide'); $(this).parent().siblings().find('.content').addClass('hide'); // 测试返回的对象类型 var v = $(this).next().removeClass('hide'); console.log(v) // 点击页面的标题标签，在console页面返回的对象是jQuery对象[] // jQuery对象[]是可以 点.xxx()增加功能(称之链式编程） */ // 开始写执行代码（第二种方式：链式编程） $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') }) </script> </body> </html>执行结果：
横行显示实现（两种方式）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height:38px; background-color: #dddddd; line-height: 38px; } .menu .menu-item{ float:left; border-right:1px solid red; padding:0 5px; /* padding:间距用的 上下0 左右5px间距， 如果是内行（级联）标签就应该先display:block然后才可以调padding边距 */ } .active{ background-color: brown; cursor:pointer; /*cursor:pointer;鼠标移动到该标签变小手*/ } .content{ min-height:100px; border: 1px solid #eeeeee; /*min-height：最小边框，高度小于100px就有滚动条*/ } .hide{ display:none } </style> </head> <body> <div style="width:700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ //匹配class="menu-item"的标签增加click事件按钮 $(this).addClass('active').siblings().removeClass('active'); //点击该标签,该标签的就添加样式active，然后该标签的兄弟标签就移除active样式 var target = $(this).attr('a'); // 点击该标签获取该标签的a内部属性值,如:a=1 == target=1 $('.content').children("[b='"+ target +"']").removeClass('hide').siblings().addClass('hide'); //匹配class="content"的标签下的所有子标签并且匹配拼接内部属性值的子标签， // 移除样式hide,该标签的兄弟标签增加样式hide // 如：children("[b='"+ target +"']") == children([b='1']) }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" >菜单一</div> <div class="menu-item" >菜单二</div> <div class="menu-item" >菜单三</div> </div> <div class="content"> <div >内容一</div> <div class="hide" >内容二</div> <div class="hide">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ //匹配class="menu-item"的标签增加click事件按钮 $(this).addClass('active').siblings().removeClass('active'); //点击该标签,该标签的就添加样式active，然后该标签的兄弟标签就移除active样式 $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); //匹配class="content"的标签下的所有子标签的索引（下标）匹配=等于点击的标签的索引的子标签， // 移除该子标签的hide样式，且该标签的兄弟标签增加hide样式 //$('.content').children().eq($(this).index()) // 拆分的话： // var v = $(this).index(); 获取点击的标签的下标（索引） // $('.content').children().eq(v);获取匹配标签的所有子标签的下标（索引）等于点击标签的下标（索引） }); </script> </body> </html>执行结果：
模态框
-
DOM实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } /*display:none；不显示该标签*/ .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; /* position:fixed； 固定页面某个位置，（多层，这里第二层） left: 0;top: 0;right: 0;bottom: 0; 覆盖全背景层（第一层） background-color: black; 背景颜色：黑色 opacity: 0.6;透明度 z-index: 9; 层优先级，越大越上层 */ } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } /* width: 500px;height: 400px; 该标签的宽度高度 position:fixed； 固定页面某个位置，（多层，这里第三层） background-color: white; 背景颜色:白色 left: 50%; top: 50%;margin-left: -250px;margin-top: -200px; 该标签居中 z-index: 10; 层优先级，越大越上层 */ </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <!--文本输入框--> <p> <input type="button" value="取消" onclick="HideModel();"/> <!-- onclick="HideModel();"点击该添加按钮就调用的HideModel()函数--> <input type="button" value="确定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } /* 获取id=i1的标签并且去掉该标签的class属性的value:hide 获取id=i2的标签并且去掉该标签的class属性的value:hide */ function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } /* 获取id=i1的标签并且增加该标签的class属性的value:hide 获取id=i2的标签并且增加该标签的class属性的value:hide */ </script> </body> </html>执行结果：
点击添加
-
jQuery实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } /* position:fixed;指定位置覆盖 z-index:int;叠成层优先级数字越大越上层 */ </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <!--target：自己定义的属性--> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> <input type="button" value="确定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> /*需求分析（添加） 点添加按钮的时候我们就需要弹框出来，并且可以输入，输入后点击确认就添加完毕 */ function addElement(){ $(".modal,.shadow").removeClass('hide'); /*匹配class key=modal 或者class key = shadow 的标签移除掉样式hide ,号：只要匹配哪个都行 空格：匹配第一个关键字的标签下匹配关键字的子标签*/ } /*需求分析（取消） 点弹出框的取消按钮我们就需要把弹出框给隐藏了, 并且需要把用户输入的编辑的字符串也清空掉 */ function cancelModal() { $(".modal,.shadow").addClass('hide'); // 匹配class key=modal 或者class key = shadow 的标签添加样式hide $('.modal input[type="text"]').val(""); // } /*需求分析（确定） 点弹出框的确定按钮，就可以把用户输入的内容生成tr标签添加到table标签里面 然后模态对话框关闭掉 */ function confirmModal() { var tr = document.createElement('tr'); // 创建一个tr标签且赋值到tr var td1 = document.createElement('td'); // 创建一个td标签fi赋值到td1 td1.innerHTML = "11.11.11.11"; //td1标签增加内容 var td2 = document.createElement('td'); td2.innerHTML = "8001"; //同理 $(tr).append(td1); $(tr).append(td2); // tr标签内部追加两个td子标签 $('#tb').append(tr); //匹配id=tb的标签的子标签后面追击该tr标签 $(".modal,.shadow").addClass('hide'); //匹配class="modal" 或"shadow" 的 标签增加样式hide } /*需求分析(编辑） 点编辑的时候我们就需要弹框出来， 本身需要被编辑的内容需要赋值到模态对话框的相对应输入框，这才可以做修改： 如本html:如：tr标签的所有td子标签的内容：如<td>内容</td>都需要循环取出， 并且把取出的值，分别赋值到模态对话框的相对应输入框。 */ $(".edit").click(function(){ $(".modal,.shadow").removeClass('hide'); //匹配class key=edit的标签绑定click按钮 var tds = $(this).parent().prevAll(); //获取该点击标签的父标签的所有兄弟标签，赋值到tds /* var port = $(tds[0]).text(); //获取tds下标0的元素（第一个标签）的内容赋值到port var host = $(tds[1]).text(); //获取tds下标1的个元素（第二个标签）的内容赋值到port console.log(host,port); $('.modal input[name="hostname"]').val(host); //获取匹配class key=modal标签的子标签匹配input标签内部属性name="hostname"的标签修改value=host变量 $('.modal input[name="port"]').val(port); }); */ //由于在每个td增加了自定义属性所以可以更加简单实现上面赋值到输入框 tds.each(function(){ //循环tds列表的标签 var n = $(this).attr('target'); // 获取每个标签内部属性target的值 var text = $(this).text(); // 获取每个标签的内容 var a1 = '.modal input[name="'; var a2 = '"]'; // '内容'单引号里面的内容是字符串 var temp = a1+ n + a2; /* 拼接模式 a1+a2 == .modal input[name=""] 假如n获取的该标签target属性是hostname的话 a1+n == '.modal input[name="hostname' a1+n+a2 == '.modal input[name="hostname"]' temp = '.modal input[name="hostname"]' 有了拼接模式以后，增加td标签选项的话就无需动JS了 */ $(temp).val(text) // 修改了匹配class key=modal标签下的匹配input且属性name="hostname"的子标签的value属性的值 }) }); /*需求分析(删除） 点删除的时候删除按钮同一行的该tr标签（行）就被删除掉 */ $('.del').click(function(){ $(this).parent().parent().remove(); }) </script> </body> </html>执行结果：
点击添加
上一篇：前端之jQuery常用总结 点击跳转
目录篇：前端(html,css,js)目录篇 点击跳转
下一篇：web框架的本质（socket,WSGI） 点击跳转
扫一扫
1382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
