JavaScript交互式网页设计笔记

JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】

1.1 JavaScript 概述

1.1.1 JavaScript 简介

JavaScript 诞生于 1995 年，主要是进行用户输入的合法性验证

1.1.2 JavaScript 的概念和执行原理

JavaScript 是一种轻型的、解释性的脚本语言，是一种由浏览器内的解释器执行的程序语言

1.1.3 JavaScript 脚本代码的位置

通常可以在 3 个地方编写 JavaScript 的脚本代码

通常可以在 3 个地方编写 JavaScript 的脚本代码
脚本程序代码放置在一个单独的文件中，然后在网页文件中引用这个脚本程序文件
脚本程序代码放置在一个单独的文件中，然后在网页文件中引用这个脚本程序文件

HTML 文件混合方式
示例：

<body>
  <script type="text/javascript">
    document.write("<h2> 欢迎来到 JavaScript 课堂 </h2>");
  </script>
</body>

JS 文件引用方式：

创建 JavaScript 文件，命名为demo1.js html
页面，在js标签中引用 JavaScript 文件

示例：

<body>
  <script src="../js/demo1.js" type="text/javascript"></script>
</body>

注意：带有 src 属性的 <script> 标签不应该在 <script></script> 标签之间包含任何额外的 JavaScript 代码，否则嵌入的代码会被忽略

HTML 代码嵌入方式
将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值

<body>
  <a href="javascript:document.write('<h2> 欢迎来到 JavaScript 课堂 </h2>');">hello</a>
</body>

1.2 JavaScript 核心语法

1.2.1 变量

变量有三种使用方式:

先声明再赋值如：var message; message=”hi”;
同时声明和赋值变量如：var message=”hi”;
不声明直接赋值如：message=”hi”;

变量可以不经声明而直接使用，但是这种方法很容易出错，因此不推荐使用。对变量的输出测试可以采用 alert() 弹出对话框的方式

变量命名规则:

第一个字符必须是一个字母、下划线（_）或一个美元符号（$）
其他字符可以是字母、下划线、美元符号或数字
区分大小写
不能与关键字同名，如 while、for 和 if 等

1.2.2 数据类型

JavaScript 中有 5 种简单数据类型，也称为基本数据类型

undefined
null
boolean
number
string

另外还有一种复杂数据类型——object对象类型
由于JavaScript中的变量是弱类型，可通过typeof操作符获取变量的数据类型

数据类型	数据值
number类型	浮点数、整数
boolean类型	true、false
string类型	单引号或双引号引起来的若干字符
null类型	只存在一个值null，表示对象不存在
undefined类型	只存在一个值undefined，表示未赋值或未声明的变量

示例：

<body>
  <script type="text/javascript">
    var  str="message";
    document.write(typeof  str+"<br/>");
    var  other;
    document.write(typeof  other+"<br/>");
    var  numb=10.0;
    document.write(typeof  numb+"<br/>");
    var  date=new  Date();
    document.write(typeof  date+"<br/>");
    var  bool=1<2;
    document.write(typeof  bool);
  </script>
</body>

1.2.3 JavaScript 注释

JavaScript 与很多语言一样，如 Java、C# 都支持同样的注释形式

单行注释：//
多行注释： /* 注释内容 */

示例：

// 声明并初始化一个变量
var v = 5;
/* 使用 for 循环输出 Hello5 次 */
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
/*
这些注释不会显示在页面上，
但是可以通过页面的源代码查看到
*/

1.3 顺序结构和选择结构

1.3.1 顺序结构

顺序结构，顾名思义就是程序按照语句出现的先后顺序依次执行

示例：

<body>
  <script type="text/javascript">
    document.write(" 程序开始执行……<br/>");
    document.write(" 程序正在执行中……<br/>");
    document.write(" 程序执行完毕……<br/>");
  </script>
</body>

1.3.2 选择结构

选择结构：需要根据特定的条件执行不同的语句
JavaScript中选择结构使用if语句和switch语句
if 语句有 3 种形式：单分支、双分支和多分支

1、if单分支语句：

if( 条件表达式 ) {
  语句或语句块
}

2、if 双分支语句

if( 条件表达式 ) {
  语句或语句块 1
} else{
  语句或语句块 2
}

3、if 多分支语句

if( 条件表达式 1){
  语句或语句块 1
}
else  if( 条件表达式 2){
  语句或语句块 2
}......
else  if( 条件表达式 n){
  语句或语句块 n
}
else{
  语句或语句块 n+1
}

4、switch 语句

switch（表达式）{
  case 取值 1：语句或语句块 1;  break;
  case 取值 2：语句或语句块 2;  break;
  ......
  case 取值 n：语句或语句块 n;  break;
  default: 语句或语句块 n+1;  break;
}

1.4 循环结构

1.4.1 while 循环语句

JavaScript中，循环结构有 while 循环、do-while 循环和 for 循环
1、while 循环语句

while（条件表达式）{
  语句或语句块
}

2、do-while循环语句

do{
  语句或语句块
}while( 条件表达式 );

3、for循环语句

for( 初始化表达式 ; 循环条件表达式 ; 循环后的操作表达式 ){
  语句或语句块
}

1.4.4 break 语句和 continue 语句

