实例之复制样式条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div > <div > <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 >--> <!-- <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 > <div > <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>
jquery文档处理及实例之复制样式条
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）