昨天将所有的基础知识进行了回顾，今天继续磕，不死不休～
今天要说的便是 jquery 这个函数库，毕竟它影响范围之广，不会都不好意说自己会前端？
jquery
long long ago ～ 人们发现了一个好用的工具，它涵盖了常用的所有功能，还提供了很多相当方便的设计（如 Ajax）。因此，它的面世，如星星之火燎原之势迅猛发展，以至于微软公司把它作为官方库。
这个小小的 js 文件，你可以说他是插件，也可以称其为框架，随你喜欢，只要知道一点，它很好用就可以了。肯定有人会问如何下载之类的问题，其实我很不愿意回答，毕竟这些随意百度到的东西很浪费时间和文字，但是秉承着服务的宗旨，贴出以下链接：
1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载
1.简单入门
还记得上篇文章反复强调的一个问题嘛？就是 js 代码放在何处执行的问题。要么老老实实放置在所需应用样式的标签后面，要么将其丢到 window.onload 方法内部。
jquery 提供了一种速度更快，使用更便捷的方式，那便是 ready 方法。它长成了下面美丽的样子：
$(document).ready(function(){......});
嫌弃它的臃肿，可以简写为：
$(function(){xxx});
现在是否顺眼了许多？
1.1 jquery 选择器
还记到大明湖畔（CSS）的夏雨荷（选择器）吗？选择器可以快速定位到元素并为其应用样式效果。jquery 选择器的选择规则与 CSS 相同，只是目的是为其添加操作。
不要有任何心理负担，它相当简单，如下：
1.选择 id 为 Ethan 的元素（类比 id 选择器）
$('#Ethan')
2.选择 class 为 Yan 的元素（类比类选择器）
$('.Yan')
3.选择所有的 p 标签（类比标签选择器）
$('p')
4.选择 id 为 mylist 的元素下所有 li 标签下的 span 元素（类比层级选择器）
$('#mylist li span')
5.选择 name 属性为 yan 的 input 元素
$('input[name=yan]')
如果一类元素范围太广，需要更精确一些呢？可以使用如下的过滤条件：
1.has 包含条件：
$('div').has('p');
包含 p 元素的 div 元素
2.判等条件：
$('div').eq(5);
第 5 个 div 元素
3.寻找条件：
$('#box').find('.myClass');
选择 id 是 box 元素中 class 为 myClass 的元素
4.前一个元素：
$('#box').prev();
5.后一个元素：
$('#box').next();
已经知道了如何定位某个元素，那么如何定位一个精确的集合呢？这个也不难：
//选择id是box的元素之前所有的同辈元素 $('#box').prevAll(); //选择id是box的元素后面所有的同辈元素 $('#box').nextAll(); //选择id是box的元素的父元素 $('#box').parent(); //选择id是box的元素的所有子元素 $('#box').children(); //选择id是box的元素的同级元素 $('#box').siblings();
有人会想，如果我写错了，没找到报错怎么办？大可放心，jquery 有容错机制，即使没有找到元素，也不会出错。还为你提供了验证是否找到的方法，那便是 length 属性。length 值为 0 时代表没选择到想要元素；为 1 则代表选择到了相应的元素。
除了选择元素，还可以选择样式呢！啥都能找到，强不强？既然都能找到了，重新赋值也必须到位！
// 获取div的样式 $("div").css("width"); $("div").css("color"); // 赋值 $("div").css("width","20px"); $("div").css("color","red");
如果你足够的细心，你也许会问，选择器一般都选择多个元素，那么你获取到的是哪一个元素的值呢？
答：第一个。
再看看其他操作样式的类名吧：
// 为id为div1的对象追加样式divClass2 $("#div1").addClass("divClass2") // 移除id为div1的对象的class名为divClass的样式 $("#div1").removeClass("divClass") // 移除多个样式 $("#div1").removeClass("divClass divClass2") // 重复切换anotherClass样式 $("#div1").toggleClass("anotherClass")
1.2 绑定点击事件
$('#btn').click(function(){ // 内部的 this 指的是原生对象 ... // 使用 jquery 对象用 $(this) };
js 对象与 jquery 对象有些许不同，jquery 对象是对 js 对象的封装，然后让其拥有了 jquery 的操作方法。他俩之间可以相互转换。
DOM 对象转 jquery 对象：
$(js对象)jquery 对象转 DOM 对象：
jQuery对象[index]; //方式1 （推荐使用）jQuery对象.get(index);//方式2
获取元素的索引值可以使用 index() 方法
1.3 jquery 动画
通过 animate 方法可以设置元素某属性值上的动画，动画执行完后会执行一个函数。
$('#div1').animate({ width:300, height:300 },1000,'swing',function(){ alert('done!'); });
animate 参数详解：
/*animate参数：参数一：要改变的样式属性值，写成字典的形式参数二：动画持续的时间，单位为毫秒，一般不写单位参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动参数四：动画回调函数，动画完成后执行的匿名函数*/
2.进阶
2.1 特殊效果
1. fadeIn() 淡入
2. fadeOut() 淡出
3. hide() 隐藏
4. show() 显示
5. toggle() 切换元素的可见状态
6. slideDown() 向下展开
7. slideUp() 向上卷起
8. slideToggle() 依次展开或卷起某个元素
Example:
$btn.click(function(){ $('#div1').fadeIn(1000, 'swing', function(){ alert('done'); }); });
在看过很多属性时，不知道大家是否发现了一个规律：凡是成对出现的属性，一般都有一个组合属性，名字带有
toggle
2.2 链式调用
链式调用，其实就是将多个方法一直拼接在对象后面，像链条一样调用。如下：
$('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素，也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
换行是为了加注释解释每一个方法，其实它为一行。
2.3 属性操作
还记得昨天总结中 js 对象如何获取元素内容嘛？没错，是 innerHTML。jquery 中则是使用 html() 方法获取和设置 html 内容：
// 获取内容 var $htm = $('#div1').html(); // 设置 html 内容 $('#div1').html('<span>xxx</span>');
jquery 中获取或者设置某个属性值时可以使用如下方法：
// 取出图片的地址 var $src = $('#img1').prop('src'); // 设置图片的地址和alt属性 $('#img1').prop({src: "test.jpg", alt: "Test Image" });
2.4 事件
常用的一些事件函数：
1. blur() 元素失去焦点
2. focus() 元素获得焦点
3. click() 鼠标单击
4. mouseover() 鼠标进入（进入子元素也触发）
5. mouseout() 鼠标离开（离开子元素也触发）
6. mouseenter() 鼠标进入（进入子元素不触发）
7. mouseleave() 鼠标离开（离开子元素不触发）
8. hover() 同时为mouseenter和mouseleave事件指定处理函数
9. ready() DOM加载完成
10. submit() 用户递交表单
2.5 正则表达式-表单验证
正则表达式无比强大，处处可以看见其身影。当我们验证邮箱格式、手机号、身份证号时必不可少，那么 jquery 中如何使用呢？
var re=new RegExp('规则', '可选参数'); var re=/规则/参数;
大家可以看到，其由规则与参数两部分组成。其中规则老生常谈，我们再复习一遍：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于 [^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符
量词：
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
范围：使用中括号将可选内容列出，代表内容中任意一个
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
限制开头与结尾：
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
那么参数部分，常用的有：
g：global，全文搜索，默认搜索到第一个结果接停止
i：ingore case，忽略大小写，默认大小写敏感
还有常用的函数
test
用法： 正则.test(字符串) 匹配成功，就返回真，否则就返回假
正则默认规则
匹配成功就结束，不会继续匹配，区分大小写
下面给大家个福利，总结了常用的正则表达式，直接复制粘贴即可：
//用户名验证：(数字字母或下划线6到20位) var reUser = /^\w{6,20}$/; //邮箱验证： var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i; //密码验证： var rePass = /^[\w!@#$%^&*]{6,20}$/; //手机号码验证： var rePhone = /^1[34578]\d{9}$/;
3.高级
3.1 事件冒泡
先来看看什么是事件冒泡：
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
就这样一层一层往上冒的效果，我们形象的称为冒泡。那么它有什么作用呢？
答：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
这只是一种机制，但是我们并不是任何情况下都需要，那么可以将其关掉。通过：
event.stopPropagation();
既然说起阻止事件冒泡了，那么我们也提一下如何阻止表单提交吧：
event.preventDefault();
实际开发中其实常常将其混合使用，也就是两句话写在一起使用：
// event.stopPropagation(); // event.preventDefault(); // 合并写法： return false;
3.2 事件委托
同样，先来看定义：
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(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>
3.3 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();
3.4 对象
JavaScript 的对象，可以简单的理解为一个键值对的集合，也就是 python 中的字典，键就是调用每个值的名称，值就是变量、函数、对象这些。
面向对象编程深入人心，有着 python 、java 的基础，大家应该不难理解。接下来说一下 js 中如何创建一个对象，并对其进行操作。
1.创建一个对象：
// first var person = new Object(); // second var person = { name: 'Ethan', age: 18, sayHello: function(){ alert('Hello' + this.name) } };
2.添加属性：
person.name = 'tom'; person.age = '99';
3.添加方法：
person.sayHello = function(){ alert(this.name + '你好'); }
4.调用方法：
person.sayHello(); person.age;
4.Ajax
ajax一个前后台配合的技术，它可以让 javascript 发送 http 请求，与后台通信，获取数据和信息。ajax 技术的原理是实例化 xmlhttp 对象，使用此对象与后台通信。jquery 将它封装成了一个函数 $.ajax()，我们可以直接用这个函数来执行ajax请求。
此部分超级重要！超级重要！超级重要！
ajax需要在服务器环境下运行。
先来看一个示例：
$.ajax({ url: '/change_data', type: 'GET', dataType: 'json', data:{'code':300268} }) .done(function(dat) { alert(dat.name); }) .fail(function() { alert('服务器超时，请重试！'); });
然后看一下其中的参数：
1、 url 请求地址
2、 type 请求方式，默认是 GET，常用的还有 POST
3、 dataType 设置返回的数据格式，常用的是 json 格式，也可以设置为 html
4、 data 设置发送给服务器的数据
5、 success 设置请求成功后的回调函数
6、 error 设置请求失败后的回调函数
7、 async 设置是否异步，默认值是 true，表示异步
简写方式：
$.ajax 按照请求方式可以简写成 $.get 或者 $.post 方式
$.get("/change_data", {'code':300268}, function(dat,status){ if(status=='success'){ alert(dat.name); } },'json'); $.post("/change_data", {'code':300268}, function(dat){ alert(dat.name); },'json');
我们经常会听到两个词：局部刷新 和 无刷新。这是什么意思呢？
答：ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。
