您的位置：首页 > Web前端 > JQuery

JQuery基础之(二)第一个JQuery程序

2009-12-07 10:19 309 查看

一、下载JQuery类库
下载地址：http://code.google.com/p/jqueryjs/downloads/list
上面的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类:
1) min: 压缩后的jQuery类库, 在正式环境上使用.如:jquery-1.3.2.min.js
2) vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如：jquery-1.3.2-vsdoc2.js
3) release包: 里面有没有压缩的jquery代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip
现在的最新版本是1.3.2，那就先把1.2.3版本的文件都下下来吧！

二、 第一个JQuery程序
1) 新建一个页面
2) 并在该页面中引用下载到的jquery-1.3.2-vsdoc2.js文件
3) 代码如下：
<head runat="server">
<title>第一个JQuery程序</title>
<script type="text/javascript" src="../Js/jquery-1.3.2-vsdoc2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divMsg">hello world!</div>
<asp:Button ID="btnShow" runat="server" Text="显示" />
<asp:Button ID="btnHide" runat="server" Text="隐藏" />
<asp:Button ID="btnChange" runat="server" Text="改变divMsg中的内容" />
<script type="text/javascript">
$("#btnShow").bind("click", function(event){$("#divMsg").show(); event.preventDefault();});
$("#btnHide").bind("click", function(event){$("#divMsg").hide(); event.preventDefault();});
$("#btnChange").bind("click", function(event){$("#divMsg").html("我改变了divMsg的内容"); event.preventDefault();});
</script>
</div>
</form>
</body>
4) 页面上有三个按钮, 分别用来控制Hello World的显示,隐藏和修改其内容，此示例使用了:
(1) jQuery的Id选择器: $("#btnShow")
(2) 事件绑定函数 bind()
(3) 显示和隐藏函数. show()和hide()
(4) 修改元素内部html的函数html()
(5) .preventDefault()事件，阻止默认的程序执行

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航