一、JQuery对象
不管是JavaScript还是css，还是JQuery都是对标签进行操作，所以我们的总体步骤都是先找到标签，然后再对标签进行操作。对于JavaScript来说，用id找到只有一个，用class找到的不管你存在几个，得到永远是一个数组，JavaScript的方法是在DOM对象的基础上进行的，而且只能对DOM对象进行操作；对于JQuery来说，不管你用什么方法找的，得到的永远就是一个数组，意味着JQuery对象就是一个数组，这个数组是由DOM对象组成，JQuery的方法只能对JQuery对象进行操作。DOM对象和JQuery对象是可以切换的。
ss为JQuery对象，ss1为DOM对象。
ss[索引] #现在JQuery对象就转换成DOM对象了，就可以用DOM对象的方法来对它进行操作
$(DOM) #现在DOM对象就转换成JQuery对象了，也就可以用JQuery对象的方法来对它进行操作
二、寻找元素
1，选择器查找,语法：$('选择器')，选择器的用法和css一样
基本选择器
$('*')所有标签 $('.class')类选择器 $('#id')id选择器 $('p')标签选择器 $('.class,p,#id')并集选择器 $('p.class')交集选择器
层级选择器
$('.class p')后代选择器 $('.class>p')儿子选择器 $('.class+p')兄弟选择器 $('.class~p')毗邻选择器
基本筛选器
$('li:first')li标签选出来的第一个 $('li:eq(3)')第三个 $('li:even')偶数个0,2,4 $('li:odd')奇数个1,3,5 $('li:gt(1)')大于1 $('li:lt(3)')小于3
属性选择器
$('[属性名]')有这属性的所有标签 $('[属性名=值]')找到属性名=值的标签
表单选择器
$('[type="text"]')可以写成$(':text') 只适用于input标签
2,筛选器
2.1 过滤筛选器
$('li').eq(3) 相当于于$('li:eq(3)')
$('li').first() 等等都是一样的
而且这种用法比基本选择器好用
2.2 查找选择器
查找子标签： $("div").children(".test")只在儿子中找 $("div").find(".test")后代都找
向下查找兄弟标签： $(".test").next()后一个兄弟 $(".test").nextAll()后面的所有兄弟 $(".test").nextUntil(#id)后面在id之前的兄弟
向上查找兄弟标签： $("div").prev()前一个兄弟 $("div").prevAll()前面所有兄弟 $("div").prevUntil(#id)前面在id之后的兄弟
查找所有兄弟标签： $("div").siblings()所有的兄弟
查找父标签： $(".test").parent()父级 $(".test").parents()所有的父级 $(".test").parentUntil(#id)在#id级下的父级
三、操作元素
1，文本操作
$('选择器').html() 相当于js中的DOM对象的innerHTML，拿到文本
$('选择器').text() 相当于js中的DOM对象的innerText，y也是拿到文本，
$('选择器').html('nihao') 相当于js中的DOM对象的innerHTML='nihao',进行赋值操作
$('选择器').text('nihao') 相当于js中的DOM对象的innerText=‘nihao’，进行赋值操作
html（）和text（）两者的区别和js中是一样的
2，事件
2.1 绑定
$('选择器').click(function(){})
对比于js，去掉了‘on’，去掉了‘=’号；而且JQuery对象是一个数组，里面放了n个DOM对象，事件绑定是为每个DOM对象都绑定上了事件，相当于内部自带一个for循环
2.2 委派
$('选择器').on('click','选择器',function(){})
如$('ul').on('click','li',function(){}) 为ul标签下的每个li标签绑定click事件
委派的用处在于：我们在为ul标签里添加li标签之后，添加的li也会具有click事件；但如果使用绑定事件，只会在最开始绑定的li标签才会有事件，后面添加的li就没有事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="dd"> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>5555</li> </ul> <button id="d1">添加li标签</button> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $('#dd').on('click','li',function () { alert('123') }); $('#d1').click(function () { $('#dd').append('<li>666</li>') }) </script> </body> </html>
2.3事件切换
hover事件：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
$('.body').hover(function () {
clearInterval(obj)
},function () {
obj=setInterval(function () {
GO_R()
},2000);
});
第一个参数为一个函数，当鼠标移动到元素上要触发的函数
第二个参数为一个函数，当鼠标移出元素触发的函数
3，属性操作
属性
$('选择器').attr('属性名') #得到属性名对应的值
$('选择器').attr('属性名','值') #设置属性
$('选择器').removeAttr('属性名') #删除属性名对应的属性
class属性
$('选择器').addclass('类名') #为class属性再添加一个类
$('选择器').removeclass('类名') #把class属性的一个类删除
css控制
$('选择器').css('属性名’,'值') 用css样式控制
$('选择器').css({'color':'red','fontSize':'35px'})
4，each循环
我们拿到的JQuery对象是一个数组，后面加上方法就是对数组里的每个DOM对象加上方法。但不是JQuery并没有提供我们想要的所有方法，所有我们手动加for循环也很重要，JQuery提供了一个each（）方法，这就相当于for循环。
4.1 方式一
$.each(obj,fn) obj只能为数组或键值对象，相当于遍历数组
li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
console.log(i,x) i为索引，x为值
});
$.each(dic,function(i,x){
console.log(i,x) i为键，x为值
});
4.2 方式二
$('选择器').each(function(){
this就是每一个DOM对象，$(this)就变成JQuery对象了
在这里就可以对每一个加上方法
})
4.3 扩展
function f(){
for(var i=0;i<4;i++){
if (i==2){
return 相当于continue
}
console.log(i)
}
}
-----------------------------------------------------------------------
for(var i in obj){
ret=func(i,obj[i]) ;
if(ret==false){
return False ; 相当于break
}
}
// 这样就很灵活了:
// <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
// <2>如果你不想return后下面循环函数继续执行,那么就直接写return false
5，节点操作
//创建一个标签对象 $("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>");在p标签里的最后面插入b标签 $("").appendTo(content) ----->$("p").appendTo("div"); 把p标签插入div标签里的最后面 $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");在p标签里的最前面插入b标签 $("").prependTo(content) ----->$("p").prependTo("#foo"); 把p标签插在foo标签的最前面 //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); 在p标签的后面插入b标签 $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); 在p标签的前面插入b标签 $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); 把p标签换成b标签 //删除 $("").empty() 把里面包含的内容清空，但标签还在 $("").remove([expr]) 直接把标签给删除 //复制 $("").clone([Even[,deepEven]])
6，动画效果
6.1 hide（）隐藏，show（）显示，toggle（）相反的
显示隐藏6.2 fadeIn（）淡入，fadeOut（）淡出，fadeToggle相反的，fadeTo（）可以设置透明度
淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> <script> $(document).ready(function(){ $("#in").click(function(){ $("#id1").fadeIn(1000); }); $("#out").click(function(){ $("#id1").fadeOut(1000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); }); }); </script> </head> <body> <button id="in">fadein</button> <button id="out">fadeout</button> <button id="toggle">fadetoggle</button> <button id="fadeto">fadeto</button> <div id="id1" style="display:none; 80px;height: 80px;background-color: blueviolet"></div> </body> </html>
7，css操作
7.1 css位置操作
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .test1{ width: 200px; height: 200px; background-color: wheat; } </style> </head> <body> <h1>this is offset</h1> <div class="test1"></div> <p></p> <button>change</button> </body> <script src="jquery-3.1.1.js"></script> <script> var $offset=$(".test1").offset(); var lefts=$offset.left; var tops=$offset.top; $("p").text("Top:"+tops+" Left:"+lefts); $("button").click(function(){ $(".test1").offset({left:200,top:400}) }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .box1{ width: 200px; height: 200px; background-color: rebeccapurple; } .box2{ width: 200px; height: 200px; background-color: darkcyan; } .parent_box{ position: relative; } </style> </head> <body> <div class="box1"></div> <div class="parent_box"> <div class="box2"></div> </div> <p></p> <script src="jquery-3.1.1.js"></script> <script> var $position=$(".box2").position(); var $left=$position.left; var $top=$position.top; $("p").text("TOP:"+$top+"LEFT"+$left) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .returnTop{ height: 60px; width: 100px; background-color: peru; position: fixed; right: 0; bottom: 0; color: white; line-height: 60px; text-align: center; } .div1{ background-color: wheat; font-size: 5px; overflow: auto; width: 500px; height: 200px; } .div2{ background-color: darkgrey; height: 2400px; } .hide{ display: none; } </style> </head> <body> <div class="div1 div"> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> </div> <div class="div2 div"></div> <div class="returnTop hide">返回顶部</div> <script src="jquery-3.1.1.js"></script> <script> $(window).scroll(function(){ var current=$(window).scrollTop(); console.log(current); if (current>100){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } }); $(".returnTop").click(function(){ $(window).scrollTop(0) }); </script> </body> </html>
7.2 尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .box1{ width: 200px; height: 200px; background-color: wheat; padding: 50px; border: 50px solid rebeccapurple; margin: 50px; } </style> </head> <body> <div class="box1"> DIVDIDVIDIV </div> <p></p> <script src="jquery-3.1.1.js"></script> <script> var $height=$(".box1").height(); var $innerHeight=$(".box1").innerHeight(); var $outerHeight=$(".box1").outerHeight(); var $margin=$(".box1").outerHeight(true); $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin) </script> </body> </html>
四、扩展方法
JQuery自身带有的方法有限，若有一个方法我们会经常使用它，我们就可以自定义函数放到JQuery里面，下次我们就可以调用了。
1，JQuery.extend(object)
扩展JQuery对象本身，用来在JQuery命名空间上新增新函数。
<script> jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5 </script>
2，JQuery.fn.extend(object)
扩展JQuery元素集来提供新的方法（通常用来制作插件）
<body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <script src="jquery.min.js"></script> <script> jQuery.fn.extend({ check: function() { $(this).attr("checked",true); }, uncheck: function() { $(this).attr("checked",false); } }); $(":checkbox:gt(0)").check() </script> </body>
实例
1，tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 100%; background-color: grey; color: blue; font-size: 30px; } .c2{ width: 1000px; margin: 0 auto; } .c2 span{ margin-left: 175px; } .c3{ border: 1px solid black; height: 500px; margin: 0 auto; width: 1000px; } .hide{ display: none; } .cc{ background-color: black; } </style> </head> <body> <div class="c1"> <div class="c2"> <span class="c4" id="i1">栏目一</span> <span class="c4" id="i2">栏目二</span> <span class="c4" id="i3">栏目三</span> </div> </div> <div> <div class="c3"> <span class="hide i1">生命来来往往，来日并不方长。时光如水流逝，岁月无声催老。每一天，都过得忙忙碌碌，每一天，都有不同的精彩。春花秋月，夏雨冬雪，走过了一程又一程，蓦然回首，便已是上有老下有小的年纪。曾经年少，不解父母辛劳，一路成长，一路依靠。所谓养儿方知父母恩，为人父母之后，自己如何操劳，如何不易，唯有经历过后，才知其中艰辛。这世上，从来就没有什么感同身受，唯有亲身经历，才能深解其味。人生，就是一场轮回，年轻的时候，谁不为子女奔波劳累，待到子女羽翼已丰，不再需要护佑之时，自己已是夕阳暮景。而那些曾经的子女，也会成为新的父母，一如自己的父母那般，勤勤恳恳，为自己的子女操劳负累，待到子女再次长成，自己便也老去。谁都有年迈之时。幼时，父母耐心教导，周全照料，待到父母暮年，我们是否也能如同曾经他们对待我们那般，不嫌不怪，周全仔细，用心侍奉。人生，总是吃过生活的苦，才知道幸福有多甜蜜；走过太多弯路，才明白自己要怎么活。衡量幸福的标准，不是你得到了多少，而是要看你当下拥有多少，并且，要懂得珍视。在这个世界上，父母，是唯一尽心付出却不求回报的人，也是最不愿意给我们添麻烦的人。都说，做父母是有有效期的，其实，做儿女又何尝不是？子欲养而亲尚待，绝对是上天给予的最大恩赐。趁父母还年轻，趁父母还健在，多陪陪他们吧。不要整天只知道在朋友圈说什么父母在，人生尚有来处，父母去，人生只剩归途。多拿出些实际行动，去做，去实现。</span> <span class="hide i2">心像是个口袋，什么都不装的叫心灵，装一点的叫心眼，装多了的的叫心计，装更多的叫心机，装得太多了最后那些负累就只能被当作心事了。人活在世往往过于在意近在咫尺的功名利禄，我们的生活是否如与朋友说起时一般绚烂夺目，现实生活中亦有很多人深陷进没有结果的爱情里，明知是错的，还要迂回前进。那些口口声声说着为了生活的衣食无忧、为了孩子不得不继续维持的婚姻。很多人拿不起又放不下，任由空白的生活在自己的眼中周而复始、慢慢的这种负累侵蚀的我们身心不堪重负。试着放下吧，放下你的疲惫、放下那些没有结果的执念、清醒时看到的你和他的未来若是并不理想，不如劝自己趁早放下，长痛不如短痛。再试着看开些，有钱就会拥有快乐么？就像你耗尽心力换得了工作场上的升职机会，而就在你即将上任时被查出了重症，钱能换回健康么？再多的钱能换回你的生命，换回勃勃生机的青春么？钱固然重要，可是与生命、与亲情、爱情比起来，钱真的没有那么重要。有形的财富无法与无价的情感、生命相提并论，何来取舍一说呢。人一定要想清三个问题，第一你有什么，第二你要什么，第三你能放弃什么。对于多数人而言：有什么，我们往往很轻易的就评价出自己的现状；那要什么，大多数人内心也有明确的想法；那么问题来了，现在你告诉我你能放弃什么，几乎没有人可以做到不放弃就轻易获得了全部你想要的东西。人生不会每一件事都会让自己称心如意，常言道：人为财死，鸟为食亡。但有多少人为了事业有成，最后倒在了工作岗位上，那些口耳相传的过劳案例并非偶然意外、就像疾病的发展也是有一个循序渐进的过程。外在的过劳加上心里的过度忧思，外因内因从不分离。那些远赴千里外的地方工作的子女，其家中病重老母为不让远方的儿过于掂念，不忍心在孩子耳边传递生病讯息，弥留之际也未能见上最后一面。我并不赞成那些抛家舍业的一颗心思完全放在工作上的做法，工作一时的，即便离开这，你仍有再次获得的机会。而家庭、健康却要陪伴你很久，且一旦失去就是永远。或许你是为财而死，但是不值得。生活中很多人喜欢就一件事左右摇摆，举棋不定。轻易落子怕输了，一子不落怕错过。于是他们一直纠结于细微得不值得一提的小事，让自己始终活在紧张的泥潭不能自拔。在自己短暂的一生中，谨小慎微，防微杜渐，也许别人的一句话，一个眼神，一个表情，都会不断揣摩，别人随口一说的话却始终放在心里耿耿于怀，凡事有一点端倪便以偏概全，杞人忧天。所以这些人总是活得很累，舒心二字与他们完全绝缘。其实人生有一种心态叫放下，。不必凡事都争个明白，我们生活的这个社会本就很复杂，然而很多人把这个本来就复杂的社会弄得更加复杂，复杂的无章可循。贪婪的人容易受到打击。欲望越少，生活越幸福。</span> <span class="hide i3">“感恩之心，幻化成蝶”雅而不失原本滋色，其实这八个字传递的是一种高度，人生在世因为懂得感恩，所以不再抱怨生活艰辛，因为懂得感恩，所以不去计较过多的利益得失，因为懂得感恩，所以不再在乎快乐或是悲伤，伤或不伤的这段过程本身就是一种幸福。曾看过这样一段话，其出自哈佛大学图书馆馆训：“你所浪费的今天，是昨天死去的人奢望的明天。你所厌恶的现在，是未来的你回不去的曾经。”自己就算再不堪，你还拥有大把的生命去挥霍，你还可以尽情享受生活，张开双手拥抱明早初生的太阳。感恩生命，活着就是最宝贵的拥有。感恩生活说到感恩，首先对自己说上一句谢谢，谢谢你始终默默坚守，谢谢你无论越过多少沟壑，通往前方的路是曲折是坎坷你都从未放弃行走。英国作家萨克雷说：“生活就是一面镜子，你笑，它也笑；你哭，它也哭。”“人有悲欢离合，月有阴晴圆缺。”就如同这诗句一般，人生在世，不如意事十有八九。难过、失落、彷徨注定贯穿在我们的生命线中的，若你过度在意、纠结那你就会始终陷入困顿的沼泽再无法自拔。没有一帆风顺的人生，有的只是内心的波澜不惊，从容不迫。如你抱怨，那你看到的世界处处不顺心意。你若感恩，很多事便化作是过眼烟云。内心保持一份安宁是我们对生命最好的感谢。生活中的幸事教会你微笑、自信。顺境是心情，逆境是心态，更是眼界和格局。生活中的各种坎坷教会了你成长。以积极心态勇敢的面对生活中那些困顿的人更坚强、更懂得挑战和突破自我，从而实现生命的价值，让生命不虚度。“塞翁失马，焉知非福”、“祸兮，福之所倚，福兮，祸之所伏。”不执着问题表象，保持头脑的清醒，静看人生，那么得失也亦不必在短时间内拍下定论，问题中或许还潜藏着陷阱和转机。 古诗中说：“山穷水尽疑无路，柳暗花明又一村。”日常生活当中，许多人经常以个人的利益得失来衡量事情的好坏，有些人每天都为蝇头小利或喜或忧。然由于人们看到的只是事情表象，得到未必是福，失去也不一定是祸。“物极必反，否极泰来。”没有挫折就不会有智慧，没有付出就难以有收获。一失败就是一次假期，乐观豁达之人都懂得享受假期而不会怨天尤人，反而会利用这种机会休养好自己的身心，冷静的思考人生、总结经验，在假期过后重踏人生旅途时就会出现新的转机。即使是遇到了最坏的状况时，也应该看到人生处处隐藏着令人意想不到的机会，坦然面对人生中的挫折，百折不挠，就必能走向光明的彼岸。</span> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $('.c4').click(function () { var ss=`.${this.id}`; $(ss).removeClass('hide'); $(ss).siblings().addClass('hide'); $(this).addClass('cc'); $(this).siblings().removeClass('cc'); }) </script> </body> </html>
2，轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> .body{ position: relative; margin: 0 auto; border: 1px solid black; width: 800px; height: 600px; } img{ position: absolute; left: 0; top: 0; height: 600px; width: 800px; } li{ display: inline-block; width: 20px; height: 20px; border-radius: 50%; margin-left: 33px; background-color: grey; } ul{ position: absolute; top: 550px; left: 300px; } .le_ri{ position: absolute; top: 250px; left: 0; width: 100%; height: 100px; } .left{ background-color: grey; width: 50px; font-size:80px; float: left; opacity: 0.7; border-style: none; line-height: 100px; } .right{ background-color: grey; width: 50px; font-size: 80px; float: right; opacity: 0.7; border-style: none; line-height: 100px; } .change{ background-color: red; } </style> </head> <body> <div class="body"> <div> <img src="1.jpg" class="c1"> <img src="2.jpg" class="c2"> <img src="3.jpg" class="c2"> </div> <div> <ul> <li></li> <li></li> <li></li> </ul> </div> <div class="le_ri"> <!--<button class="left"><</button>--> <div class="left"><</div> <!--<button class="right">></button>--> <div class="right">></div> </div> </div> <script> $('img').eq(0).fadeIn(200).siblings().fadeOut(200); $('li').eq(0).addClass('change').siblings().removeClass('change'); function GO_R() { if (num>1){ num=-1; } num++; $('img').eq(num).fadeIn(200).siblings().fadeOut(200); $('li').eq(num).addClass('change').siblings().removeClass('change'); } function GO_L() { if (num==0){ num=3; } num--; $('img').eq(num).fadeIn(200).siblings().fadeOut(200); $('li').eq(num).addClass('change').siblings().removeClass('change'); } var num=0; obj=setInterval(function () { GO_R() },2000); $('.body').hover(function () { clearInterval(obj) },function () { obj=setInterval(function () { GO_R() },2000); }); $('.left').click(function () { GO_L() }); $('.right').click(function () { GO_R() }) </script> </body> </html>
3，表格增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="bootstrap/js/bootstrap.js"></script> </head> <body> <div class="container"> <button class="btn btn-info btn-sm col-md-offset-2" id="add">添加</button> </div> <div class="hide form2 container"> 姓名<input type="text" class="cc"> 年龄<input type="text" class="cc"> 部门<input type="text" class="cc"> 薪水<input type="text" class="cc"> <button class="btn btn-success certain btn-sm">确定</button> <button class="btn btn-success quxiao btn-sm">取消</button> </div> <div class="container hide form1" > 姓名<input type="text" class="cc1"> 年龄<input type="text" class="cc1"> 部门<input type="text" class="cc1"> 薪水<input type="text" class="cc1"> <button class="btn btn-success" id="submit">提交</button> <button class="btn btn-success quxiao" >取消</button> </div> <div class="container"> <table class="table table-bordered"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>部门</th> <th>薪水</th> <th>操作</th> </tr> </thead> <tbody id="tbody"> <tr> <td>1</td> <td>王小兵</td> <td>24</td> <td>js</td> <td>7000</td> <td><button class="btn btn-danger del btn-sm">删除</button><button class="btn btn-warning edit btn-sm">编辑</button></td> </tr> <tr> <td>2</td> <td>李浩</td> <td>26</td> <td>前端</td> <td>10000</td> <td><button class="btn btn-danger del btn-sm">删除</button><button class="btn btn-warning edit btn-sm">编辑</button></td> </tr> <tr> <td>3</td> <td>况波</td> <td>25</td> <td>python</td> <td>9000</td> <td><button class="btn btn-danger del btn-sm">删除</button><button class="btn btn-warning edit btn-sm">编辑</button></td> </tr> </tbody> </table> </div> <script> $('#add').click(function () { $('.form1').removeClass('hide'); }); $('#submit').click(function () { var $tr=$('<tr></tr>'); var num=$('tr').length; // num=parseInt($('tr:last td:first').html())+1; var $td1=$('<td>'+num+'</td>'); $tr.append($td1); $('.cc1').each(function () { var $td=$('<td>'+this.value+'</td>'); $tr.append($td); }); var $td2=$('<td><button class="btn btn-danger del btn-sm">删除</button><button class="btn btn-warning edit btn-sm">编辑</button></td>'); $tr.append($td2); $('tbody').append($tr); $('.form1').addClass('hide'); }); $('#tbody').on('click','.del',function () { $(this).parent().parent().nextAll().each(function () { $(this).children().first().html(parseInt($(this).children().first().html())-1); }); $(this).parent().parent().remove(); }); var father; $('#tbody').on('click','.edit',function () { $('.form2').removeClass('hide'); father=$(this).parent().parent().children('td'); }); $('.certain').click(function () { var zz=$('.cc'); for (var i=0;i<4;i++){ father.eq(i+1).html(zz.eq(i).val()); } $('.form2').addClass('hide'); }); $('.quxiao').click(function () { $('.form2').addClass('hide'); $('.form1').addClass('hide'); }) </script> </body> </html>