闲聊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:

 1 function success(res) {
 2 //do something
 3 }
 4 
 5 function fail(res) {
 6 //do something
 7 }
 8 
 9 var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
10 
11 request.onreadystatechange = function () { // 状态发生变化时,函数被回调
12     if (request.readyState === 4) { // 成功完成
13         // 判断响应结果:
14         if (request.status === 200) {
15             // 成功,通过responseText拿到响应的文本:
16             return success(request.responseText);
17         } else {
18             // 失败,根据响应码判断失败原因:
19             return fail(request.status);
20         }
21     } else {
22         // HTTP请求还在继续...
23     }
24 }
25 
26 // 发送请求:
27 request.open('GET', '/xxx');
28 request.send();
29 
30 alert('请求已发送,请等待响应...');

jQuery ajax:

 1 $.ajax({ 
 2     url: "",    //后台服务地址
 3     type: "POST" 或 "GET",    //还可以是PUT、DELETE
 4     success: function(){
 5     //do something
 6     },
 7     error: function() {
 8     //do something
 9     }
10 });    //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插件。    c⌒っ*゚∀゚)メ装完就跑

posted @ 2017-08-11 15:20 xuchaoi 阅读(...) 评论(...) 编辑 收藏