修改无序列表的首项末项及其指定项
2019-10-10 本文已影响0人
Tn299
- 需求说明
在浏览器中显示该页面时，修改前的无序列ul的内容
单击“修改首项”、“修改末项”、“修改第3项”按钮，则将实现按钮标题所示的功能，修改后的无序列表ul的内容，如下所示：
-
实现效果
image.png
代码
<title>任务7：修改无序列表的首项末项及其指定项</title>
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(e) {
$("#btn1").click(function(){
$("ul li:first").html("1.北京市");
});
$("#btn2").click(function(){
$("ul li:last").html("6.苏州市");
});
$("#btn3").click(function(){
$("ul li:eq(2)").html("3.中山市");
});
});
</script>
</head>
<body>
<ul>
<li>1.大连市</li>
<li>2.天津市</li>
<li>3.上海市</li>
<li>4.重庆市</li>
<li>5.深圳市</li>
<li>6.广州市</li>
</ul>
<div>
<input type="button" id="btn1" value="修改首项" />
<input type="button" id="btn2" value="修改末项" />
<input type="button" id="btn3" value="修改第三项" />
</div>
</body>