JavaScript跳转语句：break语句和continue语句
break语句用于中断循环
continue语句用于跳过本次循环要执行的剩余语句，然后开始下一次循环

2.1 JavaScript 自定义函数

2.1.1 函数的定义

函数就是为了完成程序中的某些特定功能而进行专门定义的一段程序代码

function 函数名 ( 形式参数 1, 形式参数 2,…, 形式参数 n){
  语句
}

使用 function 关键字。function 后是函数名，JavaScript 中的函数不必说明返回值的类型。

函数的命名规则与变量名的命名规则相同。

函数名后的 () 可以包含若干参数，也可以选择不带任何参数。

最后是一对 {}，包含具体实现程序中的某些特定功能的若干语句或脚本代码

2.1.2 函数的调用

实例：

//getArea(width,height) 函数定义语法略
   <h1> 宽度是：3，高度是：4 的长方形
    <script type="text/javascript">getArea(3,4);</script>
   </h1>

2.1.3 函数的参数

函数参数作用：调用函数时将数据传递给被调函数的方式

在函数被调用时，一个 arguments 对象就会被创建，它只能使用在函数体中，以数组的形式来管理函数的实际参数

2.1.4 函数的返回值

实现函数返回值的语句是 return
语法：

return 返回值 ;

2.1.5 匿名函数

匿名函数就是没有名字的函数，也被称为拉姆达函数，是一种使用 JavaScript 函数的强大方式
语法一：

（function （形式参数列表）{
   语句
 }）（实际参数列表）;

语法二：

var  变量 =（function （形式参数列表）{
   语句
} ）;
变量（实际参数列表）;

2.1.6 变量的作用域

如果全局变量和局部变量出现重名的情况，局部变量优先，即无论局部变量的值怎么改变，全局变量的值不会受到影响

2.2 JavaScript 系统函数

2.2.1 parseInt()函数

字符串	结果
“150cats”	150
“cats”	NaN
“6”	6
“-6”	-6
“6.56”	6

2.2.3 isNaN()函数

isNaN() 函数用于判断参数是否是NaN（不是数字）。如果是 NaN，那么 isNaN 函数返回 true ，否则返回 false

字符串	结果
’134’	false
‘2a34’	true
‘2.34’	6
‘ ‘ (空格)	false
‘wh’	true

2.2.4 eval()函数

eval() 函数运行是以字符串形式表示的 JavaScript 代码串，并返回执行代码串后的结果

2.3 JavaScript事件

2.3.1 事件

JavaScript 是基于对象、采用事件驱动的脚本语言

事件：用户使用鼠标或键盘在浏览器窗口或页面元素上执行的操作
事件源：产生事件的元素
事件处理程序：对事件进行处理的程序或函数
事件驱动：将一段程序代码与某个事件源上发生的事件进行绑定，当触发此事件，浏览器就会自动执行与之绑定的程序代码

2.3.2 事件与处理程序的绑定

在JavaScript 中，有两种方式将对象事件与处理程序代码进行绑定

在事件源对象所对应的 HTML 页面标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码

可以使用匿名函数来简化，即事件名=function(){…}

2.4 JavaScript的常用事件

2.4.1 鼠标事件

onclick 事件：鼠标单击页面元素时触发的事件

onmouseover 事件和 onmouseout 事件：鼠标移入、移出页面元素时触发的事件

onmousemove 事件：鼠标指针移动时发生的事件

2.4.2 其他事件

onload 事件：页面加载完成后立即发生

onblur 事件：光标或者焦点离开元素后触发的事件

onchange事件：输入框的值发生了变化或者改变下拉列表框的选项时会触发的事件

2.4.3 表单事件

单击表单元素的“提交按钮”会触发form标签的 onsubmit 事件，浏览器对这个事件的默认处理方式是提交数据给 action 属性指定的页面进行处理

3.1 浏览器对象模型

3.1.1 浏览器对象模型

BOM 是浏览器对象模型的简称。JavaScript 将整个浏览器窗口按照实现的功能不同拆分成若干个对象

一个完整的 BOM 主要包括 window 对象、history 对象、location 对象和 document 对象等
在这里插入图片描述

3.2 window 对象

3.2.1 window 对象的常用属性及方法

window 对象处于对象模型的第一层，对于每个打开的窗口系统都会自动将其定义为window 对象

window 对象常用属性

属性	含义
document	窗口中当前显示的文档对象
history	history 对象保存窗口最近加载的 URL
location	当前窗口的 URL
status	状态栏文本

window 对象常用方法

方法	说明
prompt	显示可提示用户输入的对话框
alert	显示带有一个提示消息和一个确定按钮的警示框
confirm	显示一个带有提示信息、确定和取消按钮的确认框
close	关闭浏览器窗口
open	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout	在设定的毫秒数后调用函数或计算表达式
setInterval	按照设定的周期（以毫秒计）来重复调用函数或表达式
clearInterval	取消重复设置，与setInterval对应

3.2.2 使用window对象创建对话框

alert() 方法弹出警告对话框

prompt() 方法创建提示对话框

confirm() 方法创建确认对话框

3.2.3 使用window对象操作窗口

window对象的 open() 方法和 close() 方法用于打开和关闭窗口

