事件冒泡
事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到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>‘); //创建一个空的divvar $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‘}web前端(七)——jquery高级
原文地址：https://www.cnblogs.com/sickle/p/10130549.html