jQueryDOM操作节点

				（作者： 邱锡纶  撰写时间 ： 2020年05月03日     星期天）

jQueryDOM操作节点

jQuery的选择器很强大，用起来又简单又灵活，但是搞了这么久，我拿到了jQuery对象，到底要干什么？答案当然是操作对应的DOM节点啦！回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作！
节点的增删改查
查找节点 创建节点 插入节点 删除节点 复制节点 替换节点 包裹节点
修改Text和HTML jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构：

<!-- HTML结构 -->
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>

分别获取文本和HTML：

$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java & JavaScript'

一、查找节点
1、使用各种选择器
都是在查找元素
2、父节点
a. 对象.parent() == 对象.parentNode
b. 对象.parents(“body”) 无参数：父级集合直到html,
c. 对象.parentsUntil(“body”) 父级到指定的父级结束
3、子节点
a. $(“box”).children() div>p
b. $(“box”).find(“li”); div li
4、兄弟节点
a.上一个
对象.prev() == previousElementSibling
对象.prevAll() 上一个到最先的兄弟
b.下一个
对象.next() nextElementSibling
对象.nextAll(选择器)
c.所有的兄弟节点（除自己外） ca+b
sibling===同胞
对象.siblings()

二、创建节点

JS：var obox=document.createElement("div");

创建元素节点

var newBox=$("<div id="box"></div>");

创建带文本的元素节点

var newBox=$("<div id="box">我是div标签</div>");

三、插入节点
1、在某父节点内（前后）：
后面：
JS: 父节点.appendChild(子节点);
a.$(父节点).append(子节点);b.$(子节点).appendTo(父节点); //把子节点插入到父级点后面
前面：
a.$(父节点).prepend(子节点);b.$(子节点).prependTo(父节点);
2、在兄弟节点前后：
js:父节点.insertBefore(新节点,旧节点)
前面：
a.$(兄弟节点).before(新的兄弟节点);//在兄弟节点前插入新的兄弟节点b.$(新的兄弟节点).insertBefore(旧兄弟节点);//将新兄弟节点插入到旧节点前
后面：
a.$(兄弟节点).after(新的兄弟节点);//在兄弟节点后插入新的兄弟节点b.$(新的兄弟节点).insertAfter(旧兄弟节点);//将新兄弟节点插入到旧节点后

四、删除节点
js: 父节点.removeChild(“要删除的节点”);
1、删除节点
$(要删除的节点).remove(); //彻底删除，包括它自己
2、清空节点
$(要清空的节点).empty(); //将该节点内容清空，保留它自己
3、detach()；