Python学习第88天（jQuery的文档处理、模态对话框）
下面是jQuery的文档处理方式，同时以及几个练习题。
一、创建一个标签对象
$("<p>") 等同于JavaScript中的doucoment.creatElement，后面可直接跟内容进行创建
二、内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $（“”）的下面子集后面加入"<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() 都是删除标签内容，empty只是清楚文本内容
$("").remove([expr]) 连同标签全部删掉
六、复制
$("").clone([Even[,deepEven]])
clone复制样式条
<!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.1.1.js"></script> <script> $("button").click(function () { //$(".c1").append("<h1>HELLO YUAN</h1>") var $ele=$("<h1></h1>"); $ele.html("HELLO WORLD!"); $ele.css("color","red"); //内部插入 //$(".c1").append($ele); //$ele.appendTo(".c1") //$(".c1").prepend($ele); //$ele.prependTo(".c1") //外部插入 //$(".c1").after($ele) //$ele.insertAfter(".c1") //$(".c1").before($ele) //$ele.insertBefore(".c1") //替换 //$("p").replaceWith($ele) //删除与清空 //$(".c1").empty() //$(".c1").remove() //clone // var $ele2= $(".c1").clone(); // $(".c1").after($ele2) }) </script> </body> </html>
