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 相关文章推荐
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery实现查看图片功能
Dec 01 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如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
新手学python应该下哪个版本
2020/06/11 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
总裁办公室主任职责
2014/01/02 职场文书
自我鉴定总结
2014/03/24 职场文书
需求分析说明书
2014/05/09 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
2014年电厂工作总结
2014/12/04 职场文书
检讨书范文1000字
2015/01/28 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
征求意见函
2015/06/05 职场文书
在Python中如何使用yield
2021/06/07 Python