jQueryDOM操作

jQuery DOM操作

// 创建div
var div=$("<div></div>");
var img=$("<img src='./img/2.jpg'>");
console.log(img);

// 在父容器中追加一个子元素
// 给body里面追加一个"<div></div>"
$("body").append("<div></div>");// 返回前面的body
// 将创建好的div放在body里
var div=$("<div></div>");
$("body").append(div);

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

var arr=[
    {site:"新浪",url:"http://www.sina.com"},
    {site:"京东",url:"http://www.jd.com"},
    {site:"腾讯",url:"http://www.qq.com"},
    {site:"百度",url:"http://www.baidu.com"},
    {site:"网易",url:"http://www.163.com"}
]

// 列表中添加超链接
$("div").append(function(index,item){
    return "<a href='"+arr[index].url+"'>"+arr[index].site+"</a>"
})

<div>新浪</div>
<div>京东</div>
<div>腾讯</div>
<div>百度</div>
<div>网易</div>

// 将添加的标签元素是插入在元素后面，并不是把元素里面的内容替换
var arr=["sina","jd","qq","baidu","163"];
$("div").append(function(index,item){
    return "<a href='http://www."+arr[index]+".com'>"+item+"</a>";
})

// appenTo 将子元素追加在父元素中
$("<div></div>").appendTo("body");// 返回前面需要追加的元素

$("<div></div>").appendTo("body").width(100).height(100).css("backgroundColor","red");
// 错误的,都添加到body中了
$("body").append("<div></div>").width(100).height(100).css("backgroundColor","red")

// 插入在最前面
$("body").prepend("<div>1111</div>");
$("<div>1111</div>").prependTo("body");

// 插入在兄弟元素的后面
$(".div1").after("<div>111</div>");
$("<div>111</div>").insertAfter(".div1");

// 插入在兄弟元素的前面
$(".div1").before("<div>1111</div>");
$("<div>111</div>").insertBefore(".div1");

// 每一个元素添加父容器
$("div").wrap("<div class='div2'></div>");

// 将父容器删除
$("a>div").unwrap();

// 将所有选中的元素放在一个父容器中
$("div").wrapAll("<div class='div2'></div>");

// 将元素里面的内容，包裹一层父容器
var arr=["sina","jd","qq","baidu","163"];
$("div").wrap(function(index,item){
    return "<a href='http://www."+arr[index]+".com'></a>"
})

复制、删除、替换

<div class="div1"></div>
<div>新浪</div>
<div>京东</div>
<div>腾讯</div>
<div>百度</div>
<div>网易</div>
<div></div>

复制

// 复制元素
$("div").appendTo("body");
// jq中的clone全部是深复制
// true是是否保留原事件
$("div").clone(true).appendTo("body");

// 复制了事件
$("div").on("click",function(){
    $(this).css("color","red");
}).clone(true).appendTo("body");

// 没有复制事件
$("div").on("click",function(){
    $(this).css("color","red");
}).clone(false).appendTo("body");

删除

// 删除事件
$("div").remove();
// 保留事件
$("div").detach();
// 清空内容 $("div").html("");
$("div").empty();

// 删除事件
$("div").remove();
// 保留事件
$("div").detach();
// 清空内容 $("div").html("");
$("div").empty();

// remove将元素删除,并且将它所有的事件也移除
var div=$("div").on("click",function(){
    $(this).css("color","red");
}).remove();

// 只删除元素,不移除这个元素的事件
var div=$("div").on("click",function(){
    $(this).css("color","red");
}).detach();
div.appendTo("body");

替换

// 替换元素
$(".div1").replaceWith("<span></span>");
// 创建元素替换旧元素
$("<span></span>").replaceAll(".div1");