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弹幕效果
May 06 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python编程修改MP3文件名称的方法
2017/04/19 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
深入理解Django的中间件middleware
2018/03/14 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python上下文管理器全实例详解
2019/11/12 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
浅谈Python中的模块
2020/06/10 Python
酒吧员工的岗位职责
2013/11/26 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
营销与策划实训报告
2014/11/05 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
党委工作总结2015
2015/04/27 职场文书
离职证明范本
2015/06/12 职场文书
办公室规章制度范本
2015/08/04 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL