2017-04-27-jquery
知识点1：
jQuery是js的框架
实例1：
使用jQuery动态创建元素，然后点击元素后相应的删除按钮删除该元素，其他的元素不发生变化，可以删除任意位置上的元素。
核心思路：
对于动态生成的元素的事件响应必须写在创建这个元素的方法内部，js真的是很神奇，jQuery也是。
将按钮和list的class的数值绑定，通过大类型来确定响应函数，再通过class来确定具体的按钮和具体的list，然后获得list然后全部移除就行了。
jQuery和js真的是博大精深啊。
核心代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/Web_04_27/jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var count=0;
$("#bt").click(function(){
count++;
var user=$("#user").val();
var content=$("#content").val();
$("#unorderedList").append("<li class=\"list"+count+"\" id=\"list\">用户"+count+"："+user+"内容："+content+"<button type=\"button\" class=\"list"+count+"\" id=\"list\">删除"+count+"</button></li>");
$("button#list").click(function(){
var i=$(this).attr("class");
$("li."+i).remove();
});
});
});
</script>
</head>
<body>
<div>
<form>
留言用户：<input type="text" id="user"><br>
留言内容：<input type="text" id="content"><br>
<button type="button" id="bt">添加</button>
<input type="reset" value="重置">
</form>
<hr>
</div>
<div id="div1" style="background-color:orange">
<ul id="unorderedList">
</ul>
</div>
</body>
</html>
|
