zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    (Java实现) 洛谷 P1603 斯诺登的密码
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1553 数字反转(升级版)
    8.4 确定两个日期之间的月份数或年数
    (Java实现) 洛谷 P1553 数字反转(升级版)
  • 原文地址:https://www.cnblogs.com/tianyajuanke/p/3716105.html
Copyright © 2011-2022 走看看