1. 访问元素

　　在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问主要包括对元素属性、内容、值、CSS的操作。

1.1 元素属性操作

1.1.1 设置或返回被选元素的属性值

　　语法格式：

attr( name | properties | key, value | fn)

其中，参数

　　name：属性名称

　　properties：作为属性的“名/值对”对象

　　key, value：属性名称，属性值

　　key, function(index, attr)：

　　　　◊ 属性名称；

　　　　◊ 返回属性值的函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值。

1.1.2 获取元素的属性

　　语法格式：

attr( name )

其中，参数

　　name：属性的名称

　　示例：

$("img").attr("src");

　　语法格式：

attr(key, function(index, attr))

其中，参数

　　key：属性名称

　　index：当前元素的索引号，整个函数返回一个字符串作为元素的属性值。

　　示例：

$("img").attr("title", function () {

    return this.src;

});

1.1.3 设置元素的属性

　　语法格式：

attr(key, value)

其中，参数

　　key：属性的名称

　　value：属性的值。

　　设置多个属性语法格式：

attr({ key0: value0, key1: value1 })

　　示例：

$("img").attr("src", "images/01.jpg");
$("img").attr({

    src: "images/01.jpg",

    alt: "第一张"

});

1.1.4 删除元素的属性

　　语法格式：

removeAttr(name)

其中，参数

　　name：元素属性的名称

　　示例：

$("img").removeAttr("src");

2. 元素内容操作

　　jQuery中操作元素内容的方法包括：html()和text()。html()获取或设置元素的HTML内容，text()获取或设置元素文本内容。

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

　　示例：

var strHTML = $("#divContainer").html(); // 获取HTML内容

var strText = $("#divContainer").text(); // 获取文本内容

$("#divHTML").html(strHTML); // 设置HTML内容

$("#divText").text(strText); // 设置文本内容

3. 获取/设置元素值

　　语法格式：

val([val|fn|arr])

其中，参数

　　无参数：获取元素的值

　　val：要设置的值

　　function(index, value)：函数返回一个要设置的值。参数：index为元素在集合中的索引位置，text为原先的text值。

　　array：用于 check/select 的值

　　示例：

$("input").val();
$("input").val("hello world!");
$("input:text.items").val(function () {

    return this.value + ' ' + this.className;

});

　　示例：array

<select id="single">

    <option>item1</option>

    <option>item2</option>

    <option>item3</option>

    <option>item4</option>

    <option>item5</option>

    <option>item6</option>

</select>
<script type="text/javascript">

    $(function () {

        $("#single").val("item2");;

    });

</script>
<select id="multiple" multiple="multiple">

    <option>item1</option>

    <option>item2</option>

    <option>item3</option>

    <option>item4</option>

    <option>item5</option>

    <option>item6</option>

</select>
$("#multiple").val(["item2", "item5"]);
<select id="multiple" multiple="multiple">

    <option selected="selected">item1</option>

    <option>item2</option>

    <option selected="selected">item3</option>

    <option>item4</option>

    <option selected="selected">item5</option>

    <option>item6</option>

</select>
$("#multiple").val().join(",")

　　示例：checkbox、radio

<input type="checkbox" value="check1" /> check1

<input type="checkbox" value="check2" /> check2

<input type="radio" value="radio1" /> radio1

<input type="radio" value="radio2" /> radio2
$("input").val(["check2", "radio1"]);

4. 元素样式操作

4.1 直接设置元素样式属性

　　语法格式：

css( name | pro | [,val | fn] )

其中，参数

　　name：样式属性名称

　　properties：要设置为样式属性的名/值对

　　name,value：样式属性名，样式属性值

　　name,function(index, value)：

　　　　name：属性名

　　　　function(index, value)：函数返回要设置的属性值。参数index为元素在对象集合中的索引位置，value是原先的属性值。

　　示例：

$("div").css("color");
$("div").css("color", "ff0011");
$("div").css({

    "color": "#FF0011",

    "background-color":"#FFFFEE"

});
$("div").click(function () {

    $(this).css({

        width: function (index, value) {

            return parseFloat(value) * 1.2;

        },

        height: function (index, value) {

            return parseFloat(value) * 1.2;

        }

    });

});

4.2 增加CSS类

　　语法格式：

addClass(class|fn)

其中，参数

　　class：一个或多个类名称，多个类名称之间使用空格分开。

　　function(index, class)：函数必须返回一个或多个空格分隔的类名。参数index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

