jQuery使用手记

来源：互联网发布：java线程池源码编辑：程序博客网时间：2024/06/03 21:18

jQuery是一个强大的JS开发框架，通过这个框架可以大大简化编写js代码的劳动，甚至可以用很简单的几行代买实现比较复杂的效果，而且还集成了ajax，那是相当的方便。其实我本人一直是比较不原意使用现成的库的，毕竟库为了设计的完整性，肯定会比较庞大，而且如果你仅仅用了其中功能的一少部分那更是浪费，而这个jQuery如果不压缩的话居然有65.7KB，不过后来我还是动摇了，因为经过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>divinnerHTML </b></div>
<input type="button" onClick="test1();"value="demo1"/>
<scriptLANGUAGE="JavaScript">
<!--
functiontest1(){
alert("html:" + $("#div1").html() );//获取innerHTML
alert("text:" + $("#div1").text() );//获取innerText
alert("下面将利用函数设置html");
$("#div1").html("<i>haha"); //设置innerHTML
alert("通过cssdom来获取对应的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')">ParentMenu
<ul style="display:none">
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
<li class="parent" id="m2" onClick="slide('m2')">ParentMenu2
<ul style="display:none">
<li>sub12</li>
<li>sub22</li>
</ul>
</li>
</ul>
<scriptLANGUAGE="JavaScript">
<!--
functionslide(id){
$("li.parent ul").hide();//通过css定位，将liclass=parent 下面的ul全部隐藏
$("li#"+id+" ul").show("slow");//显示特定的liid=id下面的ul
}
//-->
</script>

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

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

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

js, web