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

简介: 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为止
  1. 往里面找(找子集)
//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. 找兄弟
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("新");//在旧节点的后面插入新节点
  1. 复制
//jS:
var c=元素.cloneNode(true);//默认是浅复制,加true是深复制
//JQ:
var $c=$("元素").clone(true);//一样的意思,而且把他身上的事件也复制了,不加true,则只复制结构
//注意:复制的元素还在剪切板中,需要粘贴(用上面那几个方法,append,before,after)
  1. 替换
//JS:
父节点.replace('新','旧');//在父级范围内,将旧节点改为新的节点
//JQ:
$(旧节点).replaceWith(新节点); //旧节点被新节点替换
$(新节点).replaceAll(旧节点); //新节点替换旧节点
//以上二选一
  1. 删除
//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

相关文章
|
1月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
20天前
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
23 0
|
13天前
|
JavaScript 前端开发
N..
|
30天前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
14 1
|
1月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
1月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
8月前
|
XML JavaScript 前端开发
jQuery 的 DOM 操作
jQuery 的 DOM 操作
51 0
|
8月前
|
JavaScript 前端开发
jQuery 的 DOM 操作- 中
jQuery 的 DOM 操作- 中
30 0
|
8月前
|
JavaScript
jQuery 的 DOM 操作-上
jQuery 的 DOM 操作-上
44 0