　　示例：

$("li").addClass("item");
$("li").addClass("item selected");
$("li").addClass(function () {

    return "Item-" + $(this).index();

});

4.3 切换类

　　语法格式：

toggleClass(class|fn[,sw])

其中，参数

　　class：类名称，当元素中包含class的CSS类时，删除该类，否则添加该类名称。

　　示例：

<script type="text/javascript">

    $(function () {

        $("li").bind("click",function(){

            $(this).toogleClass("selected");

        });

    });

</script>

4.4 删除类

　　语法格式：

removeClass([class|fn])

其中，参数

　　class：一个或多个类名称，多个类名称之间使用空格分开。如果没有类名，则删除元素的全部类。

　　function(index, class)：函数必须返回一个或多个空格分隔的类名。参数index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

　　示例：

$("li").removeClass("selected");
$("li").removeClass("item selected");
$("li").removeClass(); // 删除元素全部类
// 删除元素上与前面重复的class

$("li").removeClass(function() {

    return $(this).prev().attr("class");

});

5. 创建节点元素

　　函数$()用于动态创建页面元素，语法格式：

$(html)

其中，参数

　　html：用于动态创建DOM元素的HTML标记字符串。

　　示例：

<script type="text/javascript">

    $(function () {

        $("body").html("<ul><li class='item'>选项1</li><li class='item selected'>选项2</li><li class='item'>选项3</li></ul>")

    });

</script>

6. 插入节点

6.1 内部插入节点

　　内部插入节点方法表：

语法格式 参数说明 功能描述
append(content) content：追加到目标中的内容 向所选元素的结尾（仍然在内部）插入指定内容
append(function(index, html)) 通过function函数返回需要追加到目标中的内容 向所选择元素的结尾（仍然在内部）插入function函数所返回的内容
appendTo(content) content：追加到目标中的内容 把所有选取的元素追加到另一个指定的元素集合中
prepend(content) content：前置到目标中的内容 向所选元素的开头（仍然在内部）插入指定内容
prepend(function(index, html)) 通过function函数返回需要前置到目标中的内容 向所选择元素的开头（仍然在内部）插入function函数所返回的内容
prependTo(content) content：前置到目标中的内容 把所有选取的元素前置到另一个指定的元素集合中

6.1.1 append(content | fn)

　　语法格式：

append(content | fn)

向选取的元素内部追加内容，其中，参数

　　content：要追加到目标中的内容

　　function(index, html)：返回一个HTML字符串，用于追加到每一个匹配元素的里边。

　　　　index-可选：对象在这个集合中的索引值

　　　　html-可选：被选取元素原先的html内容

　　示例：append(content)

$(selector).append(content)

　　初始HTML：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

</ul>
<script type="text/javascript">

    $(function () {

        $("ul").append("<li class='item'>选项3</li>");

    });

</script>

　　运行结果：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>

　　示例：append(function(index,html))

$(selector).append(function(index,html))
<script type="text/javascript">

    $(function () {

        $("ul").append(function () {

            return "<li class='item'>选项3</li>";

        });

    });

</script>

6.1.2 appendTo(content)

　　语法格式：

appendTo(content)

在被选元素的结尾（仍然在内部）插入指定内容。其中，参数

　　content：要追加到目标中的内容

　　append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

　　示例：appendTo(content)

$(content).appendTo(selector)

其中，参数

　　content：需要插入的内容

　　selector：选取的需要追加内容的元素

<script type="text/javascript">

    $(function () {

        $("<li class='item'>选项3</li>").appendTo("ul");

    });

</script>

6.1.3 prepend(content | fn)

　　语法格式：

prepend(content | fn)

向选取的元素内部前置内容，其中，参数

　　content：要前置到目标中的内容

　　function(index, html)：返回一个HTML字符串，用于前置到每一个匹配元素的里边。

　　　　index-可选：对象在这个集合中的索引值

　　　　html-可选：被选取元素原先的html内容

　　示例：prepend(content)

$(selector).prepend(content)

　　初始HTML：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

</ul>
<script type="text/javascript">

    $(function () {

        $("ul").prepend("<li class='item'>选项0</li>");

    });

</script>

　　运行结果：

<ul>

    <li class="item">选项0</li>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

</ul>

　　示例：prepend(function(index,html))

$(selector).prepend(function(index,html))
<script type="text/javascript">

    $(function () {

        $("ul").prepend(function () {

            return "<li class='item'>选项0</li>";

        });

    });

