JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用
来源:互联网 发布:淘宝的企业店铺怎么开 编辑:程序博客网 时间:2024/05/14 07:56
做前端开发的,免不了的要操作页面HTML代码,jQuery中提供了许多非常便捷的方法,使我们很方便的操作HTML代码,这也许就是选择JQuery的原因吧。
那么让我们来看看有常用的有哪些方法:
- html方法,给元素添加html代码或者清空html代码(参数为空字符串);
- append向元素的末尾添加html代码;
- appendTo这个方法跟append方法的很像,只是要添加的html代码的目标有所不一样;
- after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入;
- before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插入;
- insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入;
- insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;
- empty清空元素内部的html代码,它只是清空内部的html代码,但是标记仍然留在DOM中;
- remove从DOM中移除整个元素;
需要指出的重要的一点:JQuery会自动的完善html代码,也就是说,假如你要执行以下操作
那么实际插入到标记中的html代码是
这一点需要特别注意,很多教程之类的只是讲解这些函数的动作,但是会忽略一些细节;
下面让我来详细解释一下每个函数的作用以及它是如何工作的,会产生什么效果。以后的代码我都对这样的一个模板来操作,代码以及效果如下:
原始的效果图:
一、html函数的使用
我们执行以下语句:
效果图如下:
再来看看最终的代码:
这里是完整的html代码,也就是说JQuery为我们补全了代码,这一点需要注意,JQuery为我们带来了方便,但是当我们需要精确控制html代码的时候,需要注意一点。
html函数的作用原理首先是移除目标元素内部的html代码,然后将新代码添加到目标元素。
二、append、appendTo函数的使用
执行以下语句:
注:为了编程规范,html代码我之后都使用完整的html标记。
效果图如下:
最终的代码:
append函数将html附加到了<span>middle</span>之后。
appendTo函数的效果和append一样,只不过是写法不一样:
appendTo首先将html代码封装成jquery对象,然后添加到指定的目标位置。
三、after、insertAfter函数的使用
执行以下语句:
效果图:
after函数的作用是将html代码插入指定元素的后面,如果后面有元素,则将其后移,然后插入html代码。
insertAfter函数与after函数的作用是一样的,上面代码的insertAfter版本为:
四、before、insertBefore函数的使用
这连个函数的原理与after、insertAfter是一样的,只不过before、insertBefore是插入到目标元素的前面,大家可以自行参考after、insertAfter。
五、empty、remove函数的使用
执行以下代码:
效果图:
再来看看最终的html代码:
里面的html代码被清空了,然而元素本身还在。
执行以下语句:
效果图:
最终的html代码:
中间的元素整个被删除了,也就是说remove方法将目标元素整个的从DOM中移除。
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用。
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用。
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用。
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用
- jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法总结
- jquery append appendTo before after insertAfter insertBefore prepend prependTo用法区别
- jquery创建添加append、prepend、appendTo、prependTo、after、insertAfter、before、insertBefore
- jQuery中append、insertBefore、after与insertAfter方法注意事项
- jQuery中append、insertBefore、after与insertAfter方法注意事项
- js追加元素的几种方法(append()、prepend()、after()、before()、insertAfter()、insertBefore())
- jquery after before append appendto prepend prependto的区别
- Jquery的append/after/appendTo
- JQuery中append(function(index,html)),appendTo(),after(function(index,html)),clone()方法
- jquery插入元素的几种方法 insertBefore() insertAfter() prependTo() appendTo()
- jquery中append、prepend, before和after方法的区别
- jquery中append、prepend, before和after方法的区别
- appendTo append prepend before after
- 蛋挞制作.docx
- 大自然背景的清晨闹铃.wav
- Linux vim 中文乱码
- 找不到javax.servlet包
- zk mysql 主从自动切换
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove系列方法的使用
- Mac终端常用命令
- [C#]获取IP地址以及获取地址
- hdu 5733 tetrahedron(2016 Multi-University Training Contest 1——几何公式题)
- NIO学习笔记一
- html5文件-上传
- windows下qt5使用ffmpeg(不用编译源码)
- 【NGUI】记录button的动态效果
- 关于苹果推送和证书