jQuery 3教程(一):jQuery介绍

636 查看

原文地址:jQuery 3教程(一):jQuery介绍

Introduction

本系列文章不是介绍基础jQuery语法。关于jQuery基础教程,可以参考W3School的jQuery教程
目前大部分程序员对于jQuery的使用还停留在1.x版本上,本系列文章将介绍目前最新的jQuery3.x。

jQuery是什么?

提到jQuery,就不得不提JavaScript,JavaScript曾经和VBScript一样,作为浏览器脚本语言使用,在那个标准匮乏的年代,一度濒临死亡。不过好在Ajax的出现,大大改善了网页的用户体验,同时也拯救了JavaScript。
而今天JavaScript不仅打败了同时期的VBScript,成为前端脚本语言的霸主,甚至出现了Node.js这种用JavaScript实现的后端服务器,性能完爆Apache, 甚至不输给Nginx,前几年甚至成为了github上的最热门的项目之一。
言归正传,jQuery是什么呢?简单来说,就是一个JavaScript的三方库,用于简化浏览器端的脚本编程。
jQuery能做的事实际上不仅仅是简化脚本编程,使用jQuery可以缩小HTML文件的体积,可以让Ajax交互更简单,甚至可以避免因浏览器兼容性导致的问题(IE浏览器在这个问题上简直是大坑)。
记住jQuery的哲学:Write less, do more.(写的更少,做的更多)

一个jQuery的Demo

在没有jQuery以前,为了知道哪一个选择框被选中,你的代码可能是这么写的:

var value;
var radioGroup = document.getElementsByTagName('radioGroup');
for (var i = 0; i < radioGroup.length; i++) {
  if (radioGroup[i].type === 'radio' && radioGroup[i].name === 'jQuery' && radioGroup[i].checked) {
    value = radioGroup[i].value;
    break;
  }
}

而有了jQuery,你只需要:

var value = jQuery('input:radioGroup[name="jQuery"]:checked').val();

是不是简洁了很多?

jQuery版本

jQuery可以在jQuery CDN下载,下面给出不同浏览器对jQuery版本的支持程度:

浏览器 jQuery 1 jQuery 2 jQuery 3 jQuery Compat 3
IE 6+ 9+ 9+ 8+
Chrome 支持 支持 支持 支持
Firefox 支持 支持 支持 支持
Safari 5.1+ 5.1+ 7.0+ 7.0+
Opera 支持 支持 支持 支持
iOS 6.1+ 6.1+ 7.0+ 7.0+
Android 2.x 2.3 2.3 2.3 2.3
Android 4.x 4.0+ 4.0+ 4.0+ 4.0+

IE挺坑的,对吧?下面来介绍下jQuery的版本:

  1. jQuery 1
    这个版本是兼容性最强的,但是由于出生在战火纷飞的年代,体积和性能并不太好,尤其是参与了浏览器兼容性大战,导致很多的trick。

  2. jQuery 2
    诞生于2013年4月,和平年代的产物,开始侧重现代浏览器的优化,但是由于牺牲了IE的兼容性,大部分程序员不会使用。

  3. jQuery 3
    诞生于2014年12月,jQuery Foundation一看,大家怎么还在用jQuery 1啊?那么就拆除两个版本吧,jQuery 3,适用于现代浏览器,jQuery Compat 3,适用于历史浏览器(其实就是老IE)。

当然,jQuery 3优于jQuery 2,jQuery Compat 3优于jQuery 1。
经过jQuery Foundation这么一折腾,其实程序员更迷惑了,那到底用哪个版本啊?
其实可以根据你的应用场景来选择:

  1. 企业内部:必须jQuery 3啊,为了证明我们是前卫的程序员。什么?浏览器不兼容?IT去看看,帮他装个浏览器。

  2. 企业外部:必须jQuery 1啊,吸引客户,谁知道客户用的是什么操作系统,什么浏览器。

  3. 非IE用户:jQuery 3吧,对于用IE的用户,给他挂个banner:请不要使用IE浏览器。

  4. 手机客户端:可以jQuery 3了,用iOS的谁不换新的?

  5. 历史网站维护:jQuery 1吧,谁知道用的三方库里面有没有坑。