</script>

6.1.4 prependTo(content)

　　语法格式：

prependTo(content)

在被选元素的开头（仍然在内部）插入指定内容。其中，参数

　　content：要前置到目标中的内容

　　prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。

　　示例：prependTo(content)

$(content).prependTo(selector)

其中，参数

　　content：需要插入的内容

　　selector：选取的需要前置内容的元素

<script type="text/javascript">

    $(function () {

        $("<li class='item'>选项0</li>").prependTo("ul");

    });

</script>

6.2 外部插入节点

　　外部插入节点方法表：

语法格式 参数说明 功能描述
after(content) content：插入目标元素外部后面的内容 向所选元素外部后面插入指定内容
after(function) 通过function函数返回插入目标外部后面的内容 向所选元素外部后面插入function函数所返回的内容
before(content) content：插入目标元素外部前面的内容 向所选元素外部前面插入指定内容
before(function) 通过function函数返回插入目标外部前面的内容 向所选元素外部前面插入function函数所返回的内容
insertAfter(content) content：插入目标元素外部后面的内容 将所选择的元素插入到另一个指定的元素外部后面
insertBefore(content) content：插入目标元素外部前面的内容 将所选择的元素插入到另一个指定的元素外部前面

6.2.1 after(content | fn)

　　after(content | fn) 方法在被选元素后插入指定的内容。

　　语法：

$(selector).after(content)

其中，参数

　　content：需要插入的内容（可包含 HTML 标签）。

$(selector).after(function(index))

其中，参数

　　function(index)：函数必须返回一个待插入的html字符串。

　　　　index - 可选：接收选择器的 index 位置。

　　示例：after(content)

　　初始HTML：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $(".selected").after("<li class='item'>选项0</li>");

    });

</script>

　　运行结果：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项0</li>

    <li class="item">选项3</li>

</ul>

　　示例：after(function(index))

<script type="text/javascript">

    $(function () {

        $(".selected").after(function () {

            return "<li class='item'>选项0</li>";

        });

    });

</script>

6.2.2 before(content | fn)

　　before(content | fn)方法在被选元素前插入指定的内容。

　　语法：

$(selector).before(content)

其中，参数

　　content：需要插入的内容（可包含 HTML 标签）。

$(selector).before(function(index))

其中，参数

　　function(index)：函数必须返回一个待插入的html字符串。

　　　　index - 可选：接收选择器的 index 位置。

　　示例：before(content)

　　初始HTML：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $(".selected").before("<li class='item'>选项0</li>");

    });

</script>

　　运行结果：

<ul>

    <li class="item">选项1</li>

    <li class="item">选项0</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>

　　示例：before(function(index))

<script type="text/javascript">

    $(function () {

        $(".selected").before(function () {

            return "<li class='item'>选项0</li>";

        });

    });

</script>

6.2.3 insertAfter(content)

　　insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

　　语法：

$(content).insertAfter(selector)

其中，参数

　　content：指定要插入的内容。可能的值：选择器表达式 \ HTML 标记

　　selector：指定在何处插入被选元素。

　　示例：insertAfter HTML标记

　　初始HTML：

<ul>

    <li id="item-01" class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $("<li class='item'>选项0</li>").insertAfter(".selected");

    });

</script>

　　运行结果：

<ul>

    <li id="item-01" class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项0</li>

    <li class="item">选项3</li>

</ul>

　　示例：insertAfter选择器表达式

　　初始HTML：

<ul>

    <li id="item-01" class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $("#item-01").insertAfter(".selected");

    });

</script>

　　运行结果：

<ul>

    <li class="item selected">选项2</li>

    <li id="item-01" class="item">选项1</li>

    <li class="item">选项3</li>

</ul>

6.2.4 insertBefore(content)

　　insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

　　语法：

$(content).insertBefore(selector)

其中，参数

　　content：指定要插入的内容。可能的值：选择器表达式 \ HTML 标记

　　selector：指定在何处插入被选元素。

　　示例：insertBefore HTML标记

　　初始HTML：

<ul>

    <li id="item-01" class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $("<li class='item'>选项0</li>").insertBefore(".selected");

    });

</script>

　　运行结果：

<ul>

    <li id="item-01" class="item">选项1</li>

    <li class="item">选项0</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>

　　示例：insertBefore选择器表达式

　　初始HTML：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li id="item-03" class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $("#item-03").insertBefore(".selected");

    });

</script>

　　运行结果：