名称	说明
height、width	窗口文档显示区的高度、宽度，单位为像素
left、top	窗口与屏幕左边、顶端的距离，单位为像素

3.2.4 使用window对象执行计时事件

setTimeout() 方法会在指定的时间执行指定的代码并退出。setInterval() 方法会根据设置的时间间隔反复执行指定的代码，直至程序结束或利用clearInterval() 方法取消

<body>
  <script type="text/javascript">
    setTimeout("alert('hello')",2000);
  </script>
</body>

requestAnimationFrame() 方法是浏览器用于定时循环操作的一个接口，类似于 setTimeout，主要用途是按帧对网页进行重绘

requestID = window.requestAnimationFrame(callback);

3.3 history 对象和 location 对象

3.3.1 history对象

history对象保存了当前浏览器窗口中打开页面的一个历史记录列表，使用 history对象可以将当前浏览器页面跳转到某个曾经打开过的页面

方法	描述
back()	后退一个页面，相当于浏览器后退按钮
forward()	前进一个页面，相对于浏览器前进按钮
go()	打开一个指定位置的页面

可以使用 history.go(-1) 和 history.go(1) 代替 histroy.back() 和 history.forward()

location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏

3.3.2 location对象

location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏

名称	描述
href 属性	返回或设置当前页面的 URL
hostname 属性	返回 Web 主机的域名
port 属性	返回 Web 主机的端口（80 或 443）
protocol 属性	reload() 方法
reload() 方法	hostname 属性
assign() 方法	加载新的文档

3.4 screen对象和navigator对象

3.4.1 screen对象

window.screen 对象包含了用户屏幕的相关信息，在编写时可以不使用 window前缀

属性	描述
availWidth	返回显示屏幕的可用宽度（除 Windows 任务栏之外）
availHeight	返回显示屏幕的可用高度（除 Windows 任务栏之外）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）
width	返回显示器屏幕的宽度
height	返回显示器屏幕的高度

3.4.2 navigator对象

navigator对象包含了浏览器的有关信息

navigator 对象的实例是唯一的，可以用 window 对象的 navigator 属性来引用它

方法	描述
javaEnabled()	规定浏览器是否启用 Java
taintEnabled()	规定浏览器是否启用数据污点，仅适用于 IE 浏览器（Data Tainting）

navigator对象的常用属性如下

属性	描述
appCodeName	返回浏览器的代号
appMinorVersion	返回浏览器的次级版本
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
browserLanguage	返回当前浏览器的语言
cookieEnabled	返回浏览器中是否启用 cookie 的布尔值
cpuClass	返回浏览器系统的 CPU 等级
onLine	返回系统是否处于联机模式的布尔值
platform	返回运行浏览器的操作系统平台
systemLanguage	返回操作系统使用的默认语言
userAgent	返回由客户机发送服务器的 user-agent 头部的值
userLanguage	返回操作系统的自然语言设置

由于 navigator 会误导浏览器检测，所以可以使用对象检测来嗅探不同的浏览器。但不同的浏览器支持不同的对象，因此对于不同的浏览器，要使用不同的对象来检测

集合	描述
plugins[ ]	返回对文档中所有嵌入式对象的引用
plugins[ ]	该集合是一个 plugin 对象的数组，其中的元素代表浏览器已经安装的插件。plugin对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表
plugins[ ]	虽然 plugins[ ] 数组是由 IE4 定义的，但是在 IE4 中它却总是空的，因为 IE4 不支持插件和 plugin 对象

4.1 文档对象模型简介及属性

4.1.1 文档对象模型概述

DOM（Document Object Model）是文档对象模型的简称
DOM 把HTML 文档看成由元素、属性和文本组成的一棵倒立的树
在这里插入图片描述
可以把HTML 文档中的每个成分看成一个节点，所以 DOM 的核心操作是查看节点、创建节点、增加节点、删除节点以及替换节点
整个HTML 文档在DOM 中是一个document 对象

属性	含义
bgColor	页面的背景颜色
fgColor	文本的前景颜色
title	页面标题

4.2 document 对象查找 HTML 元素

4.2.1 通过 id 查找 HTML 元素

使用 document.getElementById(id) 方法可以通过 id 获取 HTML 页面的元素

innerHTML属性是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML内容

4.2.2 通过 name 查找 HTML 元素

使用 document.getElementsByName(name) 方法可以通过name获取页面元素
参数 name 为必选项，为字符串类型
返回值为数组对象，如果无符合条件的对象，则返回空数组

4.2.3 通过标签名查找 HTML 元素

document.getElementsByTagName(tagname)
参数 tagname 为必选项，为字符串类型
返回值是指定标签名的对象的集合，如果无符合条件的对象，则返回空数组

4.2.4 通过类名查找 HTML 元素

document.getElementsByClassName(classname)
参数 classname为必选项，是字符串类型，指需要获取的元素类名
参数 classname为必选项，是字符串类型，指需要获取的元素类名

可以使用NodeList对象的length属性来确定指定类名的元素个数，并循环各个元素来获取需要的元素

4.3 document 对象改变 HTML

4.3.1 使用document对象改变HTML输出流

JavaScript 中的 document 对象能够动态地创建 HTML 内容。document.write() 方法可用于直接向 HTML 的输出流写内容
不要在文档加载完成之后使用document.write()方法，这样做会覆盖该文档中所有的内容

