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