1.下载jQuery类库
jQuery的项目下载放在了Google Code上, 下载地址:
http://code.google.com/p/jqueryjs/downloads/list-------下面几个文件在官网都有下载 不做说明
上面的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类:
min: 压缩后的jQuery类库, 在正式环境上使用.如:jquery-1.3.2.min.js
vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如：jquery-1.3.2-vsdoc2.js
release包: 里面有没有压缩的jquery代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip
2.编写程序
引用一个实例
<!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 runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<div id="divMsg">Hello World!</div>
<input id="btnShow" type="button" value="显示" />
<input id="btnHide" type="button" value="隐藏" /><br />
<input id="btnChange" type="button" value="修改内容为 Hello World, too!" />
<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!"); });
</script>
</body>
</html>
代码简答明了
此示例使用了:
(1) jQuery的Id选择器: $("#btnShow")
(2) 事件绑定函数 bind()
(3) 显示和隐藏函数. show()和hide()
(4) 修改元素内部html的函数html()
例子1： 引入min版本只能是1.2.6其他版本 会出现错误
<script src="Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<%
if (false) {
%>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<%
}
%>
（1）jq ID选择器 实例：
查找 ID 为"myDiv"的元素。
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div>jQuery 代码:
$("#myDiv");结果:
[ <div id="myDiv">id="myDiv"</div> ]
（2）事件绑定函数 bind()
（2）事件绑定函数 bind()
bind(type, [data], fn)
为每个匹配元素的特定事件绑定事件处理函数。
.bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象，比如focus, mouseover, 和 resize，都是可以作为type参数传递进来的。
jQuery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.bind('click')。一共有以下这些：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
.bind()最基本的用法是：
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
这个代码能使ID为foo的元素响应click事件。当用户点击元素内部之后，就会弹出一个警告框。
多个事件
依次可以绑定多个事件类型，每个事件类型用空格分隔：
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
这个代码让一个<div id="foo">元素（初始情况下class没有设置成entered），当鼠标移进去的时候，在class中加上entered，而当鼠标移出这个div的时候，则去除这个class值。
在jQuery 1.4中，我们也可以通过传入一个映射对来一次绑定多个事件处理函数：
$('#foo').bind({
click: function() {
// do something on click
},
mouseenter: function() {
// do something on mouseenter
}
});
(3) 显示和隐藏函数. show()和hide()
1.基本的：show hide toggle 三者的属性
<script type="text/javascript">
$(document).ready(function () {
$("#fo1").hide();
$("#foo").bind("mouseover mouseout", function (event) {
$("#fo1").toggle("slow");
});
// $("#foo").bind("mouseout ", function (event) {
// $("#fo1").hide("slow");
// });
});
</script>
2.滑动效果：slideDown slideUp slideToggle
<script type="text/javascript">
$(document).ready(function () {
$("#fo1").hide();
$("#foo").bind("mouseover mouseout", function (event) {
$("#fo1").slideToggle("slow");
});
// $("#foo").bind("mouseout ", function (event) {
// $("#fo1").hide("slow");
// });
});
</script>