一、主流 javascript 库

　　除 jQuery 外，还有 Prototype、Dojo、YUI、ExtJS、MooTools ，其中 Prototype 较老，结构设计较为松散，ExtJS 界面很棒但需要商业授权，MooTools 也是值得学习的一个 js 库，Dojo 有一些特殊功能，也可以考虑学习，YUI 的文档很完备，语法也规范。对我个人而言，选择性依次为 jQuery > MooTools > ExtJS > Dojo > YUI > Prototype。

　　jQuery 的口号是 "write less,do more."。它的优点是使用了链式操作和隐式迭代大量减少了代码量，将行为操作从 html 代码中剥离出来利于分工合作和后期维护，此外强大的选择器也是其一大优势。

　　jQuery 的界面库有 jQuery UI 和 easy UI，学完 jQuery 可以去考虑继续学习这两个。

二、欲善其事，先利其器

　　先选择一个便于学习 jQuery 的 IDE，可以使用 Dreamweaver 8，它拥有一个可以智能提示 jquery 书写的插件，叫 jQuery_API .mxp，通过 Dreamwearver 的 "命令"——>"扩展管理" 可以安装使用。Dreamweaver 8 是 Macromedia 公司出的最后一版，2005年 Macromedia 公司被 Adobe 公司收购，Dreamweaver 开始从 CS3 开始命令，使用最新的 CS6 版本即内置支持 jQuery 智能提示。

　　其次，并不一定要去下载 jQuery 库到本地，可以直接使用下面两个在线链接地址：

  1. http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
  2. http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
  3.  
  4. http://ajax.microsoft.com/ajax/jquery/jquery-1.11.0.min.js
  5. http://ajax.microsoft.com/ajax/jquery/jquery-2.1.0.min.js

　　从上面可以看出，jQuery 提供了 1.x 和 2.x 的版本，区别在于，2.x 版本不再支援 IE 6/7/8 ，所以体积更小。不过考虑到现在 xp 和 win8 上的默认 IE 版本仍然在这个区间，还是建议使用 1.x 的库，而 jQuery 团队也声明未来将同时支援 1.x 和 2.x 的升级。

三、第一个 jQuery 代码

  1. <html>
  2. <head>
  3.     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  4.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  5. </head>
  6. <body>
  7.     <script>
  8.         $(document).ready(function(){
  9.             $("body").html("Hello,World!");
  10.         });
  11.     </script>
  12. </body>
  13. </html>

　　这里有两个问题需要提一下：一是以前的写法是 <script type="text/javascript"></script>，但在 HTML5 中 javascript 已经是默认脚本，不必写出； 二是关于 $(document).ready(function(){ ... }); 函数的意义，表示等待所有文档加载完成，再执行里面的代码。它还可以简写成如下形式： $(function(){ ... });

四、关于 DOM 对象和 jQuery 对象

　　简单粗暴的说，jQuery 对象就是 DOM 对象 的集合，jQuery 隐式迭代的特性就是建立在此基础之上。　简单例子如下：

  1. <html>
  2. <head>
  3.     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  4.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  5.     <script>
  6.     $(function(){
  7.         var dom_obj = document.getElementById('id');
  8.         var jquery_obj = $('#id');
  9.  
  10.         alert(dom_obj.innerHTML);
  11.         alert(jquery_obj.html());
  12.         alert(jquery_obj[0].innerHTML);        //将 jquery 对象转化成 dom 对象
  13.         alert($(dom_obj).html());    //将 dom 对象转化成 jquery 对象
  14.     });
  15.     </script>
  16. </head>
  17. <body>
  18.     <span id='id'>Hello,World!</span>
  19. </body>
  20. </html>

　　上面四个 alert 语句输出的都是 "Hello,World!"，可见 DOM 对象和 jQuery 对象是可以互相转化的，这样在需要的时候，我们就可以结合两者来快速完成一些功能。需要注意的是，使用 if(document.getElementById('id')){} 这样的代码可以判断该元素是否存在，而使用 if($('#id')){}  则不可以，它永远返回一个对象，当元素不存在时，只是长度为0的集合对象罢了，所以要么转化成 dom 对象来判断，要么根据其 jquery 对象的长度来判断。