4.3.2 使用document对象改变HTML内容

修改 HTML 内容最简单的方法是使用 innerHTML 属性
语法：

document.getElementById(id).innerHTML= 新的 HTML 内容

4.3.3 使用document对象改变HTML样式

改变 HTML 元素的样式
语法：

document.getElementById(id).innerHTML= 新的 HTML 内容

4.4 DOM 节点操作

4.4.1 节点信息

可以根据层级关系来查找节点，在 DOM 中每个节点都具有访问其他节点的属性

属性	描述
parentNode	当前节点的父节点引用
childNodes	当前节点的所有子节点
firstChild	当前节点的第一个子节点
lastChild	当前节点的最后一个子节点
previousSibling	当前节点的前一个兄弟节点
nextSibling	当前节点的后一个兄弟节点

childNodes 属性，它返回当前节点的所有子节点，其中子节点包括元素节点、属性节点和文本节点

通过节点对象的 nodeType 属性可以判断属于哪种类型的节点

当 nodeType 是 1 时就是元素节点；nodeType 为 2 时是属性节点；nodeType 为 3 时则是文本节点

4.4.2 动态添加和删除节点

添加节点

使用 createElement 创建节点
使用 appendChild(node) 方法将指定的节点追加到现有节点的末尾

删除节点

remove()
 removeChild

使用 DOM 删除元素时，需要清楚地知道要删除元素的父元素

5.1 Object 对象和 Date 对象

5.1.1 JavaScript 的内部对象

JavaScript 提供了一些非常有用的内部对象，按使用方式可分为两种

实例对象。在引用该对象的属性和方法时，必须先使用 new 关键字创建一个对象实例，然后再使用“对象实例名 . 成员”的格式来进行访问

静态对象。在引用该对象的属性和方法时不需要使用 new 关键字来创建对象实例，可以直接使用“类名 . 成员”的格式来进行访问

5.1.2 Object对象

Object 对象提供了一种创建自定义对象的简单方式，因为它不需要开发人员定义构造函数
在程序运行时可以为JavaScript 对象添加属性，因此使用 Object 对象创建出自定义对象非常简便

对象的属性可以使用索引运算符“[ ]”进行访问

5.1.3 Date对象

通过创建 Date 对象，可以获取本地计算机中的日期与时间
初始化 Date 对象有 4 种方式

new Date() // 当前日期和时间
new Date(milliseconds) // 返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

//制作页面时钟
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1 id="getLocalTime"></h1>
        <script>
        function getLocalTime(){
            var date = new Date();
            document.getElementById("getLocalTime").innerHTML = date.toLocaleString();
        }   
        /* 重复调用 */
        setInterval("getLocalTime()", 1000);
        </script>
    </body>
</html>

每个Date对象都只是计算机的一个毫秒级快照，Date对象只是保存了它被创建时的时间信息

Date 对象的常用方法

方法	功能
getDay()	返回一个月中的某一天（1 ～ 31）
getDay()	返回一周中的某一天（0 ～ 6），0 为周日，1 为周一，以此类推
getFullYear()	以四位数返回年份
getHours()	返回小时（0 ～ 23）
getMilliseconds()	返回毫秒
getMinutes()	返回分钟（0 ～ 59）
getMonth()	返回月份（0 ～ 11），0 为一月，1 为二月，以此类推
getSeconds()	返回秒数（0 ～ 59）
getTime()	返回 1970 年 1 月 1 日至今的毫秒数

5.2 Image对象和Math对象

5.2.1 Image对象

网页中使用图片，只需要调用标签，然后在 src 属性中设置图片的绝对路径或相对路径即可

5.2.2 Math对象

JavaScript 中的基本数值运算符可以用来进行一些简单的数学计算，而使用Math 对象可以进行更多的高级运算，如平方根、三角函数、对数和随机数等

Math对象中常用的方法

方法	功能
Math.abs(number)	返回number 的绝对值
Math.ceil(number)	对number 向上取整
Math.floor(number)	对number 向下取整
Math.max(number1,number2)	返回number1 与number2 中的较大值
Math.min(number1,number2)	返回number1 与number2 中的较小值
Math.pow(x,y)	返回x 的y 次幂
Math.random()	返回0 和1 之间的伪随机数，可能为0，但总是小于1
Math.round(number)	返回最接近number 的整数
Math.sqrt(number)	number 的平方根

5.3 数组和String对象

5.3.1 数组

1、数组列表
数组列表用于表示一组数据的集合，它由一对方括号（[]）包围，列表中的每个元素用逗号分隔，数组元素可以是任意类型的数据（包括其他数组），数组的定义
语法：

var arr=["happy",12,45.6];

每个数组变量都有一个length属性，表示该数组中元素的个数

定义一个数组变量后，就可以使用“数组变量名[索引号]”的格式来访问每个数组元素

数组列表中的第一个元素的索引号为0，其后的每个元素的索引号依次递增，最后的元素索引为数组的长度-1

如果数组元素本身是一个数组，那么这个元素称为子数组，可以使用“数组变量名[子数组索引号][子数组中的元素索引号]”的格式来访问子数组中的元素

2、Array

