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插件之validation插件
Mar 29 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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
Php部分常见问题总结
2006/10/09 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
处理单名多值表单的详解
2013/06/08 PHP
php教程之phpize使用方法
2014/02/12 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
python将字符串list写入excel和txt的实例
2019/07/20 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python安装scipy的步骤解析
2019/09/28 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
python中PyQuery库用法分享
2021/01/15 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
环卫工人节活动总结
2014/08/29 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
学生会辞职信
2015/03/02 职场文书
父亲去世追悼词
2015/06/23 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