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 22 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 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
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
vue 解决异步数据更新问题
2019/10/29 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
js实现缓动动画
2020/11/25 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
如何让Java程序执行效率更高
2014/06/25 面试题
公司端午节活动方案
2014/02/04 职场文书
九年级语文教学反思
2014/02/04 职场文书
科级干部考察材料
2014/02/15 职场文书
高中军训感言200字
2014/02/23 职场文书
学校门卫岗位职责
2014/03/16 职场文书
毕业大学生自荐信
2014/06/17 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
新党章的学习心得体会
2014/11/07 职场文书
欧元符号 €
2022/02/17 杂记