事件冒泡
事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）
下面这段代码一共有四个事件都分别绑定了单击事件。
在页面中当单击a标签会连续弹出4个提示框。这就是事件冒泡引起的现象。
事件冒 泡的过程是：a --> p--> div-->window。a冒泡到div冒泡到body。
<script> $(function () { var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $box1.click(function () { alert('father'); }); $box2.click(function () { alert('son'); }); $box3.click(function (event) { alert('grandson'); }); $(document).click(function (event) { alert('grandfather'); }); }) </script> </head> <body>
<div class="father">
<p class="son">
<a class="grandson">点我</a>
</p>
</div>
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 return false;来阻止
<head>
<script>
$(function () {
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function () {
alert('father');
});
$box2.click(function () {
alert('son');
});
$box3.click(function () {
alert('grandson');
return false;
});
})
</script>
<body>
<div class="father">
<p class="son">
<a class="grandson">点我</a>
</p>
</div>
事件委托
事件委托又叫事件代理，就是利用冒泡的原理，把事件加到父级上.
通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能
其次可以让新加入的子元素也可以拥有相同的操作
$(function(){ $list = $('#list');
//delegate(子元素，事件，函数) $list.delegate('li', 'click', function() { $(this).css({background:'red'}); }); }) ... <ul id="list"> <li>1</li> <li>2</li> <li>3</li> </ul>
何为事件委托
有三个同事预计会在周一收到快递。为签收快递，有两种办法：
一是三个人在公司门口等快递；
二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
这里其实还有2层意思的：
第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。
Dom操作
元素节点操作指的是改变html的标签结构，它有两种情况：
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中
创建新标签
var $div = $('<div>'); //创建一个空的div var $div2 = $('<div>这是一个div元素</div>');
移动或者插入标签
1、append()和appendTo()：在现存元素的内部，从后面放入元素
var $span = $('<span>这是一个span元素</span>'); $('#div1').append($span); ...... <div id="div1"></div>
2、prepend()和prependTo()：在现存元素的内部，从前面放入元素
3、after()和insertAfter()：在现存元素的外部，从后面放入元素
4、before()和insertBefore()：在现存元素的外部，从前面放入元素
删除标签
$('#div1').remove();
javascript对象
javascript中的对象，可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象
创建javascript对象有两种方法
一种是通过顶级Object类来实例化一个对象，然后在对象上面添加属性和方法：
var person = new Object(); // 添加属性： person.name = 'tom'; person.age = '25'; // 添加方法： person.sayName = function(){ alert(this.name); } // 调用属性和方法： alert(person.age); person.sayName(); //2,还可以通过对象直接量的方式创建对象 var person2 = { name:'Rose', age: 18, sayName:function(){ alert('My name is' + this.name); } } // 调用属性和方法： alert(person2.age); person2.sayName();
json
json是一种轻量级的数据交换格式。易于人阅读和编写。
json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象
json对象的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误
json格式的数据
{ "name":"tom", "age":18 }
json的另外一个数据格式是数组
["tom",18,"programmer"]
{ "name":"jack", "age":29, "hobby":["reading","travel","photography"] "school":{ "name":"Merrimack College", "location":'North Andover, MA' } }
JSON 和 JS 对象互转
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}