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 - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
43 10
|
1月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
45 0
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
12天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
12天前
|
JavaScript 前端开发
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
45 4
|
2月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
12天前
|
JavaScript 前端开发 API
|
1月前
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
213 1