jQuery入门(3)：DOM（选择器，属性，筛选，文档处理）

DOM（选择器，属性，筛选，文档处理）

选择器（基本，层级，简单，内容，可见性，属性，子元素，表单及表单对象属性）
基本

#id

根据给定的ID匹配一个元素。返回值为Element

id(String)用于搜索的，通过元素的 id 属性中给定的值

示例　查找ID为"myDiv"的元素。

<div id="notMe"><p>id="notMe"</p></div>

<div id="myDiv">id="myDiv"</div>

代码:$("#myDiv");

结果:<div id="myDiv">id="myDiv"</div>

element

根据给定的元素名匹配所有元素。返回值为Array<Element>

element (String) : 一个用于搜索的元素。指向DOM的标签名。

示例　查找一个 DIV 元素。

代码:$("div");

结果:<div>DIV1</div><div>DIV2</div>

.class

根据给定的类匹配元素。返回值Array<Element>

class (String) : 一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。

示例　查找所有类是"myClass"的元素.

<div class="notMe">div class="notMe"</div>

<div class="myClass">div class="myClass"</div>

<span class="myClass">span class="myClass"</span>

代码:$(".myClass");

结果:<div class="myClass">div class="myClass"</div><span class="myClass">span class="myClass"</span>

匹配所有元素，多用于结合上下文来搜索。返回值Array<Element>

示例　找到每一个元素

代码:$("*")

结果:<div>DIV</div><span>SPAN</span><p>P</p>

selector1,selectorN

将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。返回值Array<Element>

参数

selector1 (Selector) : 一个有效的选择器

selector2 (Selector) : 另一个有效的选择器

selectorN (Selector) : (可选) 任意多个有效选择器

示例　找到匹配任意一个类的元素。

<p class="myClass">p class="myClass"</p>

<p class="notMyClass">p class="notMyClass"</p>

代码:$("div,span,p.myClass")

结果:<div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span>

层级

ancestor descendant

在给定的祖先元素下匹配所有的后代元素。返回值Array<Element>

ancestor(Selector):任何有效选择器

descendant(Selector):用以匹配元素的选择器，并且它是第一个选择器的后代元素

示例　找到表单中所有的 input 元素

<form>

<fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset>

</form>

代码:$("form input")

结果: <input name="name" />, <input name="newsletter" />

parent>child

在给定的父元素下匹配所有的子元素。返回值Array<Element>

parent (Selector) : 任何有效选择器

child (Selector) : 用以匹配元素的选择器，并且它是第一个选择器的子元素

示例　匹配表单中所有的子级input元素。

代码:$("form > input")

结果:<input name="name" />

prev+next

匹配所有紧接在prev元素后的next元素

返回值Array<Element>

prev (Selector) : 任何有效选择器

next (Selector) :一个有效选择器并且紧接着第一个选择器

示例　匹配所有跟在 label 后面的 input 元素

代码:$("label + input")

结果:<input name="name" />, <input name="newsletter" />

prev~siblings

匹配prev元素之后的所有siblings元素　返回值Array<Element>

prev (Selector) : 任何有效选择器

siblings (Selector) : 一个选择器，并且它作为第一个选择器的同辈

示例　找到所有与表单同辈的 input 元素

代码:$("form ~ input")

结果:<input name="none" />

简单

<table>

<tr><td>Header 1</td></tr><tr><td>Value 1</td></tr><tr><td>Value 2</td></tr>

</table>

:first：匹配找到的第一个元素

代码:$("tr:first") 结果:<tr><td>Header 1</td></tr>

:last：匹配找到的最后一个元素

代码:$("tr:last") 结果:<tr><td>Value 2</td></tr>

:not(selector)：去除所有与给定选择器匹配的元素

代码:$("input:not(:checked)") 结果:<input name="apple" />

:even：匹配所有索引值为偶数的元素，从0开始计数

代码:$("tr:even") 结果:<tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr>

:odd：配所有索引值为奇数的元素，从 0 开始计数

代码:$("tr:odd") 结果:<tr><td>Value 1</td></tr>

:eq(index)：匹配一个给定索引值的元素

