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

jQuery用来操作DOM是非常方便和强大的,这也是它的特长。
它封装了很多快捷的操作DOM的方法,这些都是之前JS的DOM方法没有的

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

  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("新");//在旧节点的后面插入新节点
  1. 复制

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

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

    //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”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 832
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top