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
  • 相关阅读
  • homezz 美国专业主机商
    feed url
    下一篇: 免费的=不稳定? »
    已经有4位大师动手指导 拒绝低俗
    • 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了。唉~

          • 4楼 如何在wordpress插件中实现ajax | 【黑】·〖红〗 在2012.03.03 00:38发表评论如下: 回复

            […] Ajax其实没有传说中的那么复杂的,只要你稍微熟悉一点javascript就能自己写ajax程序了.在这里我想稍微纠正一些观点,那就是大家常说的那些滑动门技术,那些很炫的div特效其实和ajax技术无关的,仅仅是通过js捕获鼠标事件再加上CSS美化完成的,而Ajax=>AsynchronousJavaScript+XML,说白了就是异步载入XML数据的一种javascript实现罢了. 通过ajax,我们可以在指定的DIV内根据需要在需要的时候载入数据从而实现无刷新更新内容.由于ajax获取的仅仅是需要的数据,所以变相的节约了网络中传输的数据量,提高了页面的载入速度,这也就是ajax能提速的原因,记住,这是ajax能提速的唯一的地方.所以千万别太迷信ajax的提速效果.关于ajax的实现,网络上可以google一大堆代码出来,所以我这里就不重复了.我推荐大家用jquery这个js框架,而不是自己去写复杂的ajax,具体的jquery和ajax请参考我的这篇文章. […]

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