事件冒泡
事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到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 对象互转
要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: ‘Hello‘, b: ‘World‘});
//结果是 ‘{"a": "Hello", "b": "World"}‘
要实现从 JSON 转换为对象，使用 JSON.parse() 方法：
var obj = JSON.parse(‘{"a": "Hello", "b": "World"}‘);
//结果是 {a: ‘Hello‘, b: ‘World‘}
原文地址：https://www.cnblogs.com/sickle/p/10130549.html