闲聊jQuery（一）

Write less, do more.

这便是jQuery的宗旨！jQuery，一个高效、精简并且功能丰富的 JavaScript 工具库。

想必，对于每一个前端开发者，一定用过jQuery吧！俗话说，学会jQuery，打哪儿都不怕！（瞎说的。。） jQuery也是我接触过的第一个JavaScript工具库。说句心里话，jQuery用起来确实很爽！下面分析几点：

1.原生JavaScript中获取元素（document.getElementById,document.getElementsByClassName,document.getElementByName...），一写一大串，写起来很烦。再看看jQuery中获取元素（$('id或className或HTML标签名称')）。真是方便！

2.jQuery中对ajax进行了封装，用起来非常顺手。

原生ajax：

 function success(res) {

 //do something

 }

 function fail(res) {

 //do something

 }

 var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

 request.onreadystatechange = function () { // 状态发生变化时，函数被回调

     if (request.readyState === 4) { // 成功完成

         // 判断响应结果:

         if (request.status === 200) {

             // 成功，通过responseText拿到响应的文本:

             return success(request.responseText);

         } else {

             // 失败，根据响应码判断失败原因:

             return fail(request.status);

         }

     } else {

         // HTTP请求还在继续...

     }

 }

 // 发送请求:

 request.open('GET', '/xxx');

 request.send();

 alert('请求已发送，请等待响应...');

jQuery ajax：

 $.ajax({

     url: "",    //后台服务地址

     type: "POST" 或 "GET",    //还可以是PUT、DELETE

     success: function(){

     //do something

     }，

     error: function() {

     //do something

     }

 });    //jQuery ajax还提供了很多可选的属性，有兴趣可以去查看下相关文档！

3.jQuery提供很多便捷的事件方法。

jQuery事件方法：浏览器事件，文档加载，绑定事件处理器，事件对象，表单事件，键盘事件，鼠标事件。这里的话，有兴趣的话可以查看相关文档链接。

4.jQuery提供了快速实现动画效果的方法。

只需使用jQuery的一个方法就可以让你的页面更加生动！比如：.fadeIn() 、.animate()

jQuery的版本，最新版本jQuery3.2.1 。目前，jQuery共有3代版本，分别是：jQuery1.x.x、jQuery2.x.x、jQuery3.x.x。

这里注意的是，从jQuery2.x.x开始级以后的版本不再对ie9以下等浏览器的支持。官方原话：If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12.

jQuery统一了不同浏览器之间的DOM操作，使用它，你便可以轻松的对页面进行DOM操作！

后续，我将深入jQuery，学习了解这个JavaScript库是如何实现的，并着手打造一个jQuery插件。ｃ⌒っ*ﾟ∀ﾟ)ﾒ装完就跑

巴特西

闲聊jQuery（一）

最新文章

热门文章