代码:$("tr:eq(1)") 结果:<tr><td>Value 1</td></tr>

:gt(index)：匹配所有大于给定索引值的元素

代码:$("tr:gt(0)") 结果:<tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr>

:lt(index)：匹配所有小于给定索引值的元素

代码:$("tr:lt(2)") 结果:<tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr>

:header：匹配如 h1, h2, h3之类的标题元素

<h1>Header 1</h1>

<p>Contents 1</p>

<h2>Header 2</h2>

<p>Contents 2</p>

代码:$(":header").css("background", "#EEE");

结果:<h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2>

:animated：匹配所有没有在执行动画效果中的元素

代码:

$("#run").click(function(){

$("div:not(:animated)").animate({ left: "+20" }, 1000);

});

内容

:contains(text)：匹配包含给定文本的元素

text (String) : 一个用以查找的字符串

示例　查找所有包含 "John" 的 div 元素

<div>John Resig</div><div>George Martin</div><div>Malcom John Sinclair</div><div>J. Ohn

代码:$("div:contains('John')")

结果:<div>John Resig</div>, <div>Malcom John Sinclair</div>

:empty：匹配所有不包含子元素或者文本的空元素

<table>

<tr><td>Value 1</td><td></td></tr>

<tr><td>Value 2</td><td></td></tr>

</table>

代码:$("td:empty")

结果:<td></td>, <td></td>

:has(selector)：匹配含有选择器所匹配的元素的元素

selector (Selector) : 一个用于筛选的选择器

示例　给所有包含p元素的div元素添加一个 text 类

<div><p>Hello</p></div><div>Hello again!</div>

代码:$("div:has(p)").addClass("test");

结果: <div class="test"><p>Hello</p></div>

:parent：匹配含有子元素或者文本的元素

<table>

<tr><td>Value 1</td><td></td></tr>

<tr><td>Value 2</td><td></td></tr>

</table>

代码:$("td:parent")

结果: <td>Value 1</td>, <td>Value 1</td>

可见性

:hidden：匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

<table>

<tr style="display:none"><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

代码:$("tr:hidden")

结果:<tr style="display:none"><td>Value 1</td></tr>

:visible：匹配所有的可见元素

<table>

<tr style="display:none"><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

代码:$("tr:visible")

结果: <tr><td>Value 2</td></tr>

属性

[attribute]：匹配包含给定属性的元素

<div><p>Hello!</p></div>

代码:$("div[id]")

结果:<div id="test2"></div>

[attribute=value]：匹配给定的属性是某个特定值的元素

代码:$("input[name='newsletter']").attr("checked", true);

结果:<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" />

[attribute!=value]：匹配给定的属性是不包含某个特定值的元素

[attribute^=value]：匹配给定的属性是以某些值开始的元素

代码:$("input[name^='news']")

结果:<input name="newsletter" />, <input name="newsboy" />

[attribute$=value]：匹配给定的属性是以某些值结尾的元素

[attribut*=value]：匹配给定的属性是以包含某些值的元素

[selector1][selector2][selectorN]：复合属性选择器，需要同时满足多个条件时使用

代码:$("input[id][name$='man']")

结果: <input id="letterman" name="new-letterman" />

子元素

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

区别：':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用::nth-child(even)，:nth-child(odd)，:nth-child(3n)，:nth-child(2)，:nth-child(3n+1)，:nth-child(3n+2)

index (Number) : 要匹配元素的序号，从1开始

示例　在每个ul查找第2个li

<ul><li>John</li> <li>Karl</li> <li>Brandon</li></ul>

<ul><li>Glen</li> <li>Tane</li> <li>Ralph</li></ul>

代码:$("ul li:nth-child(2)")

结果: <li>Karl</li>, <li>Tane</li>

:first-child：匹配第一个子元素，':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

代码:$("ul li:first-child")

结果: <li>John</li>, <li>Glen</li>

:last-child：匹配最后一个子元素，':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

:only-child：如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配。

<ul><li>John</li> <li>Karl</li> <li>Brandon</li></ul>

代码:$("ul li:only-child")

结果: <li>Glen</li>

表单

:input：匹配所有 input, textarea, select 和 button 元素

:text：匹配所有的单行文本框

