jquery总结04-DOM节点操作
一般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');
(之前谁会想倒着用吧,倒着可以这么用。)
jquery总结04-DOM节点操作的更多相关文章
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
- 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
- jQuery修炼心得-DOM节点的插入
1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- 前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- Dom节点操作总结
Dom 一:Dom的概念 Dom的简介: 全称为 document object model 文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...
- 第6章 DOM节点操作
一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...
- JQuery选择器和DOM的操作-入门学习
嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascr ...
- Jquery6 DOM 节点操作
学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,通过这 ...
随机推荐
- XHTML表单
1.HTML表单标记提供一套元素和属性,用来创建表单,收集网页参观者信息. 2.创建表单结构标记为<form>和</form>. 3.在<form>标记中,我们必须 ...
- 一步一步来做WebQQ机器人-(一)(验证码)
× Well done! 为了探究webqq的http请求流程和数据交互,我付出了很多心血. 写下这篇文章!!!这是我逝去的青春 系列写完之后我会把源码打包奉上~ ------我的征途是星辰大海 预计 ...
- How to generate ssh key only for github and not conflict with original key
3 生成SSH公钥 $ ssh-keygen -t rsa -C "your_email@youremail.com" #ssh-keygen -t dsa -C "y ...
- php://input,php://filter,data URI schema的那些事
一.php://input一句话木马 在调研dedecms的历史漏洞时,发现了dedecms安装文件曾经出过被植入后门的漏洞(SSV-ID站点include目录下shopcar.class.php文件 ...
- Linux系统下Redis安装(一)
最近项目要使用Redis,特将这段时间将Redis的学习经验与大家分享,算是对这段时间学习成果的总结和技术提炼,不足之处还望大家批评指正. 项目背景: 有些很少改动的数据和经常使用的数据(例如系统中下 ...
- 解决32位plsql连接数据库的问题
解决32位plsql连接数据库的问题: 安装32位的oracle数据库client版,此地址可下载[http://www.oracle.com/technetwork/database/featu ...
- python 特殊的下划线
Python 用下划线作为变量前缀和后缀指定特殊变量. _xxx 不能用'from module import *'导入 __xxx__ 系统定义名字 __xxx 类中的私有变量名 核 ...
- Java学习-043-获取文件在目录中的路径
我们在日常的电脑使用中,经常需要在当前目录或当期目录及其子目录中查找文件,并获取相应的文件路径名.在我们的自动化测试中,也经常需要确认文件在目录中是否成功生成或已存在,因而我写了一个小方法来实现. 获 ...
- android如何获取到启动类的包和类路径
ArrayList<String> list = new ArrayList<String>(); private List<ResolveInfo> mApps; ...
- react 评论列表插入评论数据 unshift
// unshift 新增数据放到最上面 //插入 回复/发表 评论else if(action.type === INSERT_COMMENT ){ let content = action.tex ...