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

jQuery笔记合集
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业	jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业	jQuery DOM2-第4次课-从某个元素出发，往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery事件1-第5次课-JQ的事件跟JS一样的作用，只是写法不一样-附案例、任务	jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务	jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业

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

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.在兄弟的前面或后面

```js
   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 空

资料、笔记、作业下载链接：https://www.imqd.cn/jquery-dom2-find-element.html