内容概述：
事件冒泡、事件委托
DOM 增删改查
json
ajax 了解
事件冒泡
什么是事件冒泡：
事件从子标签传递到父标签
最顶层是 document 对象（有些浏览器是 window）。
作用：
事件冒泡允许多个操作被击中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
如何解决事件冒泡
问题：操作子元素的时候，同时也可以操作父元素
阻止事件冒泡 ：event.stopPropagation()
阻止默认行为：event.stopPropagation()
合并写法：
return false
事件冒泡的应用
**事件委托：**让 A 标签给 B 标签绑定事件
在父元素上可以给子元素添加统一的事件
$list.delegate('li', 'click', function() { $(this).css({background:'red'}); });
<!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>
.grandfather {
width: 300px;
height: 300px;
background: yellow;
position: relative;
}
.father {
width: 200px;
height: 200px;
background: green
}
.son {
width: 100px;
height: 100px;
background: gray;
position: absolute;
left: 0px;
top: 400px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 发不发生事件和绑定 click 没有关系，
// 不绑定也会点击，不过没有绑定要执行的函数
// $('.son').click(function(){
// console.log('1')
// // 阻止事件冒泡的简略写法
// return false
// })
// $('.father').click(function(ev){
// console.log('2')
// // 阻止事件冒泡的完整写法
// ev.stopPropagation()
// })
$('.grandfather').click(function(){
console.log('3')
})
$(document).click(function(){
console.log('4')
})
})
</script>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
<!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(){
var li = $('.list li');
var ul = $('.list');
// li.click(function(){
// $(this).css({'background':'red'});
// })
// 上面的写法性能不高，可以写成事件委托的形式
ul.delegate('li','click',function(){
// $(this) 指的是发生事件冒泡的子级
$(this).css('background','red')
})
})
</script>
</head>
<body>
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
</body>
</html>
DOM 增删改查
元素节点操作指的是改变html的标签结构，它有两种情况：
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中
移动或者插入标签的方法 :
append()和appendTo()：在现存元素的内部，从后面放入元素
prepend()和prependTo()：在现存元素的内部，从前面放入元素
after()和insertAfter()：在现存元素的外部，从后面放入元素
before()和insertBefore()：在现存元素的外部，从前面放入元素
删除标签：
remove()
<!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(){
var div = $('#div1');
var h01 = $('#h01');
var h02 = $('#h02');
var div2 = $('#div2');
// To 主语宾语 对掉
// 当前元素里面的后面要放另外一个元素
// div.append(h01);
// 当前元素要放到另外一个元素里面的后面
h01.appendTo(div);
// 当前元素里面的前面要放另外一个元素
// div.prepend(h02);
// 当前元素要放到另外一个元素的里面的前面
h02.prependTo(div);
// 当前的元素的外面的后面要放另外一个元素
// div.after(div2);
// 当前元素要放到另外一个元素的外面的后面
div2.insertAfter(div);
// 创建新标签
// 创建一个空的 div
var div3 = $('<div>');
// 创建一个包含内容的 div
var div4 = $('<div>新创建的div2</div>');
// 当前元素的外面的前面要放另外一个元素
div.before(div3);
// 当前元素要放到另外一个元素的外面的前面
div4.insertBefore(div);
// 删除标签
div3.remove();
})
</script>
</head>
<body>
<h3 id="h01">这是div1外面的h3标签</h3>
<h1 id="h02">这是div1外面的h1标签</h1>
<div id="div2">这是div1上面的div</div>
<div id="div1">
<h2>这是div1里面的h2标签</h2>
<p>这是div1里面的p标签</p>
</div>
</body>
</html>
json
网络之间传输数据
JavaScript 中创建对象的两种方式：
1、new object()
2、{} 键值对
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式对象，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象。
与JavaScript对象写法不同的是，json对象的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
json格式的数据：
{ "name":"tom", "age":18 }
<!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>
// json 对象的属性名称和字符串值必须使用双引号
var data01 = {
"name":"tom",
"age":19
}
// alert(data01.name)
var data02 = [
{"name":'jack',"age":80},
{"name":'rose',"age":18}
]
alert(data02[0].name)
</script>
</head>
<body>
</body>
</html>
ajax
可以实现局部刷新
ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。
ajax需要在服务器环境下运行。
$.ajax使用方法
常用参数：
1、url 请求地址
2、type 请求方式，默认是’GET’，常用的还有’POST’
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是’true’，表示异步以前的写法：
$.ajax({ url: '/change_data', type: 'GET', dataType: 'json', data:{'code':300268} success:function(dat){ alert(dat.name); }, error:function(){ alert('服务器超时，请重试！'); } });新的写法(推荐)：
$.ajax({ url: '/change_data', type: 'GET', dataType: 'json', data:{'code':300268} }) .done(function(dat) { alert(dat.name); }) .fail(function() { alert('服务器超时，请重试！'); });
赶着放假，水上一波。。。。
祝大家中秋快乐！