Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jQuery中的DOM操作

jQuery中的DOM操作

作者头像
IMWeb前端团队
发布于 2019-12-03 07:53:10
发布于 2019-12-03 07:53:10
1.3K00
代码可运行
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队
运行总次数:0
代码可运行

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

查找节点:

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

1.创建节点:

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

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

返回值是一个jq对象

2.插入节点:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
jquery dom操作
var li=$("ul i:eq(1)") var li_txt=li.text() alert(li_txt)
用户5760343
2019/10/08
9170
jquery dom操作
DMO节点内部插入的常用方法与区别
动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来。那么问题来了,怎么放到文档上?
小周sir
2019/09/23
1.2K0
Jquery基础之DOM操作
Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。
张哥编程
2024/12/19
1470
Jquery基础之DOM操作
jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作、事件绑定(2) ————————————————————学习目录———————————————————————— 4.DOM操作 5.事件绑定
王小雷
2019/05/26
1.5K0
jQuery DOM操作
在目标对象前插入同级兄弟元素(不是头部,而是外面,和对象并列同级),参数和append类似
bamboo
2019/01/29
1K0
jQuery DOM操作
JQuery干货篇之操控DOM
通常在把新元素插入到DOM中的目标位置之前,要先创建一个新元素才能将它插入到指定位置
爱撒谎的男孩
2019/12/30
1K0
JQuery中DOM对象
var li_1 = ("< li id=‘liApple’>苹果< /li>"); //创建一个li元素。
我不是费圆
2020/09/21
4.9K0
看Zepto如何实现增删改查DOM
本文对Zepto模块进行了分析,分别从整体架构、核心模块、使用方法和高级特性等方面进行了介绍。主要包括Zepto概述、核心模块、使用方法和高级特性等。
IMWeb前端团队
2018/01/08
2.6K0
看Zepto如何实现增删改查DOM
04-老马jQuery教程-DOM节点操作及位置和大小
根据给定的文章内容,撰写摘要总结。
老马
2017/12/27
6.2K0
04-老马jQuery教程-DOM节点操作及位置和大小
jquery 操作DOM元素(1)
.clone()   创建一个匹配的元素集合的深度拷贝。   .clone([withDataAndEvents])     withDataAndEvents (默认为false)       一个Boolean 表示是否会复制元素上的时间处理函数。   .clone([withDataAndEvents][,deepwithDataAndEvents])     withDataAndEvents (默认为false)
用户1197315
2018/01/19
1.4K0
读Zepto源码之操作DOM
对角另一面
2017/12/27
9360
[jQuery学习系列一]1-选择器与DOM对象
前言: 好久没有更新博客了, 最近想复习下 之前学过的JS的相关内容, 也算是自己的一种总结. 知识长时间不用就会忘记, 多学多记多用!! 下面的程序都可以在下面的网站进行在线调试:  http://
一枝花算不算浪漫
2018/05/18
2.9K0
JQuery中DOM操作示例代码
Jquery的DOM操作 1、插入节点代码示例: <p title=”选择你喜欢的水果”>你最喜欢的水果是?</p> <ul> <li title=”苹果”>苹果</li> <li title=”橘子”>橘子</li> <li title=”菠萝”>菠萝</li> </ul> <script language=”javascript”> var $li_1=$(“<li title=’香蕉’>香蕉</li>”); var $li_2=$(“<li title=’雪梨’>雪梨</li>”); $(“ul”).
苦咖啡
2018/05/07
1.3K0
第75天:jQuery中DOM操作
还有就是,我说的是name属性,上面例子中的 type属性,是可以用attr的。
半指温柔乐
2018/09/11
8670
第75天:jQuery中DOM操作
WEB入门之十六 操作DOM节点
DOM是Document Object Model的缩写,即文档对象模型,它是W3C的标准规范,提供了使用JavaScript操纵页面元素的接口。节点是DOM中最基本的组成单位,每个标签、每个文本都可以看成是一个节点。本章将学习使用jQuery对DOM节点进行操作。
张哥编程
2024/12/17
2040
WEB入门之十六  操作DOM节点
jQuery 常用方法
jQuery 是一个快速、简洁的 JavaScript 框架,封装 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互
Nian糕
2018/08/21
2.7K0
jQuery 常用方法
JavaWeb——JQuery之DOM操作应用及实践案例总结(DOM内容操作、DOM属性操作、CRUD操作)
【注意】:prop和attr的区别,如果操作的是元素的固有属性(非自定义的),建议使用prop;若是自定义属性,建议用attr。
Winter_world
2020/09/25
3.1K0
JavaWeb——JQuery之DOM操作应用及实践案例总结(DOM内容操作、DOM属性操作、CRUD操作)
【JQuery框架】超详细DOM操作看这一篇就够了!
之前和大家分享了jQuery框架中选择器的相关操作“【JQuery框架】五大选择器“全家桶”详解!!!”
灰小猿
2021/09/14
5610
jQuery基础教程之文档处理
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。把原来的删除,放到新的地方
老雷PHP全栈开发
2020/07/02
4110
Jquery 节点操作
今天公司项目,用到了Jq节点操作,好久没用了,查了查文档,做下记录,也能方便小伙伴们借鉴,写的不好之处多多理解.......
IT工作者
2021/12/30
8480
相关推荐
jquery dom操作
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验