一、认识jQueryjQuery是JavaScriptQuery的缩写。jQuery是一个非常好的JavaScript库。即使在MVVM框架盛行的今天，也有超过一半的网页和应用程序直接或间接地使用了jQuery。jQuery的设计理念是“WriteLess,DoMore”，即写得少做的多！使用jQuery可以大大简化我们的JS代码，从而提高开发效率。jQuery现在有3个主要版本，分别是1.x、2.x和3.x。可以从jQuery官网下载需要的版本，然后在本地导入到自己的项目中，或者使用CDN导入。大家在下载jQuery的时候，一般有两个可选版本，一个是压缩版（不含换行符和空格，体积较小，多用于实际项目开发），一个是未压缩版（包括换行符和空格）空间，尺寸略小）。大，主要用于学习和测试）。另外，从jQuery第二大版本开始，为了优化网络响应，让语法更简洁，放弃了对IE6、7、8的支持，并且从2.1.0开始，压缩版文件也不再包含注释信息。为了更好的兼容性，我们这里使用的jQuery文件版本号是1.12.4。二jQuery核心1、$符号jQuery实际上是一个函数对象。实际上，jQuery是通过全局变量jQuery来引用函数对象的，$符号是jQuery变量的别名。为了少写，我们通常使用$符号来表示对象。window.jQuery===window.$;//truejQuery===$;//truetypeof($);//'function'如果你也用其他框架，或者自定义$变量，那么用jQuery是可以的$符号会导致冲突。jQuery.noConflict();在用jQuery编程之前，先调用noConflict()方法释放jQuery对$符号的占用，这样这个问题就可以解决了。但是以后jQuery的所有功能都只能通过变量jQuery来使用了。2.参数$核心函数可以接收3种类型的参数，分别是函数引用、字符串和DOM对象。a)接收一个函数$(function(){//somecode});//这个方法完整的写法应该是：//$(document).ready(function(){somecode});这个方法类似于nativeJS的window.DOMContentLoaded方法，只要解析完HTML文档，生成DOM树，就会触发这个事件。但是在jQuery中可以同时存在多个这种方法。b)Receivethestringvarbox1=$('div');//接收css选择器字符串，可以在DOMtree中获取对应的DOM元素，包装成一个jQuery对象varbox2=$('
/div>');//接收HTML代码片段，创建对应的DOM元素，包装成jQuery对象c)接收DOM元素varbox=document.getElementById('#box');varjBox=$(box);//jQueryobj如果核心函数接收到一个DOM元素，它会将DOM元素包装成一个jQuery对象并返回。jQuery对象其实是一个类数组，里面保存的是获取到的DOM元素。jQuery提供的属性和方法只能通过jQuery对象访问。3.静态方法jQuery提供了一些静态方法，比如遍历数组，去除字符串空格，判断数据类型等，这些方法在ES5之前都是非常实用的方法，但是在ES5之后，原生JS已经实现了这种类似的方法，所以我这里就不详细解释了。有兴趣的可以自行查看官方文档。jQuery还将ajax相关的操作封装为静态方法，后面会讲到。这里唯一要说的就是holdReady方法。$.holdReady(true);$(function(){//somecode});$.joldReady(false);//参数true，暂停ready方法的执行，参数false，恢复ready方法的执行三jQuery的属性和节点1.Selector选择器是jQuery的核心功能。css支持的大部分选择器在jQuery中都可以支持。$('p');//标签选择器$('.class');//类选择器$('#id');//id选择器$('[type=text]');//属性选择器$('input[type=email]');//复合选择器$(#idp);//后代选择器$(#idp:first-child);//过滤选择器//...通过核心函数获取的DOM元素，被封装成jQuery对象，以类数组的形式存储。我们可以通过eq方法获取其中一个，也可以通过get方法获取DOM对象。1vardivList=$('div');//获取所有divvardomDiv=divList.get(0);//获取第一个Dom元素，如果有varjqDiv=divList.eq(0);//获取第一个jq对象，如果有anyvaraanother=$(domDiv);//将Dom元素转换为jq对象另外，jQuery还提供了一些通过层级结构查找元素的方法。$('div').find('span');//查找div内部的span，相当于$('divspan')$('li').first();//获取div中的第一个元素匹配元素A$('li').last();//获取匹配元素中的最后一个$('div').next();//获取所有匹配div的下一个兄弟元素的集合$('div').prev();//获取待匹配div的前兄弟元素集合$('div').parent();//获取匹配div的公共父元素$('div').children();//获取div的子元素集合$('div').siblings();//获取div的兄弟元素集合//...2,属性操作获取后DOM元素，jQuery将它们包装成jq对象，然后可以通过jQuery提供的方法修改对应的DOM元素，包括CSS、文本、属性节点、HTML结构等。属性和属性节点相关：$('div').attr('name','test');//设置属性名：name，属性值：test$('div').attr('name');//获取属性名的值$('div').removeAttr('name');//移除属性名***************************$('div').prop('name','test');$('div').prop('name');$('div').removeProp('name');//prop的用法和attr是完全一样的，唯一不同的是prop既可以操作DOM元素的属性，也可以操作它的属性节点。当属性不显示时，会通过attr()方法返回undefined。prop()方法可以返回true或false，所以如果你想检索和更改DOM属性，例如元素的选中、选中或禁用状态，建议使用prop()方法，并使用attr方法在其他时间。请注意，使用appeal方法获取属性值时，只会返回第一个匹配的DOM元素对应的属性值。但是设置的时候是给所有匹配的DOM元素加上这个属性。Class类相关：$('div').addClass('test');//添加一个类，如果需要添加多个类，用空格隔开$('div').removeClass('test');//删除一个类，如果需要删除多个类，也可以用空格隔开$('div').toggleClass('test');//切换类，如果DOM元素已经有这个类，那么删除，如果没有，添加文字和结构相关：$('div').html();//获取第一个匹配到的div的内容$('div').html('
我是一个段落
');//设置所有匹配div的内容$('div').text();//获取所有匹配元素的文本内容$('div').text('hello');//设置所有匹配div的文本内容$('input').val();//获取匹配元素值$('input').val('hello');//获取匹配元素值cssrelated:$('div').css('background-color','red');//设置元素的单个css属性$('div').css({width:'200px',height:'200px',background-color:'red'});//通过对象设置多个css属性大小和位置：$('div').width();//获取内容区域的宽度div，可以传参Set$('div').height();//获取div内容区域的高度，可以传参set//innerWidth，innerHeight表示的宽高content+padding//outerWidth，outerHeight表示content+padding+borderHigh的宽度$('div').offset();//获取div相对视口的偏移量，返回值是一个包含top的对象andleft属性，值为一个数字$('div').position();//获取div相对于父元素的偏移量，返回值为一个对象con包含top和left属性，值为数字//offset和position以像素为单位，只对可见元素起作用3、节点jQuery还提供了节点的增删改查方法。$("div").append("Hello
");//在div末尾插入元素$("div").prepend("Hello
");//在div开头插入元素$("div").after("Hello
");//在div之后立即插入元素$("div").before("Hello
");//在div之前立即插入元素$("div").remove();//删除div元素，但保留文本$("div”）。empty();//清空div中的所有内容四jQuery事件1、事件绑定和移除jQuery提供了两种绑定事件的方式，第一种是on+事件名的具体事件方法，第二种是使用on方法直接地。$('div').onclick(function(){});$('div').on('click',function(){});//事件处理器可以是匿名函数也可以是引用函数，如果涉及解绑定事件，建议使用函数引用。jQuery的事件绑定类似于原生JS的addEventListener方法。同一类型的多个事件可以同时绑定，不会互相覆盖。jQuery通过off方法取消绑定事件。functiontest(){};$('div').on('click',test);$('div').off();//移除所有绑定到div的事件$('div').off('click');//移除所有div绑定的点击事件$('div').off('click',test);//移除div绑定的特定事件2，防止事件冒泡并且默认行为使用jQuery防止事件冒泡，默认行为与原生JS相同。如果你不确定，你可以查看我的《DOM之事件（一）》。$('div').on('click',function(){//somecodee.stopPropagation();});//防止事件冒泡$('a').on('click',function(){//somecodereturnfalse;//简单方式//e.preventDefault();//W3C标准方式});//防止默认行为3、一次性事件和自动触发事件通常我们需要给元素绑定事件处理程序才具体可以触发事件，例如点击、鼠标悬停等。jQuery提供了triggerHandler方法，通过该方法可以手动触发元素绑定的事件处理程序，而无需等待特定事件的发生。$('div').on('click',function(){//somecode});//一般在用户点击div后才会执行函数$('div').triggerHandler('click');//自动触发div的点击事件，无需等到用户点击jQuery还提供了另一种方法：trigger。它的功能与triggerHandler方法相同。它们的区别在于triggerHandler不会触发事件的默认行为和冒泡。$('div').one('click',function(){//somecode});//jQuery通过one方法4绑定一个只会触发一次的事件处理器，事件委托jQuery通过委托方法事件委托。这个方法在使用上和原生JS有一些区别。原生JS实现事件委托，请移步《DOM之事件（一）》。$("ul").delegate("li","click",function(){$(this).toggleClass("test");});//将li的点击事件委托给被委托元素ul一般为委托元素的父元素。五jQuery动画1、显示和隐藏jQuery通过show方法和hide方法实现元素的显示和隐藏。它的原理是修改元素的显示、宽度、高度和不透明度属性。$('div').show(1000);//让div显示，1000表示整个过程的时长，单位是ms$('div').hide(1000);//让div隐藏这两个方法还可以接受一个回调函数作为第二个参数，用于设置动画完成后要执行的动作。2、展开和折叠jQuery通过slideDown、slideUp实现元素的平缓展开和折叠。该方法是通过改变元素的高度（向下增加或减少）来动态显示元素，并可选地在显示完成后触发回调函数。$("p").slideDown(1000);//展开，可以设置一个时间来表示整个过程的持续时间，在ms$("p").slideUp(1000);//收起$("p").slideToggle(1000);//展开后切换折叠动画，常用作下拉菜单。3.淡入淡出jQuery通过fadeIn和fadeOut实现淡入淡出效果。该方法的原理是在不改变元素的宽高的情况下修改元素的opacity属性。也可以接收回调函数。$("div").fadeIn(1000);//淡入，可以接收一个数字作为参数，表示过程持续时间，在ms$("div").fadeOut(1000);//淡入out$("div").fadeTo(1000,0.5);//调整到指定值$("div").fadeToggle(1000);//切换4、自定义动画jQuery通过animate方法实现自定义动画效果.$('div').animate({width:500px,opacity:0.8},1000);//该方法接收一个对象，表示动画结束时元素的状态。第二个参数是一个数字，表示持续时间和单位ms，也可以接收一个回调函数作为第三个参数。注意jQuery的动画采用的是队列形式。每写一个动画，就往动画队列中插入一个，后面的要等前面的执行完才能执行。5.停止和延迟jQuery的stop方法可以暂停正在执行的动画。$('div').stop();//立即停止当前动画，如果有则直接启动队列中的后续动画$('div').stop(true,true);//stop方法即可接收两个blloean值作为参数。第一个指定是否在停止当前动画的同时清除队列中的其他动画，第二个指定是否在停止当前动画的同时直接完成队列中的其他动画。由于jQuery是通过队列来控制动画执行的，所以我们建议在调用jQuery动画之前先调用一次stop方法，避免动画混乱。$('div').stop();$('div').animate({//somecode},1000);jQuery通过delay来延迟动画的执行。$('div').animate({width:200px;height:200px;},1000).delay(1000).animate({background-color:red;},1000);//等待改变宽度和height1000ms然后改变背景颜色6.jQueryAjaxjQuery封装了Ajax方法，功能齐全。常用的jQuery方法有3种，分别是$.ajax()、$.get()和$.post()。1.ajax()方法ajax方法接收一个对象作为参数，对象的属性名是ajax的设置参数，属性值是ajax的设置值。$.ajax({type:"POST",url:"some.php",data:"name=ren&age=12",cache:false;dataType:"text",success:function(msg){//somecode},error:function(msg){//一些代码}});常用的参数有：type：请求类型，可选值有post和get。url：发送请求的地址。数据：发送到服务器的数据。必须是“key0=value0&key1=value1”或者键值对（对象）的形式。cache：指定是否读取缓存的数据，true表示读取，false表示不读取，直接从服务器获取。dataType：服务器期望返回的数据类型，可选值有xml、html、script、json、text。success：ajax请求成功回调函数。错误：ajax请求失败回调函数。使用ajax()方法时，所有设置参数都是可选的。除了申诉参数之外，还有很多参数是可选的，这让我们在通过jQuery实现ajax时有更大的灵活性。如果您想了解更多相关参数，请访问jQuery官网。2.get()方法如果觉得ajax()方法发送简单的get请求太麻烦，那么可以直接使用$.get()方法。$.get("url",{name:"ren",age:"12"},function(msg){//somecode},"text");该方法只需要4个参数，发送请求的url，发送的数据，请求成功的回调函数，期望的返回值类型。3.post()方法使用与$.get()相同的$.post()方法，它们只需要4个参数。$.post("url",{name:"ren",age:"12"},function(msg){//somecode},"text");4、load()方法load()方法可以直接请求服务器的数据并将其添加到DOM元素。默认情况下使用get方法。如果你向服务器发送数据，它会自动转换为post方法。$("div").load("test.html",{name:"ren",age:"12"},function(){//somecode});//加载一个新的html文档到div,和向服务器发送数据。load()方法可以有3个参数，请求的url，发送给服务器的数据，请求成功后的回调函数。写在最后：jQuery作为一个工具库，只需要知道它能做什么，怎么做就可以了，没必要学透。当我们需要使用它的时候，我们可以结合官方文档编写相关代码。如果你是有技术追求的，那你还是可以仔细研究下jQuery源码，相信会有不少收获。其实不光是jQuery，大家在学习其他框架或者库或者工具的时候，也可以通过这种方式来学习。作为一名软件工程师，计算机原理、操作系统、网络技术等是你崛起的基石，其次是各种编程语言、流行的框架和工具等。