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的选择方式一致，不信请看下面的例子:
- <div id="div1" class="css1"> <b>div innerHTML </b></div>
- <input type="button" onClick="test1();" value="demo1" />
- <script LANGUAGE="JavaScript">
- <!--
- function test1(){
- alert("html:" + $("#div1").html() );//获取innerHTML
- alert("text:" + $("#div1").text() );//获取innerText
- alert("下面将利用函数设置html");
- $("#div1").html("<i>haha"); //设置innerHTML
- alert("通过css dom来获取对应的element");
- alert("html:" + $("div.css1").html() );//通过css的class元素定位方式获取html元素
- }
- //-->
- </script>
或许你已经很清楚了，如果要选择所有的链接元素用$(”a”)即可，所有的div用$(”div”),class为css1的div用$(”div.css1″),等等，利用这样的方式你可以方便的对html任何元素进行操作了，是不是很激动呢？
下面再来一个例子介绍一下用jQuery实现滑动菜单，相关的说明在注释中：
- <ul>
- <li class="parent" id="m1" onClick="slide('m1')">Parent Menu
- <ul style="display:none">
- <li>sub1</li>
- <li>sub2</li>
- </ul>
- </li>
- <li class="parent" id="m2" onClick="slide('m2')">Parent Menu2
- <ul style="display:none">
- <li>sub12</li>
- <li>sub22</li>
- </ul>
- </li>
- </ul>
- <script LANGUAGE="JavaScript">
- <!--
- function slide(id){
- $("li.parent ul").hide();//通过css定位，将li class=parent 下面的ul全部隐藏
- $("li#"+id+" ul").show("slow");//显示特定的li id=id下面的ul
- }
- //-->
- </script>
大家可以自行测试看看效果，是不是很cool呢？当然，如果利用了绑定技术，完全可以不用在li里面写onClick函数了，这个是后话，一次介绍太多可能消化不良，后面再介绍吧。
ajax就更简单的，如$(’#div1′).load(’demo.html’);就是将demo.html中的数据载入到id=div1的div中,调一下大家的胃口，后面再介绍了，呵呵…
对，是应该加上演示，看看这个页面吧demo.html，或者下面的Iframe
订阅
前3排已经被占据了 快抢好位置哦
我喜欢看技术型的帖子。
可惜没有实际效果演示～
唉，真的是不知道我什么时候才能开始这样玩PHP、Ajax这些玩意哦
500页的prototype and scriptaculous in action都打印出来了，发现自己又喜欢上jQuery了。唉~