您当前的位置: 首页 » JavaScript/JQuery编程 » 如何用jQuery简化JavaScript开发
如何用jQuery简化JavaScript开发
论坛链接
我总是乐于尝试新工具或利用节省开发时间的资源。由于市面上存在有许多Web开发工具，你可能很难缩小搜索范围。
jQuery是我最近发现的一个新工具。jQuery开发团队形容jQuery是“一个快捷、简练的JavaScript库，它可以简化HTML文档检查、事件处理、动画执行、并给你的Web页面增加AJAX交互。”
jQuery初步
你可以免费下载jQuery的最新版本。它由一个明确定义的脚本文件构成，因此你可以随意研究它的源代码。下载JavaScript文件后，你就可以把它放在Web服务器中准备使用。你可以用HTML SCRIPT元素把jQuery库加载到任何Web页面中。src属性应利用文件在服务器中的真实路径。
<script type="text/javascript"
src="jquery-latest.js"></script>
下载文件后，以下的一些任务会对你使用jQuery有所帮助。
编码基础
以下是使用jQuery编码时用到的一些指针：
jQuery代码块前为美元符号（$）。
美元符号后是一个左圆括号。
括号内是你要jQuery查找的内容，如它应使用哪个元素。
特定对象事件后为右圆括号。
你可以用指定的事件定义所发生的操作。方法/事件后的括号内是一个说明发生事件时会出现什么操作的函数。
在举例说明之前，我想介绍jQuery库的一个最有益的基础元素。JQuery利用的一切功能全都位于HTML DOM中，因此在你使用jQuery的特性之前，你必须加载这个文档。你可以用这个文档的ready事件完成上述操作，如下面的jQuery代码段所示：
$(document).ready(function() {
// Your code goes here
});
上面的简单jQuery代码允许你在文档完成加载后执行代码。列表A是它的一个应用实例，它对页面上的所有标题元素应用一个CSS类。
<html><head>
<title>Test</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h1').addClass("testclass");});
</script>
<style type="text/css" media="all">
.testclass { background: yellow; font-size: 20pt; }
</style>
</head>
<body>
<h1>Test</h1>
<p>test</p>
<h1>Test2</h1>
<p>test2</p>
</body></html>这段代码中包含以下元素：
$(document).ready(function(){——在页面完全加载后，告诉页面执行（函数主体内）的代码。
$('h1').addClass("testclass");});——定位页面上的所有HTML H1元素。addClass方法将所有的testclass CSS类分配给H1元素。这个类设定一个黄色背景色，因此所有标题都为黄色背景。
jQuery文档还简单说明了许多其它事件属性和函数，并介绍它们的用法。列表B中的简单代码实例说明如何给一个超链接点击事件进行编码。选择超链接时，在用户转换到链接目标前显示一个警告窗口。只有在页面内容全部加载以后，这时才再次使用ready函数来定义点击事件。
jQuery是我最近发现的一个新工具。jQuery开发团队形容jQuery是“一个快捷、简练的JavaScript库，它可以简化HTML文档检查、事件处理、动画执行、并给你的Web页面增加AJAX交互。”
jQuery初步
你可以免费下载jQuery的最新版本。它由一个明确定义的脚本文件构成，因此你可以随意研究它的源代码。下载JavaScript文件后，你就可以把它放在Web服务器中准备使用。你可以用HTML SCRIPT元素把jQuery库加载到任何Web页面中。src属性应利用文件在服务器中的真实路径。
<script type="text/javascript"
src="jquery-latest.js"></script>
下载文件后，以下的一些任务会对你使用jQuery有所帮助。
编码基础
以下是使用jQuery编码时用到的一些指针：
jQuery代码块前为美元符号（$）。
美元符号后是一个左圆括号。
括号内是你要jQuery查找的内容，如它应使用哪个元素。
特定对象事件后为右圆括号。
你可以用指定的事件定义所发生的操作。方法/事件后的括号内是一个说明发生事件时会出现什么操作的函数。
在举例说明之前，我想介绍jQuery库的一个最有益的基础元素。JQuery利用的一切功能全都位于HTML DOM中，因此在你使用jQuery的特性之前，你必须加载这个文档。你可以用这个文档的ready事件完成上述操作，如下面的jQuery代码段所示：
$(document).ready(function() {
// Your code goes here
});
上面的简单jQuery代码允许你在文档完成加载后执行代码。列表A是它的一个应用实例，它对页面上的所有标题元素应用一个CSS类。
<html><head>
<title>Test</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h1').addClass("testclass");});
</script>
<style type="text/css" media="all">
.testclass { background: yellow; font-size: 20pt; }
</style>
</head>
<body>
<h1>Test</h1>
<p>test</p>
<h1>Test2</h1>
<p>test2</p>
</body></html>这段代码中包含以下元素：
$(document).ready(function(){——在页面完全加载后，告诉页面执行（函数主体内）的代码。
$('h1').addClass("testclass");});——定位页面上的所有HTML H1元素。addClass方法将所有的testclass CSS类分配给H1元素。这个类设定一个黄色背景色，因此所有标题都为黄色背景。
jQuery文档还简单说明了许多其它事件属性和函数，并介绍它们的用法。列表B中的简单代码实例说明如何给一个超链接点击事件进行编码。选择超链接时，在用户转换到链接目标前显示一个警告窗口。只有在页面内容全部加载以后，这时才再次使用ready函数来定义点击事件。
#2楼发布者：superadmin时间：2007-10-11 14:34:48
<html><head>
<title>jQuery and the click event</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click( function() { alert('Read the News!'); });});
</script>
</head><body>
<a href="http://www.news.com/">Get the latest news!</a>
</body></html>你并不仅限于在页面的标题部分使用jQuery——它还可方便地应用于元素事件或页面的其它地方。你可以在jQuery库中使用任何类型的JavaScript。
列表C中的实例显示选择按钮后，一个弹出窗口中页面段落的总数量（用P元素表示）。按钮代码中即包含用jQuery格式化的JavaScript代码。
<html><head>
<title>Number of paragraphs</title>
<script type="text/javascript" src="jquery-latest.js"></script>
</head>
<body>
<h1>Test</h1>
<p>test</p>
<h1>Test2</h1>
<p>test2</p>
<a href="http://www.news.com/">Get the latest news!</a>
<input type="button" value="# of paragraphs" onclick='alert($("p").size());' />
</body></html>列表D中的实例使用jQuery来自定义页面项目清单中的圆点字符。它使用CSS，通过清单的样式属性删除标准的圆点字符。这个方法允许你仅用一小段代码使用清单中的任何字符甚至是图像。
<html><head>
<title>Custome bullets</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul > li").prepend("<>?");});
</script></head>
<body>
<ul style="list-style: none;">
<li><a href="http://www.news.com/">Get the latest news!</a></li>
<li><a href="http://www.techrepublic.com/">Get your techy fix</a></li>
<li><a href="http://www.gamespot.com/">Gaming</a></li>
</body></html>本文列出的代码实例概括说明了jQuery库具有的强大功能和灵活性。请通过在线综合实例代码和教程了解更多有关jQuery库的知识。
实现快速操作
应用jQuery，你几乎可以处理Web页面上的任何内容。它的语法可以迅速定位HTML DOM元素。虽然你也可以用标准JavaScript完成同样的功能，但jQuery的精简语法允许你用更少的代码减少编码任务，从而帮助你节省时间。
你曾经使用过jQuery库或其它开发库吗？请在文后的讨论部分与Web开发社区分享你的观点和经验。
Tony Patton拥有丰富的Java、VB、Lotus及XML方面的知识，是一个专业的应用程序开发人员。
<title>jQuery and the click event</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click( function() { alert('Read the News!'); });});
</script>
</head><body>
<a href="http://www.news.com/">Get the latest news!</a>
</body></html>你并不仅限于在页面的标题部分使用jQuery——它还可方便地应用于元素事件或页面的其它地方。你可以在jQuery库中使用任何类型的JavaScript。
列表C中的实例显示选择按钮后，一个弹出窗口中页面段落的总数量（用P元素表示）。按钮代码中即包含用jQuery格式化的JavaScript代码。
<html><head>
<title>Number of paragraphs</title>
<script type="text/javascript" src="jquery-latest.js"></script>
</head>
<body>
<h1>Test</h1>
<p>test</p>
<h1>Test2</h1>
<p>test2</p>
<a href="http://www.news.com/">Get the latest news!</a>
<input type="button" value="# of paragraphs" onclick='alert($("p").size());' />
</body></html>列表D中的实例使用jQuery来自定义页面项目清单中的圆点字符。它使用CSS，通过清单的样式属性删除标准的圆点字符。这个方法允许你仅用一小段代码使用清单中的任何字符甚至是图像。
<html><head>
<title>Custome bullets</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul > li").prepend("<>?");});
</script></head>
<body>
<ul style="list-style: none;">
<li><a href="http://www.news.com/">Get the latest news!</a></li>
<li><a href="http://www.techrepublic.com/">Get your techy fix</a></li>
<li><a href="http://www.gamespot.com/">Gaming</a></li>
</body></html>本文列出的代码实例概括说明了jQuery库具有的强大功能和灵活性。请通过在线综合实例代码和教程了解更多有关jQuery库的知识。
实现快速操作
应用jQuery，你几乎可以处理Web页面上的任何内容。它的语法可以迅速定位HTML DOM元素。虽然你也可以用标准JavaScript完成同样的功能，但jQuery的精简语法允许你用更少的代码减少编码任务，从而帮助你节省时间。
你曾经使用过jQuery库或其它开发库吗？请在文后的讨论部分与Web开发社区分享你的观点和经验。
Tony Patton拥有丰富的Java、VB、Lotus及XML方面的知识，是一个专业的应用程序开发人员。