知识点一：创建节点
注意：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的后面
2.
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()一样，只是颠倒了位置