Loading...

jQuery使用手记

2007-08-28 10:28:30 发表于HTML客户端, 网站技术 本文链接: jQuery使用手记

jQuery是一个强大的JS开发框架,通过这个框架可以大大简化编写js代码的劳动,甚至可以用很简单的几行代买实现比较复杂的效果,而且还集成了ajax,那是相当的方便。其实我本人一直是比较不原意使用现成的库的,毕竟库为了设计的完整性,肯定会比较庞大,而且如果你仅仅用了其中功能的一少部分那更是浪费,而这个jQuery如果不压缩的话居然有65.7 KB,不过后来我还是动摇了,因为经过gzip压缩之后代码就仅仅只有10K左右了,无非就一个logo文件的大小而已,所以我已经开始采用这个框架了,下面就介绍一下jQuery的使用。

jQuery其实就是一个js文件,在html文件中调用了这个文件之后就可以随意引用了,首先去http://docs.jquery.com/Downloading_jQuery下载这个文件,如果你不想研究这个代码,你可以下载compressed(压缩后的版本),下载完毕之后放在你js文件夹下,下面开始给几个案例,我个人认为入门最好的方式就是案例。

首先,jQuery获取html元素是相当简单的,你不需要再用document.getElementById(”id”)了,只需要简单的用$(”#id”)即可,元素的选择和css的选择方式一致,不信请看下面的例子:

div innerHTML


或许你已经很清楚了,如果要选择所有的链接元素用$(”a”)即可,所有的div用$(”div”),class为css1的div用$(”div.css1″),等等,利用这样的方式你可以方便的对html任何元素进行操作了,是不是很激动呢?

下面再来一个例子介绍一下用jQuery实现滑动菜单,相关的说明在注释中:

  • Parent Menu
    • sub1
    • sub2
  • Parent Menu2
    • sub12
    • sub22



大家可以自行测试看看效果,是不是很cool呢?当然,如果利用了绑定技术,完全可以不用在li里面写onClick函数了,这个是后话,一次介绍太多可能消化不良,后面再介绍吧。

ajax就更简单的,如$(’#div1′).load(’demo.html’);就是将demo.html中的数据载入到id=div1的div中,调一下大家的胃口,后面再介绍了,呵呵…

对,是应该加上演示,看看这个页面吧demo.html,或者下面的Iframe

该日志未加标签
发表于 2007-08-28 10:28:30 目录:HTML客户端, 网站技术 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 相关阅读
  • feed url
    feed url
    下一篇: 免费的=不稳定? »
    已经有3位大师动手指导 拒绝低俗
    • 1楼 tsian 在2007.08.28 11:59发表评论如下: 回复

      我喜欢看技术型的帖子。
      可惜没有实际效果演示~

      • 2楼 Taoii 在2007.08.28 18:12发表评论如下: 回复

        唉,真的是不知道我什么时候才能开始这样玩PHP、Ajax这些玩意哦

        • 3楼 Jake 在2007.08.31 11:33发表评论如下: 回复

          500页的prototype and scriptaculous in action都打印出来了,发现自己又喜欢上jQuery了。唉~

          评论分页: 1
          (Required)
          (Required, not published)
          如果留言未显示无需重复留言,我将为你恢复!