详解jquery节点操作

1. 节点创建

    js 原生 DOM:
        var div = document.createElement("div");
    jquery:
        var div = $("<div></div>")

2. 属性操作

    js 原生属性操作
        setAttribute  //设置属性
        getAttribute  //获取属性
    jquery：
        设置属性
            $("#app").attr("class","test");
            $("#app").attr({
                "class":"test",
                "name":"lisi",
                "kmd":"hxx"
            });
        获取属性·    ·
            $("#app").attr("class");
            $("#app").attr("kmd":"hxx");
        类名操作
            $("li:eq(3)").addClass("col font");
            $("li:eq(3)").removeClass("col");
        删除属性
            $("li:eq(3)").removeAttr("class");
        hasClass 元素中是否包含一个类名，如果有会是真，如果没有就是假
            console.log($("div").hasClass("oDiv"));// true
        append 和 appendTo
            $("li:eq(4)").append("<p>我是p标签</p>");
            $("<span>我是span</span>").appendTo($("li:eq(5)"));
        jquery 中html()  方法 == dom中的innerHTML，
            其中没有参数就是获取标签的内容有内容就是设置
        val() == value   有参数就是设置内容，没有参数就是获取value
            $(".content").html($(":text").val());

3. 节点插入

    js 原生：
        父元素子元素都是dom对象
        父元素.appendChild("子元素")
    jquery：
        父元素子元素都是jquery对象
        父元素.append(子元素)
            $("div").append($("span"))
        子元素.appendTo("父元素")
            $("span").appendTo($("div"))

4. 节点删除

    js 原生：
        父元素.removeChild(子元素)
    jquery：
        子元素.remove()   将自己从父元素中删除
        父元素.empty()    清除父元素中所有的子元素

5. 替换节点

    js 原生：
        ele.replaceChild(newEle,oldEle);000.0
        oldEle 必须是ele的子元素
    jquery：
        使用p替换div
        $("div").replaceWith($("<p>hello</p>"))
        $("<p>hello</p>").replaceAll($("div"))

6. 克隆节点

    js 原生
        div.cloneNode(true)
    jquery:
        $("div").clone(true).appendTo("body")
        注：true  可以克隆事件   false不可以克隆事件

7. 节点关系

    1) 自己 $(this)
            this在原生事件中指向事件源的dom对象，使用$转为jquery对象
                $(this)  $(document)  $(window)
            jquery对象转dom：$("div")[0]遍历转变
            jquery 对象中包含的是dom对象，可以通过数组的取值方式取出其中的dom对象
    2) .children()
        匹配元素集合中每一个元素的所有子元素
        $("ul").childern(".ss")
        获取所有 ul 中类名为 ss 的子元素
    3) .next
        获取匹配元素集合中每一个元素的下一个兄弟标签
        $("ul").next()   ul 的下一个兄弟
        .nextAll()       获取后边所有的兄弟
    4) .siblings()
        获取匹配元素集合中所有元素的兄弟元素     可筛选
        $("#test").siblings(".selected")
    5) .parent()
        获取匹配元素集合中每一个元素的父元素
        $("#t").parent(); // body
        .parents()
        获取匹配元素集合中每一个元素的祖先元素，直到 html 为止

“
6) .prev() previous
获取匹配元素集合中每一个元素紧邻的前一个兄弟元素
$("#test2").prev(".selected")
.prevAll() 自己前边所有的兄弟
7) .find()
获得当前匹配元素集合中每一个元素的后的 可以进行筛选
$(".last").find();
$(".last").find(".aa");
$(".last").find(“span”);