jQuery DOM2-第4次课-从某个元素出发，往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记

//jS  父亲
元素.parentNode;
//JQ
a.  对象.parent()  直接上级（父亲）
var $div=$("div");
  $div.parent();//div的爹
b.  对象.parents('选择器') 不加参数默认是到HTML，加参数可到参数父级结束
指的是所有的上一级，直到HTML，返回多个集合数组
  $div.parents();//所有的爹，直到HTML结束  
  $div.parents('body');//返回该元素的父级，直到body为止

//JS:
元素.children;
元素.firstElementChild;
元素.lastElementChild;
//JQ:  div>p
1. 对象.children('选择器')   
   直接子级的集合，可设置参数过滤
$me=$("ul");
$cl=$me.children();//所有的孩子
$cl=$me.children('p');//子元素中的p元素
2. 对象.find("选择器")  在对象内查找选择器匹配的节点
  包括儿子、孙子等，后一代都行  div p
$me=$("ul");
$me.find("li");//直接子元素
$me.find("span");//孙子

1. 找哥哥
//JS
元素.previousElementSibling;//只能找紧挨着元素的兄弟
//JQ:
$(元素).prev();//找一个紧挨着它旁边的哥哥，1个
$(元素).prevAll('选择器');//不写参数找所有的哥哥，多个
2. 找弟弟
//JS
元素.nextElementSibling;//只能找紧挨着元素的弟弟
//JQ:
$(元素).next();//找一个紧挨着它旁边的弟弟，1个
$(元素).nextAll('选择器');//不写参数找所有的弟弟，多个
3. 找哥哥和弟弟（除他自己，找同胞兄弟姐妹）
//JS
无
//JQ:
$(元素).siblings('选择器');

//JS
var oli=document.createElement("li");
//空标签
  oli.id='box';
  oli.className="red";
    oli.innerText="内容";
//JQ:
var $oli=$("<li>");//空标签
var $oli=$("<li class='red' id='box'>内容</li>");//有内容的标签

//js
父节点.appendChild('子节点');
//JQ:
$("父节点").append('子节点');
或者：
$('子节点').appendTo('父节点')
//备注：两个方法都一样，只需要一个即可

b.在兄弟的前面或后面
```js
   1.在兄弟的前面追加
   //JS
   父节点.insertBefore('新','旧');//
   //JQ:
   $("旧").before("新");//在旧节点的前面插入新节点
   2. 在兄弟的后面追加
   //JS
   无
   //JQ:
   $("旧").after("新");//在旧节点的后面插入新节点

//jS:
var c=元素.cloneNode(true);//默认是浅复制，加true是深复制
//JQ:
var $c=$("元素").clone(true);//一样的意思，而且把他身上的事件也复制了，不加true，则只复制结构
//注意：复制的元素还在剪切板中，需要粘贴（用上面那几个方法，append，before，after）

//JS：
父节点.replace('新','旧');//在父级范围内，将旧节点改为新的节点
//JQ:
$(旧节点).replaceWith(新节点); //旧节点被新节点替换
或
$(新节点).replaceAll(旧节点); //新节点替换旧节点
//以上二选一

//JS
父节点.removeChild('要删除的子节点');
//JQ:
1、删除节点
$(要删除的节点).remove(); //彻底删除，包括它自己
2、清空节点
$(要清空的节点).empty(); //将该节点内容清空，保留它自己