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

一、下载JQuery类库

上面的地址是总下载列表, 里面有很多版本和类型的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) 代码如下：

<title>第一个JQuery程序</title>

</head>

<body>

<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中的内容" />

$("#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()事件，阻止默认的程序执行