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

巴特西

JQuery DOM操作：设置内容&属性&添加元素&插入元素&包裹&克隆&移除&替换

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

JQuery each()遍历

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

attr设置标签属性

删除某个属性：

prop设置JQuery对象DOM属性

data设置JQuery引用属性

添加元素：

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

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

插入到某个元素的前面

包裹与反包裹，外裹和内置

clone,浅复制与深复制，JQuery中所有clone(true)都是深复制,clone(false)无法复制事件

删除元素

替换元素

最新文章

热门文章