jQuery相关
jQuery对象和Dom对象的转化:
一般一个前端默认的规则在声明一个jQuery对象的时候会在变量的前边加上$,便于区分。
var $divEle=$("div") 获取jQuery对象 var divEle1=$divEle[index] jQuery对象转化成Dom对象 var divEle=("div") 获取Dom对象
但是需要注意的事情是:
1 只有jq对象才能使用jq中的方法,dom对象是无法使用的。同样的dom对象也是无法直接使用jq的方法。
2 jq对象查询就算是以id查询返回的依然是数组,而不是单个的元素。
查找相关:
1 基本查找器;
$("#id") | $("#d1") | id选择器 |
$(".class") | $(".c1") | 类选择器 |
$("tagName") | $("span") | 标签选择器 |
$("tagName.class") | $("span.c1") | 组合选择器(span标签中class="c1") |
$("*") | $("*") | 通用选择器 |
$("#id,.class,tagName") | $("#d1,.c1") | 分组选择器 |
2 层级选择器:
$("a b") | 后代选择器 |
$("a>b") | 子选择器 |
$("a+b") | 毗邻选择器(a标签后的第一个b) |
$("a~b") | 弟弟选择器(a之后所有的兄弟b) |
3 属性选择器:
[attribute] | $('[type]') || $("input[type]") | 含有type属性的标签 |
[attribute=value] | $('[type='text']') || $("input[type='text']") | 属性type等于'text'的标签 |
[attribute=!value] | $('[type!='text']') || $("input[type!='text']") | 属性type不等于'text'的标签 |
4 基本筛选器:对选择器返回的结果集进一步筛选。
:first() | $('div:first') | 找到的div标签中第一个 |
:last() | $('div:last') | 找到的div标签中最后一个 |
:eq(index) | $('div:eq(1)') | 找到的div标签中索引位置为1的 |
:even | $('div:even') | 找到的div标签中索引数是奇数的 |
:odd | $('div:odd') | 找到的div标签中索引数是偶数的 |
:gt(index) | $('div:gt(1)') | 找到的div标签中索引数是大于1的 |
:lt(index) | $('div:lt(1)') | 找到的div标签中索引数是小于1的 |
:not(元素选择器) | $('div:not(.c1)') | 找到的div标签中不含有class='c1'的 |
:has(元素选择器) | $('div:has(.c1)') | 找到的div标签中含有class='c1'的 |
$('div:not(:has(.c1))') | 找到的div后代中不含有class=.c1的所有后代标签(从后代开始找) |
5 表单筛选器;
在表单中input有变形金刚的称号,通过对input 中type属性的设置,可以生成输入框,按钮等。当然有这些属性的标签,即使没有被包裹在form标签中,依然可以使用这些方法。
:text | $(':text') | 查找属性值为text的标签 |
:password | $(':password') | 查找属性值为password的标签 |
:file | $(':file') | 查找属性值为file的标签 |
:radio | $(':radio') | 查找属性值为radio的标签 |
:checkbox | $(':checkbox') | 查找属性值为checkbox的标签 |
:submit | $(':submit') | 查找属性值为submit的按钮 |
:reset | $(':reset') | 查找属性值为reset的标签 |
:button | $(':button') | 查找属性值为button的标签 |
表单对象属性:常用于下拉框,复选框等确定那个选项被选中。
:enabled | 获取那些标签可用 |
:disabled | 获取那些标签不可用 |
:checked | 被选中的标签 |
:selected | 被选中的下拉框 |
// 复选框 <input type="checkbox" name="hob">吃 <input type="checkbox" name="hob">喝 在页面上勾选任意一项 $(':checked') 就可以拿到勾选过的标签 //下拉框 <select id="s1"> <option value="010">北京市</option> <option value="020">上海市</option> <option selected value="030">广州市</option> <option value="040">深圳市</option> </select> $(":selected") // 找到所有被选中的option
筛选器方法:
.next() | $('#d1').next() | div的下一个标签 |
.nextAll() | $('#d1').nextAll() | div后的所有同级标签 |
.nextUntil() | $('#d1').nextUntil('#d2') | div后的所有同级标签直到匹配到id=d2的 |
.prev() | $('#d1').prev() | div的上一个标签 |
.prevAll() | $('#d1').prevAll() | div前的所有同级标签 |
.prevUntil() | $('#d1').prevUntil('#d2') | div前的所有同级标签直到匹配到id=d2的 |
.parent() | $('#d2').parent() | d2的父级标签 |
.parents() | $('#d2').parents() | d2的所有长辈标签 |
.parentsUntil() | $('#d2').parentsUntil('#d3') | d2的所有长辈标签直到匹配到id=d3的 |
.children() | $('#d2').children() | d2的所有子标签 |
.siblings() | $('#d2').siblings() | d2的所有兄弟标签 |
.find() | $('div').find('#d5') | div所有的后代标签id=d5的 |
.filter() | $('div').filter('.c1') | div标签中含有class=c1的相当于$('div.c1') |
同样 基本筛选器 也有对应的筛选器方法:
$('#d1').first() | 第一个 |
$('#d1').last() | 最后一个 |
$('input').not('.c1') | input标签中不含有class=c1的 |
$('div').has('c2') | 返回的div集合中的后代含有class=c2的 |
$('.c1').eq(2) | 返回的集合中索引等于2的 |
标签操作相关:
1 样式操作:
$('div').addClass('hide3') | div结果结果集中的标签添加hide3样式 |
$('div').removeClass('hide3') | div结果结果集中的标签删除hide3样式 |
$('div').hasClass('hide3') | div结果结果集中的标签是否含有hide3样式 |
$('div').toggleClass('hide3') | div结果结果集中的标签如果含有hide3就删除,如果没有就添加(开关灯操作) |
2 位置操作:
$('#d1').offset(100,100) | 如果入参为空为获取当前元素下你给对窗口的相对便宜,如果部位空则为设置元素位置 |
$('#d2').positon() | 获取匹配元素相对父元素的便宜 |
$('#d2').scrollTop() | 获取匹配元素相对滚动条顶部的偏移 |
$('#d2').scrollLeft() | 获取匹配元素相对滚动条左侧的偏移 |
利用scrollTop()方法实现会到顶部按钮:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c2{ background-color: red; width: 400px; height: 400px; } .hides1{ display: none; } .c4{ height: 50px; width: 100px; position: fixed; bottom: 30px; right: 30px; } </style> </head> <body> <input type="button" value="点我" id="d1"> <div class="c2"></div> <div class="c3">1</div> <div class="c3">2</div> <div class="c3">3</div> <div class="c3">4</div> <div class="c3">5</div> <div class="c3">6</div> <div class="c3">7</div> <div class="c3">8</div> <div class="c3">9</div> <div class="c3">10</div> <div class="c3">11</div> <div class="c3">12</div> <div class="c3">13</div> <div class="c3">14</div> <div class="c3">15</div> <div class="c3">16</div> <div class="c3">17</div> <div class="c3">18</div> <div class="c3">19</div> <div class="c3">20</div> <div class="c3">21</div> <div class="c3">22</div> <div class="c3">23</div> <div class="c3">24</div> <div class="c3">25</div> <div class="c3">26</div> <div class="c3">27</div> <div class="c3">28</div> <div class="c3">29</div> <div class="c3">30</div> <div class="c3">31</div> <div class="c3">32</div> <div class="c3">33</div> <div class="c3">34</div> <div class="c3">35</div> <div class="c3">36</div> <div class="c3">37</div> <div class="c3">38</div> <div class="c3">39</div> <div class="c3">40</div> <div class="c3">41</div> <div class="c3">42</div> <div class="c3">43</div> <div class="c3">44</div> <div class="c3">45</div> <div class="c3">46</div> <div class="c3">47</div> <div class="c3">48</div> <div class="c3">49</div> <div class="c3">50</div> <div class="c3">51</div> <div class="c3">52</div> <div class="c3">53</div> <div class="c3">54</div> <div class="c3">55</div> <div class="c3">56</div> <div class="c3">57</div> <div class="c3">58</div> <div class="c3">59</div> <div class="c3">60</div> <div class="c3">61</div> <div class="c3">62</div> <div class="c3">63</div> <div class="c3">64</div> <div class="c3">65</div> <div class="c3">66</div> <div class="c3">67</div> <div class="c3">68</div> <div class="c3">69</div> <div class="c3">70</div> <div class="c3">71</div> <div class="c3">72</div> <div class="c3">73</div> <div class="c3">74</div> <div class="c3">75</div> <div class="c3">76</div> <div class="c3">77</div> <div class="c3">78</div> <div class="c3">79</div> <div class="c3">80</div> <div class="c3">81</div> <div class="c3">82</div> <div class="c3">83</div> <div class="c3">84</div> <div class="c3">85</div> <div class="c3">86</div> <div class="c3">87</div> <div class="c3">88</div> <div class="c3">89</div> <div class="c3">90</div> <div class="c3">91</div> <div class="c3">92</div> <div class="c3">93</div> <div class="c3">94</div> <div class="c3">95</div> <div class="c3">96</div> <div class="c3">97</div> <div class="c3">98</div> <div class="c3">99</div> <div class="c3">100</div> <input type="button" value="回到顶部" class="c4 hides1" id="d3"> <script src="jquery-3.4.1.min.js"></script> <script> $("#d1").click(function () { $(".c2").offset({top:100,left:100}); }); $(window).scroll(function () { if ($(window).scrollTop()>100){ $("#d3").removeClass("hides1"); }else{ $("#d3").addClass("hides1"); } }); $("#d3").click(function () { $(window).scrollTop(0); }) </script> </body> </html>
3 尺寸:
$('.c1').height() | 获取返回标签的高度 |
$('.c1').width() | 获取返回标签的宽度 |
$('.c1').innerHeight() | 获取返回标签的文本内容和内填充的高度 |
$('.c1').outerHeight() | 获取返回标签的文本内容 内填充和边框的高度 |
$('.c1').innerWidth() | 获取返回标签的文本内容和内填充的宽度 |
$('.c1').outerHeight() | 获取返回标签的文本内容 内填充和边框的宽度 |
4 文本操作相关:
$('input[type="text"]').html() | 所有匹配标签的内容(标签和文本内容),如果有入参那么等同与赋值,如果插入的是字符串类型的标签则会替代所有的标签 |
$('input[type="text"]').text() | 所有匹配标签的文本内容,如果入参有值则会替代 |
$($('#t1')[0]).val() | 匹配的标签的文本值(例如input框的输入内容),如果有值则会替代 |
注意文本内容和文本值的区别:
1 文本内容:html()返回的第一个元素是当前标签的文本内容,后边的元素是所有后代元素的标签和文本内容
<div> 我是div中的文本内容 </div>
$('div').html()
$('div').text()
2 文本值:因为在选择器获取元素都是以数组的形式返回回来,所以有默认会取第一个元素的值。
<input type='text'> 这个输入框输入的值 是文本值内容
<input type="checkbox" name="hob" value="1">吃 <input type="checkbox" name="hob" value="2">喝 勾选的二个checkbox $($(':checkbox')[1]).val() 这时取的值就是2
5 属性操作:
$($(':checkbox')[1]).attr('type') | 获取返回标签中的type属性值 |
$($(':checkbox')[1]).attr("checked",false) | 设置返回标签中checked的值 |
$($(':checkbox')[1]).attr({'checked':false,'type':'radio'}) | 设置返回标签的多个值 |
$($(':checkbox')[1]).remove("checked") | 删除 |
用于checkbox和radio的属性操作:
$($(':checkbox')[1]).prop('checked') | 获取标签的checked的值,返回bool类型。同样可以设置该属性的值 |
$($(':checkbox')[1]).removeProp('checked') | 删除 |
prop和attr的区别:
attr所指的属性是HTML标签,而prop所指的是DOM对象属性。
<input type="radio" id="d11" value="1"> $('#d11').prop("checked")------>false $('#d11').attr("checked")------->undefined attr如果获取标签中没有的属性 则直接返回undefined prop拿的是这个属性的属性值。
<input type="radio" id="d11" value="1" checked> $('#d11').attr("checked")----"checked" $('#d11').attr("value")------1 $('#d11').attr("class")------undefined $('#d11').prop("value")-----1 $('#d11').prop("checked")------true $('#d11').prop("class")------"" attr作用范围只限于HTML标签内的属性 而prop获取的这个dom对象的属性,如果选中为true 否则为false
attr可以获取自定义属性,而prop则不能。
对于标签上能看到的属性包括自定义属性用attr
对于返回布尔值的比如checkbox,radio和option是否被选中都用prop
6 元素操作:
$(A).append(B) |
把B追加到A |
$(A).appendTo(B) |
把A追加到B |
$(A).prepend(B) |
把B前置到A |
$(A).appendTo(B) |
把A前置到B |
$(A).after(B) |
把B放到A的后面 |
$(A).insertAfter(B) |
把A放到B的后面 |
$(A).before(B) |
把B放到A的前面 |
$(A).insertBefore(B) |
把A放到B的前面 |
Remove() |
从DOM中删除所有匹配的元素 |
Empty() |
删除匹配的元素结合中所有的子节点 |
7 事件:
1 绑定方式:
原生dom事件绑定方式:
1 在标签中直接绑定
2 在script标签中 dom对象.onclick=function(){
....... }
jQuery的绑定事件:
1 jQuery对象.click(function(){
....... })
2 $(Ele).on('click',function(){
...... })
3 长辈标签的jQuery对象.on('click','未来元素属性',function(){
..... })
未来元素:
在页面刷新dom树已经生成完成,使用js添加的元素并没有添加到dom树中,那么该对象即使绑定了事件,也无法触发。单实际上js添加的元素已经出现在了html文档中。
事件冒泡:
未来元素被插入到html文档中,但是dom树中并没有被写入。
元素被点击(操作)后,如果自身没有绑定触发事件,那么就会像上级逐级反应,如果一个长辈标签绑定了处理该标签的事件,就会捕获事件从而触发绑定的事件。on就利用了该机制。
事件捕获:
在上级接到下级元素提出的反馈就直接执行绑定事件;
组织后续事件执行:
事件的函数中执行 return false;执行之后浏览器不会刷新,停留在当前状态。
像click keydown等dom定义的事件可以使用.on()绑定
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>键盘相关</title> </head> <body> <table border="1" id="t1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>caozuo</th> </tr> </thead> <tbody> <tr> <th><input type="checkbox"></th> <th>蛋蛋</th> <th>王者农药</th> <th> <select > <option value="1">上线</option> <option value="2">下线</option> <option value="3">离线</option> </select> </th> </tr> <tr> <th><input type="checkbox"></th> <th>王永美</th> <th>吃粑粑</th> <th> <select > <option value="1">上线</option> <option value="2">下线</option> <option value="3">离线</option> </select></th> </tr> <tr> <th><input type="checkbox"></th> <th>袁牛</th> <th>吃粑粑</th> <th> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">离线</option> </select></th> </tr> <tr> <th><input type="checkbox"></th> <th>袁erha</th> <th>吃baba</th> <th> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">离线</option> </select></th> </tr> </tbody> </table> <script src="jquery-3.4.1.min.js"></script> <script> var mode=undefined; $('body').on("keydown",function (evt) { console.log(evt.keyCode); // 17对应键盘ctrl值 if (evt.keyCode===17){ mode=true; } }); $('body').on("keyup",function (evt) { if (evt.keyCode===17){ mode=undefined; } }); $("select").on("change",function () { // 找到本行对应的checkbox var $thisEle= $(this).parent().siblings().first().find(":checkbox"); console.log($thisEle[0]); // 找到本行复选框所选状态 var valEle=$(this).val(); // 判断本行的复选框被选中且已经按下了ctrl键 if ($thisEle.prop("checked")&&mode){ //找到所有被选中的复选框 var $selects=$("input[type='checkbox']:checked"); // var $selects=$(":checked").parent().siblings().last(); // 循环所有被选中的复选框,并且将他们对应行的状态框值变更 for (var i=0;i<$selects.length;i++){ $($selects[i]).parent().siblings().last().find("select").val(valEle); } } }) </script> </body> </html>
2 页面载入;
当dom载入就绪可以查询及操纵时绑定一个要执行的函数。可以提高web应用程序的相应速度。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function () { $(".menu-list").on("click",function () { $(this).slideUp(3000) }) }) </script> </head> <body> <div>菜单一</div> <div class="menu-list"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <div><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2160921899,2227108709&fm=26&gp=0.jpg" alt=""></div> </body> </html>
动画相关:
show(5000) | 5秒内展示 |
hide(5000) | 5秒内消失 |
toggle(5000) | 如果处于展示状态就在5秒内消失,否则5秒内展示 |
slideDown(5000) | 5秒内 下拉方式消失 |
slideUp(5000) | 5秒内 上拉方式消失 |
slideToggle(5000) | 如果处于展示状态就在5秒内上拉消失,否则就下拉消失 |
fadeIn(5000) | 已经隐藏的元素会在5秒内渐渐的展示 |
fadeOut(5000) | 已经展示的元素会在5秒内渐渐的展示 |
fadeTo(5000,0.3) | 在5秒内将元素隐藏到指定透明度 |
fadeToggle(5000) | 如果元素处于展示状态,就在5秒内隐藏,否则会在5秒内显示 |
animate() | 自定义 |
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function () { $("#d1").on("click",function () { // $(this).slideUp(3000); $('.menu-list').slideToggle(3000); }); $('#t1').on("click",function () { // $('#b3').fadeOut(2000); // $('#b3').fadeTo(2000,0.3); $('#b3').fadeToggle(2000); }) }) </script> </head> <body> <div>菜单一</div> <input type="button" id="d1" value="控制开关"> <div class="menu-list">ewrt <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <div><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2160921899,2227108709&fm=26&gp=0.jpg" alt="" id="b3"></div> <input type="button" value="图片控制" id="t1"> </body> </html>
each循环:
原生的for循环:
返回的结果集中有多个 Var $divEle=$(‘div’) For (var i=0;i<$divEle.length;i++){ Console.log($divEles[i].innerText) }
each循环:
假设有5个div标签 Var $divEle=$(‘div’) $divEle.each(function(){ Console.log(this); This.innerText }) 第二种写法: Var a=[11,22,33,44] $.each(a,function(){ Console.log(this) }) 也可以这样写 K,v分别代表索引和值,只是形参 Var a=[11,22,33,44] $.each(a,function(k,v){ Console.log(k+”:”+v); })
结束each循环:
打断each循环,each是一个函数,那么函数对函数应该是return false $.each(a1,function(k,v){ If (v===22){ Ruturn false;} // 后续的each循环就不进行相当于break Return false;} Console.log(k+”:”+v); }) 如果直接ruturn 就会结束当前each 相当于python中的continue
$.each(a,function(k,v){if(v===22){return;}console.log(v);})
插件:
extend相当于为jQuery扩展方法,自定义方法。
写法: 1 jQuery.fn.extend(“sss”:function(){ Console.log(“ok”) }) 2 $.fn.extend(“ss”:function(){ Console.log(“dddd”) }) 3 $.extend(“ss”:function(){ Console.log(“ddd”) })
Data:
用于匹配的元素中的所有元素储存任意相关的数据,同样也提供了方法以键值对的形式取值。
储存和取值:
$('li:first').data({"keys":'values1'}) $('li:first').data() $('li:first').data('keys')
同样可以 现将标签内的数据存储到该标签内,再将该标签对象传入到指定标签(通常是父标签)的data中,这样在页面进行数据交互的时候,就回利索很多。下面的这个例子,基本用到了jQuery的常用事件,以及未来元素绑定事件,Data等。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> //定义全局标志位用来标识 是新增还是修改 var flag=0; $(document).ready(function () { var bmEle=$(".back-pro , .medo"); var tbodyEle=$("tbody"); var inDaEle$=$($("#s1").find(':text')); //模态框弹出 $("#add_d1").on("click",function () { bmEle.removeClass("hide3"); flag=1; }); //模态框中的取消按钮绑定事件 $("#c1").on("click",function () { //清空模态框input flag=0; $(this).parent().find("p").find('input').val(""); //隐藏模态框 bmEle.addClass("hide3"); }); // 为编辑按钮绑定事件 打开模态框 设置标志位 // 给每一行的编辑按钮绑定时间 $(".e1").on("click",function () { flag=2; var $dataEle=$(this).parent().parent().find('td'); for (var b=0;b<$dataEle.length-1;b++){ $($dataEle[b]).data({b:$($dataEle[b]).text()}); } bmEle.removeClass("hide3"); console.log($($dataEle[0]).data("b")); $(inDaEle$[0]).val($($dataEle[0]).data("b")); $(inDaEle$[1]).val($($dataEle[1]).data("b")); //将触发编辑按钮事件的爷爷标签传入tbody便于 //模态框提交按钮时 知道数据填写在那个标签里 var $trdataEle =$(this).parent().parent(); tbodyEle.data({'trobj':$trdataEle}); // for (var c=0;c<inDaEle$.length;c++){ // $(inDaEle$[c]).val($($dataEle[c]).data("b")); // } }); //模态框中的提交按钮绑定事件 //去到用户填写的input框值 // 根据是编辑还是新增做不同的事情 // 如果是新增操作,就生成一条新的tr 家导入table后边 //如果是变编辑操作,根据先前编辑按钮那一行 //难点在于 入户确定 编辑的是哪一行---> 利用data可以存具体的jQuery $("#t1").on("click",function () { var valEle=$(this).parent().find("p").find('input'); if (flag===1) { var trEle = ' <tr>\n' + ' <td></td>\n' + ' <td></td>\n' + ' <td>\n' + ' <input type="button" class="e1" value="编辑">\n' + ' <input type="button" class="can" value="删除">\n' + ' </td>\n' + ' </tr>'; tbodyEle.append(trEle); for (var i = 0; i < valEle.length; i++) { $(valEle[i]).data({i:$(valEle[i]).val()}) } var $tdEle=tbodyEle.children().last().find("td"); $($tdEle[0]).text($(valEle[0]).data("i")); $($tdEle[1]).text($(valEle[0]).data("i")); $(this).parent().find("p").find('input').val(""); bmEle.addClass("hide3"); flag=0; }else if(flag===2){ // 在修改按钮绑定的事件中, // 已经将自身的标签对象传给了 //tbodyEle.data('trobj')所以在这里就拿到了所点击编辑按钮的 // 那一行标签 var trEle2=tbodyEle.data('trobj').find('td'); console.log('trele2--->',trEle2); $(trEle2[0]).text($(inDaEle$[0]).val()); $(trEle2[1]).text($(inDaEle$[1]).val()); $(inDaEle$[0]).val(""); $(inDaEle$[1]).val(""); bmEle.addClass("hide3"); } }); // 因为html中新增后的标签属于未来元素,利用事件冒泡逐级上报的 //机制来完成 对外来元素的操纵 // 给每一行的删除按钮绑定事件 tbodyEle.on("click",".can",function () { console.log(this); $(this).parent().parent().remove(); }) }) </script> <style> .back-pro{ background-color: rgba(0,0,0,0.3); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 998; } .medo{ border: 1px solid #95ffeb; width: 400px; height: 400px; background-color: white; margin-top: 25%; margin-left: 50%; left:-300px; top: -300px; z-index: 1000; position: fixed; } .hide3{ display: none; } </style> </head> <body> <div class="back-pro hide3"></div> <div class="medo hide3"> <form action="" id="s1"> <p>用户名<input type="text"></p> <p>爱好<input type="text"></p> <input type="button" id="t1" value="提交"> <input type="button" id="c1" value="取消"> </form> </div> <table border="1"> <thead> <tr> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>你妹</td> <td>吃粑粑</td> <td> <input type="button" class="e1" value="编辑"> <input type="button" class="can" value="删除"> </td> </tr> <tr> <td>你妹1</td> <td>吃粑粑1</td> <td> <input type="button" class="e1" value="编辑"> <input type="button" class="can" value="删除"> </tr> <tr> <td>你妹2</td> <td>吃粑粑2</td> <td> <input type="button" class="e1" value="编辑"> <input type="button" class="can" value="删除"> </tr> </tbody> </table> <div><button id="add_d1" value="1">新增</button></div> <input type="text" id="d222"> </body> </html>
改良后的
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function () { /* 1 新增按钮绑定事件 移除 hied属性 因为 在模态框中提交或取消后还需要多次 添加和移除,所以直接写两个函数处理 2 模态框内取消按钮绑定事件 增加 hide属性,同时清空模态框输入内容 3 编辑按钮绑定事件: 考虑未来元素触发的情况 找到点击编辑按钮的tr标签并传入tbody的data中,在模态框展示时判断是新增的入口还是编辑的入口 4 删除按钮绑定事件 考虑未来元素触发的情况 找到点击删除按钮的tr标签后的tr标签并且将序号的td都-1 找到点击删除按钮的tr标签进行删除 5 模态框内提交按钮 根据tbody的键取值,来判断入口 如果是新增,则创建元素,并获取模态框中的输入值,赋予所创建模态框内对应的td,然后插入tbody 然后清空模态框输入的值 并隐藏模态框 如果是编辑,则tbody中的值一定不是undefinde,并能取出来对应行的对象,然后获取对应行的td分别填入到input框中 点击提交后 重新获取模态框中的值,并更新到对应行的对应位置中 然后清空 tbody中的data、 */ //定义两个函数操纵模态框 var mode_display=$('.backs,.mode'); function showmode() { mode_display.removeClass('hides'); } function delemode() { mode_display.addClass('hides'); } // 新增按钮 $('#add').on('click',function () { showmode(); }); // 模态框中的取消按钮 $('.can').on('click',function () { $('#f1').find('input[type="text"]').val(""); $tbodyEle.removeData(); delemode() }); // 编辑按钮 var $tbodyEle=$('tbody'); var $inputEle= $('#f1').find('input[type="text"]'); //编辑按钮 $tbodyEle.on('click','.edit',function () { var $trEle =$(this).parent().parent(); // 将已经存在的数据放入到模态框输入框中 $($inputEle[0]).val(($($trEle.children()[1]).text())); $($inputEle[1]).val(($($trEle.children()[2]).text())); showmode(); $tbodyEle.data({'trEle':$trEle}); }); //删除 $tbodyEle.on('click','.deles',function () { $(this).parent().parent().remove(); }); // 模态框提交按钮 $('.commit').on('click',function () { var trDateEle=$tbodyEle.data('trEle'); if (trDateEle!==undefined){ ($(trDateEle.children()[1]).text($($inputEle[0]).val())); ($(trDateEle.children()[2]).text($($inputEle[1]).val())); $tbodyEle.removeData(); }else{ var userVal=$($inputEle[0]).val(); var hobbVal=$($inputEle[1]).val(); var numVal=$tbodyEle.children().length+1; var traddEle=document.createElement('tr'); $(traddEle).html('<td>'+numVal+'</td>' +'<td>'+userVal+'</td>' +'<td>'+hobbVal+'</td>' +'<td>' + '<input type="button" value="编辑" class="edit">' + ' <input type="button" value="删除" class="deles">' +'</td>'); $tbodyEle.append(traddEle); delemode(); $($inputEle[0]).val(""); $($inputEle[1]).val(""); } }) }) </script> <style> .backs{ background-color: rgba(0,0,0,0.3); position: absolute; top: 0; right: 0; bottom:0; left: 0; z-index: 998; } .mode{ width: 400px; height: 200px; background-color: white; /*因为在生产环境中,无法确定用户屏幕大小 所以只能先将定位点放在中间位置 */ margin-left: 50%; margin-top: 25%; /* 将div在 移动宽度和高度的一半就能保持 在中间位置 */ position: absolute; left: -200px; top: -100px; z-index: 1000; } .hides{ display: none; } </style> </head> <body> <div class="div1"> <table border="1"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> <th> 操作 </th> </tr> </thead> <tbody > <tr> <td>1</td> <td>元宝</td> <td>玩游戏</td> <td> <input type="button" value="编辑" class="edit"> <input type="button" value="删除" class="deles"> </td> </tr> <tr> <td>2</td> <td>袁妞</td> <td>吃粑粑</td> <td> <input type="button" value="编辑" class="edit"> <input type="button" value="删除" class="deles"> </td> </tr> <tr> <td>3</td> <td>王永美</td> <td>玩狗屎</td> <td> <input type="button" value="编辑" class="edit"> <input type="button" value="删除" class="deles"> </td> </tr> </tbody> </table> </div> <div class="backs hides"></div> <div class="mode hides"> <form action="" id="f1"> <p>用户名:<input type="text"></p> <p>爱好:<input type="text"></p> <p><input type="button" value="提交" class="commit" > <input type="button" value="取消" class="can"></p> </form> </div> <input type="button" value="新增" id="add"> </body> </html>