DOM操作

2017-05-24  本文已影响0人  daisx

创建元素:同时新建(元素节点)(文本节点)(属性节点)

插入节点:动态创建的元素节点插入

append、appendTo、prepend、prependTo是更倾向于父子元素之间的插入操作。

$("A").append(B)【查找某个元素A后,向其内部元素后面插入元素B】

$("B").appendTo(A)

$("A").prepend(B)【查找某个元素A,向其内部元素前面插入元素B】

$("B").prependTo(A)

after、insertAfter、before、insertBefore偏向于兄弟元素之间的插入

$(A).after(B);【查找元素A,在其后面插入元素B】

$(B).insertAfter(A);

$(A).before(B);【查找元素A,在其前面插入元素B】

$(B).insertBefore(A);

删除节点

remove()【删除元素以及元素内包含后代,返回被删除对象,可以带参数删除】

detach()【类似remove,区别在于,元素绑定的方法再次使用时,依旧存在,但是人remove已不复从前】

empty()【清空元素内部节点,和remove、detach存在很大区别。比如ul中清除了li:eq(0)元素,只是清空了文本,绑定的事件依旧存在】

复制节点

clone()【不带参数,不具备原节点的行为,带参数true完整克隆】

替换节点

$(A).replaceWith(B)【查找到A,用B来替换】

$(B).replaceAll(A')【调到了B和A的位置】

属性操作

获取属性:$(A).attr(pro-name)【获取元素A的属性】

修改属性:$(A).attr({名/值对})【修改A的属性】

删除属性:$('A').removeAttr('属性名')【删除元素A属性】

样式操作

追加样式:addclass()

移除样式:removeclass()

切换样式:toggle()

判断样式:hasclass()

设置内容:html()、text()

遍历节点:

children():只考虑子元素,而不考虑后代元素

$(A).next():获取紧邻同辈中A元素的下一个元素

$(A).prev():获取紧邻同辈中A元素的上一个元素

$(A).siblings():获取紧邻同辈中A元素所有兄弟元素

上一篇下一篇

猜你喜欢

热点阅读