jQuery动态添加li标签并添加属性和绑定事件方法


Posted in jQuery onFebruary 24, 2018

代码如下:

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script> 
 <!-- 3.0 --> 
 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> 
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
</head>
<body>
<ul id="listproject" class="list-group">
		<script type="text/javascript">			
		var JSarray = new Array();
		JSarray[0] = "array0";
		JSarray[1] = "array1";
		JSarray[2] = "array2";
		JSarray[3] = "array3";
		JSarray[4] = "array4";
		
		for(var i = 0;i<5;i++){
			$("#listproject").append("<li id=li"+i+">"+JSarray[i]+"</li>");	//在ul标签上动态添加li标签
			$("#li"+i).attr("class",'list-group-item');		//为li标签添加class属性
		}
		$('li').on('click',function(){ 		//绑定事件
		 alert("事件绑定成功!"); 
		}); 
	</script>
</body>
</html>

运行结果:

jQuery动态添加li标签并添加属性和绑定事件方法

以上这篇jQuery动态添加li标签并添加属性和绑定事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
实现jquery放大镜的两种方法
Feb 22 #jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
You might like
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python实现八大排序算法
2016/08/13 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
python flask实现分页的示例代码
2018/08/02 Python
python 类之间的参数传递方式
2019/12/20 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
欢迎词范文
2015/01/27 职场文书
交心谈心活动总结
2015/05/11 职场文书
酒桌上的开场白
2015/06/01 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python