使用jQuery进行便捷web开发

2008-03-15 23:18:55

咳咳~这个题目~不废话吗~谁写JS框架是为了进行“笨重”开发?嗯~这个~囧~OK,不废话了…接触jQuery有一段时间了,关于jQuery本身我就不再多做介绍,大家可以随意google或者baidu,也可访问jQuery的官方网站~…个人认为只要稍有编程基础,jQuery的学习还是比较轻松的。当然如果你掌握一点DOM,CSS的知识就更好了~这不是一篇教程,而是一点个人学习的总结,所以谈及比较重要的一些知识点。

使用jQuery进行开发时需要改变一些惯有的编程习惯,或者说是编程风格。其中最重要的一点便是DOM对象和jQuery对象之间的类型转换。因为单纯的jQuery对象是无法使用DOM定义的方法和属性的,jQuery对象和DOM对象之间的方法是不能混用的。比如有$(“.myClass”)这样一个jQuery对象,可以通过以下方法来进行类型的转换:

  1. $(“.myClass”)[0],直接获取该jQuery对象中的第一个元素。当然如果你是$(“#myId”)[0]那么实际上返回的就是id值为“myId”的DOM对象。
  2. $(“.myClass”).get(0),其等价于$(“.myClass”)[0],没什么区别

$(document).ready(function(){}),$(function(){})和jQuery(function(){})这三种写法有什么区别吗?我现在也没弄清楚。在传统的javascript中,window.onload似乎是用来装载JS的唯一方法,但是这个方法却有明显的弊端。因为onload事件本身就是在整个页面内容下载完成后才触发,包括图片。但实际上在很多时候这是不需要的,JS很多时候用来操纵DOM,那么只需要DOM树下载完成就可以了,那么这个时候你就可以用$(document).ready()来,DOM树装载完成即可触发。

jQuery支持方法的连写,什么意思?在传统JS中一个链接的简单hover效果你需要分别为onmouseover和onmouseout事件定义事件函数。但是在jQuery中可以这样写

  1. $("#myLink").mouseover(function(){}).mouseout(function())

怎么样?很简单吧~当然你如果愿意你可以继续在后面添加事件函数,比如:

  1. $("#myLink").mouseover(function(){}).mouseout(function()).click(function(){}).addClass("myClass")

同一函数实现set和get。比如html():

  1. alert($("#myId").html())    //get
  2. $("#myId").html(<p>文本段落</p>)    //set

这类函数即可以用来获取值,同时也能设置值。这样的函数还有:text(),height(),weidth(),val(),其实css(),click()也可以算是这类函数~···,这样一来其实整个jQuery里面的函数很多都是既可以set也可以get的~

jQuery中的事件触发皆省略掉传统javascript中的on,本文前面已有例子。比如传统方法你得这样写:

  1. myElement.onclick=function(){}

而在jQuery中你可以简单地写成这样:

  1. myElement.click(function(){})

除此之外jQuery中还有一些自定义的事件:hover(),ready(),toggle(),triggle(),bind(),unbind(),这些事件函数具体定义请参考jQuery的API,在此不作赘述。

浏览器的判断$.browser,可用值:safari,opera,msie,mozilla。该属性在DOM装载完成之前就是有效的,故可以通过此属性先判断浏览器类型,再为特定浏览器编写程序。

  1. if($.browser.msie){alert("this is ie")}

利用noConflict()实现多库共存。我们知道这个地球上不止jQuery这样一个JS框架,还有大名鼎鼎的prototype,YUI,Dojo等~有时难免会同时使用多个框架,难免发生命名冲突。就比如“$”在prototype和jQuery中都有定义,如不做处理必然导致命名冲突。那么这时候我们就可以使用noConflict()函数将变量$的控制权让渡出来。

  1. jQuery.noConflict();    //转让控制权
  2. jQuery("div p").hide();    // 使用 jQuery
  3. $("content").style.display = 'none';    //使用其他库的 $()

…….

除此之外,jQuery强大的选择器,是学习jQuery必须牢固掌握的,关于jQuery选择器,将单独撰文介绍~

严格来说jQuery只是一个封装了一些函数的JS类库,如果你熟悉javascript,那么掌握jQuery应该来说是没有任何难度的,所以jQuery很多精髓的东西可能还是其一些功能强大 的函数,函数的具体使用介绍可参考jQuery的API。同时互联网上也有很多jQuery的学习资料,稍花时间便可掌握。

附:一些jQuery学习资源

不能失去激情

2008-03-15 11:42:03

昨晚上3点钟才睡觉~···汗,可能是几个月来睡得最晚的一次了~···今早8:30起的床,其实8点就醒了,然后躺着想问题~想什么记不得了~囧~然后又是折腾到现在~···

折腾什么呢?测试插件~···住的地方网速似乎不是很快,有的插件也不小,同时文件很多~···传起来就有点慢了~···折腾了这么久貌似没有什么成效,装的相关日志那个插件,CSS还有问题,会与WP-Syntax有点冲突,凭己之力是无法搞定了~···

我前两天好像看到有人说WP用的jQuery?我在WP的文件目录中看到既有prototype又有jQuery,但是自带的jQuery貌似有问题无法使用~最后重新下载jQuery覆盖之就OK了~

随机地修改一些wondger.com下的链接,原有的一些图片都太大,会影响“相关日志”列表,写句代码判断下改小一点,并支持在新窗口查看原图~

这个theme是别人的,我小改了一下,但是还是不那么得心应手。有时间好好研究下WP,然后自己写个theme吧~其实~···早就画出来了~··· 嗯,等有空吧~···

貌似我还是很有激情滴~···orz~

omiga横空出世

2008-03-14 15:18:15

改名换姓,重新做人~!

自己也不知道要怎么念“wondger”,所以干脆直接起个响亮的名头——“omiga” ~

这个名字是很久很久以前,高中时同桌一MM起得,哈哈~当时总把名字中的“W”写成“ ω”,于是乎,有了这个名字,我还比较喜欢,至少叫起来比较上口~···YYing~- -!

中文版本:噢咪咖

纯天然绿色无污染logo:Ω

多么完美~···

从PJBlog到wordpress还算比较顺利,新买的空间自己也比较满意,速度还不错~···感谢PJBlog陪我度过的五个月时间~···今天正式拥抱wordpress~···

原来wondger.com的友情链接我会部分转移到该域名下~其实那个米也有3的PR值~···

最后——闭幕词

感谢CCTV,ChinaTV,MV~···感谢TV~···感谢叉叉TV~···还有~···

感谢伟大的PJBlog~···

感谢伟大的WordPress~···

感谢伟大的me~···

最后再感谢爹地,妈咪~···

PJBlog 2 WordPress 进行时~

2008-03-10 22:50:55

准备投奔WP了,其实最开始建立这个blog时就考虑过用WP,但是由于种种原因没有用,投奔WP 是一直的愿望~···

PJblog用了几个月了,其实还算不错,但是我准备换个快点的空间,那么就随便把blog转到WP,PJblog到WP的数据转换 还是比较容易的,wordpress中文论坛也有一个专门讨论各种blog程序到wp的转换方法:http://wordpress.org.cn/thread-7278-1-1.html

我用的http://old.marmotd.com/2007/10/asp-to-wordpress-tool.html,转换非常完美。

能将数据完好转换过去工作就完成了一半,剩下的一半就是买空间了。最近事情也比较多,上次在QQ签名上说要买PHP空间,结果一大推人找我卖~··· ,但是都不太满意~····继续找,有人给我介绍dreamhost,很好很强大~···但是不知道操作起来是否方便~考察中~“`哪位同学有好的建议,也欢迎留言~···

还有一个十分棘手的问题是,我的网上银行密码给忘记了~···恩~···周末去找回来~···

line-height and relative

2008-03-06 16:25:21

且先在FF和IE中查看页面显示差异~···Demo

很多时候需要在一个容器的右边添加一个“more”,我不喜欢浮动,惯用的做法是使用绝对定位。那么为其父层设置position:relative,同时为了保证文本垂直居中对齐,并为之添加line-height属性。有时候line-height是可以当height用的,因为line-height也可以撑开高度。当时这种做法会在IE中产生问题~···Y?不知道~···解决办法依然是触发对象的layout属性~···

Page 3 of 41234