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

一、从某个元素出发，往上下左右找祖先、后代、兄弟

1. 往上找（找祖先）

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

2. 往里面找（找子集）

   //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");//孙子

3. 找兄弟

   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>");//有内容的标签

三、节点的增删改

1. 插入

   a. 在父级的内部

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

b.在兄弟的前面或后面

   1.在兄弟的前面追加
   //JS
   父节点.insertBefore('新','旧');//
   //JQ:
   $("旧").before("新");//在旧节点的前面插入新节点

   2. 在兄弟的后面追加
   //JS
   无
   //JQ:
   $("旧").after("新");//在旧节点的后面插入新节点

2. 复制

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

3. 替换

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

4. 删除

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

相关单词

1. parent 父母
2. children 孩子们 是child的复数
3. find 找
4. all 所有
5. next 下一个
6. previous 上一个
7. sibling 同胞
8. empty 空

此资源下载链接已被无情的隐藏，请输入验证码解锁：

验证码

确定

请关注本站公众号回复“验证码”，获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号