<ul>

    <li class="item">选项1</li>

    <li id="item-03" class="item">选项3</li>

    <li class="item selected">选项2</li>

</ul>

7. 复制节点

　　clone() 方法生成被选元素的副本，包含子节点、文本和属性。

　　语法：

$(selector).clone(includeEvents)

其中，参数

　　includeEvents：可选，布尔值，true或者空，是否复制元素的所有事件处理。

　　示例：clone()

　　初始HTML：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $("li").click(function () {

            $(this).after($(this).clone());

        });

    });

</script>

　　运行结果：

　　示例：clone(true)

<script type="text/javascript">

    $(function () {

        $("li").click(function () {

            $(this).after($(this).clone(true));

        });

    });

</script>

　　以上示例，在复制出来的元素li，单击仍可继续复制自身li。

　　示例：clone() DOM中包含事件

　　初始HTML：

<ul>

    <li class="item" onclick="$(this).after($(this).clone());">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $("li").click(function () {

            $(this).after($(this).clone());

        });

    });

</script>

　　以上示例，在复制出来的第一个li元素，单击仍可继续复制自身li，初始HTML中其他li的复制元素则不能再复制自身。

<script type="text/javascript">

    $(function () {

        $("li").click(function () {

            $(this).clone().insertAfter($(this));

        });

    });

</script>

8. 替换节点

8.1 replaceWith(content|fn)

　　replaceWith(content|fn)用指定的 HTML 内容或元素替换被选元素。

　　语法：

$(selector).replaceWith(content)

其中，参数：

　　selector：选取的需要替换的元素。

　　content：替换被选元素的内容。

　　　　　　  可能的值：HTML 代码 - 比如 ("<div></div>")、新元素 - 比如 (document.createElement("div"))及已存在的元素 - 比如 ($(".div1"))。

　　已存在的元素不会被移动，只会被复制，并包裹被选元素。

　　示例：替换HTML代码

　　初始HTML：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $(".selected").replaceWith("<li class='item'>选项2</li>");

    });

</script>

　　运行结果：

<ul>

    <li class="item">选项1</li>

    <li class="item">选项2</li>

    <li class="item">选项3</li>

</ul>

　　示例：替换已存在的元素

　　初始HTML：

<ul>

    <li id="item-01" class="item">选项1</li>

    <li id="item-02" class="item selected">选项2</li>

    <li id="item-03" class="item">选项3</li>

</ul>

<ul>

    <li id="item-04" class="item">选项4</li>

    <li id="item-05" class="item">选项5</li>

    <li id="item-06" class="item">选项6</li>

</ul>
<script type="text/javascript">

    $(function () {

        $(".selected").replaceWith($("#item-05"));

    });

</script>

　　运行结果：

<ul>

    <li id="item-01" class="item">选项1</li>

    <li id="item-05" class="item">选项5</li>

    <li id="item-03" class="item">选项3</li>

</ul>

<ul>

    <li id="item-04" class="item">选项4</li>

    <li id="item-06" class="item">选项6</li>

</ul>

　　示例：replaceWith(function)

<script type="text/javascript">

    $(function () {

        $(".selected").replaceWith(function () {

            return "<li id='item-02' class='item'>选项2</li>";

        });

    });

</script>
<script type="text/javascript">

    $(function () {

        $(".selected").replaceWith(function () {

            return $("#item-03");

        });

    });

</script>

8.2 replaceAll(selector)

　　replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。

　　语法：

$(content).replaceAll(selector)

其中，参数：

　　selector：选取的需要替换的元素。

　　content：替换被选元素的内容。

　　　　　　  可能的值：HTML 代码 - 比如 ("<div></div>")、新元素 - 比如 (document.createElement("div"))及已存在的元素 - 比如 ($(".div1"))。

　　replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。

　　示例：

　　初始HTML：

<ul>

    <li id="item-01" class="item">选项1</li>

    <li id="item-02" class="item selected">选项2</li>

    <li id="item-03" class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $("#item-01").replaceAll($("#item-03"));

    });

</script>

　　运行结果：

<ul>

    <li id="item-02" class="item selected">选项2</li>

    <li id="item-01" class="item">选项1</li>

</ul>

9. 包裹节点

　　包裹节点方法表：

9.1 wrap(html|element|fn)

　　wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。

　　语法：

$(selector).wrap(wrapper)

其中，参数：

　　selector：选取的需要替换的元素。

　　wrapper：包裹被选元素的内容。

