输入$('ul li').click(function(){// TODO})
打开HBuilder开发工具，创建Web项目，并在web项目指定目录下新建静态页面，引入核心js，
插入可以 *** 作的DOM元素，在<body></body>插入div和ul元素，并给ul属性id，
在ul下方插入一个按钮button，设置id和class属性，引入样式文件，
在jquery初始化函数内编写按钮点击事件，动态向ul中插入li元素，并在li元素插入a标签，a标签有点击事件，
编写完毕后，预览该静态页面，点击“添加”按钮，发现报错，
检查js代码，发现a标签点击事件传参时单双引号出错，修改之后再次预览。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-3.2.0.min.js"></script>
<style>
ul.ul2{
position: absolute
top: 72px
left: 150px
}
</style>
</head>
<body>
<p>在以下输入框输入ul中的li数量</p>
<input type="number">
<button class="btn1">生成第一个ul</button>
<button class="btn2">生成第二个ul</button>
<script>
$(function(){
//第一个列表
$("button.btn1").click(function(event) {
//获取输入框的数值
var num = $("input").val()
if (num>0) {
//清除所有的列表
$("ul").remove()
//生成第一个ul
var ul = $("<ul class='ul1'>").appendTo($("body"))
for (var j = 1 j <= num j++) {
var txt1 = $("<li>").text(j)
$(txt1).appendTo($("ul.ul1"))
}
} else{
alert("输入有误!")
}
})
$("button.btn2").click(function(event) {
var z = $("ul.ul1 li").length
//x为百位数
var x = Math.floor(z/100)
//g为对照参数, 用于判断循环
var g = x
//y为十位跟个位
var y = z-x*100
if (y==0) {
//开关
var sw = 1
}
if (z>0) {
$("ul").remove(".ul2")
var ul = $("<ul class='ul2'>").appendTo($("body"))
for (var i = 0 i <= x i++) {
//1-100部分
if (g==0) {
var val1 = "001-"
if (z<100&&y<10) {
var val2 = "00"+y
} else if(z<100&&y<100){
var val2 = "0"+y
} else {
var val2 = "100"
}
var txt2 = $("<li>").text(val1+val2)
$(txt2).prependTo($("ul.ul2"))
} else if (sw!=1) {
//大于100的部分
var val1 = g*100+1+'-'
if (g==x) {
if (y<10) {
var val2 = g*100+y
} else {
var val2 = g*100+y
}
} else {
var val2= (g+1)*100
}
var txt2 = $("<li>").text(val1+val2)
$(txt2).prependTo($("ul.ul2"))
g--
} else {
g--
sw = 0
}
}
} else{
alert("输入有误!")
}
})
})
</script>
</body>
</html>
首先给第一个li默认类名如one,然后给这个one类加个背景颜色。然后写jQ 取出所有的li,并给li写单击事件，鼠标点到哪个li就把其它li的one类名去掉，并把当时li添加上one类名。思路就是这样了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）