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（超重点）
读作：啊贾克斯，此处留一个悬念，下回详细分解。
了解常用参数。
