jquery文件處理及例項之複製樣式條
阿新 • • 發佈：2021-07-26
文件處理
//建立一個標籤物件 $("<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>while True: print('studying...')