jQuery是JavaScript Query的缩写形式。jQuery是一款非常精良的JavaScript库，即便是MVVM框架盛行的本日，也有超过半数的网页及运用直接或间接的利用了jQuery。jQuery的设计理念是“Write Less, Do More“，即写的更少，做的更多！
利用jQuery可以大大简化我们的JS代码，从而提高开拓效率。
jQuery现在有3个大的版本，分别是1.x，2.x，3.x。你可以从jQuery官方网站下载须要的版本，然后从本地引入到自己的项目，也可以利用CDN引入。在你下载jQuery时一样平常有两个可选的版本，一个是压缩版（不包含换行和空格，体积更小，多用于实际项目开拓），另一个是未压缩版（包含换行和空格，体积稍大，多用于学习和测试）。
1 <script src=\"大众jquery-1.12.4.js\"大众></script>2 <!--本地引入-->3 <script src=\"大众//code.jquery.com/jquery-1.12.4.js\"大众></script>4 <!--CDN引入-->
其余，jQuery从第二个大的版本开始，为了优化网络相应和使语法更加简洁，抛弃了对IE6、7、8的支持，并且从2.1.0开始，压缩版本的文件中也不再包含注释信息了。为了得到更好的兼容性，我们这里利用的jQuery文件版本号是1.12.4。
二 jQuery核心
1，$符号
jQuery实际上是一个函数工具。事实上，jQuery通过全局变量jQuery引用该函数工具，$符号是jQuery变量的一个别名，为了写的更少，我们常日都利用$符号表示该工具。
1 window.jQuery === window.$; //true2 jQuery === $;// true3 typeof($);// 'function'
如果你还利用了其他框架，或自定义了$变量，那么有可能和jQuery的$符号造成冲突。
1 jQuery.noConflict();
在利用jQuery编程之前，首先调用noConflict()方法，解除jQuery对$符号的占用，这样就可以办理这一问题了。但今后就只能通过变量jQuery来利用jQuery的所有功能了。
2，参数
$核心函数可以吸收3种类型的参数，分别是函数引用、字符串、DOM工具。
a) 吸收一个函数
1 $(function(){2 //some code3 });4 //这种办法的完全写法该当是：5 //$(document).ready(function(){some code});
这种办法类似原生JS的window.DOMContentLoaded方法，只要HTML文档解析完毕并天生DOM tree就会触发该事宜。但是在jQuery中可以同时存在多个该方法。
b) 吸收字符串
1 var box1 = $('div');2 //吸收css选择器字符串，可以拿到DOM tree中相应的DOM元素，并把它包装成jQuery工具3 var box2 = $('<div></div>');4 //吸收HTML代码片段，可以创建相应的DOM元素，并把它包装秤jQuery工具
c) 吸收DOM元素
1 var box = document.getElementById('#box');2 var jBox = $(box);//jQuery obj
如果核心函数吸收一个DOM元素，那么它会把该DOM元素包装成一个jQuery工具，并返回。
jQuery工具事实上是一个类数组，保存了获取到的DOM元素。只有通过jQuery工具才可以访问jQuery供应的属性和方法。
3，静态方法
jQuery供应了一些静态方法，例如遍历数组，字符串去空格，判断数据类型等等，这些方法在ES5之前都是很实用的方法，但ES5之后，原生JS就已经实现了这类似的方法，以是这里就不再详细讲解了，有兴趣可以自行查看官方文档。jQuery把ajax干系操作也封装为静态方法，稍后会专门讲解。这里要讲的只有holdReady方法。
1 $.holdReady(true);2 $(function(){3 //some code4 });5 $.joldReady(false);6 //参数true，停息ready方法的实行，参数false，规复ready方法的实行
三 jQuery 属性和节点
1，选择器
选择器是jQuery的核心功能。绝大多数css支持的选择器都可以在jQuery得到支持。
1 $('p');//标签选择器2 $('.class');//类选择器3 $('#id');//id选择器4 $('[type=text]');//属性选择器5 $('input[type=email]');//组合选择器6 $(#id p);//后代选择器7 $(#id p:first-child);//筛选选择器8 //...
通过核心函数获取到的DOM元素都被包装成jQuery工具，以类数组的形式存储。我们可以通过eq方法获取个中某一个，还可以通过get方法获取DOM工具。
1 var divList = $('div');//获取所有div2 var domDiv = divList.get(0);//获取第一个Dom元素，如果有的话3 var jqDiv = divList.eq(0);//获取第一个jq工具，如果有的话4 var another = $(domDiv);//把Dom元素转化成jq工具
其余jQuery还供应了一些通过层级构造查找元素的方法。
1 $('div').find('span');//查找div内部的span，等同于$('div span')2 $('li').first();//获取匹配的元素中的第一个3 $('li').last();//获取匹配的元素中的末了一个4 $('div').next();//获取所有匹配到的div的下一个兄弟元素的凑集5 $('div').prev();//获取所欲匹配到的div的上一个兄弟元素的凑集6 $('div').parent();//获取匹配到的div的共同父元素7 $('div').children();//获取div的子元素凑集8 $('div').siblings();//获取div的兄弟元素凑集9 //...
2，属性操作
获取DOM元素之后，jQuery把它们包装成jq工具，然后你就可以通过jQuery供应的方法修正相应的DOM元素了，包括CSS，文本，属性节点，HTML构造等等。
属性及属性节点干系：
1 $('div').attr('name','test');//设置属性名：name，属性值：test 2 $('div').attr('name');//获取属性name的值 3 $('div').removeAttr('name');//删除属性name 4 5 6 7 $('div').prop('name','test'); 8 $('div').prop('name'); 9 $('div').removeProp('name');10 //prop的用法和attr千篇一律，唯一不同的是prop既可以操作DOM元素的属性，也可以操作它的属性节点
当属性没有被显示的设置时，通过attr()方法获取将返回undefined，而prop()方法可以返回true或者false，以是，如果你要检索和变动DOM属性，比如元素的checked，selected，或disabled状态，推举利用prop()方法，其他时候都利用attr方法。
把稳，利用上诉方法获取属性值时，返回的只是第一个匹配的DOM元素的相应属性值。但是设置的时候却是为所有匹配的DOM元素都添加该属性。
class类干系：
1 $('div').addClass('test');//添加类，如需添加多个类，利用空格隔开即可2 $('div').removeClass('test');//删除类，如需删除多个类，也用空格隔开即可3 $('div').toggleClass('test');//切换类，如果DOM元素已经有该类了，那么就删除，如果没有则添加
文本及构造干系：
1 $('div').html();//获取第一个匹配到的div的内容2 $('div').html('<p>我是段落</p>');//设置所有匹配到的div的内容3 $('div').text();//获取所有匹配元素的文本内容4 $('div').text('hello');//设置所有匹配到的div的文本内容5 $('input').val();//获取匹配元素value值6 $('input').val('hello');//获取匹配元素value值
css干系：
1 $('div').css('background-color','red');//设置元素的单个css属性2 $('div').css({3 width:'200px',4 height:'200px',5 background-color:'red'6 });//通过工具设置多个css属性
尺寸及位置干系：
1 $('div').width();//获取div的内容区宽度，可传参设置2 $('div').height();//获取div的内容区高度，可传参设置3 //innerWidth，innerHeight表示content+padding的宽高4 //outerWidth，outerHeight表示content+padding+border的宽高5 $('div').offset();//获取div相对视口的偏移量，返回值是一个包含top和left属性，且值为数字的工具6 $('div').position();//获取div相对父元素的偏移量，返回值是一个包含top和left属性，且值为数字的工具7 //offset和position都以像素计，并且只对可见的元素起浸染
3，节点
jQuery也供应了节点的增、删、改、查干系方法。
1 $(\"大众div\公众).append(\公众<p>Hello</p>\"大众);//在div内部的末端插入元素2 $(\"大众div\"大众).prepend(\公众<p>Hello</p>\公众);//在div内部的开头插入元素3 $(\"大众div\公众).after(\"大众<p>Hello</p>\公众);//紧挨着div的后面插入元素4 $(\"大众div\"大众).before(\公众<p>Hello</p>\"大众);//紧挨着div的前面插入元素5 $(\公众div\"大众).remove();//删除div元素，但是会保留文本6 $(\公众div\公众).empty();//清空div中的所有内容
四 jQuery 事宜
1，事宜绑定和移除
jQuery供应了两种绑定事宜的办法，第一种是on+事宜名称的详细事宜方法，第二种是直策应用on方法。
1 $('div').onclick(function(){});2 $('div').on('click',function(){});3 //事宜处理函数可以是匿名函数，也可以是函数引用，如果涉及到解除事宜绑定，建议利用函数引用的办法
jQuery的事宜绑定类似原生JS的addEventListener方法，可以同时绑定同一类型的多个事宜，而不会相互覆盖。
jQuery通过off方法解除事宜绑定。
1 function test(){};2 $('div').on('click',test);3 $('div').off();//移除div绑定的所有事宜4 $('div').off('click');//移除div绑定的所有click事宜5 $('div').off('click',test);//移除div绑定的详细事宜
2，阻挡事宜冒泡和默认行为
利用jQuery阻挡事宜冒泡和默认行为与原生JS一样。不太清楚的可以查看我的《DOM之事宜（一）》。
1 $('div').on('click',function(){ 2 //some code 3 e.stopPropagation(); 4 }); 5 //阻挡事宜冒泡 6 $('a').on('click',function(){ 7 //some code 8 return false；//大略办法 9 //e.preventDefault();//W3C标准办法10 });11 //阻挡默认行为
3，一次性事宜和自动触发事宜
常日我们给元素绑定的事宜处理程序须要特定的事宜才能触发，比如click，mouseover等等，jQuery供应了triggerHandler方法，你可以通过该方法手动触发元素绑定的事宜处理程序，而不用等到特定事宜发生。
1 $('div').on('click',function(){2 //some code3 });4 //一样平常须要等到用户点击div，函数才会被实行5 $('div').triggerHandler('click');6 //自动触发div的click事宜，不用等到用户点击
jQuery还供应了另一个方法：trigger。它的功能和triggerHandler方法一样。他们的不同之处在于triggerHandler不会触发事宜的默认行为和冒泡。
1 $('div').one('click',function(){2 //some code3 });4 //jQuery通过one方法绑定一个只会被触发一次的事宜处理程序
4，事宜委托
jQuery通过delegate方法实现事宜委托。该方法利用上和原生JS有一些差异，原生JS实现事宜委托也请移步《DOM之事宜（一）》。
1 $(\"大众ul\"大众).delegate(\"大众li\公众, \"大众click\"大众, function(){ 2 $(this).toggleClass(\公众test\"大众);3 });4 //把li的点击事宜委托给ul，被委托元素一样平常是委托元素的父元素
五 jQuery 动画
1，显示和隐蔽
jQuery通过show方法和hide方法实现元素的显示和隐蔽。它的事理是修正元素的display和宽高及opacity属性。
1 $('div').show(1000);2 //使div显示，1000表示全体过程持续韶光，单位是ms3 $('div').hide(1000);4 //使div隐蔽
这两个方法还可以接管一个回调函数作为第二个参数，用于设置动画完成后须要实行的操作。
2，展开和收起
jQuery通过slideDown，slideUp实现平缓的展开和收起元素。该方法是通过高度变革（向下增大或减小）来动态地显示元素，在显示完成后可选地触发一个回调函数。
1 $(\公众p\"大众).slideDown(1000);2 //展开，可以设置一个韶光，表示全体过程持续韶光，单位ms3 $(\"大众p\"大众).slideUp(1000);4 //收起5 $(\公众p\公众).slideToggle(1000);6 //切换
展开后收起动画常用来做下拉菜单。
3，淡入淡出
jQuery通过fadeIn和fadeOut实现淡入淡出效果。该方法的事理是修正元素的opacity属性，不会改变元素的宽高。也可吸收一个回调函数。
1 $(\"大众div\"大众).fadeIn(1000);2 //淡入，可一吸收一个数字作为参数，表示过程持续韶光，单位ms3 $(\"大众div\"大众).fadeOut(1000);4 //淡出5 $(\"大众div\公众).fadeTo(1000,0.5);6 //调度到指定值7 $(\公众div\公众).fadeToggle(1000);8 //切换
4，自定义动画
jQuery通过animate方法实现自定义动画效果。
1 $('div').animate({2 width:500px,3 opacity:0.84 },1000);5 //该方法吸收一个工具，表示动画结束时元素的状态，第二参数是一个数字，表示持续时长，单位ms，也可以吸收一个回调函数作为第三个参数
把稳，jQuery的动画采取行列步队形式，每编写一个动画，就向动画行列步队中插入一个，只能等前面的实行完后才实行后面的。
5，停滞和延迟
jQuery的stop方法可以停息正在实行的动画。
1 $('div').stop();2 //立即停滞当前动画，直接开始实行行列步队中后续的动画，如果有的话3 $('div').stop(true,true);4 //stop方法可以吸收两个blloean值作为参数。第一个规定在停滞当前动画的同时对否打消行列步队中的其他动画，第二个规定在停滞当前动画的同时是否要直接完成行列步队中其他动画。
介于jQuery通过行列步队形式掌握动画实行，我们建议在调用jQuery动画之前都先调用一次stop方法，以免造成动画混乱。
1 $('div').stop();2 $('div').animate({3 //some code4 },1000);
jQuery通过delay延迟动画的实行。
1 $('div').animate({2 width:200px;3 height:200px;4 },1000).delay(1000).animate({5 background-color:red;6 },1000);7 //在改变宽高后等待1000ms再改变背景颜色
六 jQuery Ajax
jQuery封装了功能完全的Ajax方法，我们常用的jQuery方法有3个，分别是$.ajax()、$.get()、$.post()。
1，ajax()方法
ajax方法吸收一个工具作为参数，工具的属性名为ajax的设置参数，属性值为ajax的设置值。
1 $.ajax({ 2 type: \公众POST\公众, 3 url: \"大众some.php\"大众, 4 data: \"大众name=ren&age=12\"大众, 5 cache: false; 6 dataType:\"大众text\"大众, 7 success: function(msg){ 8 //some code 9 },10 error:function(msg){11 //some code12 }13 });
常用的参数有：
type：要求类型，可选值有post和get。
url：发送要求的地址。
data：发送到做事器的数据。必须是“key0=value0&key1=value1“或键值对的形式（工具）。
cache：规定是否读取缓存数据，true表示读取，false表示不读取，直接从做事器获取。
dataType：期望做事器返回的数据类型，可选值有xml，html，script，json，text。
success：ajax要求成功回调函数。
error：ajax要求失落败回调函数。
利用ajax()方法时，所有的设置参数都是可选的，除了上诉参数外，还有很多其他的参数可选，这让我们在通过jQuery实现ajax时有了更大的灵巧性。如果你想理解更多干系参数的信息，请到jQuery官网查询。
2，get()方法
如果你以为ajax()方法发送大略get要求还是太麻烦，那么你可以直策应用$.get()方法。
1 $.get(2 \公众url\"大众,3 { name: \公众ren\"大众, age: \"大众12\公众 },4 function(msg){5 //some code6 },7 \"大众text\"大众8 );
该方法只须要4个参数，发送要求的url，发送的数据，要求成功的回调函数，期望的返回值类型。
3，post()方法
利用$.post()方法和$.get()一样，他们都只须要4个参数。
1 $.post(2 \"大众url\"大众,3 { name: \公众ren\"大众, age: \"大众12\"大众 },4 function(msg){5 //some code6 },7 \公众text\"大众8 );
4，load()方法
load()方法可以直接要求做事器的数据并添加到DOM元素中。默认利用get办法，如果你向做事器发送了数据，将自动转换为post办法。
1 $(\"大众div\"大众).load(2 \公众test.html\"大众,3 {name:\"大众ren\"大众,age:\"大众12\"大众},4 function(){//some code}5 );6 //载入一份新的html文档到div中，并向做事器发送了数据。
load()方法可以有3个参数，要求的url，向做事器发送的数据，要求成功后的回调函数。
写在末了：jQuery作为一款工具库，我们只须要知道它能干什么和怎么干就好，不必完备深入的学习它。当我们须要用它的时候合营官方文档编写干系代码即可。如果你在技能上有所追求，那么你还是可以仔细研读jQuery源码，相信一定会有不少收成。实在不只jQuery，在你学习其他框架或库或工具的时候，也可以按照这种办法学习，作为一个软件工程师，打算机事理，操作系统，网络技能等等才是布局你上升的基石，其次才是各种编程措辞，热门框架及工具等等。
