为web编写脚本JQuery.docx

《为web编写脚本JQuery.docx》由会员分享，可在线阅读，更多相关《为web编写脚本JQuery.docx（26页珍藏版）》请在冰豆网上搜索。

为web编写脚本JQuery

第一部分：

JavaScript简介

范例文件

∙javascript.zip

JavaScript是用于web开发的最重要的语言之一。

它具有很多用途，范围包括从检查由表单提交的值到控制互动窗体部件（widgets），例如，选项卡式面板（tabbedpanel）、可折叠控件（accordion）以及弹出菜单（flyoutmenu）等。

此外，它还能够用于创建图片库（photogallery），以及从web服务器上获取新的信息以便在不需要重新加载页面的情况下更新相应的内容—它是一种通常被称为Ajax的技术组合。

与HTML和CSS一样，JavaScript知识也是一种关键技术，任何涉及构建网站的人员都应该获取这一技术。

然而，很多web设计人员从未这样做。

JavaScript有一个使用过于困难的恶名；并且，图形设计人员常常坚持认为他们所扮演的角色是设计，而非编程。

即使你自己从来没有尝试进行任何JavaScript编程，你也必须了解你的web页面的结构如何影响JavaScript编程人员的工作。

此外，由于jQuery等代码库（codelibrary）的出现，JavaScript变得更加易于使用。

本文是用来帮助你开始使用JavaScript和jQuery的系列文章中的第一篇。

本文描述在你开始钻研jQuery之前，你需要了解的该语言的基本功能。

JavaScript是什么，它能干什么？

尽管在名称上存在相似性，但是JavaScript并不是Java。

此外，两种语言也不相关。

Java常常用来给游戏、移动电话以及其它设备进行编程，例如AmazonKindle。

尽管Java能够用于网站编程，但是它几乎不那么使用。

另一方面，JavaScript是一种轻量级的、然而却功能强大的语言，它通常在web浏览器内部运行。

它扮演的角色是为页面的不同元素提供访问路径，这样它们就能够被移除或者更新。

此外，它还能创建新元素、改变已有元素的式样或者从它们中提取相关信息。

例如，它能够读取输入到表单中的值、执行计算以及显示结果等。

此外，它还能够向web服务器发送请求以获得更多信息，并且在不需要重新加载页面的情况下更新它的相关部分。

JavaScript可以通过访问文档对象模型（DocumentObjectModel（DOM））来执行这些任务。

DOM是一种与家谱相似的结构。

如果你的页面的HTML标识是无效的或者过于复杂，那么JavaScript代码就不能对相应的家谱进行导航。

相似地，如果你打破一些简单的规则，例如没有在任一页面多次使用相同ID，那么，JavaScript会变得混乱不堪并且只能放弃。

事件的重要性

JavaScript是一种事件驱动的语言。

有些事件是自动触发的。

例如，当页面在浏览器中完成相应的加载任务之后，就会触发load事件，并且它常常用来初始化弹出菜单（flyoutmenus）和其它的窗体部件（widgets）。

其它的事件由用户触发，最常见的是click事件，当用户单击主鼠标按钮，或者轻敲触摸屏就会触发它。

其它的常见事件包括mouseover和mouseout，它们分别对应用户悬停在一个元素上和提交一个表单的情形。

实际上，触发事件一直在不断发生。

每当你移动一次鼠标、滚动页面或者按下任一键时，都会触发一个事件。

如果浏览器必须对每一个事件均做出相应的回应，那么就会产生混乱。

取而代之的是，作为一个开发人员，你应该创建相应的函数来处理特定的事件，并且将它们与你希望用于响应事件的页面元素相关联。

这被称为绑定一个事件处理程序。

事件处理程序函数可以坐等—或侦听—相应的事件。

当合适的事件被触发时，相应的事件处理程序会立即运行并执行它的特定的任务，例如，打开或者关闭一个弹出菜单（flyoutmenu）、提交表单或者改变一个元素的式样。

创建函数

与其讨论抽象的术语，不如让我们先看一下运行的JavaScript。

顾名思义，函数能够实现某些功能。

它由一系列的命令构成，用来执行你指定它需要完成的任何一个任务（或者多个任务）。

定义function的最常见方式是使用关键字函数，后面跟着函数名称、一对圆括号以及用大括号括起来的代码块。

你可以给函数定义你喜欢的几乎任何名称，然而它必须以字母、下划线（_）或者dollar符号开头。

此外，名称不能包含任何空格或者连字符。

JavaScript区分大小写，因此，常见的作法是在第二个及其随后的每个单词中使用一个大写字母（驼峰大小写（"camelcase"））为函数定义描述性的名称；例如，changeFontSize。

为了使得代码尽可能简单，下面的范例仅仅改变无序列表的文本颜色。

你可以在范例文件中的change_01.html中找到已完成的代码，然而，为了让你自己体验一下编写JavaScript的感觉，我建议你打开Dreamweaver（或者其它文本编辑器）并自己输入相应的代码。

1.打开change_start.html。

该页面包含一个

标题、一个无序列表以及一个段落（参见图1）。

该无序列表具有相应的IDfruits。

图1.用于改变列表的字体大小的JavaScript函数

2.在Codeview中，在结束标签前插入新的一行，并添加一个.。

注意，当你输入

你需要手动地补齐它。

这是因为在该脚本中可能会出现相同的字符组合。

4.在该