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,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jQuery treeview树形结构应用
Mar 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
Terran历史背景
2020/03/14 星际争霸
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python性能测试工具locust的使用
2020/12/28 Python
selenium如何定位span元素的实现
2021/01/13 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
应届生.NET方向面试题
2015/05/23 面试题
英语感恩演讲稿
2014/01/14 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
论文评语大全
2014/04/29 职场文书
卫生主题班会
2015/08/14 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js