jquery 节点 详细操作

jquery 对象与原生对象的区别和相互转换

// aa：原生对象

 var aa = document.getElementById("aa");

// bb:jquery对象

var bb = $("#bb")

// 将原生对象用一个$符号和小括号包裹起来，就转为jq对象了

var bb = $(bb);

// 在 jq对象后面加一个中括号，在括号里面加下标，就转为了原生对象

var bb = bb[0]

Jq选择器得到的就是jq对象， jq对象可以调用jq库里面的方法。

原生js获取的对象就是原生对象，原生对象能使用原生对象的属性和方法。

原生对象和jq对象可以相互转换，双向的。

节点包括哪些：根节点  元素节点 、 文本节点 、 属性节点 注释节点 主要是操作：元素节点 文本节点 属性节点

查找节点：

查找节点，只需要通过$("选择器") 就可以轻松获取

列入：

$("p").text(); //获取纯文本
$("p").html(); //获取p标签中html代码

创建节点：

创建节点：html节点一般就包括节点本身（元素节点）节点的属性、节点内部的文本、节点内部的子节点、

<ul></ul>

// append()方法是添加dom节点方法
    $(function(){
        var myli = $("<li>11111</li>");
        $("ul").append(myli);

        $li2 = $("<li>苹果</li>");
        $("ul").append($li2);

    });

插入节点：

动态新建元素不添加到文档中没有实际意义，将新建的节点插入到文档中有多个办法：如下：

父子前后关系： append() 、appendTo() 、prepend() 、prependTo() 、

兄弟前后关系：after() 、insertAfter() 、before() 、insertBefore()

父子关系

appedn()方法

append()方法向匹配的元素内部追加内容方法如下：

向一个元素的内部的尾部追加内容，容器在前，内容在后，没有to

$("target").append(element);

例如：

$("ul").append("<li title='香蕉'>香蕉</li>");

该方法查找ul元素，然后向ul中添加新建的 li 元素

appendTo()方法

向一个元素的内部的尾部追加内容，内容在前，容器在后，有to。

appendTo()方法将所有匹配的元素追加到指定的元素中，该方法是append()方法的颠倒 [ 操作主题的颠倒并非操作结果 ] 操作 方法如下：

$(element).appendTo(target);

列入：

$("<li title='励志'>励志</li>").appendTo("ul")

该方法新建元素li 然后把li添加到查找到的ul元素中

prepend()方法

向一个元素的内部的前面添加内容，容器在前，内容在后，没有to。

prepend()方法将每匹配的元素内部前置要添加的元素，方法如下：

$("target").prepend(element)

列如：

$("ul")prepend("<li title='芒果'>芒果</li>");

该方法将查找元素ul然后将新建的li元素作为ul子节点，且作为ul的第一个子节点插入到ul中

prependTo()方法

向一个元素的内部的前面添加内容，内容在前，容器在后，有to。

prependTo()方法将元素添加到每一个匹配内容前置，方法如下：

$(element).prependTo();

列如：

$("<li title='西瓜'>西瓜</li>").prependTo("ul");

该方法将新建的元素li插入到查找到的ul元素中作为ul的第一个字节元素

兄弟关系

after()方法（前面选中的元素作为参考对象）

after()方法向匹配的元素后面添加元素，新添加的元素作为目标元素后的紧邻的兄弟元素。

方法如下：

$(target).after(element);

列如：

$("p").after("<span>新建元素<span>");

方法将查找节点p，然后把新建的元素添加到span节点后面作为p的兄弟节点

insertAfter()方法（前面选中的元素不是参考对象）

insertAfter()方法将新建的元素插入到查找到的目标元素后，作为目标元素的兄弟节点

方法如下：

$(element).insertAfter(target);

列如：

$("<p>insertAfter操作</p>").insertAfter("span");

方法将新建的p元素添加到查找到目标元素span后面，作为目标元素后面的第一个兄弟节点

before()方法

before()方法在每一个匹配的元素之前插入，作为匹配元素的前一个兄弟节点

方法如下：

$("P").before(element);

列如：

$("p").before("<span>下面是段落</span>");

before方法查找每个元素p，将新建的span元素插入到元素p之前。作为p的前一个兄弟节点

insertBefore()方法

insertBefore()方法将新建元素添加到目标元素前，作为目标元素的前一个兄弟节点

方法如下：

$(element).insertBefore(target);

例如：

$("<a href='#'>锚</a>").insertBefore("ul");

insertBefore()新建a元素，将新建的a元素添加到元素ul前，作为ul的前一个兄弟节点

增加元素的方法前4个是添加到元素内部，后四个是添加到元素外部的操作，有这些方法可以完成任何形式的元素添加

删除节点

如果想要删除文档中的某个元素jquery提供了两种删除节点的方式：remove()和empty();

remove()方法

remove()方法删除所有匹配的元素，传入的参数用于筛选元素，该方法能删除元素中所有子节点，当匹配的几点及后代被删除后，该方法返回值是指向被删除节点的引用，因此可以使用该引用，再使用这些被删除的元素。

方法如下：

$(element).remove();

列如：

var span = $("span").remove();
var span.insertAfter("ul"); //移除后，原来绑定的事件就没有了

该示例中先删除所有的span元素，把删除后的元素使用$span接收，把删除后的元素添加到ul后面，作为ul的兄弟节点，该操作相当于将所有的span元素以及后代元素移到ul后面

empty()方法

empty()方法严格来讲并不是删除元素，该方法只是清空节点，它能清空元素中的所有子节点，

方法如下：

$(element).empry();

列如：

$("ul li:eq(0)").empty();
//该示例使用 empty() 方法清空ul中第一个li的文本值

//删除和清空节点

<div id="box1">
        <p class="box1p">删除和清空节点</p>
        <p>删除和清空节点久长时</p>
        <p>删除和清空节点</p>
        <p>删除和清空节点</p>
        <p><a href="">删除和清空节点</a></p>
    </div>

    <div id="box2">

    </div>

    <input type="button" name="btnopt" id="btnopt" value="删除">
    <input type="button" name="btnrestore" id="btnrestore" value="还原">
    <input type="button" name="btnclear" id="btnclear" value="清空">

 var mybox;
    $("#btnopt").click(function(){
        var flag = confirm("确认要删除该条记录吗？");
        if(flag){
            mybox = $(".box1p").remove();
        }
    });


    var mybox1;
    $("#btnclear").click(function(){
        var flag1 = confirm("确认要清空该条记录吗？");
        if(flag1){
            mybox1 = $("#box1").empty();
            // 清空mybox1里面的全部内容 包括html标签和文本
        }
    })

复制节点

$(element).clone(); 复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为

方法如下：$(element).clone(true);

列如：

//该方法复制ul的第一个 li 元素，true 参数决定复制时也复制元素行为，当不能复制行为时没有参数
$("ul li:eq(0)").clone(true);

替换节点

$(element).repalcewith()

$(element).repalceAll()

使用replaceWith方法将后面的元素替换前面的元素，包括内容都替换了

replaceAll方法使用前面的元素替换后面的所有元素 方法如下：

$(oldelement).replaceWith(newelement);

$(newelement).repalceAll(oldelement);

例1：该方法使用strong元素替换p元素。

$("p").replaceWith("<strong>我要加粗</strong>");

例2：该例使用h3元素替换所有的strong元素。

$("<h3>替换strong</h3>").repalceAll("strong");