　　　　　　  可能的值：HTML 代码 - 比如 ("<div></div>")、新元素 - 比如 (document.createElement("div"))及已存在的元素 - 比如 ($(".div1"))。

　　已存在的元素不会被移动，只会被复制，并包裹被选元素。

$(selector).wrap(function())

其中，参数

　　function()：返回包裹元素的函数。

　　示例：wrap() HTML代码

　　初始HTML：

<div id="container">

    <span>选项1</span>

    <span>选项2</span>

    <span>选项3</span>

</div>
<script type="text/javascript">

    $(function () {

        $("#container span").wrap("<div class='item'></div>");

    });

</script>

　　运行结果：

<div id="container">

    <div class="item">

        <span>选项1</span>

    </div>

    <div class="item">

        <span>选项2</span>

    </div>

    <div class="item">

        <span>选项3</span>

    </div>

</div>

　　示例：wrap(function)

　　初始HTML：

<div id="container">

    <span>选项1</span>

    <span>选项2</span>

    <span>选项3</span>

</div>
<script type="text/javascript">

    $(function () {

        $("#container span").wrap(function () {

            return "<div class='item' title='" + $(this).text() + "'></div>";

        });

    });

</script>

　　运行结果：

<div id="container">

    <div class="item" title="选项1">

        <span>选项1</span>

    </div>

    <div class="item" title="选项2">

        <span>选项2</span>

    </div>

    <div class="item" title="选项3">

        <span>选项3</span>

    </div>

</div>

9.2 wrapAll(html|ele)

　　wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。

　　语法：

$(selector).wrapAll(wrapper)

其中，参数

　　wrapper：包裹被选元素的内容。

　　　　　　  可能的值：HTML 代码 - 比如 ("<div></div>")、新元素 - 比如 (document.createElement("div"))及已存在的元素 - 比如 ($(".div1"))。

　　示例：wrapAll(html)

　　初始HTML：

<div id="container">

    <span>选项1</span>

    <span>选项2</span>

    <span>选项3</span>

</div>
<script type="text/javascript">

    $(function () {

        $("#container span").wrapAll("<div class='item'></div>");

    });

</script>

　　运行结果：

<div id="container">

    <div class="item">

        <span>选项1</span>

        <span>选项2</span>

        <span>选项3</span>

    </div>

</div>

　　示例：wrapAll(element)

　　初始HTML：

<div id="container">

    <span>选项1</span>

    <span>选项2</span>

    <span>选项3</span>

</div>
<script type="text/javascript">

    $(function () {

        $("#container span").wrapAll(document.createElement("div"));

    });

</script>

　　运行结果：

<div id="container">

    <div>

        <span>选项1</span>

        <span>选项2</span>

        <span>选项3</span>

    </div>

</div>

9.3 wrapInner(htm|element|fn)

　　wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。

　　语法：

$(selector).wrapInner(wrapper)

其中，参数

　　wrapper：包裹被选元素的内容。

　　　　　　  可能的值：HTML 代码 - 比如 ("<div></div>")、新元素 - 比如 (document.createElement("div"))及已存在的元素 - 比如 ($(".div1"))。

$(selector).wrapInner(function())

其中，参数

　　function：返回包围元素的函数。

　　示例：wrapInner(html)

　　初始HTML：

<div id="container">

    <ul>

        <li class="item">选项1</li>

        <li class="item">选项2</li>

        <li class="item">选项3</li>

    </ul>

</div>
<script type="text/javascript">

    $(function () {

        $("li").wrapInner("<span></span>");

    });

</script>

　　运行结果：

<div id="container">

    <ul>

        <li class="item">

            <span>选项1</span>

        </li>

        <li class="item">

            <span>选项2</span>

        </li>

        <li class="item">

            <span>选项3</span>

        </li>

    </ul>

</div>

　　示例：wrapInner(element)

<script type="text/javascript">

    $(function () {

        $("li").wrapInner(document.createElement("span"));

    });

</script>

　　示例：wrapInner(function)

<script type="text/javascript">

    $(function () {

        $("li").wrapInner(function () {

            return document.createElement("span");

        });

    });

</script>

9.4 unwrap()

　　unwrap() 方法删除被选元素的父元素。

　　语法：

$(selector).unwrap()

　　示例：

　　初始HTML：

<div id="container">

    <ul>

        <li class="item">

            <div>

                <span>选项1</span>

            </div>

        </li>

        <li class="item">

            <div>

                <span>选项2</span>

            </div>

        </li>

        <li class="item">

            <div>

                <span>选项3</span>

            </div>

        </li>

    </ul>

