jQuery DOM操作—基于命令改变页面

1.操作属性

   说明：

   1)改变class属性使用.addClass()和.removeClass()

   2)改变其他属性使用.attr()和.removeAttr()

   1.1非class属性

        1.1.1设置所有元素的公共属性

                例：

                $(docoment).ready(function(){
                   $('div.chapter a').attr({'rel':'external'});
                });

        1.1.2设置每个元素的属性：.each()

                例：

                $(docoment).ready(function(){
                   $('div.chapter a').each(function(index){
                      $(this).attr({
                        'rel':'external',
                        'id':'wikilink-'+index
                      });
                   });
                });

   1.2深入理解$()工厂函数

        $('html')用于创建DOM元素

2.插入新元素

   2.1插入元素之后.after()和.insertAfter()

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

        或

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

   2.2插入元素之前.before()和.insertBefore()

3.包装元素.wrap()

4.复制元素：.clone()

   说明：$('div.chapter p:eq(0)').clone();//复制了一个新的元素(还没被插入DOM)

   4.1复制的深度

        说明：

        1).clone()不仅会复制匹配的元素，也会复制其所有的后代元素

        2).clone(false)只复制元素本身

        3).clone()不会复制元素中的事件。

           如果需要事件可以手动添加上去或者使用Brandon Aaron插件的.cloneWithEvents()方法

5.DOM操作方法的简单归纳

   5.1要在每个匹配的元素中插入新元素

        1).append()

        2).appendTo()

        3).prepend()

        4).prependTo()

   5.2要在每个匹配的元素相邻的位置上插入新元素

        1).after()

        2).insertAfter()

        3).before()

        4).insertBefore()

   5.3要在每个匹配的元素外部插入元素

        1).wrap()

   5.4要用新元素或文本替换每个匹配的元素

        1).html()

        2).text()