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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jquery插件懒加载的示例
Oct 24 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+mysql)
2007/11/23 PHP
php join函数应用
2011/05/04 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
javascript读写json示例
2014/04/11 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
python 多线程应用介绍
2012/12/19 Python
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python基于递归解决背包问题详解
2019/07/03 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python实现无边框进度条的实例代码
2020/12/30 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
2014年质量工作总结
2014/11/22 职场文书
项目投资意向书范本
2015/05/09 职场文书
志愿服务心得体会
2016/01/15 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
Golang map映射的用法
2022/04/22 Golang