jQurey是一套脚本库,能够帮我们完成业务上的功能,jQuery是一套javascript脚本库,有了它我们不必再为了实现一些特效而费时费力的去编写javascript脚本(javascript脚本的编写是一件很头疼的事情,当然写好的话也是相当牛的)。
jQuery有如下的特点:
1.提供强大的功能函数
有了这些功能强大的函数,我们可以完成很多功能,而且代码看起来也很简洁
2.解决浏览器兼容性问题
javascript的兼容性问题一直是的很严重的问题,很多页面在IE和其他浏览器的显示下是不一样的,但jQuery和好的解决了这一问题,从此页面开发人员不用再为此头疼,同事jQuery是开源的,看发人员也可以从中学习到很多javascript知识。
3.实现丰富的UI
jQuery可以实现渐变弹出,图层移动等动画效果,
好了,jQuery的好处是相当多的,在此就不再多说了,让我们在他的使用中慢慢品味吧!
hello jquery!
让我们先写一个jQuery的例子,和jQuery初次见面。
当然在使用之前,我们必须先安装jQuery类库,
下载地址 :
http://code.google.com/p/jqueryjs/downloads/list
开始编写程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello jQuery</title> <mce:script type="text/javascript" src="jquery-1.3.2-vsdoc2.js" mce_src="jquery-1.3.2-vsdoc2.js"></mce:script> </head> <body> <div id="divMsg">Hello jQuery</div> <input id="btnShow" type="button" value="显示"></input> <input id="btnHide" type="button" value="隐藏"></input> <input id="btnChange" type="button" value="修改内容"></input> <mce:script type="text/javascript"><!-- $("#btnShow").bind("click", function(event) { $("#divMsg").show(); }); $("#btnHide").bind("click", function(event) { $("#divMsg").hide(); }); $("#btnChange").bind("click", function(event) { $("#divMsg").html("Hello World, too!"); }); // --></mce:script> </body> </html>
此示例使用了:
(1) jQuery的Id选择器:$("#btnShow")
(2) 事件绑定函数bind()
(3) 显示和隐藏函数show(),hide()
(4) 修改内部html的函数html()
接下里我们使用vs启用vs对jQuery的智能感知
要让vs支持智能感知需要下列条件
1.安装vs2008 sp1
<!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:Verdana; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:536871559 0 0 0 415 0;} @font-face {font-family:"/@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} a:link, span.MsoHyperlink {color:blue; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {color:purple; text-decoration:underline; text-underline:single;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:1527325948; mso-list-template-ids:485683526;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:o; mso-level-tab-stop:36.0pt; mso-level-number-position:left; text-indent:-18.0pt; mso-ansi-font-size:10.0pt; font-family:"Courier New"; mso-bidi-font-family:"Times New Roman";} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} -->
下载地址 : http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
2. <!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:Verdana; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:536871559 0 0 0 415 0;} @font-face {font-family:"/@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} --> 安装 VS 2008 Patch KB958502 以支持 "-vsdoc.js"Intellisense 文件 .
下载地址;http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
3. <!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:Verdana; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:536871559 0 0 0 415 0;} @font-face {font-family:"/@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:1527325948; mso-list-template-ids:485683526;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:o; mso-level-tab-stop:36.0pt; mso-level-number-position:left; text-indent:-18.0pt; mso-ansi-font-size:10.0pt; font-family:"Courier New"; mso-bidi-font-family:"Times New Roman";} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} --> 必须要引用 vsdoc 版本的 jquery 库
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
有了智能感知我们可以像写C#一样方便的写jQuery了。
后续我们将介绍jQuery选择器,事件,工具函数,动画,以及插件。。。