:password,:radio,:checkbox,:submit,:image：,:reset：,:button：,:file：,:hidden：

表单对象属性

:enabled：匹配所有可用元素

<form>

</form>

代码:$("input:enabled") 结果: <input name="id" />

:disabled：匹配所有不可用元素

:checked：匹配所有选中的复选框元素

:selected：匹配所有选中的选项元素

属性（属性，类，HTML代码，文本，值）

属性

attr(name)：取得第一个匹配元素的属性值。如果元素没有相应属性，则返回undefined。name为属性名称。

代码:$("img").attr("src");

结果:test.jpg

attr(properties)

将一个“名/值”形式的对象设置为所有匹配元素的属性。这是一种在所有匹配元素中批量设置很多属性的最佳方式。

注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).

<img/>

代码:$("img").attr({ src: "test.jpg", alt: "Test Image" });

结果:<img src= "test.jpg" alt:="Test Image" />

attr(key,value)：为所有匹配的元素设置一个属性值

代码:$("img").attr("src","test.jpg");

结果:<img src= "test.jpg" /><img src= "test.jpg" />

attr(key,fn)：为所有匹配的元素设置一个计算的属性值。

代码:$("img").attr("title", function() { return this.src });

结果:<img src="test.jpg" title="test.jpg" />

removeAttr(name)：从每一个匹配的元素中删除一个属性

代码:$("img").removeAttr("src");

结果:<img />

类

addClass(class)：为每个匹配的元素添加指定的类名

<p>Hello</p>

代码:$("p").addClass("selected"); 结果:<p class="selected">Hello</p>

removeClass(class)：从所有匹配的元素中删除全部或者指定的类

<p class="selected first">Hello</p>

代码:$("p").removeClass("selected"); 结果:<p>Hello</p>

toggleClass(class)：如果存在（不存在）就删除（添加）一个类

<p>Hello</p><p class="selected">Hello Again</p>

代码:$("p").toggleClass("selected");

结果: <p class="selected">Hello</p>, <p>Hello Again</p>

Html代码

html()：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档

<div><p>Hello</p></div>

代码:$("div").html(); 结果:Hello

html(val)：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档

代码:$("div").html("<p>Hello Again</p>");

结果:<div><p>Hello Again</p></div>

文本

text()：取得所有匹配元素的内容。由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>

代码:$("p").text();

结果:Test Paragraph.Paraparagraph

text(val)：设置所有匹配元素的文本内容与html()类似, 但将编码 HTML(将 "<" 和 ">" 替换成相应的HTML实体).

<p>Test Paragraph.</p>

代码:$("p").text("<b>Some</b> new text.");

结果: <p><b>Some</b> new text.</p>

值
val()：获得第一个匹配元素的当前值

在1.2中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

<option>Single</option>

<option>Single2</option>

</select>

<option selected="selected">Multiple</option>

<option>Multiple2</option>

<option selected="selected">Multiple3</option>

</select>

代码:$("p").append("<b>Single:</b> "+$("#single").val()+"<b>Multiple:</b>"+$("#multiple").val().join(","));

结果:<p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>

代码:$("input").val(); 结果:some text

val(val)：设置每一个匹配元素的值。在1.2这也可以为select元件赋值

<option>Single</option>

<option>Single2</option>

</select>

代码:

$("input").val("hello world!");

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

筛选（过滤，查找，串联）

过滤

eq(index)：获取第N个元素这个元素的位置是从0算起。

代码:$("p").eq(1) 结果: <p> So is this</p>

hasClass(expr)：检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。

代码:

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

if ($(this).hasClass("protected"))

$(this).animate({ left: -10 })

});

filter(expr)：筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

代码:$("p").filter(".selected") 结果:<p class="selected">And Again</p>

代码:$("p").filter(".selected, :first") 结果:<p>Hello</p>, <p class="selected">And Again</p>

filter(fn)：筛选出与指定函数返回值匹配的元素集合，函数内部将对每个对象计算一次(正如 '$.each').如果调用的函数返回false则这个元素被删除，否则就会保留。

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

代码:

$("p").filter(function(index) {

return $("ol", this).length == 0;

});

