JavaScript与jQuery简介

关于JavaScript

JavaScript是前端网页设计与开发中运用得最广泛的脚本语言,可以被用来:

学习JavaScript需要了解变量、判断、循环、函数等基本的编程知识,如果没有掌握相关知识,可以先到网易学习看看这个教程

JavaScript代码可以被直接插入HTML中,但必须使用<script>标签包裹,比如

<script type="text/javascript">alert("一个JavaScript弹窗警告!!")</script>

上面这个示例的做法有点像直接把CSS代码插入到<style>标签里,但CSS还可以使用<link>标签外链到一个独立的*.css文件,JavaScript可以外链独立的文件,具体形式是:

<script src="myJavaScript.js"></script>

把所有的js代码都写在*.js文件里,这样可以保证内容、表示和逻辑之间有很好的分离度,便于协作和管理。

JavaScript的插入位置

虽然你可以在html页面的任何位置插入js,但在具体操作时最好遵循W3C的建议,将js集中放在</head>结束标记的前面,这样做便于管理和维护。

但是,如果你的js代码中需要引用body内的某个dom元素(比如用js控制某个div的尺寸),你需要注意一下html的加载顺序。html文档的加载是自上而下进行的,如果js需要引用body内的dom元素,而你的js又写在</head>前面,这里意味着在执行js时,被引用的dom元素还没有加载完成。

你应该在js中控制程序的执行顺序,确保主体程序在文档初始化完成后再执行。

模仿上面的例子创建一个JS,让网页每次刷新时冒出一个警告框。

警告框的内容是“Hello World!”或者任何你喜欢的内容。

jQuery库

本课程的重点是网页设计,所以我们不会深入JavaScript标准语法的学习,而是会强化某个JavaScript库的使用,因为后者在实际中应用得更多。

JavaScript的库其实是一个*.JS文件,由有经验的JavaScript程序员编写。基于JavaScript库编写JavaScript可以极大地简化流程,而且让自己编写的程序更直观易懂,但程序必须依赖该库才能运行。

JavaScript库有很多,有时它们称自己为“插件”或者“框架”,但通常都是开源的。本课程主要介绍的库是jQuery,了解它详情可以访问 http://jquery.com

插入jQuery

使用jQuery必须首先从其官方网站上下载库文件并链接到你的网页。这是一个*.js文件(jquery.js),它应该被插入到网页的<head>标签里。

通常,一个网页<head>标签中外链的资源可能很多,比如多个css或者多个js。必须注意,这些资源对应的标签顺序应该是:

<head> <link rel="stylesheet" href="mycss1.css"></link> <!- 外链样式放前面 -> <link rel="stylesheet" href="mycss2.css"></link> <!- 外链样式放前面 -> <script src="jquery.js"></script> <!- JS库紧跟样式 -> <script src="myJS.js"></script> <!- 自定义的JS放最后 -></head>

标签的顺序会影响资源加载的顺序,排在上面的标签总是比下面的标签先加载。由于自定义的JS对CSS和JS库都可能会产生依赖关系,所以自定义的JS通常放下面。

判断文档的加载

需要注意的是,在使用jQuery控制页面的元素的之前,必须确认两点:

上述两点中任何一点出问题,jQuery代码都可能不起作用。为了确保上述两点,我们要用到$(document).ready(),如下图所示

$(document).ready(function(e){ /* 当文档被完全加载时执行的代码写在这里 */ })

在上面的例子中,$(document).ready()是一个事件,表示DOM加载完成。 function(e){....}是一个事件处理函数,把这个事件处理函数放在ready后的括号中,就相当于将事件处理函数与ready事件绑定。这样,每次ready事件发生时(即每次文档加载完成时),事件处理函数都会执行一次。

试试$(document).ready()

控制一个页面在DOM加载完成后弹出“Hello World!”警告框。

jQuery语法

jQuery的语法就像自然语言那样简单。使用jQuery,主要理清三个概念:When,Who,What,即什么元素在什么时候要做什么事情。

三要素分析
When Who What
事件 DOM元素 方法

上面三个要素可以帮助我们很好地理解jQuery代码,进而帮我们更好地定义。

用jQuery定位DOM元素

下面的语句执行时元素div.box将从页面中消失。你会发现,jQuery定位元素的方式与CSS选择器的定位方式非常类似。

$("div.box").hide()/*选择文档中所有class属性为box的div标记,并隐藏他们*/

使用“三要素”来分析就是:

三要素分析
When Who What

$("div.box") hide()

注意:上面的语句中并没有任何代码明确说明When这个要素,那div.box究竟什么时候会被隐藏?或者换句话说,什么时候这行代码会执行?

理解上下文

当没有明确的代码说明When这个要素时,我们需要从代码的上下文中来获取When相关的信息。要找到JS代码的上下文,要关注离代码最近的大括号“{}”

$("div.box").hide();

上面的代码的没有在任何大括号中,因此它不会被执行

function hidebox(){ $("div.box").hide(); }

上面的代码被hidebox函数的大括号包裹着,因此它的When是hidebox函数被调用的那一刻。

$(document).ready(function(e){ $("div.box").hide(); })

上面的代码被function(e){...}这个事件处理的大括号包裹着,因此它的When是对应的ready事件发生的那一刻。

响应交互事件

在网页设计与开发中,控制元素响应用户的交互事件是一个很关键的需求。比如,当用户“点击”、“移动”或“拖拽”时,页面会发生相应的变化。下面的例子演示如何绑定一个click事件处理函数,在用户点击a.btn时,弹出一个“hello world”窗口。

$("a.btn").on("click",function(e){ alert("hello world"); });
三要素分析
When Who What
点击
click
浏览器窗口 弹出警告窗口
alert("hello world")

注意,除非上面的代码被添加到$(document).ready()事件处理中,否则你看不到弹出窗口。因为你必须告诉浏览器,在文档加载完成时,开始绑定点击事件。

$("a.btn").on("click",function(e){ alert("hello world"); });
三要素分析
When Who What
浏览器加载完成
$(document).ready()
按钮
$("a.btn")
绑定点击事件
on("click",function(e){...})

“链式句点”语法

在jQuery中可以使用“链式句点”语法,这种语法可以让“多个What共用1个Who”。

$("div.box").css("width","400px").css("height","300px")/*先把宽度设置为400px,再把高度设置为300px*/

本节相关视频

关于js

关于jQuery

如何绑定事件处理