jQuery篇之操作jQuery对象(DOM)

目录
    1. 

举例（原生添加元素）

    <script type="text/javascript">
        var body = document.querySelector('body');

        document.addEventListener('click',function(){
            
            //创建2个div元素
            var rightdiv = document.createElement('div')
            var rightaaron = document.createElement("div");

            //给2个div设置不同的属性
            rightdiv.setAttribute('class', 'right')
            rightaaron.className = 'aaron'
            rightaaron.innerHTML = "动态创建DIV元素节点";

            //2个div合并成包含关系
            rightdiv.appendChild(rightaaron)
            
            //绘制到页面body
            body.appendChild(rightdiv)

        },false)
    </script>

上述例子更换为jQuery写法

    <script type="text/javascript">
    var $body = $('body');
    $body.on('click', function() {
        //通过jQuery生成div元素节点
        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
        $body.append(div)
    })
    </script>

原生添加元素的流程
    创建元素：document.createElement
    设置属性：setAttribute
    添加文本：innerHTML
    加入文档：appendChild

原生添加元素的缺点
    每一个元素节点都必须单独创建
    节点是属性需要单独设置，而且设置的接口不是很统一
    添加到指定的元素位置不灵活
    最后还有一个最重要的：浏览器兼容问题处理

创建 元素

$("<div></div>")

$("<div>我是文本节点</div>")

$("<div id='test' class='aaron'>我是文本节点</div>")

添加 元素

追加至结尾（作为子元素）
    $("p").append("Some appended text.");
    $("<b>Hello World!</b>").appendTo("p");
追加至开头（作为子元素）
    $("p").prepend("<p>hello</p>","<p>world</p>");
    $("<b>Hello World!</b>").prependTo("p");

元素之后之前添加（作为兄弟元素）
    $("img").after("Some text after");
    $("img").after("Some text after","Some text after");
    $("img").before("Some text before");
    $("img").before("Some text before","Some text before"));
    $("<span>Hello world!</span>").insertAfter("p");
    $("<span>Hello world!</span>").insertBefore("p");

删除 元素

删除所有子孙元素
    $("#div1").empty();
删除（自己和所有子孙元素，移除元素内部的一切---包括绑定的事件及与该元素相关的jQuery数据）
    $("#div1").remove();
删除所有class为italic的p元素
    $("p").remove(".italic");
删除所有包含3字符串的p元素
    $("p").filter(":contains('3')").remove()
    $("p").remove(":contains('3')")
删除(自己和所有子孙元素，保留所有绑定的事件、附加的数据。当你append之后，又重新回到了文档流中。就又显示出来了）
    $("p").detach();
删除p的所有父元素
    $("p").unwrap();

为了防止"内存泄漏"，所以一定要注意，绑了多少事件，不用的时候一定要记得销毁

detach()举例

    <script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //通过detach方法删除元素
        //只是页面不可见，但是这个节点还是保存在内存中
        //数据与事件都不会丢失
        p = $("div").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到页面中
        //事件还是存在
        $("body").append(p);
    });
    </script>

复制/替换 元素

克隆元素以及子孙元素
    $("p").clone()    // 不包含：事件与数据
    $("div").clone(true) // 包含：事件与数据

替换(会删除原节点及子孙节点，以及相关联的数据和事件)
    返回的是原节点
    $("<b>Hello world!</b>").replaceAll($("p"));
    $("p").replaceWith("<b>Hello world!</b>");

包裹p元素(添加父元素)
    $("p").wrap("<div></div>");
    $('p').wrap(function() {
        return '<div></div>';   
    })
    $('p').wrapAll('<div></div>');  // 增加一个共同的父元素
    $('p').wrapAll(function() {    // 每一个p一个单独的父元素
        return '<div><div/>'; 
    })

给p元素添加子元素（该元素包含了原来的所有子元素）
    $("p").wrapInner("<b></b>");
    $('p').wrapInner(function() {
        return '<b></b>'; 
    })

解包裹p元素(删除父元素)
    $('p').unwrap('')
    $('p').unwrap(function() {
        return '<div></div>';
    })

父辈、子孙、兄弟 元素

parent（父元素）

直接父元素（每一个元素的父元素）
    $("span").parent();
    $('span').parent(':last')  // 可传入选择器作为参数

parents(父辈元素)

所有父辈元素
    $("span").parents();
    $("span").parents("ul");  // 所有url父辈元素（可传入选择器作为参数）

closet(自己或父辈元素)

最先匹配的自己或父辈元素
    $("div").closet('li')

    $('span').offsetParent()
直到div元素的所有父元素
    $("span").parentsUntil("div");

注意：$( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

children（直接子元素）

所有直接子元素（元素集合的每一个元素的直接子元素）
    可将选择器作为参数传入
    $("div").children();
所有子元素类型为p且class为myClass的直接子元素
    $("div").children("p.myClass");
取元素集合最后一个元素的直接子元素
    $('.div').children(':last')

find（子孙元素,参数为必需）

所有子孙元素
    $("div").find("*");
所有span子元素
    $("div").find("span");
    $('div', 'span')  // 等价
第三个
    $("body").find("div").eq(2);
最后一个
    $("p").find("span").end()

next（后面的相邻兄弟元素）

后面的兄弟元素（每一个元素的后面相邻兄弟元素）
    $("h2").next();
    $("h2").next(':first');    // 可传入选择器作为参数

所有后面的兄弟元素
    $("h2").nextAll();
所有后面的直到h6的兄弟元素
    $("h2").nextUntil("h6");

prev（前面的相邻兄弟元素）

前面的相邻兄弟元素
    $("h2").prev();
    $("h2").prev(':first');     // 可传入选择器作为参数


前面的所有兄弟元素
    $("h2").prevAll();
所有前边直到h6（不含）的兄弟元素
    $("h2").prevUntil("h6");
id为p的元素一直往上到id为hh（不含）所有dd元素
    $("#p").prevUntil(document.getElementById('hh'), "dd")

siblings（所有兄弟元素）

所有兄弟元素
    $("h2").siblings();
    $("h2").siblings("p");