结果:<p>How are you?</p>

is(expr)：用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。

代码:$("input[type='checkbox']").parent().is("form")

结果:true

map(callback)：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

<p><b>Values: </b></p>

<form>

</form>

代码:

$("p").append( $("input").map(function(){

return $(this).val();

}).get().join(", ") );

结果:<p>John, password, http://ejohn.org/</p>

not(expr)：删除与指定表达式匹配的元素

<p>Hello</p><p id="selected">Hello Again</p>

代码:$("p").not( $("#selected")[0] )

结果: <p>Hello</p>

slice(start,end)：选取一个匹配的子集　与原来的slice方法类似

<p>Hello</p><p>cruel</p><p>World</p>

代码:$("p").slice(0, 1).wrapInner("<b></b>"); 结果:<p><b>Hello</b></p>

代码:$("p").slice(0, 2).wrapInner("<b></b>"); 结果:<p><b>Hello</b></p>,<p><b>cruel</b></p>

代码:$("p").slice(1, 2).wrapInner("<b></b>"); 结果:<p><b>cruel</b></p>

代码:$("p").slice(1).wrapInner("<b></b>"); 结果:<p><b>cruel</b></p>, <p><b>World</b></p>

代码:$("p").slice(-1).wrapInner("<b></b>"); 结果:<p><b>World</b></p>

查找

add(expr)：把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

<p>Hello</p><span>Hello Again</span>

代码:$("p").add("span") 结果:<p>Hello</p>, <span>Hello Again</span>

<p>Hello</p>

代码:$("p").add("<span>Again</span>") 结果:<p>Hello</p>, <span>Hello Again</span>

<p>Hello</p><p><span id="a">Hello Again</span></p>

代码:$("p").add(document.getElementById("a"))

结果:<p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span>

children(expr)：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()之考虑子元素而不考虑所有后代元素。

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

代码:$("div").children() 结果:<span>Hello Again</span>

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

代码:$("div").children(".selected")

结果: <p class="selected">Hello Again</p>

contents()：查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>

代码:$("p").contents().not("[@nodeType=1]").wrap("<b/>");

结果:<p><b>Hello</b><a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>

代码:$("iframe").contents().find("body").append("I'm in an iframe!");

find(expr)：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写

<p><span>Hello</span>, how are you?</p>

代码:$("p").find("span")

结果: <span>Hello</span>

next(expr)：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素。

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

代码:$("p").next()

结果:<p>Hello Again</p>,<div><span>And Again</span></div>

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

代码:$("p").next(".selected")

结果:<p class="selected">Hello Again</p>

nextAll(expr)：查找当前元素之后的所有元素。

代码:$("div:first").nextAll().addClass("after");

结果:<div class="after"></div>, <div class="after"></div>, <div class="after"></div>

parent(expr)：取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents(expr)：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。

prev(expr)：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll(expr)：查找当前元素之前所有的同辈元素

siblings(expr)：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

代码:$("div").siblings() 结果:<p>Hello</p>, <p>And Again</p>

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

代码:$("p").siblings(".selected") 结果:<p class="selected">Hello Again</p>

串联

andSelf()：加入先前所选的加入当前元素中，对于筛选或查找后的元素，要加入先前所选元素时将会很有用。

<div><p>First Paragraph</p><p>Second Paragraph</p></div>

代码:$("div").find("p").andSelf().addClass("border");

结果:<div class="border"><p class="border">First Paragraph</p><p class="border">Second Paragraph</p></div>

end()：回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

<p><span>Hello</span>,how are you?</p>

代码:$("p").find("span").end()

结果:<p><span>Hello</span> how are you?</p>

文档处理（内部和外部插入，包裹，替换，删除，复制）

内部和外部插入

append(content)：向每个匹配的元素内部追加内容。相当与appendChild方法。

<p>I would like to say: </p>

代码:$("p").append("<b>Hello</b>");

结果:<p>I would like to say: <b>Hello</b></p>

appendTo(content)：把所有匹配的元素追加到另一个、指定的元素元素集合中。

<p>I would like to say: </p><div id="foo"></div>

代码:$("p").appendTo("#foo");

