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版(实例讲解)
Jul 21 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 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
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
jquery等待效果示例
2014/05/01 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
基于python代码实现简易滤除数字的方法
2018/07/17 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
车间副主任岗位职责
2013/12/24 职场文书
项目开发计划书
2014/01/09 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
安全责任书模板
2014/07/22 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
综合素质自我评价评语
2015/03/06 职场文书
安全生产培训心得体会
2016/01/18 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技