从0到1jQuery入门基础t

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlescriptsrc="../js/jquery-3.5.1.js"/scriptscript(function(){//插入节点//appendTo//(A).prepend(B)，将A插入到B的末尾处("#btn1").click(function(){varstrong="strongjQuery教程/strong";(strong).appendTo("p");});});/script/headbodyp虾米大王/pinputtype="button"id="btn1"value="插入"/body/htmlt

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlescriptsrc="../js/jquery-3.5.1.js"/scriptscript(function(){//插入节点//before//(A).before(B)，表示往A外部的前面插入B("#btn1").click(function(){varstrong="strongjQuery教程/strong";("p").before(strong);});});/script/headbodyp虾米大王/pinputtype="button"id="btn1"value="插入"/body/htmlt

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlescriptsrc="../js/jquery-3.5.1.js"/scriptscript(function(){//插入节点//insertBefore//(A).insertBefore(B)，将A插入到B外部的前面("#btn1").click(function(){varstrong="strongjQuery教程/strong";(strong).insertBefore("p");});});/script/headbodyp虾米大王/pinputtype="button"id="btn1"value="插入"/body/htmlt

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlescriptsrc="../js/jquery-3.5.1.js"/scriptscript(function(){//插入节点//after//(A).after(B)，表示往A外部的后面插入B("#btn1").click(function(){varstrong="strongjQuery教程/strong";("p").after(strong);});});/script/headbodyp虾米大王/pinputtype="button"id="btn1"value="插入"/body/htmlt

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlescriptsrc="../js/jquery-3.5.1.js"/scriptscript(function(){//插入节点//insertAfter//(A).insertAfter(B)，表示将A插入到B外部的后面("#btn1").click(function(){varstrong="strongjQuery教程/strong";(strong).insertAfter("p");});});/script/headbodyp虾米大王/pinputtype="button"id="btn1"value="插入"/body/htmlt

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlescriptsrc="../js/jquery-3.5.1.js"/scriptscript(function(){("#btn_prepend").click(function(){vartext=("#name").val();if(text=="")return;varnode="li"+text+"/li";("ul").prepend(node);});("#btn_prependto").click(function(){vartext=("#name").val();if(text=="")return;varnode="li"+text+"/li";(node).prependTo("ul");});("#btn_append").click(function(){vartext=("#name").val();if(text=="")return;varnode="li"+text+"/li";("ul").append(node);});("#btn_appendto").click(function(){vartext=("#name").val();if(text=="")return;varnode="li"+text+"/li";(node).appendTo("ul");});("#btn_before").click(function(){vartext=("#name").val();if(text=="")return;varnode="p"+text+"/p";("ul").before(node);});("#btn_insertBefore").click(function(){vartext=("#name").val();if(text=="")return;varnode="p"+text+"/p";(node).insertBefore("ul");});("#btn_after").click(function(){vartext=("#name").val();if(text=="")return;varnode="p"+text+"/p";("ul").after(node);});("#btn_insertAfter").click(function(){vartext=("#name").val();if(text=="")return;varnode="p"+text+"/p";(node).insertAfter("ul");});/*总结一下，在jQuery中用于插入节点的方法有4组，prepend和prependToappend和appendTobefore和insertBeforeafter和insertAfter4组方法，可以这样划分：1组和2组是内部插入节点，3组和4组是外部插入节点，轻松好记，可以这样一类是prepend，append，before，after另一类是prependTo，appendTo，insertBefore，insertAfter我个人比较喜欢第一类，符合一般的常用思维模式，但是第二类的使用比较方便，可以直接将节点插入到需要的地方。大家按需学习吧。*/});/script/headbodydivinputtype="text"id="name"brspaninputtype="button"id="btn_prepend"value="prepend"inputtype="button"id="btn_append"value="append"inputtype="button"id="btn_before"value="before"inputtype="button"id="btn_after"value="after"/spanbrspaninputtype="button"id="btn_prependto"value="prependTo"inputtype="button"id="btn_appendto"value="appendTo"inputtype="button"id="btn_insertBefore"value="insertBefore"inputtype="button"id="btn_insertAfter"value="insertAfter"/span/divdivulli虾米大王/li/ul/div/body/htmlt

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlescriptsrc="../js/jquery-3.5.1.js"/scriptscript(function(){//删除元素//remove("#btn1").click(function(){("li:nth-child(4)").remove();});});/script/headbodyulliHTML/liliCSS/liliJavascript/lilijQuery/liliVue.js/li/ulinputtype="button"id="btn1"value="删除"/body/htmlt

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlescriptsrc="../js/jquery-3.5.1.js"/scriptscript(function(){//删除元素//remove方法有返回值("#btn1").click(function(){varli=("li:nth-child(4)").remove();(li).appendTo("ul");});});/script/headbodyulliHTML/liliCSS/liliJavascript/lilijQuery/liliVue.js/li/ulinputtype="button"id="btn1"value="删除"/body/htmlt

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlestyletype="text/css"ulli:nth-child(2),ulli:nth-child(4){background-color:orange;}/stylescriptsrc="../js/jquery-3.5.1.js"/scriptscript(function(){//删除元素//使用remove进行元素互换练习("#btn1").click(function(){varli1=("li:nth-child(2)").remove();varli2=("li:nth-child(3)").remove();(li1).insertAfter("ulli:nth-child(2)");(li2).insertBefore("ulli:nth-child(2)");});});/script/headbodyulliHTML/liliCSS/liliJavascript/lilijQuery/liliVue.js/li/ulinputtype="button"id="btn1"value="互换"/body/htmlt

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlescriptsrc="../js/jquery-3.5.1.js"/scriptscript(function(){//删除元素//remove，是彻底删除，会一并删除元素绑定的事件//detach，是半彻底删除，只删除元素，事件依然有效("li").click(function(){alert(虾米大王);});("#btn1").click(function(){//varli=("li:nth-child(4)").remove();varli=("li:nth-child(4)").detach();(li).appendTo("ul");});});/script/headbodyulliHTML/liliCSS/liliJavascript/lilijQuery/liliVue.js/li/ulinputtype="button"id="btn1"value="删除"/body/html虾米大王

有你的支持，我会更有动力。