JavaScript 中提供了一个名为Array 的内部对象，可用它来创建数组。通过调用Array 对象的各种方法，可以方便地对数组进行排序、删除和合并等操作
Array 对象创建数组常用的3种方式
语法：

var arr=new Array()      //数组初始元素个数为0
var arr=new Array(4); //创建具有指定大小的Array 对象
var arr=new Array(1,2,3); //用指定的元素列表去初始化Array 对象，数组的长度是设置的元素的数目

一维数组

var students = new Array();
students = ["张三", "男", 20, 88.5];

var students = new Array("张三", "男", 20, 88.5);

var students = ["张三", "男", 20, 88.5];

二维数组

var area["昆明市"] = ["五华区", "官渡区", "盘龙区", "西山区", "呈贡区", "东川区", "晋宁区"];

数组排序

数组名.sort();

5.3.2 String对象

当某字符串使用单引号或双引号标注时，可以被当作字符串对象实例进行处理，从而直接调用String 对象的属性和方法
常用属性：length
常用方法

方法	描述
charAt()	返回字符串对象中指定索引处的字符，索引从0 开始，如”Hello World”.charAt(3)，返回字符”l”
indexOf()	返回某个子字符串在目标字符串中首次出现的位置，如”Hello World”.indexOf(“a”)，返回-1，在目标字符串中没有子字符串”a”，故返回-1
substr()	从指定索引位置开始截取指定长度的字符串，如”Hello World”.substr(2,3)，返回”llo”。第一个参数表示从索引为2 的字符开始截取，即”l”，第二个参数表示截取的长度
substring()	返回指定索引范围内的字符串，如”Hello World”.substring(2,3)，返回”l”，返回索引2和3 间的字符串，并且包括索引2 对应的字符，不包括索引3 对应的字符
toLowerCase()	将字符串转化为小写
toUpperCase()	将字符串转化为大写，如”Hello World”.toUpperCase()，返回” HELLO WORLD”
split()	返回按照指定分隔符拆分的若干子字符串数组，如var arr=”hello,world”.split(“,”);arr 是数组变量，其中第一个元素是”hello”，第二个元素是”world”

5.4 对象的创建及常用语句

5.4.1 创建对象

类（class）是一个模板，模板描述了本类中所有对象共同的属性和行为
定义JavaScript 类，需要编写一个函数，函数名为对象的类名，在函数体中定义属性和方法，即JavaScript 中的函数也是对象

用function 创建类时，要求属性和方法必须使用this 关键字来引用，表示当前类的实例。

5.4.2 对象常用语句

1、with 语句
在一段连续的程序代码中，在with 关键字后的小括号中写出这个对象的名称，就可以在其后大括号里的执行语句中直接引用该对象的属性名或方法名，省略对象实例名和点（.）
语法：

with( 对象名称){
      执行语句块
}

2、for…in 语句
对某个对象的所有属性进行循环操作，它将某个对象的所有属性名称逐一赋值给一个变量，不需要事先知道对象属性的个数

根据索引取出每个数组元素
语法：

for( 变量 in 对象){
      执行语句
}

6.1 jQuery概述

6.1.1 初识 jQuery

为了解决开发过程中的兼容性问题，产生了许多JavaScript库，目前被频繁使用的JavaScript库包括 jQuery、Prototype、Spry 和 Ext JS

其中使用最广泛的JavaScrip库是jQuery, 是于2006年创建的一个JavaScript库

集 JavaScript、CSS、DOM 和 Ajax 于一体的强大框架体系
它的主旨是以更少的代码实现更多的功能（Write less,do more）

6.1.2 jQuery 基本功能

jQuery 基本功能

访问和操作 DOM 元素
对页面事件的处理
大量插件在页面中的运用
与 Ajax 技术的完美结合
大幅提高开发效率

6.1.3 搭建 jQuery

开发环境下载 jQuery 文件库

链接: http://jquery.com
引入 jQuery 文件库

6.1.4 jQuery代码的特点

$符号标志：是JQuery对象的简写形式，$()等效于jQuery()，是jQuery程序的标志

隐式循环：当使用jQuery查找符合要求的元素后，无须一一遍历每一个元素，直接通过jQuery命令操作符合要求的元素

隐式循环：当使用jQuery查找符合要求的元素后，无须一一遍历每一个元素，直接通过jQuery命令操作符合要求的元素

6.2 jQuery 基本选择器

6.2.1 jQuery 选择器概述

使用jQuery选择器可以选择页面元素，并生成jQuery对象，能够使用jQuery中的方法。

6.2.2 基本选择器

基本选择器是由标签 id、class、标签名和多个选择符组成
在这里插入图片描述

6.3 过滤选择器

过滤选择器附加在所有选择器的后面，通过特定的过滤规则来筛选出一部分元素，书写时以冒号（：）开头
过滤选择器可以分为

基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器

1、基本过滤选择器
在这里插入图片描述
2. 内容过滤选择器

3. 可见性过滤选择器
在这里插入图片描述
4. 属性过滤选择器

6.4 层次选择器和表单选择器

层次选择器
在这里插入图片描述
表单选择器

7.1 DOM 对象和 jQuery 对象

7.1.1 DOM 对象

使用JavaScript中的getElementById ()方法，在文档中选择id=”content”的匹配元素，最后将生成的DOM对象储存在obj变量中

