首页 > 代码库 > jQuery 学习之路（1）：引子

jQuery 学习之路（1）：引子

2024-07-03 14:19:55   225人阅读

一、主流 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 公司出的最后一版，然后 Macromedia 公司被 Adobe 公司收购，Dreamweaver 开始从 CS3 开始命令，使用最新的 CS6 版本即内置支持 jQuery 智能提示。 

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

http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js

http://ajax.microsoft.com/ajax/jquery/jquery-1.11.0.min.js
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 代码

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){
            $("body").html("Hello,World!");
        });
    </script>
</body>
</html>

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

 

四、关于 DOM 对象和 jQuery 对象

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

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">    
    $(function(){
        var dom_obj = document.getElementById(‘id‘);    
        var jquery_obj = $(‘#id‘);
        
        alert(dom_obj.innerHTML);
        alert(jquery_obj.html());        
        alert(jquery_obj[0].innerHTML);        //将 jquery 对象转化成 dom 对象
        alert($(dom_obj).html());    //将 dom 对象转化成 jquery 对象
    });
    </script>
</head>
<body>
    <span id=‘id‘>Hello,World!</span>
</body>
</html>

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

 

五、参考资料

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


联系
我们