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实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现本地存储
Dec 22 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python Requests安装与简单运用
2016/04/07 Python
Python检测生僻字的实现方法
2016/10/23 Python
python实现求最长回文子串长度
2018/01/22 Python
python实现转圈打印矩阵
2019/03/02 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
Python 列表反转显示的四种方法
2020/11/16 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
编码实现字符串转整型的函数
2012/06/02 面试题
酒店服务实习自我鉴定
2013/09/22 职场文书
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
早读迟到检讨书
2014/01/24 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
小学教师求职信范文
2015/03/20 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
浅谈Vue的computed计算属性
2022/03/21 Vue.js
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android