JavaScript	jQuery
onclick	click()
onfocus	onfocus
onblur	change()

7.1.2 jQuery 对象

使用 jQuery 选择器选择页面中的元素，是为了生成 jQuery 对象，jQuery 对象具有特有的方法和属性，完全能够实现传统 DOM 对象的所有功能

7.2使用jQuery元素文本和值

jQuery元素文本和值

设置或获取元素的文本值：text()  或 html()
设置或获取元素的 value 值：val()

jQuery 元素属性操作

设置或获取元素属性值：attr()
删除元素属性：removeAttr()

jQuery 元素样式操作
1 直接设置样式

直接添加样式：css

2 先创建样式，再设置
【注意】样式只能设置类样式（class）

添加类（样式）：addClass()
删除类（样式）：removeClass()
切换类（样式）：toggleClass()

7.3 jQuery 中使用 DOM 操作节点

7.3.1 创建节点元素

$(html);

7.3.2 插入节点

动态创建新元素后，需要执行插入或追加操作

按照元素的层次关系来分，可以分为内部和外部两种方法
1、元素内部插入子节点

语法格式	功能描述
append(content)	$(A).append(B) 表示将 B 追加到 A 中，如 $(“ul”).append($li);
appendTo(content)	$(A).appendTo(B) 表示把 A 追加到 B 中，如 $li.appendTo(“ul”)
prepend(content)	$(A).prepend(B) 表示将 B 前置插入到 A 中，如 $(“ul”).prepend($li)
prependTo(content)	$(A).prependTo(B) 表示将 A 前置插入到 B 中，如 $li.prependTo(“ul”)

2、元素外部插入同辈节点

语法格式	功能描述
append(content)	$(A).after(B) 表示将 B 插入到 A 之后，如 $(“ul”).after($div);
insertAfter(content)	$(A).insertAfter(B) 表示将 A 插入到 B 之后，如 $div.insertAfter(“ul”)
before(content)	$(A).before(B) 表示将 B 插入至 A 之前，如 $(“ul”).before($div)
insertBefore(content)	$(A).insertBefore(B) 表示将 A 插入到 B 之前，如 $div.insertBefore(“ul”)

7.3.3 替换节点

在 jQuery 中，如果要替换元素中的节点，可以使用 replaceWith() 和 replaceAll() 这两种方法

jQuery 对象.replaceWith(content);
jQuery 对象.replaceAll(selector);

replaceWith() 方法的功能是将所有选择的元素替换成指定的 HTML 页面元素

replaceAll() 方法的功能是用所选择的元素替换指定的元素

7.3.4 复制节点

在页面中，有时候需要复制某个元素节点。可以通过 clone() 方法实现功能

jQuery 对象.clone();

该方法只是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要将该元素的全部行为也进行复制，那么可以通过 clone(true) 实现

7.3.5 删除节点

jQuery 对象.remove([expr]);

其中参数 expr 为可选项，该参数为筛选元素的 jQuery 表达式，通过该表达式将获取指定的元素，并进行删除

7.4 遍历元素

jQuery 中元素的遍历

jQuery 对象.each(callback);

参数 callback 是一个function函数，可以给该函数传递一个index参数，此形参是遍历元素的序号。如果需要在函数体中访问当前遍历到的元素，可以使用 this 关键字

本章目录

