使用jQuery进行便捷web开发

omiga — Sat, 15 Mar 2008 15:18:55 +0000

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

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

$(“.myClass”)[0]，直接获取该jQuery对象中的第一个元素。当然如果你是$(“#myId”)[0]那么实际上返回的就是id值为“myId”的DOM对象。
$(“.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中可以这样写

$(“#myLink”).mouseover(function(){}).mouseout(function())
怎么样？很简单吧～当然你如果愿意你可以继续在后面添加事件函数，比如：

$(“#myLink”).mouseover(function(){}).mouseout(function()).click(function(){}).addClass(“myClass”)

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

alert($(“#myId”).html()) //get
$(“#myId”).html(

文本段落

) //set

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

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

myElement.onclick=function(){}

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

myElement.click(function(){})

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

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

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

jQuery.noConflict(); //转让控制权
jQuery(“div p”).hide(); // 使用 jQuery
$(“content”).style.display = ‘none’; //使用其他库的 $()
…….

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

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

附：一些jQuery学习资源

class和className

omiga — Fri, 25 Jan 2008 21:55:25 +0000

不管是对象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来完成。

omiga » DOM

使用jQuery进行便捷web开发

class和className