jQuery（二）

2节点操作

2.1jQuery 添加元素

通过JavaScript 操作 DOM，来实现获取页面元素，做一些修改等。同样的，利用iQuery 也可以操作 DOM。

2.1.1 append()

append()方法在被选元素的结尾插入指定内容

提示:是在父元素内末尾插入子元素。

如需在被选元素的开头插入内容，请使用 prepend()方法语法:

$(selector) .append(content，function(index，htm1));

参数 描述

content 必需。规定要插入的内容(可包含 HTML 标签)。可能的值: HTML 元素、iQuer

function(index, html) 可选。规定返回待插入内容的函数。<br />index-返回集合中元素的index位置。<br />html-返回被选元素的当前 HTML。

示例，在所有 <u1>元素结尾插入内容

$("u1").append("<li>橘子</1i>");

2.1.2 appendTo()

appendTo()方法在被选元素的结尾插入HTML 元素

提示:把子元素插入父元素未尾。

如需在被选元素的开头插入HTML元素，请使用 prependTo0)方法

语法:

$(content).appendTo(selector);

参数 描述

content 必需。规定要插入的内容 (必须包含 HTML 标签)。注意:如果 content 是已存在在被选元素的结尾被插入

selector 必需。规定把内容追加到哪个元素上。

示例，在所有 <u1> 元素结尾插入内容

$("<1i>橘子</1i>").appendTo($("u1"));

2.1.3 prepend()

prepend()方法在被选元素的开头插入指定内容语法:

$(selector).prepend(content，function(index，htm1));

参数 描述

content 必需。规定要插入的内容 (可包含 HTML 标签)。可能的值: HTML

function（index, html) 可选。规定返回待插入内容的函数。<br />

index- 返回集合中元素的index 位置。<br/>

html-返回被选元素的当前 HTML。

2.1.4 prependTo()

prependTo()方法在被选元素的开头插入 HTML 元素。

语法:

$(content) .prependTo(selector);

参数 描述

content 必需。规定要插入的内容 (必须包含 HTML 标签)。注意: 如果 content 是已存在被选元素的开头被插入。

selector 必需。规定把内容预加到哪个元素上。

示例，在所有 <u1>元素开始插入内容:

$("<1i>火龙果</1i>").prependTo(s("u1"));

2.1.5 after()

after（）方法在被选元素后插入指定的内容。

提示:是在当前元素的后面添加指定内容

如需在被选元素前插入内容，请使用 before（)方法语法:

$(selector).after(content,function(index));

参数

content

function(index)

描述

必需。规定要插入的内容(可包含 HTML 标签)可能的值: HTML 元规定返回待插入内容的函数。<br />index-返回集合中元素的 index位置

实例:

$("u1").after($("<li>哈密瓜</1i>"));

2.1.6 before()

before方法在被选元素之前插入指定的内容

提示:是在当前元素的前面添加指定内容

如需在被选元素后插入内容，请使用after()方法

语法:

$(selector).before(content，function(index));

2.2jQuery 删除元素

jQuery 提供了如下删除节点的方法: remove()、empty()。

2.2.1 remove()

remove()s方法移除被选元素，包括所有的文本和子节点该方法也会移除被选元素的数据和事件。

提示:如只需从被选元素移除内容，请使用 empty0方法。

语法

$(selector).remove();

实例，移除所有的 <u1> 元素

$("u1") .remove();

2.2.2 empty()

empty()方法移除被选元素的所有子节点和内容

语法:

$(selector).empty();

2.3jQuery 替换节点

replacewith()和replaceA11()用于替换某个节点

2.3.1 replaceWith()

replacewith(方法把被选元素替换为新的内容语法:

$(selector).replacewith(content， function(index));

参数 描述

content 必需。规定要插入的内容 (可包含 HTML 标签)。可能的值: HTML 元素

function(index) 可选。规定返回替换内容的函数。<br />index-返回集合中元素的index位置

示例，将第一个li 替换成内容为桃子的 li

$("u1 Ti").eg(0).replacewith($("<1i>桃子</1i>")):

2.3.2 replaceAll()

replaceA11()方法把被选元素替换为新的 HTML 元素

语法:

$(content).replaceA1(selector);

参数 描述

content 必需。规定要插入的内容 (必须包含 HTML 标签)

selector 必需。规定哪一个元素将被替换。

示例，将第一个li 替换成内容为黄桃的 li:

$("<1i>黄桃</1i>"),replaceA11($("ul li").eq(0));

2.4jQuery 复制节点

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

语法:

$(selector).clone(true|false);