博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery总结04-DOM节点操作
阅读量:5885 次
发布时间:2019-06-19

本文共 1177 字,大约阅读时间需要 3 分钟。

一般js操作节点

①创建节点(元素文本)document.createElement  innerHTML

②添加属性 setAttribute

③加入文档 appendChild

操作繁琐还有兼容性问题

jquery操作节点

①$('<div class="a">jquery</div>")  直接在$("")里写元素 文本 属性  要注意闭合标签和使用标准的的xhtml格式

②加入文档支持了好多函数

向下添加节点

$('.a').append(content) 在a元素内的最后添加内容  $(content).appendTo('.a')只不过换了一种方式

$('.a').prepend(content) 在a元素内的最开始添加内容  $(content).prependTo('.a')

同级添加节点

$('.a').after(content) 在a元素同级后添加内容  $(content).insertAfter('.a')

$('.a').before(content) 在a元素同级后添加内容  $(content).insertBefore('.a')

向上父及包裹节点

$('.a').wrap("<div></div>") 给匹配的元素每一个外部包一有个html结构  每个都被包裹了 

$('.a').wrapInner("<div></div>") 给匹配的元素每一个内部包裹一个html结构 

$('.a').wrapAll("<div></div>") 给匹配的元素集合外层包裹一个html结构 包裹了最外层的

$('.a').unwrap("<div></div>") 删除父元素

删除节点

$('.a').empty()删除内容,自己还在, 都可以传参数缩小范围 事件也删除

$('.a').remove()都删除了,自己也不在了,都可以传参数缩小范围 事件也删除

var a=$('.a').detach()  都删除了 事件还在

$('body').append(a) 恢复清除的结构

复制节点

$('.a').clone() 复制结构

$('.a').clone(true) 复制结构+事件

替换节点

替换后绑定的时间也会被删除

$('.a').replaceWith(newContent) newContent替换a元素 

$(newContent).replaceAll('.a') newContent替换a元素

 

以上操作,不仅能创建新的dom元素插入,也能对原有的dom元素进行移动,

 var a =$('#content');

 a.insertAfter('.a');

(之前谁会想倒着用吧,倒着可以这么用。)

转载于:https://www.cnblogs.com/wufangfang/p/6101879.html

你可能感兴趣的文章
彻底卸载删除微软Win10易升方法
查看>>
SWT/JFACE之环境配置(一)
查看>>
应用程序日志中总是说MS DTC无法正确处理DC 升级/降级事件,是什么意思
查看>>
mybatis数据处理的几种方式
查看>>
作业2
查看>>
远程主机探测技术FAQ集 - 扫描篇
查看>>
C++中调用python函数
查看>>
Nomad添加acl认证
查看>>
“TI门外汉”网路知识笔记一 OSI参考模型
查看>>
你不需要jQuery(五)
查看>>
DatanodeDescriptor说明
查看>>
ServlertContext
查看>>
Python WOL/WakeOnLan/网络唤醒数据包发送工具
查看>>
sizeof(long)
查看>>
pxe网络启动和GHOST网克
查看>>
2.5-saltstack配置apache
查看>>
django数据库中的时间格式与页面渲染出来的时间格式不一致的处理
查看>>
Python学习笔记
查看>>
java String
查看>>
DOCKER windows 7 详细安装教程
查看>>