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插件
Mar 29 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery操作之效果详解
May 19 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
Python创建系统目录的方法
2015/03/11 Python
使用python实现接口的方法
2017/07/07 Python
Python协程的用法和例子详解
2017/09/09 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Python的垃圾回收机制详解
2019/08/28 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
21岁生日感言
2014/02/27 职场文书
总账会计岗位职责
2014/03/13 职场文书
日语系毕业求职信
2014/07/27 职场文书
史上最牛辞职信
2015/05/13 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
2015入党自传格式范文
2015/06/26 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python