jQuery学习系列笔记（三）（续）-创新互联

接着上一篇继续...

三、设置元素内容

针对通过修改元素的HTML方法来达到修改元素内容，jQuery提供了多种方法来实现。

1、替换HTML或文本内容

这个应该不用解释了，我们都学习了那么多方法了。

另外也可以只获取或设置元素的文本内容。

举个例子：有如下HTML片段。

  
One
  
Two
  
Three
  
Four

var text = $("#theList").text();

则text的结果是OneTwoThreeFour。

需要说明的是，无论用html()还是text()都是对原先内容的覆盖，所以使用前必须确认好。

2、移动和复制元素

举例说明：

$("p").append("some text");

这句比较简单，就是表示在所有

元素后面追加新的HTML片段。下面是稍稍复杂的用法。

$("p.sugar").append($("a.ant"));

这表示什么呢？在带有类.sugar的所有

元素后面追加带有类ant的链接。这里的追加有点说道。如果append里的是单一元素，那么将该元素从原来的位置上删除掉，移动到新的父元素下。如果是多个元素，即是一个内容大于等于1的集合，那么在原来位置保留的情况下，会在新的父元素下追加集合中的副本。

前者可以理解为移动操作，后者则是复制操作。

如果不想追加整个包装集，也可以单独追加一个特定的DOM元素。如：

var toAppend = $("a.ant")[0];
$("p.sugar").append(toAppend);

这种情况下对于追加的toAppend是所谓的移动还是复制，要取决于$("p.sugar")的元素数量（注意：与上面的例子不同，上面是取决于追加元素的数量）。如果匹配一个元素进行移动操作。多个，则进行复制操作。

还有更简单的方法：

同样的，如果target只匹配一个元素，则是移动，如果是多个元素，则是复制。

再介绍几个工作方式类似于append和appendTo的方法。

prepend()和prependTo()表示在目标元素的内容之前插入源元素，而不是之后。

before()和insertBefore()表示在目标元素之前插入元素，而不是在目标元素的第一个子元素之前。

after()和insertAfter()表示目标元素之后插入元素，而不是在目标元素的最后一个子元素之后。

3、包裹元素

什么叫包裹元素呢？妹的，看书读文字把我都搞成浆糊了还没弄明白所谓的包裹元素，又没有例子是弄哪样？我才不会这么不负责任。

举个例子：

$("a.surprise").wrap("
");

上面的例子就是对应紫色的部分，把页面上所有带有类surprise的链接外面套层带有类hello的

...
 one
 two
 three
...
转换后
...

     one


     two


     three

...

$("a.surprise").wrap($("div:first")[0]);

$("[name=radioGroup]:checked").val();

$("input, select").val(['ironman','superman','spiderman']);