jQuery简介之dom操作

青衣

　　正文
dom
　　获取标签 $(选择器)；
　　创建标签对象 $("标签")； 因为返回的都是jQuery对象，所以可以链式调用（任何的jQuery API 返回的都是jQuery对象）
插入标签
内部插入

1.append(content|fn)
　　
概述
向每个匹配的元素内部追加内容。
　　
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
　　参数
contentString, Element, jQueryV1.0
　　要追加到目标中的内容
　　function(index, html)FunctionV1.4
　　返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
　　
示例
　　描述：向所有段落中追加一些HTML标记。
　　HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]

2.appendTo(content) 返回值:jQuery  把所有匹配的元素追加到另一个指定的元素元素集合中。
　　
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
　　在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例二。
　　参数
contentString
　　用于被追加的内容
　　
示例
　　描述:把所有段落追加到ID值为foo的元素中。
　　HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
　　
描述:新建段落追加div中并加上一个class
　　HTML 代码:
<div></div><div></div>
jQuery 代码:
$("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");
结果:
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

3.prepend(content|fn)
　　prepend(content)
向每个匹配的元素内部前置内容。
　　
这是向所有匹配元素内部的开始处插入内容的最佳方式。
　　参数
contentString, Element, jQueryV1.0
　　要插入到目标元素内部前端的内容
　　function(index, html)FunctionV1.4
　　返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
　　
示例描述:向所有段落中前置一些HTML标记代码。
　　HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <p><b>Hello</b>I would like to say: </p> ]
　　
描述:将一个DOM元素前置入所有段落
　　HTML 代码:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jQuery 代码:
$("p").prepend( $(".foo")[0] );
结果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>
　　
描述:向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
　　HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").prepend( $("b") );
结果:
<p><b>Hello</b>I would like to say: </p>

4.prependTo(content)
　　
返回值:jQueryprependTo(content)
　　概述
把所有匹配的元素前置到另一个、指定的元素元素集合中。
　　
实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
　　在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。
　　参数
contentString
　　用于匹配元素的jQuery表达式
　　
示例描述:把所有段落追加到ID值为foo的元素中。
　　HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>

外部插入

1..after(content|fn)
　　after(content|fn)
　　在每个匹配的元素之后插入内容。
　　参数
contentString, Element, jQueryV1.0
　　插入到每个目标后的内容
　　functionFunctionV1.4
　　函数必须返回一个html字符串。
　　
示例描述:在所有段落之后插入一些HTML标记代码。
　　HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>
　　
描述:在所有段落之后插入一个DOM元素。
　　HTML 代码:
<b id="foo">Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("#foo")[0] );
结果:
<p>I would like to say: </p><b id="foo">Hello</b>
　　
描述:在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
　　HTML 代码:
<b>Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("b") );
结果:
<p>I would like to say: </p><b>Hello</b>
2.before(content|fn) 返回值:jQuery   在每个匹配的元素之前插入内容。
　　
参数
contentString, Element, jQueryV1.0
　　插入到每个目标后的内容
　　functionFunctionV1.4
　　函数必须返回一个html字符串。
　　
示例描述:在所有段落之前插入一些HTML标记代码。
　　HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
结果:
[ <b>Hello</b><p>I would like to say: </p> ]
　　
描述:在所有段落之前插入一个元素。
　　HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
jQuery 代码:
$("p").before( $("#foo")[0] );
结果:
<b id="foo">Hello</b><p>I would like to say: </p>
　　
描述:在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
　　HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").before( $("b") );
结果:
<b>Hello</b><p>I would like to say: </p>

3.insertAfter(content) 返回值:jQuery 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
　　
实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
　　在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。
　　参数
contentStringV1.0
　　用于匹配元素的jQuery表达式
　　
示例描述:把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
　　HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter("#foo");
结果:
<div id="foo">Hello</div><p>I would like to say: </p>

4.insertBefore(content) 返回值:jQuery   把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
　　
实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。
　　在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。
　　参数
contentStringV1.0
　　用于匹配元素的jQuery表达式
　　
示例描述:把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。
　　HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore("#foo");
结果:
<p>I would like to say: </p><div id="foo">Hello</div>
删除标签

1.empty() 返回值:jQuery 删除匹配的元素集合中所有的子节点。
　　
示例描述:把所有段落的子元素（包括文本节点）删除
　　HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
2.remove([expr])
　　
从DOM中删除所有匹配的元素。
　　
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
　　参数expr  String       
　　用于筛选元素的jQuery表达式
　　
示例描述:从DOM中把所有段落删除
　　HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are
　　
描述:从DOM中把带有hello类的段落删除
　　HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove(".hello");
结果:
how are <p>you?</p>

3.detach([expr]) 返回值:jQuery     detach([expr])
　　

从DOM中删除所有匹配的元素。
　　
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
　　参数
expr  String    用于筛选元素的jQuery表达式
　　
示例描述:从DOM中把所有段落删除
　　HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach();
结果:
how are
　　
描述:从DOM中把带有hello类的段落删除
　　HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach(".hello");
结果:
how are <p>you?</p>
获得和添加标签
　　attr(name|properties|key,value|fn)
　　
设置或返回被选元素的属性值。
　　参数
name  String     属性名称
　　properties Map   作为属性的“名/值对”对象
　　key,value String, Object      属性名称，属性值
　　key,function(index, attr) String,Function
　　1:属性名称。
　　2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
　　
示例
　　参数name
　　描述:返回文档中所有图像的src属性值。
　　jQuery 代码:
$("img").attr("src");
　　
参数properties
　　描述:为所有图像设置src和alt属性。
　　jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
　　
参数key,value 描述:
　　为所有图像设置src属性。
　　jQuery 代码:
$("img").attr("src","test.jpg");
　　
参数key,回调函数 描述:
　　把src属性的值设置为title属性的值。
　　jQuery 代码:
$("img").attr("title", function() { return this.src });