jQuery文档对象的操作

        1、创建属性：在DOM规范中，属性节点比较特殊，用户无法通过node对象提供的方法遍历或者定位属性节点，必须使用element对象定义的特定方法来创建和访问属性节点。jQuery创建属性节点和创建文本节点类似。如创建一个h1元素及创建title属性和class属性为例：

        $(function(){

            $('body').append("<h1 class= 'red'  title= '一级标题'>DOM文档对象模型</h1>");

        });

        2、插入元素：在节点内部插入元素的方法：

        append()：向每个匹配的元素内部追加内容。

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

        appendTo()：把所有匹配的元素追加到另一个指定的元素集合中。该方法颠倒了append()的用法

        prependTo()：把所有匹配的元素前置到另一个指定的元素集合中。该方法颠倒了prepend()的方法

        例：

        $(function(){
           $('div').append('<ul></ul>');   //在div内部后面加一个ul元素，prepend的方法类似，是被插在之前。后两个方法则颠倒过来使用

        });

        在元素节点外部插入内容：

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

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

        insertAfter()：把所有匹配的元素插入到另一个指定的元素集合的后面（与appendTo方法类似）

        insertBefore()：把所有匹配的元素插入到另一个指定的元素集合的前面（与prependTo方法类似）

        例：$(function(){

                   $('div').after("<p>最后一段文本</p>");  //在div元素后面插入文本

                   $('div').before("<p>第一段文本</p>");   //在div元素前面插入文本

         });

    

        3、删除元素：

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

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

        4、复制元素：  jQuery定义了clone()方法用来复制节点，与之对应的DOM定义了cloneNode()方法来实现相同的操作功能。例：

        $(function(){

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

                 $('div').clone().inserAfter('div');  //复制匹配的div元素，并将其添加到当前div元素的后面

            });

        });

        5、替换元素：replaceWith()方法能够将所有匹配的元素替换成指定的html或DOM元素，replaceAll()方法功能相同，但是操作相反。

        $(function(){

            $("p").replaceWith("<div>盒子</div>");   //替换所有p元素为div元素

        });

        $(function(){

            $("<div>盒子</div>").replaceAll("p");   //替换所有p元素为div元素，与上面的操作相反。

        });

        6、包裹元素：jQuery定义了3种包裹元素的方法：wrap()、wrapAll()、wrapInner()方法。这些方法的主要区别就在于包裹的形式不同。例如使用wrap方法为p元素包裹span元素，则文档中的每个p元素都会被一个span元素包裹。如果使用wrapAll方法，则连续一起的p元素被一个span元素包裹。如果使用wrapInner方法，则span元素被包裹在p元素内部。

        7、操作属性：jQuery使用attr()方法设置元素的属性。该方法有两个参数，当只设置一个参数时，表示读取参数指定名称的属性值。当设置两个参数时，第一个参数指定属性名，第二个参数指定属性值。

        $(function(){  //设置属性值

            $('p').attr('title','段落文本');

         });

         $(function(){  //获取属性值

             alert($('p').attr('title'));  //弹出段落文本的信息

         }); 

        8、删除属性：jQuery定义了removeAttr()方法删除指定的元素属性。例：

        $( function() { $('p').removeAttr('title'); });

        9、操作类样式：jQuery定义了addClass()方法来为元素添加样式，removeClass()方法来移除指定类名的样式

        $(function(){ $('p').addClass('red'); }); //为p元素追加类样式。removeClass()方法的使用方法类似

        10、切换样式：jQuery的toggleClass()方法包含两个参数，第一个参数指定座位开关的类样式名称，第二个用于决定元素是否打开类样式。如果没有设置第二个参数，则toggleClass方法根据指定元素是否存在来决定参数设置的样式。如果存在，则清除该样式，如果不存在，则添加该样式，实现动态切换效果。

        11、判断样式：hasClass()方法用来判断元素是否包含指定的类样式。

        12、操作HTML、文本和值：

       （1）、读写html字符串：jQuery定义了html()方法，该方法可以以字符串形式读写html文档结构。当html()方法不包含参数时，表示以字符串形式读取指定节点下的所有html结构；当html()方法包含参数时，表示指定节点下写入html结构字符串，同时覆盖该节点原来所包含的所有内容

       （2）、读写文本内容：jQuery定义了text()方法用来读写指定元素下包含的文本内容，这些内容主要是指文本节点包含的数据。当该方法不包含参数时，表示以字符串形式读取指定节点下的所有文本内容；当包含参数时，表示向指定节点下写入文本字符串，同时会覆盖该节点原来包含的所有文本内容。

        （3）、读写表单的值：jQuery定义了val()方法来读写表单元素包含的值。当val方法不包含参数时，调用此方法表示将读取指定表单元素的值；当包含参数时，调用此方法表示向指定表单元素写入值

        13、绝对偏移位置：jQuery定义了offset()方法，该方法能够获取匹配元素在当前窗口的偏移。该方法没有参数，返回值为一个对象，包含两个属性：top和left属性，切该方法仅对可见元素有效。

        14、相对偏移：所谓相对偏移位置就是指定元素距离最近父级定位元素（只被定义了相对、绝对火固定定位的元素）左上角的偏移距离。jQuery定义了position()方法，该方法可以获取匹配元素的相对偏移位置，与offset()方法用法相同，都返回一个包含两个属性的对象。

        15、元素的宽和高：jQuery定义了width()和height()方法来读写元素的宽和高。这两个方法在没有设置参数时，表示读取元素的宽和高，返回值的单位为像素；设置了参数时表示设置元素的宽和高，默认单位值为像素。

        除了width()和height()方法之外，还有innerHeight()、innerWidth()、outerWidth()、outerHeight()方法。这些方法实际上是在width和height方法的基础上，计算了元素的边框和边距。outerWidth()、outerHeight()方法能够返回元素的总宽和总高（包括宽高、边距和边框），innerHeight()、innerWidth()方法能够返回元素的内容高度和宽度（包括宽高和边距）

       16、元素的遍历方法：jQuery定义了children()、next()、prev()和parent()四个基本元素便利方法。children()方法获取当前元素包含的所有子元素，next()方法获取当前元素相邻的下一个同级元素，prev()方法获取当前元素相邻的上一个同级元素，parent()方法获取当前元素的父元素。不过这些方法返回的都是jQuery对象，而不是DOM对象或集合

       17、要在每个匹配的元素外部插入新元素，使用：

       .wrap()，.wrapAll()，.wrapInner()

       例如：要将一个元素包裹在另一个元素中时：

       $(document).ready(function(){

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

       });