五、参考资料

官方文档已经非常详尽：http://api.jquery.com/

jQuery Easy UI从1.3.3到现在的最新版本1.3.4都是基于jQuery2.0的，而jQuery2.0是不支持IE6、7、8的了，所以jQueryEasyUI1.3.3后的版本都不支持IE6、7、8。如果想继续兼容IE8以前的版本，只能使用jQueryEasyUI1.3.2或以前的版本了，但是可能得注意一些EasyUI的API可能会有差异。

ie下报缺少标识符、字符串或数字，在firefox及其他下均无问题，郁闷的找了半天也没结果，使用Companion。js也不行。最好google了一下：

原因及解决方法
1.原因：一般出现在类的定义时在最后一个属性或方法后加了逗号，在Firefox是无所谓的，而IE下就会出错，而且提示得云里雾里，要除错都很难。

2.解决方法:去掉这个逗号…..

六、关于通过DOM操作添加新控件，新控件不能触发事件的问题，可以参考：http://blog.csdn.net/a15937822658/article/details/13091159

jQuery 学习之路（1）：引子的更多相关文章

  1. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  3. jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  4. Jquery学习之路(二) 实现table样式的设定

    上一篇jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看<锋利的Jquery>,说实话正在看了.由于正在学习中,我 ...

  5. Jquery学习之路(一) 实现checkbox全选方法

    昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...

  6. jQuery学习之路（6）- 简单的表格应用

    ▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...

  7. jQuery学习之路（4）- 动画

    ▓▓▓▓▓▓ 大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 ▓▓▓▓▓▓ jQuery中的动画 ▓▓▓▓▓▓ show()和hide()方法 ...

  8. jQuery学习之路（3）- 事件

    ▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在j ...

  9. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. 【poj1091】 跳蚤

    http://poj.org/problem?id=1091 (题目链接) 题意 给出一张卡片,上面有n+1个数,其中最大的数为m,每次可以向前或者向后走卡片上面的步数.问有多少种方案选出n个数组成一 ...

  2. Linux解压命令（tar）

    tar zxvf phddns_raspberry.tgz tar默认解压到当前目录 参数: 运行tar时必须要有下列参数中的至少一个才可运行 -A, --catenate, --concatenat ...

  3. C#变量类型

    在C#语言中,我们把变量分为七种类型,它们分别是:静态变量(static varibles),非静态变量(instance variables),数组元素(array elements),值参数(va ...

  4. Swift&Node 使用Alamofire进行Post

    这篇博客主要实现Swift客户端和NodeJS后台的Post.Get请求实现. 我是一个略有点讨厌重复使用工具的人,比如这些基本功能完全可以用OC和PHP等替代,但是没办法,现在知识更新的太快啦,Sw ...

  5. 解析：使用easyui的form提交表单，在IE下出现类似附件下载时提示是否保存的现象

    之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的f ...

  6. 如何让vim编辑器永久显示行号

    在Linux环境下的编辑器有vi.vim.gedit等等.进入这些编辑器之后,为了方便我们需要编辑器显示出当前的行号,可偏偏编辑器默认是不会显示行号的.我们有二种办法可以解决: 第一种是,手动显示:在 ...

  7. centos7 + VMware Workstation Pro

    centos7 + VMware Workstation Pro安装 centos 7 镜像文件 下载地址https://www.centos.org/download/ 笔者是使用的DVD ISO, ...

  8. BZOJ3226: [Sdoi2008]校门外的区间

    感觉很有趣的题呢. 每个点拆成两个,线段树维护. 不过这题难点其实在输入输出. #include<bits/stdc++.h> #define N (1<<17) #defin ...

  9. 使用js进行string和json之间转换的方法

    在数据传输过种中,json是以文本,即字符串的形式传递,字符串形似Json对象: var str1 = '{ "name": "Amy", "sex& ...

  10. 20145212 《Java程序设计》第5周学习总结

    20145212 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 1.Java中所有错误都会被打包为对象,通过try和catch语法可以对代表错误的对象做处理. try{ . ...