jQuery(3)

元素属性操作

在jQuery中，可以对元素的属性执行获取、设置、删除的操作，通过attr()方法可以对元素属性执行获取和设置操作，removeAttr()方法可以删除某一指定的属性。

1.获取元素的属性

语法：attr(name)

参数name表示属性的名称

2.设置元素的属性

单个属性设置语法：attr(key,value)

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

3.删除元素的属性

语法：removeAttr(name)

我们将通过下面示例讲解上述语法:

示例如下：

(1)描述

使用attr()方法设置、获取、删除a标记中href属性。

(2)代码实现

<script type="text/javascript">
$(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");
})
</script>
...省略代码

<h3>attr()方法设置元素属性</h3>
<a data="http://www.sohu.com" id="a1">点我就变</a>
<div>改变后的地址：<span id="tip"></span></div>

元素内容操作

在jQuery中，操作元素内容的方法包括html()和text()。详细如下：

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

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

操作元素的样式

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

示例如下：

(1)描述

使用css()和addClass()方法，改变div元素的背景色，再用removeClass()移除一个元素的样式。

(2)代码实现

<style type="text/css">
    body{font-size:15px;text-align:center}
    div{border:solid 1px #666;
        padding:5px;220px;margin:5px}
    .blue{background-color:blue}
</style>
<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    $("#content0").css("background-color","red");
    $("#content1").addClass("blue");
    $("#rem").click(function(){//click点击事件我们将在后面介绍到。
        $("#content1").removeClass("blue");
    })
})
</script>
...省略代码

### css()方法设置元素样式

<div id="content0">我穿了一件红色外衣</div>
<div id="content1">我穿了一件红色外衣</div>
<div><button id="rem">脱下蓝色的外衣</button></div>

向元素中追加内容

如果在页面中增加某个元素，只需要找到元素的上级节点，然后通过append()向指定的元素中追加内容或者通过appendTo()把内容追加到指定元素内。

如果是在元素前后插入内容，使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容

append()语法形式：$(html).append(content)

appendTo()语法形式：$(content).appendTo(html)

before()的语法形式：$(html).before(content)

after()的语法形式：$(html).after(content)

参数html用于找到需要追加内容的元素字符串，参数content是追加的内容，可以是字符、HTML元素标记还可以是一个返回字符串内容的函数。

示例如下：

(1)描述

向p标记中或前或后分别追加内容。

(2)代码实现

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

复制元素

想要复制元素，调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性

语法形式：$(content).clone()

参数content可以HTML内容、HTML元素标记。

示例如下：

<script>
$(document).ready(function(){
$("#div1").clone().appendTo("#div2");
});
</script>
...省略代码
<div id="#div1">abc</div>
<div id="#div2">123</div>

元素替换

在jQuery中想要替换元素或元素中的内容，replaceWith()和replaceAll()方法都可以但它们调用时，内容和被替换元素所在的位置不同

replaceWith()语法形式：$(selector).replaceWith(content)

replaceAll()语法形式：$(content).replaceAll(selector)

参数selector为被替换的元素，content为替换的内容。

包裹元素

在jQuery中使用wrap()和wrapInner()方法包裹元素和内容，但前者用于包裹元素本身，后者则用于包裹元素中的内容。

wrap()语法形式：$(selector).wrap(wrapper)

wrapInner()语法形式：$(selector).wrapInner(wrapper)

参数selector为被包裹的元素，wrapper参数为包裹元素的格式。

遍历元素

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

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

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

删除元素

在DOM元素操作中，jQuery为删除元素提供了两种方法：remove()和empty()。remove()-删除被选元素(及其子元素)，empty()-从被选元素中删除子元素