• jQuery 学习之路(1):引子


    一、主流 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 库到本地,可以直接使用下面两个在线链接地址:

    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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>    
        $(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/

     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

  • 相关阅读:
    php数据缓存到文件类设计
    php静态文件缓存示例
    php array_merge和“+”的区别和使用《细说php2》
    kafka环境安装及简单使用(单机版)
    Protobuf的上手使用
    Java8新特性概览
    Mock测试框架(Mockito为例)
    Java序列化与反序列化
    系统/项目环境搭建
    关于Tomcat服务器中的协议及请求过程
  • 原文地址:https://www.cnblogs.com/tianyajuanke/p/3716105.html
Copyright © 2020-2023  润新知