接着上一篇继续...
三、设置元素内容
针对通过修改元素的HTML方法来达到修改元素内容，jQuery提供了多种方法来实现。
1、替换HTML或文本内容
| html() | 获取匹配集里第一个元素的HTML内容。返回第一个已匹配元素的HTML内容。返回值与访问那个元素的innerHTML属性所获得的内容一致。 |
这个应该不用解释了，我们都学习了那么多方法了。
| html(text) | 把传入的HTML片段设置为所有匹配元素的内容。返回包装集。 |
| text | （字符串）将被设置为元素内容的HTML片段 |
另外也可以只获取或设置元素的文本内容。
| text() | 把包装集里元素的所有文本内容连接起来，并返回字符串作为命令的结果。返回连接而成的字符串。 |
举个例子：有如下HTML片段。
|
1
2
3
4
5
6
|
<ulid="theList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
|
|
1
|
var text = $("#theList").text();
|
则text的结果是OneTwoThreeFour。
| text(content) | 把所有已包装元素的文本内容设置为已传递值。如果已传递文本包含尖括号(<和>)，则这些字符被替换为等价的HTML实体。返回包装集。 |
| content | （字符串）将要设置到已包装元素里的文本内容。任何尖括号字符将被转义为HTML实体。 |
需要说明的是，无论用html()还是text()都是对原先内容的覆盖，所以使用前必须确认好。
2、移动和复制元素
| append(content) | 把传入的HTML片段或元素追加到所有已匹配元素的内容之后。返回包装集。 |
| content | （字符串|元素|对象）将被追加到包装集各元素的一个字符串、元素或包装集。 |
举例说明：
|
1
|
$("p").append("<b>some text</b>");
|
这句比较简单，就是表示在所有<p>元素后面追加新的HTML片段。下面是稍稍复杂的用法。
|
1
|
$("p.sugar").append($("a.ant"));
|
这表示什么呢？在带有类.sugar的所有<p>元素后面追加带有类ant的链接。这里的追加有点说道。如果append里的是单一元素，那么将该元素从原来的位置上删除掉，移动到新的父元素下。如果是多个元素，即是一个内容大于等于1的集合，那么在原来位置保留的情况下，会在新的父元素下追加集合中的副本。
前者可以理解为移动操作，后者则是复制操作。
如果不想追加整个包装集，也可以单独追加一个特定的DOM元素。如：
|
1
2
|
var toAppend = $("a.ant")[0];
$("p.sugar").append(toAppend);
|
这种情况下对于追加的toAppend是所谓的移动还是复制，要取决于$("p.sugar")的元素数量（注意：与上面的例子不同，上面是取决于追加元素的数量）。如果匹配一个元素进行移动操作。多个，则进行复制操作。
还有更简单的方法：
| appendTo(target) | 把包装集里所有元素移动到指定目标的内容的末尾。返回包装集。 |
| target | （字符串|元素）一个包含jQuery选择器的字符串，或一个DOM元素。包装集各元素将追加到target所指定的那个位置。 |
同样的，如果target只匹配一个元素，则是移动，如果是多个元素，则是复制。
再介绍几个工作方式类似于append和appendTo的方法。
prepend()和prependTo()表示在目标元素的内容之前插入源元素，而不是之后。
before()和insertBefore()表示在目标元素之前插入元素，而不是在目标元素的第一个子元素之前。
after()和insertAfter()表示目标元素之后插入元素，而不是在目标元素的最后一个子元素之后。
3、包裹元素
什么叫包裹元素呢？妹的，看书读文字把我都搞成浆糊了还没弄明白所谓的包裹元素，又没有例子是弄哪样？我才不会这么不负责任。
| wrap(wrapper) | 把匹配集各元素用已传递HTML标签或已传递元素的克隆副本分别包裹起来。 |
| wrapper | （字符串|元素）用于包裹匹配集各元素的元素开始和结束标签；或者一个将被克隆且用作包裹器的元素。 |
举个例子：
|
1
|
$("a.surprise").wrap("<div class='hello'></div>");
|
上面的例子就是对应紫色的部分，把页面上所有带有类surprise的链接外面套层带有类hello的<div>标签。
最后页面上的情况可能就是这样的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
...<a class="surprise"> one</a>
<a class="surprise"> two</a>
<a class="surprise"> three</a>
...转换后...<div class="hello">
<a class="surprise"> one</a>
</div>
<div class="hello">
<a class="surprise"> two</a>
</div>
<div class="hello">
<a class="surprise"> three</a>
</div>
... |
另一种形式呢?举个例子,用页面上第一个<div>元素的克隆副本分别包裹各链接
|
1
|
$("a.surprise").wrap($("div:first")[0]);
|
就是这个样子啦。包装后的结果就是页面上第一个<div>元素是什么样子的，包裹在各链接上的<div>就是什么样子的。
有的时候我们不想包裹匹配集里的元素，而想包裹元素的内容。那么就用下面的方法。
| wrapInner(wrapper) | 用已传递元素的克隆副本或已传递HTML标签，把匹配集各元素的内容（包括文本节点）分别包裹起来。 |
| wrapper | 同上 |
对于包裹，说实话我真没用过，不过据说是会经常用到，我写的jQuery代码也太少了，哈哈。
4、删除元素
| remove() | 从页面DOM里删除包装集里所有元素。返回包装集。 |
需要说明的是从DOM里删除的元素仍然被该包装集引用着，所以可以进一步用其他 jQuery命令去操作。如appendTo()、insertBefore()等类似命令。
| empty() | 清空匹配集里所有DOM元素的内容。返回包装集。 |
5、克隆元素
| clone(copyHandlers) | 创建包装集里元素的副本，并返回包含这些副本的新包装集。返回新建的包装集。 |
| copyHandlers | （布尔型）如果为true，复制事件处理程序；如果为false或省略，则不复制事件处理程序。 |
通常情况下都是我们克隆完一个包装集之后都是利用jQuery命令把其附加到DOM中的某个地方。
四、处理表单元素值
对于表单元素，我们最常见的操作是：存取表单元素值。
| val() | 返回匹配集里第一个元素的value特性。如果是多选元素，则返回所有选中项的数组。返回已获取的值或值数组 |
对于这个命令我们有几个需要注意的地方
（1）如果包装集里第一个元素不是表单元素，就会抛出javascript错误。
（2）不会区分复选框和单选按钮的选中或非选中状态，而是返回复选框或单选按钮的value特性值，不管其选中与否。
对于单选按钮，val虽然看起来有点鸡肋，但是如果我们结合上jQuery选择器之后，结果就不一样了，举个例子：如果想获取一组包含名为radioGroup的单选按钮组中选中按钮的值，那么我们可以这样。
|
1
|
$("[name=radioGroup]:checked").val();
|
这样可以很好的达到效果。但是对于复选框的话，我们就要想别的办法了。
| val(value) | 把传入的值设置为所有已匹配表单元素的值。 |
| value | 一个字符串，用于设置包装集里各表单元素的value属性值。 |
同样，这个方法也有局限性，就是不能把多个值设置到多选列表中去。另一种重载变体
| val(values) | 导致包装集里任何复选框、单选按钮或<select>元素的选项变为已选中(checked)或已选择(selected)状态，只要它们的值和已传递值数组的任何一个值相匹配。 |
| values | 一个值数组，用于确定哪些元素将被选中或选择。 |
举例说明：把页面上所有<input>和<select>元素，只要它们的值里和输入字符串ironman、superman、spiderman中任何一个相匹配。那么如果匹配的是复选框或单选按钮将变为已选中状态，如果是<select>则变为已选择状态。
|
1
|
$("input, select").val(['ironman','superman','spiderman']);
|
其实到目前为止，我们就已经能用jQuery做许多事情了，不过这些都是比较“隐蔽”的，如果想来些效果的话，那我们还得接下来的学习。
关于jQuery的学习系列笔记我写的会比较简洁，更注重的是快速上手使用，当然，非常重要的知识点我还是会专门指出的。
PS：欢迎留言交流，24小时内必有回复。