1.正则在js的使用方法
列一个变量，存储正则规则，用这个变量去test某个数据-----匹配True和不匹配False
var re = new RegExp(规则，正则表达式的参数)
g全文搜索
i表示忽略大小写
var re = /规则/正则的参数
使用：re.test(数据)
1 <script>
2 // 列一个变量，存储正则规则； 用这个变量去test某个数据 -- 匹配true 不匹配false
3 // g 全文搜索 i表示忽略大小写
4 // var re = new RegExp(规则, 正则表达式的参数)
5
6 // var re = /规则/正则的参数
7 var re = /a/
8 var str1 = 'abc'
9 var str2 = 'ABC'
10 // re.test(数据)
11 // alert(re.test(str1))
12 alert(re.test(str2))
13 </script>
在工作中，在查找到东西的时候，都用变量存一下，方便后期使用。jQuery中定义变量的时候，一般命名用$开头。同事一看就知道是使用了jQuery，然后使用jQuery的语法。
其实$是jQuery中的一个函数。
js里面命名的时候可以是数字、字母、下划线或者美元符号。是没有问题的。
在工作中写代码的时候，每一个功能实现的时候要加注释，方便协同工作，养成良好的习惯。当在入口函数里面的事件的时候，如果有大段的代码，一般工作中都是在外面封装一个函数，然后在事件中进行调用。
工作中正则一般自己不用写，网上大量现成的，因为国内很多网站用的都是相同的规则，我们直接使用即可，这样的话，提高了开发效率。（后面附一份常用的，共大家参考）
函数里面没有this，事件里面才有this
默认勾选中的checked的值是True，并不是checked的字符串。
开关其实就是全局变量
2.***事件冒泡
现象：父子级标签 触发子级的事件，这个事件会逐层向父级传递。
子集执行了某一事件，会逐层向上触发相同事件，直到被处理或者遇到return。比如子级有单击事件，那么父级如果有单击事件也会被触发，父级的父级如果有单击事件也会被触发。
任何一个操作，计算机或者浏览器都会去处理。不管你有没有设置对应的事件。
冒泡机制有两面性，需要用的时候，别去管，要阻止的时候可以停止。return是工作中常用的，另一种需要在function的括号中传入形参，一般为event。
return false ----阻止表单提交、阻止时间冒泡
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 .father{
10 width: 300px;
11 height: 300px;
12 background: green;
13 }
14 .son{
15 width: 200px;
16 height: 200px;
17 background: pink;
18 }
19 </style>
20 <script src="js/jquery-1.12.4.min.js"></script>
21 <script>
22 $(function(){
23 $('.father').click(function(event){
24 alert('father')
25 return false
26 // event.stopPropagation()
27 })
28 $(document).click(function(){
29 alert('document')
30 })
31 })
32 </script>
33</head>
34<body>
35 <div class="father">
36 <div class="son">1</div>
37 </div>
38</body>
39</html>
3.事件委托
把子级的事件委托给父级（父：最近的能包含住将来发生事件的所有子级）------ 事件代理
.delegate(真实发生事件的目标，字符串事件属性，匿名函数去写命令function(){})
工作中有可能会有人用这个词on() ,下面两种用法
------完全等同delegate
------只找到将来发生事件的目标绑定on()
事件委托两个作用：1、提高了代码执行效率2、可以给未来元素绑定命令
通过程序追加的标签叫做未来元素。
之前的click是只能给已有的元素绑定命令，事件委托则是既给已有的绑定命令，又可以给未来元素绑定命令。
on的第二种用法：只给未来元素绑定命令的意思是没有提高代码效率，而是起到了给现在已有和未来元素绑定命令。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="js/jquery-1.12.4.min.js"></script>
9 <script>
10 $(function(){
11 // 单击li，弹出这个li的下标
12 // $('li').click(function(){
13 // alert( $(this).index() )
14 // })
15 // 1、***** $('#myul').delegate(真实发生事件的目标, 字符串事件属性, function(){})
16 // $('#myul').delegate('li', 'click', function(){
17 // alert( $(this).index() )
18 // })
19 // on() -- 有两种用法：完全等同delegate 和 只找到将来发生事件的目标绑定on()
20 // 2、******$('#myul').on(字符串形式的事件属性, 发生事件的真实目标, 匿名函数)
21 // $('#myul').on('click', 'li', function(){
22 // alert( $(this).index() )
23 // })
24
25 // 3、*****$('li').on(字符串形式的事件属性, 匿名函数) // 表示只是在（没有作用1提高代码执行效率优点）给未来的li绑定事件而已
26 $('li').on('click', function(){
27 alert( $(this).index() )
28 })
29
30 // 事件委托：1、提高代码执行效率；2、可以给未来元素绑定命令：已有和未来标签
31 })
32 </script>
33</head>
34<body>
35 <ul id="myul">
36 <li>文字1</li>
37 <li>文字2</li>
38 <li>文字3</li>
39 <li>文字4</li>
40 <li>文字5</li>
41 <li>文字6</li>
42 <li>文字7</li>
43 <li>文字8</li>
44 </ul>
45</body>
46</html>4.DOM操作
Document object model 文档对象模型
作用：查找标签的方法、查找标签的标准。
最终是通过js内置的结构化表现手法，将网页中的所有html节点查找到，然后实现一个倒置的树状结构图，这个树状结构图就叫DOM树。
标签===标记====元素 < 节点（包含标签、标签的内容、标签的属性）
网页文档的根：html标签
html的子标签是head和body
纯前端会学很多东西，后端不需要了解全部，知道其中的原理即可。
冒泡也是根据DOM树来找到父子级关系。
共计10个函数而已：
控制顺序------移动节点--------
下面的函数，如果没有节点，那么会新增对应的节点，如果有这个节点，那么就会移动相对应的节点。所以此处没有任何函数需要学习。
新增节点-------
步骤：
1、声明变量保存节点数据（名字一般为$开头，然后找的标签是什么就叫做什么）
2、使用追加函数将节点变量追加到指定位置
子级加：
append(添加的内容) 向末尾加
appendTo(目的地)
prepend()向前面加
prependTo(目的地)
父级加：
after()在同级的后面加
insertAfter(目的地)在同级的后面加
before()在同级别的前面加
insertBefore(目的地)
删除节点--------
remove() 删除
empty()清空
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="js/jquery-1.12.4.min.js"></script>
9 <script>
10 $(function(){
11 // 新增节点: 步骤 1、声明变量保存节点数据；2、使用追加函数将节点变量追加到指定位置
12 var $li = $('<li>22222</li>')
13 // $('ul').append( $li )
14 // $li.appendTo( $('ul') )
15 // $('ul').prepend( $li )
16 // $li.prependTo( $('ul') )
17
18 var $div = $('<div>divdiv</div>')
19 // $('ul').after( $div )
20 // $div.insertAfter( $('ul') )
21
22 // $('ul').before($div)
23 // $div.insertBefore($('ul'))
24
25 // $('ul').remove()
26 $('ul').empty()
27
28 })
29 </script>
30</head>
31<body>
32 <!-- 3 -->
33 <ul>
34 <!-- 1 -->
35 <li>11111</li>
36 <!-- 2 -->
37 </ul>
38 <!-- 4 -->
39</body>
40</html>
5.***js对象（ajax要用调用属性和函数的语法）
js的对象就是python中的字典。
创建对象的方法：
1、字典
var xx = {字典里面封装实例属性和方法}
2、new Object()
var xx = new Object()
对象名.属性 = 值
对象名.方法名 = 匿名函数
调用属性和函数：
对象名.属性名
对象名.方法调用
对象内部写对象名可以写this
JavaScript中没有$，只有jQuery中才有$
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script>
9 // var person1 = {
10 // 'name':'laowang',
11 // age: 80,
12 // say: function(){
13 // // 对象名.属性名
14 // alert(person1.name)
15 // alert(this.name)
16 // }
17 // }
18 // alert(person1.age)
19 // person1.say()
20
21 var person2 = new Object()
22 person2.name = 'ROSE'
23 person2.age = 20
24 person2.say = function(){
25 alert(person2.name)
26 alert(this.name)
27 }
28 alert(person2.age)
29 person2.say()
30 </script>
31</head>
32<body>
33
34</body>
35</html>6.了解json
json是一种数据格式对象。
在ajax做数据交互的时候，json是用的最多的数据格式
用的最多的是列表、字典、字典列表相互嵌套等等，也有可能是文件
json特点之一：json中有字符串必须是双引号
json可以是文件，后缀名就是json
绝大多数是json文件，也有可能是其他的格式。
简单的认识一下，等讲ajax的时候再详细说明什么时候用。
1{
2 "name":"TOM",
3 "age":18
4}7.*****ajax（超重点）
读作：啊贾克斯，此处留一个悬念，下回详细分解。
了解常用参数。
