JQuery DOM操作：設置內容&屬性&添加元素&插入元素&包裹&克隆&移除&替換

JQuery text()、html()、val()

• $(elem).text(str):添加文本內容str到elem類型元素,返回jQuery對象
• $(elem).text():返回第一個elem標簽內的文本內容
• $(elem).html("<a href='##'>a標簽</a>"):添加html內容到elem類型元素,返回jQuery對象
• $(elem).html(""):返回第一個elem標簽內的html內容
• $("input").val(str):給所有input標簽設置值為str,返回jQuery對象
• $("input").val():返回第一個input標簽的value

JQuery each()遍歷

遍歷數組：

var arr = ["a","b","c","d","e"];
$.each(arr,function(index,item){
     console.log(item);
});

遍歷對象

var data = {
     a:1,b:2,c:3
};
 $.each(data,function(index,item){
    console.log(index,item);
 });

JQuery attr()、prop()、data()

• attr():給標簽設置一個或者多個屬性
• prop():給JQuery的DOM元素設置屬性
• data():給JQuery對象的引用增加屬性，不設是DOM屬性
• 標簽設置和引用設置屬性的方法，DOM獲取不到

attr設置標簽屬性

設置屬性

$("div").attr("ab","3");
console.log($("div").attr("ab"));//3
console.log(document.querySelector("div").ab);//undefined

 

設置多個屬性

$("div").attr({
            ab:1,
            cd:2,
            ef:3
        });

 

多個元素設置多個不同屬性值

$("div").attr({
            ab:function(index,item){
                return index + 10;
            },
            cd:function(index,item){
                return index + 100;
            },
            ef:function(index,item){
                return index + 1000;
            }
        });

 

刪除某個屬性：

        $("div").removeAttr("ab");

 

prop設置JQuery對象DOM屬性

$("div").prop("ab",3);

 

data設置JQuery引用屬性

//data
$("div").data("ab","3");
console.log($("div").eq(1).data("ab"));

 

 

添加元素：

        父元素.append(子元素)

        子元素.appendTo(父元素)

var div1 = $("<div></div>");
        $("body").append(div1);
        div1.appendTo("body");

 

插入元素到父元素的最前：

 $("body").prepend("<div>i am fst</div>");
 $("<div>i am fst</div>").prependTo("body");

 

插入某元素的后面，如果有多個就插入到第一個后面

$(".div1").after("<div></div>");
$("<div></div>").insertAfter(".div1");

 

插入到某個元素的前面

$(".div1").before("<div></div>");
$(".span1").before("<div></div>");
$("<div></div>").insertBefore(".span1");

 

包裹與反包裹，外裹和內置

//給所有span外面包裹一層div
$("span").wrap("<div></div>");
//刪除父容器取消包裹
$("span").unwrap();

var arr = ["http://www.qq.com","http://www.taobao.com","http://www.jd.com","http://www.163.com"];
$("span").wrap(function(index,item){
return `<a href='${arr[index]}'></a>`;
});

$("span").unwrap();

//內置，在span的內容里面包裹一個a標簽
$("span").wrapInner("<a href='#'></a>");

 

clone,淺復制與深復制，JQuery中所有clone(true)都是深復制,clone(false)無法復制事件

("<div><span></span></div>").appendTo("body").css({
            width: 50,
            height: 50,
            backgroundColor: "red"
        }).on("click",function(){
            $(this).css({
                backgroundColor:"green"
            });
        }).clone(true).appendTo("body")//clonefalse淺復制,無法復制點擊事件,clonetrue深復制可以

 

刪除元素

$(this).detach():刪除元素但不刪除事件，下次添加的時候事件依然存在

$(this).remove():刪除元素並且刪除事件

var divs = $("<div></div>").appendTo("body").css({
            width: 50,
            height: 50,
            backgroundColor: "red"
}).on("click", function () {
            // $(this).remove();刪除元素與事件
            $(this).detach();//刪除元素但不刪除事件,下次添加的時候依然有
            $("<button>按鈕</button>").appendTo("body").on("click",function(){
                divs.appendTo("body");
            });
});

 

替換元素

$("<span></span>").replaceAll("div");//新.replaceAll.舊
$("div").replaceWith("<span></span>");//舊.替換.新