一、从某个元素出发,往上下左右找祖先、后代、兄弟
- 往上找(找祖先)
//jS 父亲 元素.parentNode; //JQ a. 对象.parent() 直接上级(父亲) var $div=$("div"); $div.parent();//div的爹 b. 对象.parents('选择器') 不加参数默认是到HTML,加参数可到参数父级结束 指的是所有的上一级,直到HTML,返回多个集合数组 $div.parents();//所有的爹,直到HTML结束 $div.parents('body');//返回该元素的父级,直到body为止
- 往里面找(找子集)
//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. 找哥哥 //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>");//有内容的标签
三、节点的增删改
- 插入
a. 在父级的内部
//js 父节点.appendChild('子节点'); //JQ: $("父节点").append('子节点'); 或者: $('子节点').appendTo('父节点') //备注:两个方法都一样,只需要一个即可
b.在兄弟的前面或后面 ```js 1.在兄弟的前面追加 //JS 父节点.insertBefore('新','旧');// //JQ: $("旧").before("新");//在旧节点的前面插入新节点 2. 在兄弟的后面追加 //JS 无 //JQ: $("旧").after("新");//在旧节点的后面插入新节点
- 复制
//jS: var c=元素.cloneNode(true);//默认是浅复制,加true是深复制 //JQ: var $c=$("元素").clone(true);//一样的意思,而且把他身上的事件也复制了,不加true,则只复制结构 //注意:复制的元素还在剪切板中,需要粘贴(用上面那几个方法,append,before,after)
- 替换
//JS: 父节点.replace('新','旧');//在父级范围内,将旧节点改为新的节点 //JQ: $(旧节点).replaceWith(新节点); //旧节点被新节点替换 或 $(新节点).replaceAll(旧节点); //新节点替换旧节点 //以上二选一
- 删除
//JS 父节点.removeChild('要删除的子节点'); //JQ: 1、删除节点 $(要删除的节点).remove(); //彻底删除,包括它自己 2、清空节点 $(要清空的节点).empty(); //将该节点内容清空,保留它自己
相关单词
- parent 父母
- children 孩子们 是child的复数
- find 找
- all 所有
- next 下一个
- previous 上一个
- sibling 同胞
- empty 空
资料、笔记、作业下载链接:https://www.imqd.cn/jquery-dom2-find-element.html