jQuery-DOM操作

元素属性操作

1.获取元素的属性

语法：attr(name)
参数name表示属性的名称

2.设置元素的属性

单个属性设置语法：attr(key,value)
多个属性设置语法：attr({key0:value0,key1:value1})

3.删除元素的属性

语法：removeAttr(name)

$(function(){
    $("#a1").attr("href","http://www.baidu.com");//设置a标记中的href属性
    var $url = $("#a1").attr("href");//获取a标记中的href属性
    $("#tip").html($url);
})
$(function(){//删除a标记中的href属性
    $("#a1").removeAttr("href");
})

元素内容操作

语法格式	参数说明	功能描述
html()	无参数	用于获取元素的html内容
html(val)	val参数为元素的html内容	用于设置元素的html内容
text()	无参数	用于获取设置元素的文本内容
text(val)	val参数为元素的文本内容	用于设置设置元素的文本内容

html()方法仅支持XHTML的文档，不能用于XML文档，而text()既支持HTML文档，也支持XML文档

$(function(){ //增加表单中所有属性为可用的元素类别
    var strHtml = $("#divShow").html();//获取HTML内容
    var strText = $("#divShow").text();//获取文本内容
    $("#divHtml").html(strHtml);//设置HTML内容
    $("#divText").text(strText);//设置文本内容
})

操作元素的样式

通过addClass()和css()可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。

	<h3>css()方法设置元素样式</h3>
	<div id="content0">我穿了一件红色外衣</div>
	<div id="content1">我穿了一件红色外衣</div>
	<div><button id="rem">脱下蓝色的外衣</button></div>

.blue{background-color:blue}

$(function(){ //增加表单中所有属性为可用的元素类别
    $("#content0").css("background-color","red");
    $("#content1").addClass("blue");
    $("#rem").click(function(){//click点击事件我们将在后面介绍到。
        $("#content1").removeClass("blue");
    })
})

向元素中追加内容

<p id="id1">append()追加内容：</p>
	<p id="id2">appendTo()追加内容：</p>
	<p id="id3">before()追加到前面</p>
	<p id="id4">after()追加到后面</p>
</body>

$(function(){ //增加表单中所有属性为可用的元素类别
    var $content = "<b>我是append()方法追加的内容</b>";
    var $contentTo = "<b>我是appendTo()方法追加的内容</b>";
    var $before = "<b>我是before()方法追加到前面的内容</b>";
    var $after = "<b>我是before()方法追加到后面的内容</b>";
    $("#id1").append($content);
    $($contentTo).appendTo("#id2");
    $("#id3").before($before);
    $("#id4").after($after);
})

result:

append()追加内容：我是append()方法追加的内容

appendTo()追加内容：我是appendTo()方法追加的内容

我是before()方法追加到前面的内容
before()追加到前面

after()追加到后面

我是before()方法追加到后面的内容

复制元素

想要复制元素，调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性
语法形式：$(content).clone()
参数content可以HTML内容、HTML元素标记。

$(function(){
    $("body").append($("div").clone());
}) 

元素替换

replaceWith()语法形式：$(selector).replaceWith(content)
replaceAll()语法形式：$(content).replaceAll(selector)
参数selector为被替换的元素，content为替换的内容。

 $("#me").replaceWith("<div>人生巅峰</div>");
 $("<div>逝去的青春</div>").replaceAll("#yi");

包裹元素

wrap()语法形式：$(selector).wrap(wrapper)
wrapInner()语法形式：$(selector).wrapInner(wrapper)
参数selector为被包裹的元素，wrapper参数为包裹元素的格式。

 $("p").wrap("<b></b>");//所有段落标记字体加粗
 $("span").wrapInner("<i></i>");//所有段落中的span标记斜体

遍历元素

在DOM元素操作中，有时需要对同一标记的全部元素进行统一操作。在jQuery中，使用each()方法可以实现元素的遍历。

语法形式：$(selector).each(callback)

参数callback是一个function函数，该函数还可以接收一个行参 index，这个形参为遍历元素的序号，序号从0开始；如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取。

<h3>each()遍历元素</h3>
	<div>帽子</div>
	<div>上衣</div>
	<div>裤子</div>
	<div>鞋子</div>

$(function(){ 
    $("div").each(function(index){
        if(index == 2){
            $(this).addClass("red");
        }
    })
})

删除元素

remove()-删除被选元素(及其子元素)，empty()-从被选元素中删除子元素

$(function(){
    $("#rem").click(function(){
        $("#div0").remove();
    });
    $("#emp").click(function(){
        $("#div1").empty();
    });
})