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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jquery实现广告上下滚动效果
Mar 04 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源码之 ext/mysql扩展部分
2009/07/17 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
解析php中的escape函数
2013/06/29 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
js控制input框只读实现示例
2014/01/20 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
js中日期的加减法
2015/05/06 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
python中实现php的var_dump函数功能
2015/01/21 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
python中format()函数的简单使用教程
2018/03/14 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
聊聊python中的异常嵌套
2020/09/01 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
校友会欢迎辞
2014/01/13 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
浅谈MySQL user权限表
2021/06/18 MySQL
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL