如何用jQuery简化JavaScript开发

superadmin · 发表于 2007-10-11 14:33:06

我总是乐于尝试新工具或利用节省开发时间的资源。由于市面上存在有许多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函数来定义点击事件。

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方面的知识，是一个专业的应用程序开发人员。

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

如何用jQuery简化JavaScript开发

相关帖子