为了适应上海的工作任务，重新温故一下前端方面的知识点。虽然不是专业的前端，
1. 首先谈一谈一点小小的习惯上的改变：
在 HTML5 中，不必在 <script> 标签中使用 type="text/javascript" ，
<head>
<script src="jquery.js"></script>
</head>，JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！
2. 关于动画效果方面，结论：如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。
比如动画需要一定事件来完成，但是js是逐行执行的语言，A行代码执行完，下一行B行代码就会直接执行，恰巧A行代码是个动画，没执行完，B行代码执行完了。但是你希望A效果后，执行B效果，那么这时候加cb函数。这样就可以在A函数100%完成之后，再做B函数了。
3.约定好变量风格，如果获取的是JQuery对象，那么需要在变量前加$来区分，如果是JS对象，不加$。JQ对象转JS对象，var obj = $obj.get(index);例如 ：
var $idElement = $("#id");
var idElement=$idElement.get(0);
console.log(idElement.checked); //调用JS的属性JS对象转DOM对象：$(jsObj)即可
var jsobj = document.getElementById('xxId');
var $obj = $(jsobj); 4.关于$(funciton(){}) 的另一个知识点。
window.onload = function(){} 网页中所有的内容加载完毕后才能执行，包括图片，音频。
<script>
//window.onload 无法编写多个。
window.onload = function () {
alert('test01');
};
window.onload = function () {
alert('test02');
}
</script><script>
//和上面不同，这2个都会被执行。
$(document).ready(function () {
alert('hello world!')
});
$(document).ready(function () {
alert('world');
});
</script>而jquery的这种写法，是再DOM结构加载完毕后就执行，而不需要等待加载图片等dom关联的东西。
注释：ready(fn):
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
5.关于on 和click() 的一些知识：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<button class="btn">添加</button>
<ul>
<li>
<button class="del">删除</button>
</li>
<li>
<button class="del">删除</button>
</li>
</ul>
<script>
$(".btn").on('click',function () {
$("ul").append('<li><button class="del">删除</button></li>')//动态添加的删除按钮
});
/**
* 原因：通过on或click绑定的事件只对当前存在的元素有效
即on前面的元素必须在页面加载的时候就已经存在dom里
所以后添加的类名为del的按钮无效
$(".del").on('click',function () {
// $(this).remove();//button remove ，而不是li remove
$(this).parent().remove()//找到当前被点击的按钮并删除这一行无效
});
*/
/*
//整个都被删除了。这里将事件绑定在ul上。
$('ul').click(function(){
$(this).parent().remove();
});*/
/**
* http://jquery.cuishifeng.cn/on.html
* 从该连接中阅读的关键信息： selector(第2个参数) :一个选择器字符串过滤选定的元素，
* 该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
*
* 这里有效，因为 该语法是通过父元素绑定到子元素中。
* 这里的this会指向子元素.del ，
* 只有子元素事件才能触发父元素的相同事件。
*/
$("ul").on('click','.del',function () {
$(this).parent().remove();
});
</script>
</body>
</html>