事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止
$(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‘); ???????event.stopPropagation(); ???}); ???$(document).click(function(event) { ???????alert(‘grandfather‘); ???});})......<div class="father"> ???<div class="son"> ???????<div class="grandson"></div> ???</div></div>阻止默认行为
阻止表单提交
$(‘#form1‘).submit(function(event){ ???event.preventDefault();})合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用
// event.stopPropagation();// event.preventDefault();// 合并写法：return false;
事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(function(){ ???$ali = $(‘#list li‘); ???$ali.click(function() { ???????$(this).css({background:‘red‘}); ???});})...<ul id="list"> ???<li>1</li> ???<li>2</li> ???<li>3</li> ???<li>4</li> ???<li>5</li></ul>事件委托的写法
$(function(){ ???$list = $(‘#list‘); ???$list.delegate(‘li‘, ‘click‘, function() { ???????$(this).css({background:‘red‘}); ???});})...<ul id="list"> ???<li>1</li> ???<li>2</li> ???<li>3</li> ???<li>4</li> ???<li>5</li></ul>
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(); todolist(计划列表)实例
<!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 type="text/css">.list_con{width:600px;margin:50px auto 0;}.inputtxt{width:550px;height:30px;border:1px solid #ccc;padding:0px;text-indent:10px;}.inputbtn{width:40px;height:32px;padding:0px;border:1px solid #ccc;}.list{margin:0;padding:0;list-style:none;margin-top:20px;}.list li{height:40px;line-height:40px;border-bottom:1px solid #ccc;}.list li span{float:left;}.list li a{float:right;text-decoration:none;margin:0 10px;} ???</style> ???<script src="./js/jquery-1.12.4.min.js"></script> ???<script> ???????$(function(){ ????????????var $txt = $("#txt1"); ????????????var $btn = $("#btn1"); ????????????var $ul = $("#list"); ????????????$btn.click(function(){ ????????????????//获取输入信息 ????????????????var sVal = $txt.val(); ????????????????//将输入框信息置空 ????????????????$txt.val(""); ????????????????//判断输入信息是否为空 ???????????????if(sVal==""){ ???????????????????alert("请输入内容"); ???????????????????return; ???????????????} ???????????????????????????????// 拼接字符串 ???????????????var $li = $( ???????????????‘<li><span>‘+sVal+‘</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>‘) ???????????????//dom操作,将拼接的字符串加到ul里面的后面 ???????????????$ul.append($li); ???????????????/* 这样写代码,逻辑不是很清楚,导致代码复杂,如果还有很多事件要绑定的话,造成冗余 ???????????????var $del = $(".del") ???????????????$del.click(function(){ ???????????????????$(this).parent().remove() ???????????????})*/ ????????????}); ????????????//实际上值绑定了三个li元素的del事件,新加入的li元素不能删除 ???????????// ?var $del = $(".del") ???????????// ?$del.click(function(){ ???????????// ?????$(this).parent().remove() ???????????// ?}) ???????????//上面的思路不可行,可以换一种思路,用事件委托的的方式来实现a元素的删除和改变, ???????????//为什么是a标签呢? 其实很简单,因为鼠标点击的就是a标签,而不是li元素,因此ul代理的 ???????????//是a标签的click事件.同时要注意第二个参数要加双引号 ???????????$ul.delegate("a","click",function(){ ???????????????// 此处需要通过class来判断对应的方法 ???????????????var sTr2 = $(this).prop("class"); ???????????????// alert(sTr2); ???????????????if(sTr2 =="del"){ ???????????????????$(this).parent().remove(); ???????????????}; ???????????????if(sTr2=="up"){ ???????????????????//判断是否到顶 ???????????????????if($(this).parent().prev().length ==0){ ???????????????????????alert("到顶了"); ???????????????????????return; ???????????????????} ???????????????????$(this).parent().insertBefore($(this).parent().prev()); ???????????????} ???????????????if(sTr2=="down"){ ???????????????????//判断是否到底 ???????????????????if($(this).parent().next().length ==0){ ???????????????????????alert("到底了"); ???????????????????????return; ???????????????????} ???????????????????$(this).parent().insertAfter($(this).parent().next()); ???????????????????} ???????????}) ???????}) ???????????</script></head><body> ???<div class="list_con"> ???????<h2>To do list</h2> ???????????<input type="text" name="" id="txt1" class="inputtxt"> ???????????<input type="button" name="" value="增加" id="btn1" class="inputbtn"> ???????????????????????<ul id="list" class="list"> ???????????????????<li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> ???????????????<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> ???????????????<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> ???????????????</ul> ???????</div> ???</body></html>
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();还可以通过对象直接量的方式创建对象：
var person2 = { ???name:‘Rose‘, ???age: 18, ???sayName:function(){ ???????alert(‘My name is‘ + this.name); ???}}// 调用属性和方法：alert(person2.age);person2.sayName();
json
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式对象，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象。
与JavaScript对象写法不同的是，json对象的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
json格式的数据：
{ ???"name":"tom", ???"age":18}json的另外一个数据格式是数组，和javascript中的数组字面量相同。
["tom",18,"programmer"]还可以是更复杂的数据机构：
{ ???"name":"jack", ???"age":29, ???"hobby":["reading","travel","photography"] ???"school":{ ???????"name":"Merrimack College", ???????"location":‘North Andover, MA‘ ???}}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(‘服务器超时，请重试！‘);});$.ajax的简写方式
$.ajax按照请求方式可以简写成$.get或者$.post方式
$.get("/change_data", {‘code‘:300268}, ?function(dat){ ???alert(dat.name);});$.post("/change_data", {‘code‘:300268}, ?function(dat){ ???alert(dat.name);});课堂练习
个人选股系统ajax实现
与ajax相关的概念：
同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。
局部刷新和无刷新
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。
数据接口
数据接口是后台程序提供的，它是一个url地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回json格式的数据或者操作信息，格式也可以是text、xml等。
JQuery进阶
原文地址：https://www.cnblogs.com/yinjiangchong/p/9309353.html