jQuery动态添加li标签并添加属性和绑定事件方法
更新时间：2018年02月24日 08:29:10 作者：花海_
下面小编就为大家分享一篇jQuery动态添加li标签并添加属性和绑定事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
代码如下：
<%@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实现的下拉框的代码，有相同需求的小伙伴自己拿走用吧。2014-11-11
其实就是利用了jquery的ajax功能，获取远程的xml文件，读取指定内容的代码，对于学习jquery的朋友是个不错的参考。2009-12-12
jquery checkbox全选反选效果代码,需要的朋友可以参考下。2009-11-11
二十个超级酷和最实用的jQuery实例，对于使用和学习jquery的朋友是个不错的参考与学习资料。2010-04-04
jQuery实现html table行Tr的复制、删除、计算功能
这篇文章主要介绍了jQuery实现html table行Tr的复制、删除、计算功能,涉及jQuery针对table表格的常见复制、添加、删除与计算行数等简单操作技巧,需要的朋友可以参考下2017-07-07
jQuery.fn和jQuery.prototype区别介绍
jQuery.fn和jQuery.prototype想必大家对它并不陌生吧，那么你们知道它们之间的区别吗？在本文有个不错的示例大家可以参考下2013-10-10
这篇文章主要为大家详细介绍了jquery实现简单自动轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要介绍了使用jquery实现的鼠标放上去显示悬浮层即弹出定位的div层,需要的朋友可以参考下2014-04-04
这篇文章为大家分享了一个jQuery实现宽屏图片轮播实例教程，外观看上去非常大气，感兴趣的小伙伴们可以参考一下2015-11-11
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
这篇文章主要是对jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
最新评论