Updates from 三月, 2010

  • Javascript常用优化方法

    shishirui 12:07 on 2010/03/06 | 0 Permalink | Reply

    对于Javascript的代码速度,我们一般可以将它分为下载时间和执行速度两部分,所以,要做优化的话,我们可以从这两部分来入手。

    一、优化代码下载速度

    1. 在单个TCP-IP包中,最多能放入的字节数是1160,所以每个js文件的字节大小,最好不要超过这个数,以便获得最优的下载时间。
    2. 合并js文件。如果一个页面中存在加载多个js外部文件的情况,则最好将它们合并为一个,这样可以有效减少HTTP请求数,从而节省下载时间。
    3. 为外部js使用不同的域名。我们知道,浏览器在下载页面时,对于同一个域名下的最大并发数是一定的(例如IE6/7在HTTP1.0下是2个,而Firefox3是6个),所以,假如前端页面的域名是www.phpblog.cn的话,外部js文件的域名可以改为js.phpblog.cn,这样做就可以使浏览器在js.phpblog.cn域名上也使用最大并发数下载,从而加快下载速度。(以上只是拿我的域名作为例子,目前我的站点还没有这样做)
    4. 浏览器缓存。在页面中引用的外部js文件是可以被浏览器缓存的,缓存时间由服务器发给客户端代理头部中的Last-modified、Etag或者Expires决定,所以缓存的时间长短,也成了优化速度的一个方面。我建议将js的缓存时间设置的较长,而如果一旦更改了js文件后,可以在引用url的js文件后加个自定义参数,来强迫客户端重新下载js。例如:

      <script src="http://js.phpblog.cn/jquery.js?var=2.0" type="text/javascript"></script>

    5. 删除代码中的注释、制表符、空格、换行,这样做可以有效减小 js文件的体积。我们可以使用现成的工具来做这件事情,例如我之前介绍过的Google Closure Compiler
    6. 替换变量名,将较长的变量名替换为较短的变量名,以减少js文件体积。这方面,用Google Closure Compiler也可以完成。
    7. 替换布尔值。我们知道,对于比较来说,true等于1,false等于0。因此,在脚本中的true、false都可以用1和0来代替,这样可以减少几个字节。
    8. 使用数组和对象字面量。例如,定义数组时,使用var o = new []而不使用var o = new Array;定义对象时,使用var o = {}而不使用var o = new Object,它们是完全等价的。

    二、优化代码执行时间

    1. 关注变量范围。在js中,变量范围是很重要的。我们可以认为变量的范围在浏览器中是一个树状层级,查找一个变量时,浏览器首先会在最近的范围中查找,如果没有找到,则会到它的父范围中查找,如果还没有找到,则再去父父的范围中查找,直到查找到window对象范围(浏览器默认的全局变量属于window对象)。这就说明,让浏览器最快的找到变量,就可以加快代码的执行速度。在js中,使用var定义的变量为局部范围变量,而不使用var定义的变量属于全局范围变量,所以,如果我们在某个方法中用到的变量,一定要将它定义成局部变量,这样就不会使浏览器一直找到window对象才获得该变量。和变量范围有关的另一个优化技巧就是,不使用with语句。因为with语句会创建另一个范围,增加了不必要的查找。
    2. 反转循环。在使用for循环时,我们经常这样用:

      for(i=0; i<100; i++) {}

      但是,你需要知道,将循环反转后,它的速度将更快:

      for(i=100; i>=0; i--) {}

      这是因为,使用常数0来做为判断依据速度更快。当然,使用while循环也可以反转(变换成do..while),具体方法,我就在这里不再赘述。

    3. 除了反转循环,我们还可以使用循环合并,来进一步提高循环的速度。关于循环合并的具体方法,我在这篇文章里已经介绍过。这里要特别说明的是,while循环也可以合并,方法和反转循环一样,也是使用do...while来替。
    4. 使用js的内置方法。例如,我们要计算一个数的阶乘,假如你不知道Math对象有个pow()方法的话,你很可能会自己写一个阶乘计算函数,但是要知道,这样做的效率是远远不如直接调用内置方法Math.pow()的,因为内置方法是用C++或C语言编译过的,速度要远远高于解释运行的js。
    5. 字符串连接优化。使用"+"来连接字符串的效率是很差的,尤其表现在一次连接多个字符串时,例如:

      var s = "a" + "b" + "c" + "d";

      因为此时js内部会进行多次连接操作,从而导致效率的下降。为了避免这个问题,我们可以使用Array.join()方法来代替:

      var a = ["a", "b", "c", "d"];
      var s = a.join();

    6. 存储常用的值。在js中,访问某个对象的属性,从效率上来说,都是非常昂贵的操作。所以可以将多次用到的值存储到一个变量里。例如,下面这个代码速度较慢:

      o1.style.left = document.body.clientWidth;
      o2.style.left = document.body.clientWidth;

      而下面的代码速度较快:

      var left = document.body.clientWidth;
      o1.style.left = left;
      o2.style.left = left;

    7. 在js中,脚本中的语句越少,执行速度越快。基于这个原则,我们可以知道,使用一个var来定义多个变量,要快于多个var定义。例如:

      var a = 1; b = 2; c = 3;

      要快于:

      var a = 1;
      var b = 2;
      var c = 3;

      同样,以下的代码:

      var s = a[i++];

      要快于:

      var s = a[i];
      i++;

    8. 节约使用DOM。在用js改变页面上任何一个元素的样式时(或者增加删除元素),都会导致浏览器重新渲染页面,这个开销是不小的。因此,在连续多次操作DOM时,我们可以先将所有变化保存到DOM碎片(fragment)中,然后再一次性操作页面DOM。例如:

      var arrText=["1","2","3","4","5","6","7","8","9","10"];
      var oFrag=document.createDocumentFragment();
      for(var i=0;i
      {
      var op=document.createElement("P");
      var oText=document.createTextNode(arrText[i]);
      op.appendChild(oText);
      oFrag.appendChild(op);

      }
      document.body.appendChild(oFrag);

    以上这些,只是我知道的一些优化方法,当然,js中的优化方法肯定不止这一些,我只能是抛砖引玉,更多的方法,还需要大家一起补充。

    转载请注明出处:http://www.phpblog.cn/archives/328

     
  • Google Wave邀请分享

    shishirui 13:42 on 2010/01/31 | 0 Permalink | Reply

    很久以前我们老大给过我Google Wave的邀请,当时玩儿了几天,后来就渐渐忘了这个东西了。今天突然想起,上去一看,wave生了小弟了,一共35个邀请,有感兴趣的朋友吗?如果有,请留下您的Gmail账户,我会在看到后第一时间发送邀请。Google Wave地址: https://wave.google.com

     
  • 使用Google的Closure Compiler来压缩javascript

    shishirui 14:43 on 2010/01/15 | 0 Permalink | Reply

    Closure Compiler是一个google出的用来压缩、检查javascript的工具。其项目地址在:http://code.google.com/closure/compiler/

    Closure Compiler的使用方法有如下3种:

    1. 在命令行下使用一个google编译好的java程序
    2. 使用google提供的在线服务
    3. 使用google提供的RESTful API

    下面我来分别介绍一下这3种方法的具体使用。

    1. 在命令行下使用一个google编译好的java程序

    这种方法最适合在linux命令行下开发的同学们。首先在 http://closure-compiler.googlecode.com/files/compiler-latest.zip 这里下载编译好的Closure Compiler,下载后,随便解压缩到一个目录,比如解压到当前用户的根目录:

    $ unzip compiler-latest.zip -d ~

    这时,除了几个说明文件外,还会有一个叫compiler.jar的文件出现,然后,我们就可以直接使用它来压缩,例如:

    $ java -jar ~/compiler.jar --js my_source.js --js_output_file my_package.js

    这样,就把 my_source.js压缩成my_package.js了。经过我的测试,压缩率较别的压缩工具来说,还是相当高的。

    如果想知道其他的可选参数,可以输入如下命令获得:

    $ java -jar ~/compiler.jar --help

    在压缩过程中,它还会告诉你的js文件中出现的错误,以及不建议使用的语法等,比如说不建议使用with语句,以及不建议使用没有大括号的if/while/for等等。

    2. 使用google提供的在线服务

    这种方法是最直观也是最容易使用的,但是缺点是麻烦,速度慢,而且不太方便压缩比较大的文件。

    使用方法为直接打开浏览器访问 http://closure-compiler.appspot.com/(可能需要翻墙) ,然后在里面的文本框中输入你想要压缩的js,然后点Complie按钮即可。

    3. 使用google提供的RESTful API

    这种方法比较灵活,但缺点也是无法压缩较大的文件(压缩本地文件时)。使用时,同学们可以使用自己擅长的语言,参考google 的 RESTful API文档编写自己的压缩器,API文档见 http://code.google.com/closure/compiler/docs/api-tutorial1.html 。原理大概就是将需要压缩的js内容或js文件所在url,以及必要的配置信息发送给google的服务器,然后接收google的响应,响应结果即为压缩后的内容。

    同学们可以在这3种方法中自己选择喜欢的方法。但我个人更喜欢使用第一种方法,因为不仅没有文件大小限制,而且速度很快。

     
  • iphone网页制作要点

    shishirui 20:19 on 2009/07/21 | 0 Permalink | Reply

    禁止页面缩放:

    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

    打电话链接的写法:

    <a href="打电话给你">21-12345678</a>

    自动滚屏隐藏地址栏:

    <script type="application/x-javascript">
    addEventListener("load",function() {
    setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar(){
    window.scrollTo(0, 1);
    }
    </script>

     
  • css中类似pre的样式

    shishirui 20:22 on 2009/07/14 | 0 Permalink | Reply

    /* 不自动换行 */
    white-space: pre;

    /* 自动换行 */
    white-space:pre-wrap;

     
  • CSS的阴影效果

    shishirui 19:14 on 2009/07/11 | 0 Permalink | Reply

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);

    注:IE无效

     
  • Browser-specific CSS hacks

    shishirui 18:48 on 2009/06/17 | 0 Permalink | Reply

    /***** Selector Hacks ******/

    /* IE6 and below */
    * html #uno  { color: red }

    /* IE7 */
    *:first-child+html #dos { color: red }

    /* IE7, FF, Saf, Opera  */
    html>body #tres { color: red }

    /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
    html>/**/body #cuatro { color: red }

    /* Opera 9.27 and below, safari 2 */
    html:first-child #cinco { color: red }

    /* Safari 2-3 */
    html[xmlns*=""] body:last-child #seis { color: red }

    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:nth-of-type(1) #siete { color: red }

    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:first-of-type #ocho {  color: red }

    /* saf3+, chrome1+ */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    #diez  { color: red  }
    }

    /* Safari 2 - 3.1 */
    html[xmlns*=""]:root #trece  { color: red  }

    /* Safari 2 - 3.1, Opera 9.25 */
    *|html[xmlns*=""] #catorce { color: red  }

    /* Everything but IE6-8 */
    :root *> #quince { color: red  }

    /* IE7 */
    *+html #dieciocho {  color: red }

    /***** Attribute Hacks ******/

    /* IE6 */
    #once { _color: blue }

    /* IE6, IE7 */
    #doce { *color: blue }

    /* Everything but IE6 */
    #diecisiete { color/**/: blue }

    /* IE6, IE7, IE8 */
    #diecinueve { color: blue\9; }

    /* IE7, IE8 */
    #veinte { color/*\**/: blue\9; }

     
  • FastCGI 不完全高级指南(PHP版,Windows平台)

    shishirui 17:07 on 2009/05/05 | 0 Permalink | Reply

    一、FastCGI是什么?
      FastCGI是语言无关的、可伸缩架构的CGI开放扩展,其主要行为是将CGI解释器进程保持在内存中并因此获得较高的性能。众所周知,CGI解释器的反复加载是CGI性能低下的主要原因,如果CGI解释器保持在内存中并接受FastCGI进程管理器调度,则可以提供良好的性能、伸缩性、Fail- Over特性等等。
        FastCGI的官方站点在http://www.fastcgi.com

      FastCGI的工作原理是:
      1、Web Server 启动时载入FastCGI进程管理器(IIS ISAPI或Apache Module);
      2、FastCGI进程管理器自身初始化,启动多个CGI解释器进程 (在任务管理器中可见多个php-cgi.exe)并等待来自Web Server的连接。
      3、当客户端请求到达Web Server时,FastCGI进程管理器选择并连接到一个CGI解释器。Web server将CGI环境变量和标准输入发送到FastCGI子进程php-cgi.exe。
      4、FastCGI子进程完成处理后将标准输出和错误信息从同一连接返回Web Server。当FastCGI子进程关闭连接时,请求便告处理完成。FastCGI子进程接着等待并处理来自FastCGI进程管理器(运行在 WebServer中)的下一个连接。 在正常的CGI模式中,php-cgi.exe在此便退出了。

      在上述情况中,你可以想象 CGI通常有多慢。每一个Web请求PHP都必须重新解析php.ini、重新载入全部dll扩展并重初始化全部数据结构。使用FastCGI,所有这些都只在进程启动时发生一次。一个额外的好处是,持续数据库连接(Persistent database connection)可以工作。

    二、为什么要使用FastCGI,而不是多线程CGI解释器?
      这可能出于多方面的考虑,例如:
      1、你无论如何也不能在windows平台上稳定的使用多线程CGI解释器,无论是IIS ISAPI方式还是APACHE Module方式,它们总是运行一段时间就崩溃了。奇怪么?但是确实存在这样的情况!
      当然,也有很多时候你能够稳定的使用多线程CGI解释器,但是,你有可能发现网页有时候会出现错误,无论如何也找不到原因,而换用FastCGI方式时这种错误的概率会大大的降低。我也不清楚这是为什么,我想独立地址空间的CGI解释器可能终究比共享地址空间的形式来得稳定一点点。
      2、性能!性能?可能么,难道FastCGI比多线程CGI解释器更快?但有时候确实是这样,只有测试一下你的网站,才能最后下结论。原因嘛,我觉得很难讲,但有资料说在Zend WinEnabler的时代,Zend原来也是建议在Windows平台下使用FastCGI而不是IIS ISAPI或Apache Module,不过现在Zend已经不做这个产品了。

    三、不使用FastCGI的理由
      1、多进程比多线程消耗更多的服务器内存,php-cgi.exe解释器每进程消耗7至25兆内存,将这个数字乘以50或100试试。
      2、性能。确实有时候多线程CGI解释器更快,呵呵,而且有时候,它也很稳定。
      3、CGI?听起来就很土,呵呵

    四、IIS FastCGI配置方法
      1、首先确定你已正确安装了PHP 4.3.x及更新的版本。早期版本的PHP并未默认加入FastCGI支持,如果你想在早期版本中工作,需要重新编译它。我们假设PHP安装在c:\php,支持FastFCGI的可执行文件名是php-cgi.exe。
        注意:建议在Php.ini中关闭cgi.force_redirect,启用fastcgi.impersonate,启用cgi.rfc2616_header

      2、下载http://www.caraveo.com/fastcgi/fastcgi-0.6.zip并将其中的isapi_fcgi.dll解压缩到c:\php目录下(不是必须在此目录,这里只是叙述方便)。

      3、使用regedit.exe建立如下注册表项:
      HKEY_LOCAL_MACHINE:Software\FASTCGI\.php (必需)

      4、在此项下建立如下键值:
      字符串类型:AppPath,值为c:\php\php-cgi.exe (必需)
      字符串类型:BindPath,值为php-fcgi      (必需)
      以下是可选配置键值:
      DWORD类型:StartServers,启动时默认启动的解释器个数,默认值5
      DWORD类型:MaxServers,最大解释器个数,默认25
      DWORD类型:IncrementServers,当解释器不够用时增量个数,默认2
      DWORD类型:Timeout,增量解释器(超出StartServers数目的)存活时间,默认600(秒)
      DWORD类型:ThreadPoolSize,线程池大小,仅IIS下有效,默认10
      DWORD类型:Impersonate,仅IIS有效,如果为1,使用IIS安全标志,为0则关闭此特性。不要关闭它除非你不担心安全问题。默认1
      DWORD类型:MaxPostData,Post数据预读Byte限制,默认0
      DWORD类型:BypassAuth,仅IIS有效,如果为1并且isapi_fcgi.dll被配置为IIS Filter,同时IIS被配置为使用BASIC Authentication,这将强制所有认证请求使用IIS匿名用户。这一选项的目的是允许脚本实现自己的安全机制。默认0
      BINARY类型:CustomVars,附加环境变量值,新行分隔,Null结束

      5、如果是IIS6,添加一个Web服务扩展指向c:\php\isapi_fcgi.dll,并允许。应用程序池中的“最大工作进程数”请保持为1。

      6、添加应用程序扩展映射关系:
             1). 在Internet信息服务管理器中,选择网站或应用程序的根目录。
             2). 打开目录属性页(右键选择“属性”),再选择“主目录”。
             3). 点击“配置”按钮,选择“映射”Tab页。
             4). 点击“添加...”,在“可执行文件”设为: c:\php\isapi_fcgi.dll,扩展名设为.php,一定要选择“确认文件是否存在”,然后“确定”保存设置。
             5). 再同样添加对.php3或.phtml扩展名的支持(可选)。
             6). 保存设定并重新启动IIS。

      7、测试一下,同时请求多个Web页面,然后察看任务管理器中的进程,页面完成后php-cgi.exe进程持续运行并不退出。

    五、Apache配置方法
      1、首先确定你已正确安装了PHP 4.3.x及更新的版本。早期版本的PHP并未默认加入FastCGI支持,如果你想在早期版本中工作,需要重新编译它。我们假设PHP安装在c:\php,支持FastFCGI的可执行文件名是php-cgi.exe。
        注意:建议在Php.ini中打开cgi.force_redirect,关闭fastcgi.impersonate,关闭cgi.rfc2616_headers。

      2、下载http://www.fastcgi.com/dist/mod_fastcgi-2.4.2-AP20.dll,放到Apache 2.x的Modules目录中。

      3、确定Apache 2.x在CGI方式下可以正常运行PHP。httpd.conf中存在如下几行:
        ScriptAlias /php/ "c:/php/"
        Action application/x-httpd-php "/php/php-cgi.exe"
        SetEnv PHPRC "C:/php"
        AddType application/x-httpd-php .php

      4、在httpd.conf中添加:
        LoadModule fastcgi_module modules/mod_fastcgi-2.4.2-AP20.dll
        # 说明:此处的 -processes 3 表示启动三个 php-cgi.exe 进程,
        # 关于 FastCgiServer 的详细参数请参考 FastCGI 文档。
        FastCgiServer "c:/php/php-cgi.exe" -processes 3

      5、重新启动Apache,测试同上。

    六、高级配置
      设想这样一种场景,你的服务器上同时跑Apache 2和IIS 6,两个Web服务器都跑php应用。那么,有如下三种可能:
      A、php使用iis isapi和apache module安装,均为多线程方式运行。这个和FastCGI没有关系。
      B、其中一个服务器使用FastCGI方式,另一个使用多线程方式。这个能运行正常。
      C、两个均使用FastCGI方式,这个往往不正常。一般表现为:
        两个服务器各自启动一些php-cgi.exe进程,然后服务器之一不解释php页面,或者隔一会儿就派生新的php-cgi.exe进程(可怕呀)。

      为什么呢?我想大概是因为上面使用的两个东西(iis isapi和apache module)的作者大概并没有想过要和对方同时使用吧,呵呵。想了想,Apache 2和IIS 6如果可以共用一批php-cgi.exe解释器就好了,既不浪费内存,估计也不会有调度问题了。
      经过研究和测试证明,这个想法是可行的。但是,由于Shane Caraveo并未在ISAPI DLL中提供使用外置FastCGI服务的功能,因此在此场景中只能是由IIS负责启动和管理php-cgi.exe,然后配置Apache去使用这些受 IIS管理的php-cgi.exe进程。

      配置方法:
      1、按上述四中的方法配置IIS FastCGI。
      2、基本按上述五中的方法配置Apache FastCGI,五.4改为在httpd.conf中添加:
        LoadModule fastcgi_module modules/mod_fastcgi-2.4.2-AP20.dll
        # 使用外部FastCGI服务器,请参考 FastCGI 文档。
        FastCgiExternalServer "c:/php/php-cgi.exe" -socket "php-fcgi"
      注意:-socket参数后的值必须与HKEY_LOCAL_MACHINE:Software\FASTCGI\.php中BindPath的值一致,这样两个FastCGI进程管理器才会使用同一个命名管道连接php-cgi.exe。

      注意:此配置中php-cgi.exe进程只受IIS中的FastCGI进程管理器管理, Apache的繁忙请求并不会使IIS中的FastCGI调度更多的php-cgi.exe进程。因此,在IIS中配置FastCGI时应当使 StartServers值足够大,以避免php解释器数量不足。同样带来的问题是,如果IIS关闭了,那么Apache就会找不到Php解释器了,这个要留心。

      由此带来的一个问题是:此时的php.ini中cgi.force_redirect、fastcgi.impersonate、cgi.rfc2616_headers应该怎么设定呢?这个留给大家去思考吧……呵呵

      另外一个可能遇到的问题是,IIS非常空闲,一段时间后由IIS启动的php-cgi.exe退出了,则apache就解释不了 Php了,怎么办呢?这时可以访问一下iis网站,php-cgi.exe就又起来了,晕哦。一个建议是使用IIS 6的进程池管理,在应用程序池中关掉“空闲超时”,并且,在“应用程序池标识”中将运行账号设定为与Apache服务启动账号一致。

     
  • 圆角矩形

    shishirui 10:25 on 2009/03/19 | 0 Permalink | Reply

    仅对firefox有效:

    -moz-border-radius-bottomleft:4px;
    -moz-border-radius-bottomright:4px;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;

     
  • jQuery语法总结和注意事项

    shishirui 09:51 on 2009/03/18 | 0 Permalink | Reply

    1、关于页面元素的引用
    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

    2、jQuery对象与dom对象的转换
    只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
    普通的dom对象一般可以通过$()转换成jquery对象。
    如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
    由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
    如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
    以下几种写法都是正确的:
    程序代码 程序代码
    $("#msg").html();
    $("#msg")[0].innerHTML;
    $("#msg").eq(0)[0].innerHTML;
    $("#msg").get(0).innerHTML;

    3、如何获取jQuery集合的某一项
    对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
    程序代码 程序代码
    $("div").eq(2).html();               //调用jquery对象的方法
    $("div").get(2).innerHTML;       //调用dom的方法属性

    4、同一函数实现set和get
    Jquery中的很多方法都是如此,主要包括如下几个:
    $("#msg").html();               //返回id为msg的元素节点的html内容。
    $("#msg").html("<b>new content</b>");
    //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

    $("#msg").text();               //返回id为msg的元素节点的文本内容。
    $("#msg").text("<b>new content</b>");
    //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

    $("#msg").height();               //返回id为msg的元素的高度
    $("#msg").height("300");       //将id为msg的元素的高度设为300
    $("#msg").width();               //返回id为msg的元素的宽度
    $("#msg").width("300");       //将id为msg的元素的宽度设为300

    $("input").val(");       //返回表单输入框的value值
    $("input").val("test");       //将表单输入框的value值设为test

    $("#msg").click();       //触发id为msg的元素的单击事件
    $("#msg").click(fn);       //为id为msg的元素单击事件添加函数
    同样blur,focus,select,submit事件都可以有着两种调用方法

    5、集合处理功能
    对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
    包括两种形式:
    程序代码 程序代码
    $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
    //为索引分别为0,1,2的p元素分别设定不同的字体颜色。

    $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
    //实现表格的隔行换色效果

    $("p").click(function(){alert($(this).html())})
    //为每个p元素增加了click事件,单击某个p元素则弹出其内容

    6、扩展我们需要的功能
    程序代码 程序代码
    $.extend({
    min: function(a, b){return a < b?a:b; },
    max: function(a, b){return a > b?a:b; }
    });       //为jquery扩展了min,max两个方法

    使用扩展的方法(通过“$.方法名”调用):
    alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

    7、支持方法的连写
    所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
    例如:
    $("p").click(function(){alert($(this).html())})
    .mouseover(function(){alert('mouse over event')})
    .each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

    8、操作元素的样式
    主要包括以下几种方式:
    $("#msg").css("background");               //返回元素的背景颜色
    $("#msg").css("background","#ccc")       //设定元素背景为灰色
    $("#msg").height(300); $("#msg").width("200");       //设定宽高
    $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
    $("#msg").addClass("select");       //为元素增加名称为select的class
    $("#msg").removeClass("select");       //删除元素名称为select的class
    $("#msg").toggleClass("select");       //如果存在(不存在)就删除(添加)名称为select的class

    9、完善的事件处理功能
    Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
    如:
    $("#msg").click(function(){alert("good")})       //为元素添加了单击事件
    $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
    //为三个不同的p元素单击事件分别设定不同的处理
    jQuery中几个自定义的事件:
    (1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
    //当鼠标放在表格的某行上时将class置为over,离开时置为out。
    $("tr").hover(function(){
    $(this).addClass("over");
    },
    function(){
    $(this).addClass("out");
    });
    (2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){alert("Load Success")})
    //页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
    (3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
    //每次点击时轮换添加和删除名为selected的class。
    $("p").toggle(function(){
    $(this).addClass("selected");
    },function(){
    $(this).removeClass("selected");
    });
    (4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
    例如:
    $("p").trigger("click");               //触发所有p元素的click事件
    (5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
    从每一个匹配的元素中(添加)删除绑定的事件。
    例如:
    $("p").bind("click", function(){alert($(this).text());});       //为每个p元素添加单击事件
    $("p").unbind();       //删除所有p元素上的所有事件
    $("p").unbind("click")       //删除所有p元素上的单击事件

    10、几个实用特效功能
    其中toggle()和slidetoggle()方法提供了状态切换功能。
    如toggle()方法包括了hide()和show()方法。
    slideToggle()方法包括了slideDown()和slideUp方法。

    11、几个有用的jQuery方法
    $.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
    $.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

    $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
    等价于:
    var tempArr=[0,1,2];
    for(var i=0;i<tempArr.length;i++){
    alert("Item #"+i+": "+tempArr[i]);
    }
    也可以处理json数据,如
    $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
    结果为:
    Name:name, Value:John
    Name:lang, Value:JS
    $.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
    如:
    $.extend(settings, options);
    //合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在setting中。
    var settings = $.extend({}, defaults, options);
    //合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
    可以有多个参数(合并多项并返回)
    $.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
    如:
    var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
    tempArr内容为:[4,5,6]
    var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
    tempArr内容为:[2,3]
    $.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
    如:$.merge( [0,1,2], [2,3,4] )       //返回[0,1,2,3,4]
    $.trim(str):删除字符串两端的空白字符。
    如:$.trim("   hello, how are you?   ");         //返回"hello,how are you? "

    12、解决自定义方法或其他类库与jQuery的冲突
    很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
    使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。
    如:
    jQuery.noConflict();
    // 开始使用jQuery
    jQuery("div   p").hide();
    // 使用其他库的 $()
    $("content").style.display = 'none';

     
c
撰写新文章
j
下一篇
k
上一篇
r
回复
e
编辑
o
显示/隐藏评论
t
返回顶部
esc
关闭