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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 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
用libtemplate实现静态网页生成
2006/10/09 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
PHP文件与目录操作示例
2016/12/24 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
python中的多线程实例教程
2014/08/27 Python
python中while循环语句用法简单实例
2015/05/07 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
python实现决策树分类(2)
2018/08/30 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
工程业务员工作职责
2013/12/07 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
村道德模范事迹材料
2014/08/28 职场文书
高考学习决心书
2015/02/04 职场文书
异地恋情人节寄语
2015/02/28 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL