使用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学习资源

class和className

2008-01-25 21:55:25

不管是对象class属性的获取还是设置在IE和FF中皆是有所区别的。
IE中不管是使用HTML-DOM还是DOM-CORE,class属性的获取只能通过对象的className属性来完成。即只能通过obj.className,obj.setAttribute(className),obj.getAttribute(className)的方式完成。

FF中class属性的设置严格来说其实都是能够通过class和className来完成的,但是class属性并不能真正意义上的class属性的相关操作,即你通过class为对象设置class属性赋予样式,但这个样式并不会应用成功,同时你却又可以通过obj.class获取该class属性,所以此class非彼class。而要成功的完成对象class属性的设置FF中HTML-DOM和DOM-CORE是不尽相同的。FF中使用HTML-DOM方法时,只能通过className完成,与IE一致,但是使用DOM-CORE方式是却只能由class来完成。