jQuery基础：操作DOM元素

1.$()函数

我们一直在使用$()函数来访问文档中的元素,它能够生成一个jQuery对象，指向CSS选择符所描述的一组元素。
以创建一个返回顶部的锚为例

创建元素：

$('<a href="#top">back to top</a>');

插入新元素：

$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('<a id="top"></a>').prependTo('body');

其他插入元素的方法：
.insertBefore()在现有元素外部、之前添加内容；
.prependTo()在现有元素内部、之前添加内容；
.appendTo()在现有元素内部、之后添加内容；
.insertAfter()在现有元素外部、之后添加内容。

2.包装元素

下面的例子，把脚注插入到页脚前面后，我们使用.wrapAll()把所有脚注都包含在一个<ol>中。然后再使用.wrap()将每一个脚注分别包装在自己的<li>中。

$('span.footnote')
    .insertBefore('#footer')
    .wrapAll('<ol id="notes"></ol>')
    .wrap('<li></li>');

3.使用反向插入

像.insertBefore()和.appendTo()这样的插入方法，一般都有一个对应的反向方法。反向方法也执行相同的操作，只不过“目标”和“内容”正好相反。有时候这很有用。

下面使用.before()代替.insertBefore()来重构代码。

$(document).ready(function () {
    var $notes = $('<ol id="notes"></ol>')
        .insertBefore('#footer');
    $('span.footnote').each(function (index) {
        $(this)
            .before('<sup>' + (index + 1) + '</sup>')
            .appendTo($notes)
            .wrap('<li></li>');
    });
});

4.复制元素

在复制元素时，需要使用jQuery的.clone()方法，这个方法能够创建任何匹配的元素集合的副本以便将来使用。与使用$()创建元素时一样，在为复制的元素应用一种插入方法之前，这些元素不会出现在文档中。    
如：

$('div.chapter p:eq(0)').clone();

5.元素内容的设置与获取

.html()方法在不传递参数的情况下，返回匹配的元素中的HTML内容(即HTML代码段)。而传入参数后，元素的内容将被传入的HTML替换掉(要注意传入的HTML必须是有效的，而且要对特殊字符进行转义)
.text()方法在不传递参数的情况下，返回匹配的元素中的文本内容(即不含HTML标签的文本内容)，如果想要去掉HTML标签，那就用这个方法。而传入参数后，元素的内容将被传入的文本替换掉，即使在内容中加入元素标签也会当作文本显示出来。
如：

$('p').text('<br /><strong>加粗文本</strong><br/>');

页面上也显示
<br /><strong>加粗文本</strong><br/>