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>
浙公网安备 33010602011771号