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"));//
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>");//旧.替换.新