结果:<div id="foo"><p>I would like to say: </p></div>

prepend(content)：向每个匹配的元素内部前置内容。

<p>I would like to say: </p>

代码:$("p").prepend("<b>Hello</b>"); 结果:<p><b>Hello</b>I would like to say: </p>

<p>I would like to say: </p><b>Hello</b>

代码:$("p").prepend( $("b") ); 结果:<p><b>Hello</b>I would like to say: </p>

prependTo(content)：把所有匹配的元素前置到另一个、指定的元素元素集合中

<p>I would like to say: </p><div id="foo"></div>

代码:$("p").prependTo("#foo"); 结果:<div id="foo"><p>I would like to say: </p></div>

after(content)：在每个匹配的元素之后插入内容

<p>I would like to say: </p>

代码:$("p").after("<b>Hello</b>"); 结果:<p>I would like to say: </p><b>Hello</b>

before(content)：在每个匹配的元素之前插入内容

insertAfter(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

<p>I would like to say: </p><div id="foo">Hello</div>

代码:$("p").insertAfter("#foo");

结果:<div id="foo">Hello</div><p>I would like to say: </p>

insertBefore(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

<div id="foo">Hello</div><p>I would like to say: </p>

代码:$("p").insertBefore("#foo");

结果:<p>I would like to say: </p><div id="foo">Hello</div>

包裹

wrap(html)：把所有匹配的元素用其他元素的结构化标记包裹起来。

<p>Test Paragraph.</p>

代码:$("p").wrap("<div class='wrap'></div>");

结果:<div class="wrap"><p>Test Paragraph.</p></div>

wrap(elem)：把所有匹配的元素用其他元素的结构化标记包装起来。

<p>Test Paragraph.</p><div id="content"></div>

代码:$("p").wrap(document.getElementById('content'));

结果:<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>

wrapAll(html)：将所有匹配的元素用单个元素包裹起来

<p>Hello</p><p>cruel</p><p>World</p>

代码:$("p").wrapAll("<div></div>");

结果:<div><p>Hello</p><p>cruel</p><p>World</p></div>

wrapAll(elem)：将所有匹配的元素用单个元素包裹起来

<p>Hello</p><p>cruel</p><p>World</p>

代码:$("p").wrapAll(document.createElement("div"));

结果:<div><p>Hello</p><p>cruel</p><p>World</p></div>

wrapInner(html)：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

<p>Hello</p><p>cruel</p><p>World</p>

代码:$("p").wrapInner("<b></b>");

结果:<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>

wrapInner(elem)：将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来

<p>Hello</p><p>cruel</p><p>World</p>

代码:$("p").wrapInner(document.createElement("b"));

结果:<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>

替换

replaceWidth(content)：将所有匹配的元素替换成指定的HTML或DOM元素

<p>Hello</p><p>cruel</p><p>World</p>

代码:$("p").replaceWith("<b>Paragraph. </b>");

结果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

replaceAll(selector)：用匹配的元素替换掉所有 selector匹配到的元素

<p>Hello</p><p>cruel</p><p>World</p>

代码:$("<b>Paragraph. </b>").replaceAll("p");

结果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

删除

empty()：删除匹配的元素集合中所有的子节点

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

代码:$("p").empty();

结果:<p></p>

remove(expr)：从DOM中删除所有匹配的元素

<p>Hello</p> how are <p>you?</p>

代码:$("p").remove(); 结果:how are

<p class="hello">Hello</p> how are <p>you?</p>

代码:$("p").remove(".hello");

结果:how are <p>you?</p>

复制

clone()：克隆匹配的DOM元素并且选中这些克隆的副本

<b>Hello</b><p>, how are you?</p>

代码:$("b").clone().prependTo("p");

结果:<b>Hello</b><p><b>Hello</b>, how are you?</p>

clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本

<button>Clone Me!</button>

代码:

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

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

});

posted @ 2008-11-09 21:30 Astar 阅读(2450) 评论(0) 编辑收藏举报

刷新页面返回顶部

Astar之学习.NET路程

低调做人是一种智慧！兴趣是最好的老师！

jQuery入门(3)：DOM（选择器，属性，筛选，文档处理）

公告