jQuery使用手记

jQuery是一个强大的JS开发框架，通过这个框架可以大大简化编写js代码的劳动，甚至可以用很简单的几行代买实现比较复杂的效果，而且还集成了ajax，那是相当的方便。其实我本人一直是比较不原意使用现成的库的，毕竟库为了设计的完整性，肯定会比较庞大，而且如果你仅仅用了其中功能的一少部分那更是浪费，而这个jQuery如果不压缩的话居然有65.7 KB，不过后来我还是动摇了，因为经过gzip压缩之后代码就仅仅只有10K左右了，无非就一个logo文件的大小而已，所以我已经开始采用这个框架了，下面就介绍一下jQuery的使用。

jQuery其实就是一个js文件，在html文件中调用了这个文件之后就可以随意引用了，首先去http://docs.jquery.com/Downloading_jQuery下载这个文件，如果你不想研究这个代码，你可以下载compressed（压缩后的版本），下载完毕之后放在你js文件夹下，下面开始给几个案例，我个人认为入门最好的方式就是案例。

首先，jQuery获取html元素是相当简单的，你不需要再用document.getElementById(”id”)了，只需要简单的用$(”#id”)即可，元素的选择和css的选择方式一致，不信请看下面的例子:

1. <div id= "div1" class= "css1"> <b>div innerHTML </b></div>
2.  <input type= "button"  onClick= "test1();" value= "demo1" />
3.   <script LANGUAGE= "JavaScript">
4.   <!-- 
5.         function test1 ( ) {
6.            alert ( "html:" + $ ( "#div1" ).html ( ) ); //获取innerHTML
7.            alert ( "text:" + $ ( "#div1" ).text ( ) ); //获取innerText
8.            alert ( "下面将利用函数设置html" );
9.            $ ( "#div1" ).html ( "<i>haha" ); //设置innerHTML       
10.            alert ( "通过css dom来获取对应的element" );
11.            alert ( "html:" + $ ( "div.css1" ).html ( ) ); //通过css的class元素定位方式获取html元素
12.         }
13.        
14.   //-->
15.   </script>

或许你已经很清楚了，如果要选择所有的链接元素用$(”a”)即可，所有的div用$(”div”),class为css1的div用$(”div.css1″),等等，利用这样的方式你可以方便的对html任何元素进行操作了，是不是很激动呢？

下面再来一个例子介绍一下用jQuery实现滑动菜单，相关的说明在注释中：

1. <ul>
2. <li class= "parent" id= "m1" onClick= "slide('m1')">Parent Menu
3.         <ul style= "display:none">
4.         <li>sub1</li>
5.         <li>sub2</li>
6.         </ul>
7. </li>
8. <li class= "parent" id= "m2"  onClick= "slide('m2')">Parent Menu2
9.         <ul style= "display:none">
10.         <li>sub12</li>
11.         <li>sub22</li>
12.         </ul>
13. </li>
14. </ul>
15. <script LANGUAGE= "JavaScript">
16.   <!--
17.        
18.         function slide (id ) {
19.          $ ( "li.parent ul" ).hide ( ); //通过css定位，将li class=parent 下面的ul全部隐藏
20.          $ ( "li#"+id+ " ul" ).show ( "slow" ); //显示特定的li id=id下面的ul
21.         }
22.        
23.   //-->
24.   </script>

大家可以自行测试看看效果，是不是很cool呢？当然，如果利用了绑定技术，完全可以不用在li里面写onClick函数了，这个是后话，一次介绍太多可能消化不良，后面再介绍吧。

ajax就更简单的，如$(’#div1′).load(’demo.html’);就是将demo.html中的数据载入到id=div1的div中,调一下大家的胃口，后面再介绍了，呵呵…

对，是应该加上演示，看看这个页面吧demo.html，或者下面的Iframe

js, web