[8.1 显示隐藏动画效果](#8.1 显示隐藏动画效果)

8.1.1 show() 方法与hide() 方法

8.1.2 toggle()方法

8.1.3 实践练习

8.2 淡入淡出动画效果

8.2.1 fadeIn() 方法与fadeOut() 方法

8.3.1 slideDown() 方法与 slideUp() 方法

8.3.2 slideToggle()方法

8.1 显示隐藏动画效果

8.1.1 show() 方法与hide() 方法

show() 方法能动态地改变当前元素的高度、宽度和不透明度，最终显示当前元素

hide() 方法会动态地改变当前元素的高度、宽度和不透明度，最终隐藏当前元素

jQuery 对象.show(duration,[fn]);
jQuery 对象.hide(duration,[fn]);

参数duration 表示动画效果运行的时间，可以使用关键字slow、normal 和fast，分别对应时间长度0.6 秒、0.4秒和0.2 秒。当不设置值时，表示立即显示/隐藏元素

可选参数fn 为在动画完成时执行的函数

示例：使用 show() 方法与hide() 方法以动画的方式显示和隐藏图片

<script type="text/javascript">
  $(function(){
    $("#btn").click(function() {
	if($(this).val()==" 显示") {
	     $("#pic").show("slow",function() {
	     	$(this).css({"border":"1px solid red","padding":"5px"});
        	     });
             	     $(this).val("隐藏");
	} else {
	     $("#pic").hide("slow");
	     $(this).val("显示");	}});});
</script>

8.1.2 toggle()方法

toggle() 方法会动态地改变当前元素的高度、宽度和不透明度，最终切换当前元素的可见状态

如果元素是可见的，则切换为隐藏状态；如果元素是隐藏的，则切换为可见状态

jQuery 对象.toggle(duration,[fn]);

*示例：*制作可伸缩的垂直菜单的操作

<style>
     //其他样式代码略
     ul li.down{
	background-image:url(../img/down.jpg);
     }
</style>

8.2 淡入淡出动画效果

8.2.1 fadeIn() 方法与fadeOut() 方法

fadeIn() 方法可以动态地改变当前元素的透明度（其他不变），实现淡入的动画效果，最终显示当前元素

fadeOut() 方法可以动态地改变当前元素的透明度（其他不变），实现淡出的动画效果，最终隐藏当前元素

jQuery 对象.fadeIn(duration,[fn]); 
jQuery 对象.fadeOut(duration,[fn]);

*示例：*使用 fadeIn() 方法与fadeOut() 方法以淡入淡出的方式显示和隐藏图片

<script type="text/javascript">
  $(function(){
    $("#btn").click(function() {
	if($(this).val()==“淡入") {
	     $("#pic").fadeIn("slow",function() {
	     	$(this).css({"border":"1px solid red","padding":"5px"});
        	     });
             	     $(this).val(“淡入");
	} else {
	     $("#pic").fadeOut("slow");
	     $(this).val(“淡出");	
    }
    });
  });
</script>

8.2.2 fadeToggle()方法

fadeToggle() 方法会动态地改变当前元素的透明度，最终切换当前元素的可见状态

如果元素是可见的，则通过淡出效果切换为隐藏状态；如果元素是隐藏的，则通过淡入效果切换为可见状态

jQuery 对象.fadeToggle(duration,[fn]);

*示例：*使用fadeToggle()方法实现后三项商品类型的动画效果在淡出和淡入之间切换

<style>
     //其他样式代码略
     ul li.down{
	background-image:url(../img/down.jpg);
     }
</style>
<script type="text/javascript">
    $(function(){
        $("#menu li.lastItem").click(function() {
	     // 切换菜单
	     $("#menu li:gt(5):not(:last)").fadeToggle();
	     // 更换底部箭头方向
	     $(this).toggleClass("down");
         });
    });
</script>

8.2.3 fadeTo() 方法

fadeTo() 方法可以改变元素的透明度到指定某一个值

jQuery 对象.fadeTo(duration,opacity,[fn]);

参数duration 为动画效果的速度，使用方式与hide()、show() 等方法一致

参数opacity 用于指定不透明值，取值范围是0 ～ 1（0 代表完全透明，1 代表完全不透明）

*示例：*使用fadeTo ()方法改变图片的透明度

<script type="text/javascript">
    $(function(){
        $("#sel").change(function() {
	     var opacity = $(this).val();
	     $("img").fadeTo(3000,opacity);
	}); 
      });
</script>

8.3 滑入滑出动画效果

8.3.1 slideDown() 方法与 slideUp() 方法

slideDown() 方法会动态地改变当前元素的高度（其他不变），由上到下滑入，即高度向下增大，使其呈现出一种“滑动”的效果，直至最终显示当前元素

slideUp() 方法会动态地改变当前元素的高度（其他不变），由下到上滑出，即高度向上减小，直至最终隐藏当前元素

jQuery 对象.slideDown(duration,[fn]);
jQuery 对象.slideUp(duration,[fn]);

*示例：*制作图书销售网站中“我的书库”菜单的二级菜单滑入滑出的动画效果

<script type="text/javascript">
  $(function(){
       $(".secondLi").hover(function() {
         $(".secondLi ul").slideDown(2000);
     },function(){
         $(".secondLi ul").slideUp(2000);
     });
    });
</script>
html和css代码略

8.3.2 slideToggle()方法

slideToggle() 方法会动态地改变当前元素的高度（其他不变），最终切换当前元素的可见状态

如果元素是可见的，则通过滑出效果切换为隐藏状态；如果元素是隐藏的，则通过滑入效果切换为可见状态

jQuery 对象.slideToggle(duration,[fn]);

*示例：*使用slideToggle()方法实现二级菜单滑入滑出的动画效果

<script type="text/javascript">
  $(function(){
       $(".secondLi").click(function() {
         $(".secondLi ul").slideToggle(2000); 
     });
    });
</script>



html和css代码略

8.4 自定义动画

8.4.1 简单的动画

animate() 方法可以动态地改变当前元素的各种 CSS 属性

jQuery 对象.animate(properties,[duration],[fn]);

参数 properties 使用一个“名：值”形式的对象来设置需要改变的 CSS 属性。

animate() 方法只能改变可以取数字值的 CSS 属性，如宽高，边框粗细，内外边距，元素位置，字体大小，字体间距，背景定位和透明度。

*示例：*animate() 方法实现图片的放大显示

<script type="text/javascript">
   $(function() {
      $("img").click(function() {
        $(this).animate({width:"180px",height:"180px"},"slow");
      });
   });
</script>
<body>
     <img src="../img/tmac.jpg"/>
</body>

8.4.2 移动位置的动画

通过 animate() 方法，不仅可以利用动画效果增加元素的长度和宽度，还能够利用动画效果改变元素在页面中的位置

示例：使用 animate() 方法改变页面元素的位置

<script type="text/javascript">
   $(function() {
      $("img").click(function() {
	    //属性值前可以加上 "+=" 或 "-=" 运算符号，表示在原先属性值上累加或累减
         $(this).animate({left:"+=100px",top:"+=100px",opacity:0.5},3000);
      });
   });
</script>
<body>
     <img src="../img/tmac.jpg"/>
</body>

8.4.3 队列中的动画

所谓“队列”动画，是指在元素中执行一个以上的多个动画效果，即有多个 animate() 方法在元素中执行

根据这些 animate() 方法执行的先后顺序，形成了动画“队列”，产生“队列”后，动画的效果便按“队列”的顺序进行展示

*示例：*演示队列中动画的使用

<script type="text/javascript">
   $(function() {
      //<div> 元素点击事件
      $("div").click(function() {
        $(this).animate({height:100},"slow");  // 第 1 列
        $(this).animate({width:100},"slow");  // 第 2 列
          $(this).animate({height:50},"slow");   // 第 3 列
        $(this).animate({width:50},"slow");   // 第 4 列
   });
</script>
<body>



     <div> 队列中的动画 </div>



</body>

8.4.4 动画停止

stop() 方法能够结束当前的动画，并立即进入到下一个动画

jQuery 对象.stop([clearQueue],[gotoEnd]);

不带任何参数的 stop() 方法，则会立即停止当前正在执行的动画，如果后面还有动画要继续，则以当前状态开始接下来的动画

learQueue 参数表示是否清空未执行完的动画队列，gotoEnd 参数表示是否立即完成正在执行的动画

*示例：*避免当用户光标进入或移出的速度太快，导致移入移出与对应的动画不一致

<script type="text/javascript">



  $(function(){



       $(".secondLi").hover(function() {



         $(".secondLi ul").stop().slideDown(2000);



     },function(){



         $(".secondLi ul").stop().slideUp(2000);



     });



    });



</script>



html和css代码略

总结：

show()、hide()和toggle()方法使元素以动画效果实现显示和隐藏，改变元素的宽度、高度和透明度属性
fadeIn()、fadeOut()、fadeToggle()和fadeTo()方法使元素以动画效果实现淡入和淡出的效果，改变元素的透明度
slideUp()、slideDown()和slideToggle()方法使元素以“卷窗帘”的动画效果实现显示和隐藏，改变元素的高度属性
使用animate()方法自定义元素的动画效果，可以实现上述方法中全部属性改变的功能，同时，还可以使用动画的效果，改变其他的元素属性
stop()方法能够结束当前的动画，并立即进入到下一个动画

本文链接：https://www.cnblogs.com/gcj520jjy/p/gcjscript.html

javascript笔记汇总

JavaScript交互式网页设计笔记

JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】

1.1 JavaScript 概述

1.1.1 JavaScript 简介

1.1.2 JavaScript 的概念和执行原理

1.1.3 JavaScript 脚本代码的位置

1.2 JavaScript 核心语法

1.2.1 变量

1.2.2 数据类型

1.2.3 JavaScript 注释

1.3 顺序结构和选择结构

1.3.1 顺序结构

1.3.2 选择结构

1.4 循环结构

1.4.1 while 循环语句

1.4.4 break 语句和 continue 语句

2.1 JavaScript 自定义函数

2.1.1 函数的定义

2.1.2 函数的调用

2.1.3 函数的参数

2.1.4 函数的返回值

2.1.5 匿名函数

2.1.6 变量的作用域

2.2 JavaScript 系统函数

2.2.1 parseInt()函数

2.2.3 isNaN()函数

2.2.4 eval()函数

2.3 JavaScript事件

2.3.1 事件

2.3.2 事件与处理程序的绑定

2.4 JavaScript的常用事件

2.4.1 鼠标事件

2.4.2 其他事件

2.4.3 表单事件

3.1 浏览器对象模型

3.1.1 浏览器对象模型

3.2 window 对象

3.2.1 window 对象的常用属性及方法

3.2.2 使用window对象创建对话框

3.2.3 使用window对象操作窗口

3.2.4 使用window对象执行计时事件

3.3 history 对象和 location 对象

3.3.1 history对象

3.3.2 location对象

3.4 screen对象和navigator对象

3.4.1 screen对象

3.4.2 navigator对象

4.1 文档对象模型简介及属性

4.1.1 文档对象模型概述

4.2 document 对象查找 HTML 元素

4.2.1 通过 id 查找 HTML 元素

4.2.2 通过 name 查找 HTML 元素

4.2.3 通过标签名查找 HTML 元素

4.2.4 通过类名查找 HTML 元素

4.3 document 对象改变 HTML

4.3.1 使用document对象改变HTML输出流

4.3.2 使用document对象改变HTML内容

4.3.3 使用document对象改变HTML样式

4.4 DOM 节点操作

4.4.1 节点信息

4.4.2 动态添加和删除节点

5.1 Object 对象和 Date 对象

5.1.1 JavaScript 的内部对象

5.1.2 Object对象

5.1.3 Date对象

5.2 Image对象和Math对象

5.2.1 Image对象

5.2.2 Math对象

5.3 数组和String对象

5.3.1 数组

5.3.2 String对象

5.4 对象的创建及常用语句

5.4.1 创建对象

5.4.2 对象常用语句

6.1 jQuery概述

6.1.1 初识 jQuery

6.1.2 jQuery 基本功能

6.1.3 搭建 jQuery

6.1.4 jQuery代码的特点