查找节点
创建节点
插入节点
删除节点
复制节点
替换节点
包裹节点
一、查找节点
1、使用各种选择器
都是在查找元素
2、父节点
a. 对象.parent() == 对象.parentNode
b. 对象.parents(“body”) 无参数:父级集合直到html,
c. 对象.parentsUntil(“body”) 父级到指定的父级结束
3、子节点
a. $(“box”).children() div>p
b. $(“box”).find(“li”); div li
4、兄弟节点
a.上一个
对象.prev() == previousElementSibling
对象.prevAll() 上一个到最先的兄弟
b.下一个
对象.next() nextElementSibling
对象.nextAll(选择器)
c.所有的兄弟节点(除自己外) ca+b
sibling===同胞
对象.siblings()
二、创建节点
JS:var obox=document.createElement(“div”);
创建元素节点
var newBox=
(
"
<
d
i
v
i
d
=
"
b
o
x
"
>
<
/
d
i
v
>
"
)
;
创
建
带
文
本
的
元
素
节
点
v
a
r
n
e
w
B
o
x
=
("<div id="box"></div>"); 创建带文本的元素节点 var newBox=
("<divid="box"></div>");创建带文本的元素节点varnewBox=(“
三、插入节点
1、在某父节点内(前后):
后面:
JS: 父节点.appendChild(子节点);
a.
(
父
节
点
)
.
a
p
p
e
n
d
(
子
节
点
)
;
b
.
(父节点).append(子节点); b.
(父节点).append(子节点);b.(子节点).appendTo(父节点); //把子节点插入到父级点后面
前面:
a.
(
父
节
点
)
.
p
r
e
p
e
n
d
(
子
节
点
)
;
b
.
(父节点).prepend(子节点); b.
(父节点).prepend(子节点);b.(子节点).prependTo(父节点);
2、在兄弟节点前后:
js:父节点.insertBefore(新节点,旧节点)
前面:
a.
(
兄
弟
节
点
)
.
b
e
f
o
r
e
(
新
的
兄
弟
节
点
)
;
/
/
在
兄
弟
节
点
前
插
入
新
的
兄
弟
节
点
b
.
(兄弟节点).before(新的兄弟节点); //在兄弟节点前插入新的兄弟节点 b.
(兄弟节点).before(新的兄弟节点);//在兄弟节点前插入新的兄弟节点b.(新的兄弟节点).insertBefore(旧兄弟节点);//将新兄弟节点插入到旧节点前
后面:
a.
(
兄
弟
节
点
)
.
a
f
t
e
r
(
新
的
兄
弟
节
点
)
;
/
/
在
兄
弟
节
点
后
插
入
新
的
兄
弟
节
点
b
.
(兄弟节点).after(新的兄弟节点); //在兄弟节点后插入新的兄弟节点 b.
(兄弟节点).after(新的兄弟节点);//在兄弟节点后插入新的兄弟节点b.(新的兄弟节点).insertAfter(旧兄弟节点);//将新兄弟节点插入到旧节点后
四、删除节点
js: 父节点.removeChild(“要删除的节点”);
1、删除节点
$(要删除的节点).remove(); //彻底删除,包括它自己
2、清空节点
$(要清空的节点).empty(); //将该节点内容清空,保留它自己
3、detach()
五、复制节点
js: 要复制的节点.cloneNode(boolean);
$(“要复制的节点”).clone(boolean); true复制事件,默认为false
六、替换节点
JS: 父节点.replaceChild(新节点,旧节点);
1、$(旧节点).replaceWith(新节点); //旧节点被新节点替换
2、$(新节点).replaceAll(旧节点); //新节点替换旧节点
七、包裹节点
JS: 无
wrap :包裹
1、将某个节点用其他元素包裹起来(单独包裹)
(
子
节
点
)
.
w
r
a
p
(
"
父
节
点
标
签
"
)
;
例
子
:
(子节点).wrap("父节点标签"); 例子:
(子节点).wrap("父节点标签");例子:(“p”).wrap("
2、将所有匹配的元素用另一个元素包裹起来(打包包裹)
( 子 节 点 ) . w r a p A l l ( " 父 节 点 标 签 " ) ; 例 子 : (子节点).wrapAll("父节点标签"); 例子: (子节点).wrapAll("父节点标签");例子:(“p”).wrapAll(" "); //所有的p都会被div个打包
3、将每一个匹配的子内容用其他标记包裹起来。相当于是对wrap取相反。
$(“父节点标签”).wrapInner(子节点);