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 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现日历效果
Sep 11 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
pw的一个放后门的方法分析
2007/10/08 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
Python脚本实时处理log文件的方法
2016/11/21 Python
python解析多层json操作示例
2019/12/30 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python Scrapy框架原理解析
2021/01/04 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
linux面试题参考答案(1)
2016/01/22 面试题
正科级干部考察材料
2014/05/29 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
小学中队委竞选稿
2015/11/20 职场文书
股权投资协议书
2016/03/23 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
Web应用开发TypeScript使用详解
2022/05/25 Javascript
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android