闲聊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⌒っ*゚∀゚)メ装完就跑