前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery中的DOM操作

jQuery中的DOM操作

作者头像
IMWeb前端团队
发布2019-12-03 15:53:10
1.2K0
发布2019-12-03 15:53:10
举报
文章被收录于专栏:IMWeb前端团队

Dom操作的分类:DOM Core,html-DOM,CSS-DOM

查找节点:

查找属性节点(通过jq选择器),操作属性节点(attr(‘属性名’,’属性值’)), 操作文本节点(text())读/写

1.创建节点:

可以使用工厂函数:$(创建节点的内容)。要使用标准的开闭和标签

代码语言:javascript
复制
$('<p id="text">p</p>')//创建了一个id为text,内容为p的p标签

返回值是一个jq对象

2.插入节点:

代码语言:javascript
复制
append()://向匹配的元素的内部的结尾处追加内容
appendTo()://将每个匹配的元素追加到指定的元素内部结尾处
$('<p id="text">p</p>').appendTo("#outer");    
$('#outer').append('<p id="text2">插入p2</p>');  // 主语宾语调换
prepend()://向每个元素的内部的开始处插入内容
prependTo()://将每个匹配的元素插入到指定元素内部的开始处
$('<p id="text">插入p</p>').prependTo("#outer");
$('#outer').prepend('<p id="text2">插入p2</p>');   //主语宾语调换

插入为某个节点的子节点

代码语言:javascript
复制
insertAfter://将指定元素a插入到另一个元素b的后面
After://在b元素的后面插入a
insertBefore://将指定元素a插入到另一个元素b的前面
Before://在b元素的前面插入a

删除节点: remove:$(‘#test′).remove();该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。不占位置

清空节点:

empty:$(selector).empty() 从指定元素中移出所有的内容,包括子节点和内容。占位置

复制节点:clone():只复制节点中的内容,不包括任何行为。 注意克隆后节点的id属性,避免id重复 clone(true):复制内容,也复制行为

替换节点:xxx.replace(a)用xxx把a替换掉 前后宾语调换:a.replaceWith(xxx)将a替换成xxx 节点互换需要先克隆节点 包裹节点:warp() 将指定节点用其他标记包裹起来,该方法对于需要在文档中插入额外的结构化标记非常有用。将所有的元素进行单独包裹 wrap(“”) wrapAll() 将所有匹配的元素用一个元素来包裹, wrapAll(“”)

wrapInner()包裹指定元素中的子内容(包括文本节点)

find()方法:查找子节点,返回值为子节点对应的jq对象 var text=$trNode.find(“te:first”).text();//获取tr的第一个td的文本节点的文本值

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-09-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档