jQuery使用before()和after()在元素前后添加内容的方法
本文实例讲述了jQuery使用before()和after()在元素前后添加内容的方法。分享给大家供大家参考。具体如下:
<!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>Before</b>"); }); $("#btn2").click(function(){ $("img").after("<i>After</i>"); }); }); </script> </head> <body> <img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140"> <br><br> <button id="btn1">Insert before</button> <button id="btn2">Insert after</button> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关推荐
-
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
insertBefore():a.insertBefore(b) a在前,b在后, a:是一个选择器,b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> <script type="text/javascript" src='jquery-2.2.0.min.js'></script&g
-
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d
-
jQuery中insertAfter()方法用法实例
本文实例讲述了jQuery中insertAfter()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入到另一个指定的元素集合的后面. insertAfter()方法与insertBefore()方法的作用相反. 语法结构: 复制代码 代码如下: $(selector).insertAfter(content) 参数列表: 参数 描述 selector 定义要被插入的内容. content 定义在哪些元素之后插入内容. 实例代码: 复制代码 代码如下: <!DOCTYPE h
-
jQuery中append、insertBefore、after与insertAfter方法注意事项
这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A
-
jQuery中insertBefore()方法用法实例
本文实例讲述了jQuery中insertBefore()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入到另一个指定的元素集合的前面. insertBefore()方法与insertAfter()相反. 语法结构: 复制代码 代码如下: $(selector).insertBefore(content) 参数列表: 参数 描述 selector 定义要被插入的内容. content 定义在哪些元素之前插入内容. 实例代码: 复制代码 代码如下: <!DOCTYPE html
-
jQuery使用before()和after()在元素前后添加内容的方法
本文实例讲述了jQuery使用before()和after()在元素前后添加内容的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function()
-
jQuery实现在新增加的元素上添加事件方法案例分析
本文实例讲述了jQuery实现在新增加的元素上添加事件方法.分享给大家供大家参考,具体如下: 最近项目组需要在新增的元素上增加时间,有人说用live方法后来使用的时候发现jQuery没有该方法(1.7以上就没了)替换为on 除了jquery api官方的例子外还有以下的例子可以在新增的元素上添加事件 $(document).on("click",'#lyysb a',function(){ if(!$(this).hasClass('cur')){ $(this).addClass('
-
jQuery使用prepend()方法在元素前添加内容用法实例
本文实例讲述了jQuery使用prepend()方法在元素前添加内容的用法.分享给大家供大家参考.具体分析如下: 下面的代码可实现在文本前和列表前添加新的元素 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1"
-
jQuery实现标签子元素的添加和赋值方法
一.在jsp页面中定义<select>标签,如下: <div> <span>科室:</span> <select class="dept-name-show" style="width: 70%;"> </select> </div> 二.编写js语句: <script> $(function () { var dname = $(".dept-name-sho
-
jQuery+php实时获取及响应文本框输入内容的方法
本文实例讲述了jQuery+php实时获取及响应文本框输入内容的方法.分享给大家供大家参考,具体如下: 该程序能够查出可用余额: HTML部分: <input type="text" name="username" id="username" onkeyup="search_func(this.value);" /> <em id="mfee"></em> jquery部
-
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
本文实例讲述了jQuery实现点击表格单元格就可以编辑内容的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
-
对python字典元素的添加与修改方法详解
1.字典中的键存在时,可以通过字典名+下标的方式访问字典中改键对应的值,若键不存在则会抛出异常.如果想直接向字典中添加元素可以直接用字典名+下标+值的方式添加字典元素,只写键想后期对键赋值这种方式会抛出异常. >>>a=['apple','banana','pear','orange'] >>> a ['apple', 'banana', 'pear', 'orange'] >>> a={1:'apple',2:'banana',3:'pear',4:
-
JS数组array元素的添加和删除方法代码实例
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "ccc"; //alert(arr.length);//3 arr.pop(); //alert(arr.length);//2 //alert(arr[arr.length-1]);//bbb arr.pop(); //al
-
jQuery为动态生成的select元素添加事件的方法
项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelect =""; 2.在js中写好获取服务端数据的代码 function genVoucherGroupSelect(rowID){ return $(strVoucherGroupSelect).attr("id", "sl_" + rowID).pa
-
jQuery使用after()方法在元素后面添加多项内容的方法
本文实例讲述了jQuery使用after()方法在元素后面添加多项内容的方法.分享给大家供大家参考.具体分析如下: jQuery可通过after()方法在元素后面添加多项内容,after()可以带多个参数,在指定元素后面添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function af
随机推荐
- 面向对象的Javascript之二(接口实现介绍)
- PHP中操作ini配置文件的方法
- vue.js的手脚架vue-cli项目搭建的步骤
- 网站技巧之转发与重定向的区别
- Java语言中cas指令的无锁编程实现实例
- oracle截取字符(substr)检索字符位置(instr)示例介绍
- C#获取当前页面的URL示例代码
- javascript数组快速打乱重排的方法
- 简单的PHP留言本实例代码
- Android Studio创建AIDL文件并实现进程间通讯实例
- MYSQL必知必会读书笔记第六章之过滤数据
- 详解在使用CDN加速时Nginx获取用户IP的配置方法
- 学习dreamweaver cs3新功能之直接生成div+css页面
- Python linecache.getline()读取文件中特定一行的脚本
- c#中设置快捷键
- 单口NAT的超级详细通俗的解释
- python编程测试电脑开启最大线程数实例代码
- Laravel 实现密码重置功能
- element-ui组件table实现自定义筛选功能的示例代码
- 优化Vue项目编译文件大小的方法步骤