jQuery:快速入门指南






4.59/5 (9投票s)
本文是 JQuery 的介绍。它面向那些听说过 JQuery 但从未用过它或不知道从哪里开始的人。什么是
引言
本文是 jQuery 的介绍。它面向那些听说过 jQuery 但从未用过它或不知道从哪里开始的人。
什么是 JQuery?
jQuery 是一个强大的 JavaScript 库,是的,它不是一种语言。
jQuery 帮助我们编写干净且更少的代码。
示例
您可以使用 jQuery 函数和对象来查找和操作 HTML 元素。
从哪里开始?
要使用 jQuery,您必须像包含外部 JavaScript 文件一样,在 .aspx 页面中包含 jQuery 库。
有两种方法可以实现这一点
- 下载最新的 JavaScript 库 这里,并将其包含在您的项目解决方案中。
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
- 指向 Microsoft 托管的 JavaScript 库。
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
现在您可以使用 JQuery 函数和对象了。
Visual Studio 的 jQuery 的智能感知呢?
有两种版本的 jQuery 库可供下载。
压缩版本(压缩) - 体积小,空格已删除,不可读。
常规版本(未压缩) - 体积相对较大,可读。
就目前而言,Visual Studio 智能感知文档适用于 JQuery 1.4.1,因此我们将在这里使用 jQuery 1.4.1 版本,尽管 jQuery 1.4.2 版本可用。 对于其他版本的 jQuery 库,该过程保持不变。
对于 Visual Studio 的 jQuery 智能感知支持,请下载库的常规版本 这里 和 jQuery 的 Visual Studio 智能感知文档 这里。
将这两个文件(jquery-1.4.1.js
和 jquery-1.4.1-vsdoc.js
)保存在项目解决方案的同一文件夹下。 智能感知将选取文档文件,并为 jQuery 提供支持。
如果智能感知不适用于 jQuery,请安装此修补程序:KB958502 - JScript 编辑器支持“-vsdoc.js”智能感知文档文件。
jQuery 很难学吗?
不,jQuery 很容易学习,下面的例子将有助于理解语法以及在您的网站中使用 jQuery 的方法。
示例:
此示例使用 jQuery 在按钮的点击事件上平滑地隐藏
<b>
元素。
<html>
<head>
<title>JQuery Demo</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Button").click(function() {
$("b").hide(1000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server"> <b>Bold Contents Here.</b><br /> <input type="button" id="Button" runat="server" value="Hide Contents" /></form>
</body>
</html>
JQuery 的基本语法
$(Selector).action()
$:
表示它是一个 jQuery。
选择符
元素的 ID(以 # 开头),HTML 元素本身,CSS 类(以 .(点)开头)等等。
示例
$(“#myButton”)
- 选择 ID 为 “myButton
” 的 html 元素。$(“p”)
- 选择 html 段落。$(“.myclass”)
- 选择其类为“myclass
”的 html 元素
action()
要在该元素上触发的动作(函数)。
现在让我们拦截代码
$(document).ready(function() {
$("#Button").click(function()
{
$("b").hide(1000);
});
});
代码的第一行检查文档是否已完成加载,并准备好在加载 HTML 上进行 jQuery 操作。
第三行附加一个函数,该函数将在按钮的点击事件上触发。 此函数平滑地隐藏所有 <b>
元素(1000 表示以毫秒为单位的延迟隐藏元素的时间)。
从这里接下来该去哪里?
这只是 jQuery 的一个介绍。 jQuery 具有更多功能,例如 CSS 操作、AJAX 和 JavaScript 动画和效果。
您可以在这里深入学习 jQuery 库。
希望本文能为 jQuery 初学者提供帮助。