一篇文章教会你jQuery应用

 

一　　认识jQuery

　　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从第二个大的版本开始，为了优化网络响应和使语法更加简洁，抛弃了对IE六、七、8的支持，而且从2.1.0开始，压缩版本的文件中也再也不包含注释信息了。为了得到更好的兼容性，咱们这里使用的jQuery文件版本号是1.12.4。

 

二　　jQuery核心

 

　　1，$符号

　　jQuery其实是一个函数对象。事实上，jQuery经过全局变量jQuery引用该函数对象，$符号是jQuery变量的一个别名，为了写的更少，咱们一般都使用$符号表示该对象。

1 window.jQuery === window.$; //true 2 jQuery === $;// true 3 typeof($);// 'function'

　　若是你还使用了其余框架，或自定义了$变量，那么有可能和jQuery的$符号形成冲突。

1 jQuery.noConflict();

　　在使用jQuery编程以前，首先调用noConflict()方法，解除jQuery对$符号的占用，这样就能够解决这一问题了。但日后就只能经过变量jQuery来使用jQuery的全部功能了。

　　

　　2，参数

　　$核心函数能够接收3种类型的参数，分别是函数引用、字符串、DOM对象。

　　　　a) 接收一个函数　　

1 $(function(){ 2 //some code 3 }); 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 code 4 }); 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');//获取全部div 2 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(e){  2 //some code  3  e.stopPropagation();  4 });  5 //阻止事件冒泡  6 $('a').on('click',function(e){  7 //some code  8 return false；//简单方式  9 //e.preventDefault();//W3C标准方式 10 }); 11 //阻止默认行为

　　

　　3，一次性事件和自动触发事件

　　一般咱们给元素绑定的事件处理程序须要特定的事件才能触发，好比click，mouseover等等，jQuery提供了triggerHandler方法，你能够经过该方法手动触发元素绑定的事件处理程序，而不用等到特定事件发生。

1 $('div').on('click',function(){ 2 //some code 3 }); 4 //通常须要等到用户点击div，函数才会被执行 5 $('div').triggerHandler('click'); 6 //自动触发div的click事件，不用等到用户点击

　　jQuery还提供了另外一个方法：trigger。它的功能和triggerHandler方法同样。他们的不一样之处在于triggerHandler不会触发事件的默认行为和冒泡。

1 $('div').one('click',function(){ 2 //some code 3 }); 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表示整个过程持续时间，单位是ms 3 $('div').hide(1000); 4 //使div隐藏

　　这两个方法还能够接受一个回调函数做为第二个参数，用于设置动画完成后须要执行的操做。

　　

　　2，展开和收起

　　jQuery经过slideDown，slideUp实现平缓的展开和收起元素。该方法是经过高度变化（向下增大或减少）来动态地显示元素，在显示完成后可选地触发一个回调函数。

1 $("p").slideDown(1000); 2 //展开，能够设置一个时间，表示整个过程持续时间，单位ms 3 $("p").slideUp(1000); 4 //收起 5 $("p").slideToggle(1000); 6 //切换

　　展开后收起动画经常使用来作下拉菜单。

　　

　　3，淡入淡出

　　jQuery经过fadeIn和fadeOut实现淡入淡出效果。该方法的原理是修改元素的opacity属性，不会改变元素的宽高。也可接收一个回调函数。

1 $("div").fadeIn(1000); 2 //淡入，可一接收一个数字做为参数，表示过程持续时间，单位ms 3 $("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.8 4 },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 code 4 },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 code 12  } 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 code 6  }, 7 "text" 8 );

　　该方法只须要4个参数，发送请求的url，发送的数据，请求成功的回调函数，指望的返回值类型。

　　

　　3，post()方法

　　使用$.post()方法和$.get()同样，他们都只须要4个参数。

1 $.post( 2 "url", 3 { name: "ren", age: "12" }, 4 function(msg){ 5 //some code 6  }, 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，在你学习其余框架或库或工具的时候，也能够按照这种方式学习，做为一个软件工程师，计算机原理，操做系统，网络技术等等才是构造你上升的基石，其次才是各类编程语言，热门框架及工具等等。

 

原文出处：https://www.cnblogs.com/ruhaoren/p/11670211.html