</div>
<script type="text/javascript">

    $(function () {

        $("span").unwrap();

    });

</script>

　　运行结果：

<div id="container">

    <ul>

        <li class="item">

            <span>选项1</span>

        </li>

        <li class="item">

            <span>选项2</span>

        </li>

        <li class="item">

            <span>选项3</span>

        </li>

    </ul>

</div>

10. 删除元素

　　jQuery提供两种可以删除元素的方法：remove()和empty()。empty()方法并非真正意义上的删除，该方法清空全部的节点或节点所包括的所有后代元素，并非删除节点和元素。

10.1 remove([expr])

　　remove() 方法移除被选元素，包括所有文本和子节点。

　　语法格式：

$(selector).remove([expr])

其中，参数

　　expr - 可选：筛选元素的jQuery表达式

　　示例：$(selector).remove()

　　初始HTML：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $(".selected").remove();

    });

</script>

　　运行结果：

<ul>

    <li class="item">选项1</li>

    <li class="item">选项3</li>

</ul>

　　示例：$(selector).remove([expr])

<script type="text/javascript">

    $(function () {

        $("li").remove(".selected");

    });

</script>

10.2 empty()

　　empty() 方法从被选元素移除所有内容，包括所有文本和子节点。

　　语法结构：

$(selector).empty()

　　示例：

　　初始HTML：

<ul>

    <li class="item">选项1</li>

    <li class="item selected">选项2</li>

    <li class="item">选项3</li>

</ul>
<script type="text/javascript">

    $(function () {

        $("ul").empty();

    });

</script>

　　运行结果：

<ul></ul>

jQuery系列：DOM操作的更多相关文章

  1. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  2. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  3. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  4. jQuery – 3.JQuery的Dom操作

    3.1 JQuery的Dom操作     1.使用html()方法读取或者设置元素的innerHTML    2.使用text()方法读取或者设置元素的innerText     3.使用attr() ...

  5. js，jQuery和DOM操作的总结（二）

    jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...

  6. 03-老马jQuery教程-DOM操作

    jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

  7. Jquery所有Dom操作汇总

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery系列 第七章 jQuery框架DOM操作

    第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...

  9. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  10. 解密jQuery内核 DOM操作的核心函数domManip

    domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...

随机推荐

  1. 一次修改闭源 Entity Provider 程序集以兼容新 EntityFramework 的过程

    读完本文你会知道,如何在没有源码的情况下,直接修改一个 DLL 以去除 DLL 上的强命名限制,并在该程序集上直接添加你的“友元程序集(一种特殊的 Attribute,将它应用在程序集上,使得程序集内 ...

  2. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  3. 深入理解BFC

    定义 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...

  4. 手动添加kdump

    背景:     Linux嵌入式设备内核挂死后,无法自动重启,需要手动重启.而且如果当时没有连串口的话,就无法记录内核挂死时的堆栈,所以需要添加一种方式来记录内核挂死信息方便以后调试使用.设备中增加k ...

  5. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  6. pt-online-schema-change中update触发器的bug

    pt-online-schema-change在对表进行表结构变更时,会创建三个触发器. 如下文测试案例中的t2表,表结构如下: mysql> show create table t2\G . ...

  7. 自己写的数据交换工具——从Oracle到Elasticsearch

    先说说需求的背景,由于业务数据都在Oracle数据库中,想要对它进行数据的分析会非常非常慢,用传统的数据仓库-->数据集市这种方式,集市层表会非常大,查询的时候如果再做一些group的操作,一个 ...

  8. Autofac - 方法注入

    方法注入, 其实就是在注册类的时候, 把这个方法也注册进去. 那么在生成实例的时候, 会自动调用这个方法. 其实现的方法, 有两种. 准备工作: public interface IAnimal { ...

  9. Android中ListView实现图文并列并且自定义分割线（完善仿微信APP）

    昨天的(今天凌晨)的博文<Android中Fragment和ViewPager那点事儿>中,我们通过使用Fragment和ViewPager模仿实现了微信的布局框架.今天我们来通过使用Li ...

  10. java.lang.NoSuchFieldError: org.apache.http.message.BasicLineFormatter.INSTANCE

    Android发出HTTP请求时出现了这个错误: java.lang.NoSuchFieldError: org.apache.http.message.BasicLineFormatter.INST ...