jquery学习-操作节点

出自：https://blog.csdn.net/xinghuo0007/article/details/71437066

知识点一：创建节点

注意：Jquery创建元素节点、属性节点、文本节点都使用$(html)

1.创建元素节点：$("<li></li>");
2.创建属性节点：$("<li id='test'></li>");
3.创建文本节点：$("hello world !");
4.下面是创建三者的结合：$("<li id='test'>hello world !</li>");

 解释：4是创建一个id属性为test，文本节点为hello world !的li节点

知识点二：获得节点



主要是jQuery的选择器：下面说下最基础的几个

      选择器           格式              举例
    1.id选择器     $("#id的属性值")     $("#name");
    2.class选择器  $(".class的属性值")  $(".name")
    3.标签选择器    $("html标签")       $("p")
    4.*选择器      $("*")             $("*")
    5.群组选择器    $("选择器1,选择器二,...")  $("p,#name")

知识点三：插入节点

内部插入（当做子节点插入）：
    append(content|fn)   向每个匹配的元素内部末尾追加内容。
    appendTo(content)    把所有匹配的元素追加到另一个指定的元素元素集合末尾。
    prepend(content|fn)  向每个匹配的元素内部头部内容。
    prependTo(content)   把所有匹配的元素追加到另一个指定的元素元素集合头部
外部插入（当做兄弟节点插入）：
    after(content|fn)    向每个匹配元素的后面添加内容
    before(content|fn)   向每个匹配元素的前面添加内容
    insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后
    面。
    insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的
    前面。

内部插入（当做子节点插入）案例：

<div id="div1">
    <p id="one">我是第一个p标签</p>
    <p id="two">我是第二个p标签</p>
</div>

 <p id="three">我是第三个p标签</p>

 <script>
       var p3 =  $("#three");
       var div = $("#div1");
</script>

1.append()实例

   div.append(p3)

执行完，结果网页结果为：

<div id="div1">
    <p id="one">我是第一个p标签</p>
    <p id="two">我是第二个p标签</p>
    <p id="three">我是第三个p标签</p>
</div>

总结：

1.可以看出append()方法，可以将id=three的p标签添加进了div中
2.这是我们也发现，原来位置上的id=three的p标签会被删除，等于是实际上是移动div里
面去了，也就是说在使用append()的时候，如果被添加元素会被移动到要添加的元素里面
了。

2.appendTo()实例：

p3.appendTo(div)

结果为：

<div id="div1">
           <p id="one">我是第一个p标签</p>
           <p id="two">我是第二个p标签</p>
           <p id="three">我是第三个p标签</p>
</div>

总结：

1.结果和append()执行完是一样的，只是颠倒了一下位置而已

3.prepend()实例：

div.prepend(p3);

结果为：

<div id="div1">
        <p id="three">我是第三个p标签</p>
         <p id="one">我是第一个p标签</p>
         <p id="two">我是第二个p标签</p>
</div>

4.prependTo()实例：

p3.prependTo(div)

结果为：

<div id="div1">
        <p id="three">我是第三个p标签</p>
         <p id="one">我是第一个p标签</p>
         <p id="two">我是第二个p标签</p>
</div>

外部插入（当做子节点插入）案例：

<div id="div1">
    <p id="one">我是第一个p标签</p>
</div>
    <p id="two">我是第二个p标签</p>
    <p id="three">我是第三个p标签</p>

    <script>
       var p1 =  $("#one");
       var div = $("#div1");
    </script>

1.after()

div.after(p1);

结果为；

<div id="div1"></div>
<p id="one">我是第一个p标签</p>
<p id="two">我是第二个p标签</p>
<p id="three">我是第三个p标签</p>

总结：

1.第一个p标签插入到了div的后面
2.第一个p标签在div中的移除
3.插入的过程相当于将第一个p标签从div中移动到div的后面

 div.before(p1) ;

结果：

<p id="one">我是第一个p标签</p>
<div id="div1"></div>
<p id="two">我是第二个p标签</p>
 <p id="three">我是第三个p标签</p>

3.insertAfter()案例：

p1.insertAfter(div);

结果：

<div id="div1"></div>
<p id="one">我是第一个p标签</p>
<p id="two">我是第二个p标签</p>
<p id="three">我是第三个p标签</p>

总结：

1。结果跟after()一样，只是颠倒了位置

4.insertBefore()案例：

   p1.insertBefore(div);

结果：

<p id="one">我是第一个p标签</p>
<div id="div1"></div>
<p id="two">我是第二个p标签</p>
 <p id="three">我是第三个p标签</p>

总结：

1。结果跟before()一样，只是颠倒了位置

jquery学习-操作节点

猜你喜欢