jQuery简单实现向列表动态添加新元素的方法示例
本文实例讲述了jQuery简单实现向列表动态添加新元素的方法。分享给大家供大家参考,具体如下:
先看看效果图:
完整实现代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery列表添加新元素</title> <script src="jquery-1.7.2.min.js"></script> </head> <body> <h3>li列表:</h3> <ol> <li>jb51</li> <li>php</li> <li>javascript</li> <li>HTML5</li> </ol> <input type="text" id="text"> <input type="button" id="btn" value="添加"> <script type="text/javascript"> $(function () { $('#btn').click(function () { $('ol').append('<li>'+$('#text').val()+'</li>'); }); }); </script> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery页面元素操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
Jquery动态添加及删除页面节点元素示例代码
通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo
-
jQuery动态添加可拖动元素完整实例(附demo源码下载)
本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&
-
jQuery动态添加的元素绑定事件处理函数代码
我当时的处理方法是在添加的时候手工绑定事件处理函数.不过新版的jquery已经添加了这个功能.我们已经不需要为此烦恼了. 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的: 复制代码 代码如下: $('input').click(function () { //处理代码 }); 或 复制代码 代码如下: $('.clickme').bind('click', function() { // Bound handler called.
-
jQuery给动态添加的元素绑定事件的方法
本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id="testdiv"> <ul>&l
-
JQuery动态添加Select的Option元素实现方法
如下所示: var selector=$('<select></select>'); for(var i=0;i<5;i++){ selector.append('<option value="'+i+'">'+i+'</option>'); } 以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
jQuery动态添加、删除元素的方法
复制代码 代码如下: <script> $.schoolFn = { addItem: function(obj){ $("#itemList").append("<li id='liItrm' class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"
-
jquery动态添加元素事件失效问题解决方法
今天在写JQUERY时遇到个问题:当使用脚本动态添加元素xxx时,但事件$(".x .y").click(function)...失效问题. 刚开始网上找到了用live函数,方法如下: 事件绑定:$(".x .y").click(function) 需改为: 复制代码 代码如下: $(".x .y").live('click',function); 但是由于1.8版本后live这种方法不再支持,所以需要用下述jquery中on方法解决脚本动态添加
-
jqueryMobile 动态添加元素,展示刷新视图的实现方法
jQuery Mobile的是一个很好的移动开发框架,你可能已经知道,虽然它有很多难以解决的问题,但是我相信后续版本jquery会修复--我是很喜欢jquery的.这并不是说它很完美无暇,很多开发人员遇到的情况也都难解决,比如:尝试使用代码来添加,更新或删除元素,使用JavaScript的页面跳转.在这篇博客文章中,我列出了一些动态添加组建重新刷新的方法. 1.Textarea field $('body').prepend('<textarea id="myTextArea"&
-
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d
-
jQuery如何获取动态添加的元素
一.问题描述 用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素. 二.解决方法 度娘推荐的方法基本是用live()方法 live()的官方定义和用法: live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素). live()的详细使用方法可以查看jQuery live() live()和
随机推荐
- AJAX中文乱码PHP中完美解决方法
- VBS教程:方法-DriveExists 方法
- Powershell中显示隐藏文件的方法
- AngularJS 在同一个界面启动多个ng-app应用模块详解
- Nodejs中使用captchapng模块生成图片验证码
- iOS中sqlite的详细用法
- 举例讲解Java编程中this关键字与super关键字的用法
- JavaScript该如何学习 怎样轻松学习JavaScript
- php时间不正确的解决方法
- PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
- php循环输出数据库内容的代码
- PHP中安装使用mongodb数据库
- C调用lua函数需要考虑的问题
- 深入解析MS-SQL锁机制
- JavaScript jquery及AJAX小结
- 快速掌握jQuery插件开发
- JQuery中Ajax的操作完整例子
- 使用rsync同步网路备份第1/2页
- 深入理解JavaScript系列(30):设计模式之外观模式详解
- PHP捕捉异常中断的方法