jQuery 添加方法详解 141105
来源:互联网 发布:relex软件模块 编辑:程序博客网 时间:2024/05/16 17:40
做前端开发的,免不了的要操作页面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代码,也就是说,假如你要执行以下操作
- $('content').append('<p>CSDN');
- <p>CSDN</p>
这一点需要特别注意,很多教程之类的只是讲解这些函数的动作,但是会忽略一些细节;
下面让我来详细解释一下每个函数的作用以及它是如何工作的,会产生什么效果。以后的代码我都对这样的一个模板来操作,代码以及效果如下:
- <style type="text/css">
- .box
- {
- width:100px;
- height:100px;
- border:2px solid red;
- padding:10px;
- text-align:center;
- }
- .child
- {
- width:70px;
- height:20px;
- border:2px solid red;
- text-align:center;
- }
- </style>
- <div id="top" class="box">
- <span>top</span>
- </div>
- <div id="middle" class="box">
- <span>middle</span>
- </div>
- <div id="bottom" class="box">
- <span>bottom</span>
- </div>
原始的效果图:
一、html函数的使用
我们执行以下语句:
- $('#middle').html('<div class="child">html()');
效果图如下:
再来看看最终的代码:
这里是完整的html代码,也就是说JQuery为我们补全了代码,这一点需要注意,JQuery为我们带来了方便,但是当我们需要精确控制html代码的时候,需要注意一点。
html函数的作用原理首先是移除目标元素内部的html代码,然后将新代码添加到目标元素。
二、append、appendTo函数的使用
执行以下语句:
- $('#middle').append('<div class="child">append()</div>');
效果图如下:
最终的代码:
append函数将html附加到了<span>middle</span>之后。
appendTo函数的效果和append一样,只不过是写法不一样:
- $('<div class="child">append()</div>').appendTo('#middle');
三、after、insertAfter函数的使用
执行以下语句:
- $('#middle').after('<div class="child">after()</div>');
after函数的作用是将html代码插入指定元素的后面,如果后面有元素,则将其后移,然后插入html代码。
insertAfter函数与after函数的作用是一样的,上面代码的insertAfter版本为:
- $('<div class="child">after()</div>').after('#middle');
这连个函数的原理与after、insertAfter是一样的,只不过before、insertBefore是插入到目标元素的前面,大家可以自行参考after、insertAfter。
五、empty、remove函数的使用
执行以下代码:
- $('#middle').empty();
再来看看最终的html代码:
- <div id="middle" class="box"></div>
执行以下语句:
- $('#middle').remove();
最终的html代码:
- <div id="top" class="box">
- <span>top</span>
- </div>
- <div id="bottom" class="box">
- <span>bottom</span>
- </div>
初次写博文,有什么不对的大家都指出哈,一起学习。
以后我将更新一些JQuery Mobile方面的开发知识,大家多多关注。
- jQuery 添加方法详解 141105
- jquery添加扩展方法
- jquery添加自定义方法
- js,jquery 添加扩展方法
- 给jQuery添加utility方法
- 如何给jquery添加方法
- jquery validator添加自定义方法
- jquery 添加元素的方法
- jQuery validate方法详解
- jquery.toggleClass()方法详解
- jQuery ajax方法详解
- jQuery Ajax方法详解
- jQuery--方法详解
- 详解Jquery .css()方法
- jquery on方法详解
- jQuery Ajax 方法详解
- jQuery事件,方法详解
- 详解jQuery each() 方法
- 如何在pcduino上实现WiFi AP功能
- codeforces gym asc46A map预处理
- gdb远程调试
- 《Java程序员的推荐阅读书籍》
- 查看linu系统编码,解决中文编码不一致的问题
- jQuery 添加方法详解 141105
- LeetCodeOJ. Longest Common Prefix
- 消除: warning C4996: 'sprintf': This function or variable may be unsafe. Consider 的方法
- Oracle 游标使用全解实例
- 原型
- MD5 加密工具类
- 通向Lisp之路
- 堆栈,堆栈,堆和栈的区别
- spring的多线程机制