文档处理
//创建一个标签对象 $("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]])
实例之复制样式条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="item"> <input type="button" value="+" onclick="add(this);"> <input type="text"> </div> </div> <script src="jquery-1.11.3.min.js"></script> <script> //var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗? function add(self){ // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加 var $clone_obj=$(self).parent().clone(); $clone_obj.children(":button").val("-").attr("onclick","removed(this)"); $(self).parent().parent().append($clone_obj); } function removed(self){ $(self).parent().remove() } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- <div class="c1">--> <!-- <p>ppp</p>--> <!-- </div>--> <!-- <button>add</button>--> <!-- <script src="jquery-3.3.1.js"></script>--> <!-- <script>--> <!-- $('button').click(function () {--> <!-- // $('.c1').append('<h1>hello</h1>');--> <!-- let $ele=$('<h1></h1>');--> <!-- $ele.html('hello world');--> <!-- $ele.css('color','red');--> <!--// 标签内部插入--> <!-- // $('.c1').append($ele); // 追加到p标签后面--> <!-- // $ele.appendTo('.c1'); // 追加到p标签后面--> <!-- // $('.c1').prepend($ele); // 追加到p标签前面--> <!-- // $ele.prependTo('.c1'); // 追加到p标签前面--> <!--// 标签外部插入--> <!-- // $('.c1').after($ele); // 追加到div标签后面--> <!-- // $ele.insertAfter('.c1'); // 追加到div标签后面--> <!-- // $('.c1').before($ele); // 追加到div标签前面--> <!-- // $ele.insertBefore('.c1'); // 追加到div标签前面--> <!--// 替换--> <!-- // $('p').replaceWith($ele); // 将创建的h1标签替换p标签--> <!--// 删除--> <!-- // $('.c1').empty(); // div标签还在--> <!-- // $('.c1').remove(); // div标签已不存在--> <!--// 复制--> <!-- let $ele2=$('.c1').clone(); // 复制出来的标签都是一样的，连class属性也是，所以此时并不是一个一个的添加--> <!-- $('.c1').after($ele2);--> <!-- })--> <!-- </script>--> <!--实例之复制样式条--> <div class="outer"> <div class="item"> <button onclick="add(this)">+</button> <input type="text"> </div> </div> <script src="jquery-3.3.1.js"></script> <script> function add(self) { let $ele3=$(self).parent().clone(); // 把onclick也复制了 $ele3.children('button').html('-').attr('onclick','remove(this)'); $('.outer').append($ele3); }; function remove(self) { $(self).parent().remove(); }; </script> </body> </html>