鸣谢张子秋博客 、baidu 、 googlewiki

 

JQuery--概念篇                                                

jQuery是一套跨浏览器JavaScript,强化HTMLJavaScript之间的操作。由John Resig20061BarCamp NYC上释出第一个版本。目前全球有28%的站台使用jQuery,是目前最受欢迎的JavaScript库。

JQ官方网站http://jquery.com/

 

简介

jQuery免费且开放源代码,使用GPLMIT许可证双协议。jQuery的语法设计使得许多操作变容易,如操作文档对象(document)、选择DOM元素、动画效果、事件处理、发展Ajax以及其他功能。除此之外,jQuery提供API让开发者将自己所写的功能融入jQuery内。

微软诺基亚20089时宣布,会在他们的平台上内置jQuery。微软同时将jQuery与其开发工具Microsoft Visual Studio集成。

jQuery 1.3版以后,引入全新的CSS选择器引擎Sizzle。 同时不再提供Packed版本,因为解压缩的消耗的时间,远大于所节省的下载时间,且不利于Debug,且已有Google AJAX Libraries API等公开站台提供jQueryjs的引用服务,故Packed版本原本的优点已荡然无存。

 

特点

例如:jQuery 有下列特色:

· 跨浏览器的DOM元素选择

· DOM 巡访与更改 —— 支持 CSS 1-3 与 基本的XPathjQuery 1.2版以后默认取消XPath支持,改为插件支持

· 事件(Events

· CSS操纵

· 特效和动画

· Ajax

· 延伸性(Extensibility

· 工具 —— 例如浏览器版本和each函数。

· JavaScript插件

· 轻量级

· DHTML DOM选择器与链式语法

经由jQueryDHTML DOM选择器,可以更容易的操作在复杂的树状HTML中的任何DHTML DOM对象,并可用链式语法对同一对象的不同属性进行操作。 

例如: $("p.surprise").addClass("ohmy").show("slow");

相当于 

1 查找HTML<p>标签,且其class"surprise"DHTML DOM对象

1 将其Class属性多加上一个"ohmy"(通常是配CSS的定义做显示时的配色修改)

1 打开显示

· CSS 1-3 选择器 —— 支持CSS选择器选定DOM对象。

· 跨浏览器 —— 跨浏览器的AJAX解决方式,支持Internet Explorer 6.0+Opera 9.0+Firefox 2+Safari 2.0+Google Chrome 1.0+

§ 简单 —— 较其它JavaScript库更易于入门。

 

找你很容易

在编写js库代码时候,你一定经常和$美元符号打交道吧?无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了,但是,它的功能远非如此,瞧瞧以下的jQuery代码,你就会发现它的美丽:   

 var someElement = $("#myId");   

看起来比其他两个框架的要多了一个#,好,看看下面的用法:   

$("div p"); // (1) 

$("div.container"); // (2)   

$("div #msg"); // (3)   

$("table a",context); // (4)

   

 prototype里看过这样的写法吗?第一行代码得到所有div标签下的p元素。第二行代码得到class containerdiv元素,第三行代码得到标签下面idmsgdiv元素(不过最好别这样写,因为jQuery需要遍历所有的div元素,对于带id的元素,直接用$("#id"))。第四行代码得到context为上下文的table里面所有的连接元素。   

如果你熟悉CSS,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jQuery就是如此强大,你可以轻易地找到DOM中的任何元素,而这也是jQuery设计之初query的真实含义(查询)。

JQuery对象

jquery提供了很多遍历的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分):   

代替body标签的onload

这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:   

$(document).ready(function(){   

alert("hello");   

});(1)   

<body onload="alert('hello');">(2) 

  

 

上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。   

不管怎么说,这个惯例可以分离javascrīptHTML。推荐使用。

添加VS智能提示

不再复述如何安装VSjQuery的智能感知,可以参考http://hi.baidu.com/tianhaoer/blog/item/f335818f213dacf1503d9277.html。注意,这里要安装的是针对VS2008SP1的补丁。

 

参考资料

jQ官方网站 http://jquery.com/

百度百科 http://baike.baidu.com/view/1020297.htm

启用VSjQuery的智能感知http://hi.baidu.com/tianhaoer/blog/item/f335818f213dacf1503d9277.html

Wiki百科http://zh.wikipedia.org/zh/JQuery

var a = $("#cid");   

var b = $("<p>hello</p>");   

var c = document.createElement("table");   

var tb = $(c);