JavaScript基本结构

轮播图

• 常位于首页，用作活动推广的大图，其可以自动播放，点击左右切换按钮播放，也可以点击图片上的小圆点播放

 Tab切换

• 用于点击不同的标签或标题，显示不同的内容

 表单验证

• 常位于注册和登录页面，其用来在数据被送往服务器前对HTML表单中的输入数据进行验证。若输入的数据不正确，则会提示错误

 什么是JavaScript

• JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言
• 其常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果

 JavaScript特点

• 是一种解释性脚本语言
• 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为
• 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离
• 跨平台特性，可以在多种平台下运行
• 有自身的基本数据类型，表达式和算术运算符及程序的基本程序框架
• 可以实现web页面的人机交互

 三个主要组成部分

• ECMAScript（核心）
• BOM（浏览器对象模型）
• DOM（文档对象模型）

 ECMAScript

• ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。其是JavaScript的核心，描述了语言的基本语法、数据类型、语言、关键字、保留字、操作符、对象等

 BOM

• BOM（浏览器对象模型）对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等

 DOM

• DOM（文档对象模型）是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。HTML或XML页面的每个部分都是一个节点的衍生物

  
    
  
  
    
hello world!
  

 

 基本结构

• HTML中JavaScript代码必须位于 标签之间

使用

• 根据上述语法来编写第一个JavaScript程序

 使用 标签可以插入JavaScript代码

当JavaScript代码量较少时，推荐使用

 注意

• 一般网站都采用外部JS文件的方式编写JavaScript代码，可以帮助开发者快速开发和高效管理

 在HTML标签中

• 在HTML标签中直接写入JavaScript代码

• 在HTML标签中直接写入JavaScript代码的方法实际上没有真正把结构和行为分离，因此不建议使用

 JS变量

概念

• 在编程语言中，变量用于存储数据值。JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值

 使用

• 可以先声明变量，再为变量赋值；也可以同时声明和赋值变量

 JS注释

概念

• JavaScript注释可用于提高代码的可读性，其不会被浏览器解析

 使用

• 单行注释以“//”  开头，多行注释以“ /*” 开始，以“*/”  结尾

 

 使用JavaScript运算符实现基本算法

分类

• JavaScript运算符可以用作赋值，比较值，执行算术等，常用的运算符如下：
  • 算术运算符
  • 赋值运算符
  • 比较运算符
  • 逻辑运算符

 算术运算符

概念

• 算术运算符对数值（文字或变量）执行算术运算，常用的算术运算符如下
  • +：加法
  • -：减法
  • *：乘法
  • /：除法
  • %：余数
  • ++：自增
  • --：自减

• 声明几个变量，并使用算术运算符计算结果

• 赋值运算符用于给 JavaScript 变量赋值，常用的赋值运算符如下
  • =：向变量赋值
  • += 向变量添加值
  • -= 从变量中减去一个值
  • *= 相乘变量
  • /= 对变量相除
  • %= 把余数赋值给变量

• 声明几个变量，并使用赋值运算符计算结果

 比较运算符

概念

• 比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等，返回值是ture或false。常用的比较运算符如下
  • ==：等于
  • ===：等值等型
  • !=：不相等
  • >：大于
  • <：小于
  • >=：大于或等于
  • <=：小于或等于

• 下面声明变量，并使用比较运算符将值进行比较

 逻辑运算符

• 逻辑运算符用于判定变量或值之间的逻辑，常用的逻辑运算符如下：
  • &&（和）：如果两个表达式都为 true，则返回 true，否则返回 false
  • ||（或）：如果一个或两个表达式为 true，则返回 true，否则返回 false
  • !（非）：对于 false 语句返回 true，对于 true 语句返回 false

 

 使用if语句实现条件判断

条件语句

分类

• 平时编写代码时，经常需要基于不同判断执行不同的动作，此时就需要使用条件语句。在JavaScript中，可以使用如下条件语句进行判断：
  • if语句
  • else语句
  • else if语句
  • switch 语句

• if语句用来规定假如条件为true时被执行的JavaScript代码块

if (条件) {
    如果条件为true时执行的代码
} 

• 编码时，if 使用小写字母，因为大写字母（IF 或 If）会产生JavaScript错误

• 根据语法编写一段程序，即如果时间小于早上8点，则弹出“Good morning”的问候

 else语句

• else语句用来规定假如条件为false时的代码块

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

• 根据语法在上个示例的基础上修改程序，即如果时间小于早上8点，则弹出“Good morning”的问候，否则弹出“时间不早啦，该起床啦！”

 

 else if 语句

• else if 语句用来规定当首个条件为false时的新条件

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

• 根据语法在上个示例的基础上继续修改程序，即如果时间小于早上8点，则弹出“Good morning”的问候；如果不是，但时间小于10点，则弹出“开始新一天的工作啦！”；否则弹出“祝你今天有个好心情！”

 使用switch语句实现条件判断

• switch语句用于选择多个需被执行的代码块之一

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

• 第一步：计算switch表达式
• 第二步：把表达式的值与每个case的值进行对比
• 第三步：如果存在匹配，则执行关联代码

 关键词

• break关键词：如果JavaScript遇到break 关键词，它会跳出switch代码块
• default关键词：用于规定不存在case匹配时所运行的代码

• 根据switch语句的语法编写程序，即根据天气提示穿衣攻略

 default关键词

• 用于规定不存在case匹配时所运行的代码 。若给上一示例再声明一个变量为weather5，但不赋值天气情况

 

掌握循环语句的使用

• JavaScript 支持不同类型的循环，具体如下
  • for：循环代码块一定的次数
  • for in：循环遍历对象的属性
  • while ：当指定的条件为true时循环指定的代码块
  • do while：当指定的条件为true时循环指定的代码块

• for循环是创建循环时最常用的循环之一，用于循环代码块一定的次数

for (语句 1; 语句 2; 语句 3)
{
   	被执行的代码块
}

• 语句 1 ：（代码块）开始前执行
• 语句 2： 定义运行循环（代码块）的条件
• 语句 3 ：在循环（代码块）已被执行之后执行

• 根据for循环语法在页面中打印5次“欢迎学习循环”

 

• 语句1：在循环开始之前设置变量（“var i=0”，表示从0开始）
• 语句2：定义循环运行的条件（因为打印5次“欢迎学习循环”，所以i 必须小于 5）
• 语句3：在每次代码块已被执行后增加一个值（i++）

• JavaScript中的 for in语句用于循环遍历对象的属性

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

• 先声明一个小猫对象，再根据 for in循环的语法在页面中打印出小猫的名字、颜色及年龄

• while循环会在指定条件为真时循环执行代码块

while (条件)
{
	 需要执行的代码
}

 注意

• 编码时，如果忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃，因此要慎用while循环

• 先声明一个变量，再根据while循环语法实现在页面中打印0-4的整数

 do while循环

• do while循环是while循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环

do
{
   需要执行的代码
}
while (条件);

• 根据do while循环语法修改上一示例，同样在页面中打印出0-4的整数

 while和do while循环区别使用

• 通过前面示例可以发现，使用while循环和do while循环都可以在页面中打印出0-4的整数，如果将do while循环中的条件修改为false，代码会如何执行呢？

 

• while循环是先判断条件，后执行；do while循环是先执行一次，再判断条件

函数概述及事件驱动 

• 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。使用时，函数是包裹在花括号中的代码块，前面使用了关键词 function

function functionname(){
    // 执行代码
}

 注意

• JavaScript对大小写敏感。关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数

• 根据函数语法实现用户点击按钮时，调用函数，并弹出“你好，欢迎学习函数”

JS

 定义函数的两种方式

• 在JavaScript中，使用关键字 function 定义函数。实际上，函数可以通过声明定义，也可以是一个表达式。因此，定义函数有两种方式，分别是：
  • 函数声明（前面已学过），即

function functionname(){
 	// 执行代码
}

函数表达式

JavaScript函数可以通过一个表达式定义，其基本语法如下

var functionName=function(){
      //执行代码
}

• 这种形式看起来像是常规的变量赋值语句，即创建一个函数并将它赋值给变量functionName。这种情况下创建的函数也叫做匿名函数
• 在使用时，需要注意的是必须先赋值，再调用函数

 函数表达式

• 使用函数表达式的方式定义函数，并在页面中打印“欢迎学习JavaScript函数”

 概念

• 在调用函数时，可以向函数传递值，这些值被称为参数。参数的数量可以是多个，它们之间由逗号分隔

myFunction(argument1,argument2)

当声明函数时，把参数作为变量来声明

function myFunction(var1,var2)
{
	//执行代码
}

• 根据带参函数的语法，使用函数声明的方式定义函数并向其传递参数，最终在页面中打印出所传递的变量

• 编码时，经常会希望函数将值返回调用它的地方，此时，就需要通过return语句实现

function myFunction(){
 	var x=5;
   	return x;
}

• 使用return时，整个JavaScript并不会停止执行，仅仅是函数会停止执行。JavaScript将继续从调用函数的地方执行代码当声明函数时，把参数作为变量来声明

 使用

• 根据返回值函数的语法，计算两个数字的乘积，并返回结果

 变量及作用域

概念

• 变量的作用域是指变量在程序中的有效范围，即在有效范围内可以使用该变量
• JavaScript中，变量根据作用域的不同可以分为
  • 全局变量
  • 局部变量

 全局变量和局部变量

• 全局变量是定义在所有函数之外的变量，作用范围是该变量定义后的所有代码
• 局部变量是使用var关键字声明并定义在函数体内的变量，只有在该函数中，且在该变量定义后的代码中，才可以使用这个变量

 改变局部变量位置

• 由于局部变量b只作用于函数体，所以如果在函数之外打印局部变量b的值将会出现错误

 变量的优先级

• 如果在函数体中定义了一个与全局变量同名的局部变量，那么该全局变量在函数体中将不起作用

 使用

作用域链

概念

• 全局变量和局部变量的访问权限，其实是由作用域链决定的
• 每次进入一个新的执行环境，都会创建一个用于搜索变量和函数的作用域链。作用域链是函数被创建的作用域中对象的集合。其可以保证对执行环境有权访问的所有变量和函数的有序访问

 工作原理

• 最前端始终是当前执行的代码所在环境的变量对象，下一个变量对象来自包含环境，下一个变量对象来自包含环境的包含环境，依次往上，直到全局执行环境的变量对象。如果在作用域链的顶端（全局）中仍然没有找到，则会报错

 工作原理解释

• 作用域链概念及工作原理比较抽象，且不易理解，下面以案例来说明作用域链的工作原理

首先JavaScript引擎在最内层活动对象中（即f3()函数）查询变量 a、b、c 、d、e，但是从中只找到了变量d，并获取其值为4；然后沿着作用域链，在上一层活动对象中（即f2()函数）继续查找变量，找到了变量c，并获取其值为3；接着继续沿着作用域链继续向上查找，在f1()函数中找到了变量b，并获取其值为2；接着继续向上找，找到了全局变量a，并获取其值为1；但是在整个作用域链中并没有找到变量e，所以会报错“e is not defined”。

 理解闭包的使用

• 在函数中，函数内部可以直接读取全局变量，但是在函数外部无法读取函数内的局部变量

上述代码中，分别有两段代码，第一段是在f1()函数内部读取全局变量num1，第二段是在f2()函数外部读取函数内的局部变量num2。

结论
通过效果图可以发现，第一段代码在控制台输出了“1”，但是第二段代码报错了，原因就是在函数外部无法读取函数内的局部变量。

（3）抛出疑问
那么，在JavaScript中，如何在函数外部读取函数内的局部变量呢？

从外部读取局部变量 

• 在函数的内部，再定义一个函数

在上述代码中，f2()函数被包括在f1()函数内部，这时f1()函数内部的所有局部变量，对f2()函数都是可见的。所以会在控制台中输出num1的值.

2）结论
这时，虽然可以在函数外部读取局部变量了，但是反过来不行，f2()函数内部的局部变量，对f1()函数就是不可见的。这就是JavaScript语言特有的“链式作用域”结构，子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

 闭包概念        

从外部读取局部变量

• 既然f2()函数可以读取f1()函数中的局部变量，那么只要把f2()函数作为返回值，是不是可以在f1()函数外部读取它的内部变量了？

闭包用途

概念

• 闭包就是能够读取其他函数内部变量的函数
• 在JavaScript中，只有函数内部的子函数才能读取局部变量，所以闭包可以简单理解成“定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁

 好处

• 可以读取函数内部的变量
• 让这些变量的值始终保持在内存中

 闭包用途

变量的值终保持在内存中

• 通过修改上一示例代码来说明如何将变量的值始终保持在内存中

• 在使用闭包时，需要注意如下两点：
  • 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露
  • 闭包会在父函数外部，改变父函数内部变量的值，所以要慎用闭包，不要随便改变父函数内部变量的值

 JavaScript弹窗

BOM分类

浏览器对象模型分类

• BOM可以对浏览器窗口进行访问和操作，具体如下：

对象名称	说明
window	窗口对象，可以用来控制当前窗口或打开新的窗口
screen	屏幕对象，获取屏幕相关信息
navigator	浏览器对象，可以判定用户所使用的浏览器
history	历史对象，可以用来前进或后退一个页面
location	地址对象，可以用来获取当前URL的信息
JavaScript 计时事件	在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
localStorage和SessionStorage	存储对象, 可以用来存储数据

 JS弹窗

window对象方法

• 在JavaScript中，window对象可以用来控制当前窗口或打开新的窗口，其方法如下：
  • window.innerHeight：获取浏览器窗口的内部高度(包括滚动条)
  • window.innerWidth：获取浏览器窗口的内部宽度(包括滚动条)
  • window.open()：打开新窗口
  • window.close()：关闭当前窗口
  • window.moveTo()：移动当前窗口
  • window.resizeTo()：调整当前窗口的尺寸

• 在JavaScript中，window对象可以用来控制当前窗口或打开新的窗口，其方法如下：
  • window.innerHeight：获取浏览器窗口的内部高度(包括滚动条)
  • window.innerWidth：获取浏览器窗口的内部宽度(包括滚动条)
  • window.open()：打开新窗口
  • window.close()：关闭当前窗口
  • window.moveTo()：移动当前窗口
  • window.resizeTo()：调整当前窗口的尺寸

• 除此之外，window对象最常用的是JavaScript弹窗，即：
  • window.alert()：警告框
  • window.confirm()：确认框
  • window.prompt()：提示框

 警告框

• 经常用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续进行操作

window.alert("sometext");

使用alert()方法实现当用户点击按钮弹出“你好，我是一个警告框！

警告框

• 经常用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续进行操作

window.alert("sometext");

• 使用alert()方法实现当用户点击按钮弹出“你好，我是一个警告框！”

确认框

• 通常用于验证是否接受用户操作。当确认框弹出时，用户可以点击“确定”或者“取消”来确定用户操作，若用户点击“确定”，确认框返回true，若用户点击“取消”，确认框返回 false

window.confirm("sometext");

使用confirm() 方法实现当用户点击“确定”按钮时，页面中打印出“你点击了【确定】按钮！”，当用户点击“取消”按钮时，页面中打印出“你点击了【取消】按

 提示框

• 经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击“确认”或“取消”按钮才能继续操作，若用户点击“确认”按钮，那么返回值为输入的值；若用户点击“取消”按钮，那么返回值为 null

window.prompt("sometext","defaultvalue");

• 使用prompt() 方法在页面中打印出自己的名字及问候语

计时事件

概念

• 使用JavaScript，可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件

 分类

• 在JavaScript中，计时事件有如下四个方法：
  • setInterval()：间隔指定的毫秒数不停地执行指定的代码
  • clearInterval()：用于停止 setInterval() 方法执行的函数代码
  • setTimeout()：在指定的毫秒数后执行指定代码
  • clearTimeout()：用于停止执行setTimeout()方法的函数代码

 setInterval()

• 用于间隔指定的毫秒数不停地执行指定的代码

window.setInterval("javascript function",milliseconds);

• 使用setInterval()方法实现点击“开始”按钮后每隔3秒弹出“你好”

clearInterval()

• 用于停止 setInterval() 方法执行的函数代码

window.clearInterval(intervalVariable);

• 使用clearInterval()方法取消上一示例的setInterval()方法，使页面不再每隔3秒弹出“你好”的警告框

setTimeout()

• 用于暂停指定的毫秒数后执行指定的代码

window.setTimeout("javascript function", milliseconds);

• 修改第一个示例的代码，使其等待3秒，再弹出“你好”的警告框

 clearTimeout()

• 用于停止执行setTimeout()方法的函数代码

window.clearTimeout(timeoutVariable);

• 修改上一示例，使页面在未弹出“你好”的警告框之前停止执行setTimeout()方法

DOM的常用方法

方法

• 在JavaScript中，有三种方法可以查找HTML元素，具体如下：
  • document.getElementById：通过id查找HTML元素
  • document.getElementsByTagName：通过标签名查找HTML元素
  • document.getElementsByClassName：通过类名查找HTML元素

 查找元素

使用

• 在网页中创建标题、段落和超链接三个标签，并为标题添加id属性，超链接添加class属性。再通过JavaScript操作HTML元素，使用户点击不同标签弹出不同的话术

	
	


	
我是一个有id属性的标题
	
我是段落标签
	我是一个带有class属性的超链接
	

方法

• 在JavaScript中，有三种方法可以改变HTML，具体如下：
  • document.write()：用于改变HTML输出流
  • innerHTML：用于改变HTML内容
  • 对象.attribute=新属性值：用于改变HTML属性

 改变HTML内容

• innerHTML用于改变HTML内容，其语法如下

document.getElementById(id).innerHTML=新的HTML;

• 根据语法改变段落标签中的文本

	
	


	
Hello World!
	

 

 改变HTML属性

• 在JavaScript中，如下语法用于改变HTML元素的属性

document.getElementById(id).attribute=新属性值;

• 根据语法将图像标签的路径改变一下，使其换张图片

改变HTML样式

• 在JavaScript中，如需改变 HTML 元素的样式，可以使用如下语法

document.getElementById(id).style.property=新样式;

• 根据语法将段落标签的文本颜色变为红色，字体大小变为32像素

	
	


	
我是段落一
	
我是段落二
	

DOM节点关系及属性

DOM节点

• 在JavaScript中，DOM可以将把整个页面规划成由节点层级构成的文档

	
    	
	
	
		
hello world!
	

结论 

• 通过上页图片可以总结出，HTML 文档中的所有内容都是节点，即：
  • 整个文档是一个文档节点
  • 每个HTML元素是元素节点
  • HTML元素内的文本是文本节点
  • 每个HTML属性是属性节点
  • 注释是注释节点

 层级关系

• 节点树中的节点彼此拥有层级关系，常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。其中，父节点拥有子节点；同级的子节点被称为同胞（兄弟或姐妹）。具体层级关系如下：
  • 在节点树中，顶端节点被称为根（root）
  • 每个节点都有父节点、除了根
  • 一个节点可拥有任意数量的子节点
  • 同胞是拥有相同父节点的节点

 分类

• 在JavaScript中，访问节点属性如下表所示

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

 使用

• 通过无序列表搭建春夏秋天标题及相关成语，并通过节点属性访问各个内容

	
	


	
四季
		

			
春天
相关成语：春暖花开、万物复苏
			
夏天
相关成语：夏日炎炎、挥汗如雨
			
秋天
相关成语：落叶知秋、秋风习习
			
冬天
相关成语：鹅毛大雪、天寒地冻
		
查看更多成语>>
	

• 父节点（list.parentNode）
  • 通过HTML代码可以看出，id为list的div元素父节点是body，所以控制台将打印出body的所有内容

• 子节点（list.childNodes）
  • 通过HTML代码可以看出，id为list的div元素子节点有h1标题、空格（注意，空格，注释，回车都属于节点）、ul列表、超链接，所以控制台将打印出四个子节点

• 第一个子节点（list.firstChild）
  • 通过HTML代码可以看出，id为list的div元素第一个子节点是h1标题，所以控制台将打印出h1标题的内容

• 最后一个子节点（list.lastChild）
  • 通过HTML代码可以看出，id为list的div元素最后一个子节点是超链接，所以控制台将打印出a标签的内容

• 第一个子节点相邻的下一个同胞的下一个同胞（list.firstChild.nextSibling.nextSibling）
  • 通过HTML代码可以看出，id为list的div元素第一个子节点是h1标题，h1标题的下一同胞是空格，空格的下一同胞是ul列表，所以控制台将打印出ul列表的内容

• 最后一个子节点相邻的上一个同胞（list.lastChild.previousSibling）
  • 通过HTML代码可以看出，id为list的div元素最后一个子节点是超链接，超链接的上一个同胞是ul列表，所以控制台将打印出ul列表的内容

 DOM节点操作

方法

• 在JavaScript中，可以动态地去操作节点，具体方法如下表所示

名称	描述
document.createElement(“元素名”)	创建元素节点
document.createTextNode(“文本”)	创建文本节点
A.appendChild( B)	把B节点添加至A节点的末尾
父节点.removeChild(子节点)	删除指定的节点
父节点.replaceChild( newNode, oldNode)	用其他的节点替换指定的节点

 创建并添加节点

• 如果想要创建新的HTML元素（节点），就需要先创建一个元素，然后再将创建好的元素添加至指定的位置
• 下面使用DOM节点操作方法创建一个新的段落，并将新段落添加至已存在元素中

	
	


	

		
我是段落1
		
我是段落2
	
	

 

• 步骤1：使用“document.createElement()”方法创建了一个

  元素

• 步骤2：使用“document.createTextNode()”方法为

  元素创建了新的文本节点

• 步骤3：使用“appendChild()”方法将新的文本节点添加到

  元素中

• 步骤4：想将

  元素放置在id为“box”的

  元素中，所以要先获取

  元素
• 步骤5：再次使用“appendChild()”方法将

  元素添加到

  元素中

 删除节点

• 将上一示例中的第一个

  元素删除

• 
  
  
  	
  	
  
  
  	
  
  		
  我是段落1
  		
  我是段落2
  	
  	
  
  

  

• 替换节点 

• 修改上面示例，将第一个

  元素替换为

  元素

	
	


	

		
我是段落1
		
我是段落2
	
	

 JS面向对象

• 通过JavaScript有两种不同的方式创建自己的新对象，即：
  • 使用Object定义并创建对象的实例
  • 使用对象字面量方式创建对象

 Object方式

语法

• 通过Object引用类型的实例创建的对象，它们都会从Object.prototype继承属性和方法

new Object()

 使用

• 创建一个用户对象，并向其添加两个属性和一个方法

 对象字面量

 语法

• 对象字面量是定义对象的一种简写形式，为函数传递大量可选参数时使用

使用

• 修改上一示例，将Object创建对象的方式改为对象字面量的方式

提问 

• 提升需求，此时想要创建多个对象，应该如何实现呢？

 解决办法

• 简单粗暴地方式，直接复制粘贴多个

• 虽然可以创建多个对象，但是代码量冗杂且重复

 构造函数

• 在JavaScript中，用new关键字来调用的函数，称为构造函数。构造函数首字母一般大写

 使用

• 把这些属性当做构造函数的参数传递进去，然后再通过 new 关键字来创建对象

 

理解原型 

构造函数

• 如果通过new操作符来调用的，就是构造函数，如果没有通过new操作符来调用的，就是普通函数，下面以构造函数为例，即：

• var person1 = new Person('Mike',10);

  原型 

• 函数Person（对象）有个属性prototype（指针）指向原型对象。 Person.prototype（原型对象，实质也是对象），它有个属性constructor（指针） ，又指向Person函数对象，代码解释如下：

• console.log(Person === Person.prototype.constructor); //true

  实例对象

• 实例对象person1有个属性_proto_指向原型对象，实例对象可以通过这个属性访问原型对象上的属性和方法，即：

Perons.prototype._proto_ == person1._proto_

• 在JavaScript中，每个函数都有一个prototype（原型）属性，其指向一个对象，这个对象可以让所有对象实例共享它所包含的属性和方法

混合方式创建对象

• 在JavaScript中，可以通过构造函数结合原型的方式创建对象

 继承

分类

• 在JavaScript中，实现继承的方法有如下六种：
  • 原型链继承
  • 借用构造函数
  • 组合继承
  • 原型式继承
  • 寄生式继承
  • 寄生组合式继承

 原型链继承

• 核心点在于子类的原型是父类的实例

• 虽然实现了继承，但是存在一定的问题，即：
  • 原型中的属性和方法，在实例中是共享的。构造函数中的属性和方法在实例中不共享。这说明，父类中的所有属性，在子类的实例中都将共享，假如父类有一个数组，那么子类的实例将共享这个属性，当有一个子类实例改变这个数组的项时，所有的实例中的这个属性都会随之改变
  • 创建子类实例时，不能向超类型构造函数中传递参数

 借用构造函数

• 在子类构造函数中调用父类构造函数

• 解决了原型链继承的问题，所有的子类实例都将不共享属性和方法，互不影响，并且可以传值。但是此方法也存在问题，即：
  • 构造函数中的方法不能共享复用，每个实例都将拥有相同的方法
  • 父类的原型中的方法和属性在子类中不可见

 组合继承

• 即组合原型链方法和借用构造函数方法

• 既可以继承父类原型中的属性和方法，又能将父类的构造函数放入子类构造函数中

 jQuery

什么是jQuery

• jQuery是一个快速、简洁的JavaScript框架，它是由John Resig于2006年创建的。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情
• jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

 jQuery特点

• 快速获取文档元素
• 提供漂亮的页面动态效果
• 创建AJAX无刷新网页
• 提供对JavaScript语言的增强
• 增强的事件处理
• 更改网页内容

 jQuery下载

• 从官方网站（http://jquery.com）下载
  • 浏览器地址栏中输入“http://jquery.com”，并按下“Enter”键，将进入jQuery的首页
  • 点击图中的“Download jQuery”按钮即可选择需下载的版本。目前，jQuery的最新版本是jQuery 3.5.1

注意

• jQuery 2.0版本以上不再支持IE 6/7/8，所以版本最新并不代表最好，建议大家根据项目需求选择合适的版本

 jQuery下载

• 从微软、百度、新浪等引用 jQuery
  • 微软jQuery压缩版引用地址
    • https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js
  • 百度jQuery压缩版引用地址
    • https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
  • 新浪jQuery压缩版引用地址
    • https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js

 jQuery下载

• 以“微软jQuery压缩版引用地址”为例，介绍使用方式
  • 在浏览器地址栏中输入“https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js”，即打开微软jQuery压缩版引用地址

 jQuery语法

• 在jQuery中，可以使用如下语法实现文档就绪后执行jQuery方法

 $(document).ready(function(){ // 开始写 jQuery 代码... });

 简洁写法

$(function(){
 	// 开始写 jQuery 代码... 
});

• 在页面中引用jQuery库，并弹出“开始学习jQuery啦！”

选择器分类

• jQuery选择器允许对HTML元素组或单个元素进行操作，其基于元素的 id、类、类型、属性、属性值等选择HTML 元素（可参照CSS选择器）。需要注意的是，在jQuery中所有选择器都以美元符号开头，即“$()”

 基本选择器

• 基本选择器在实际应用中比较广泛，建议重点掌握jQuery的基本选择器，它是其他类型选择器的基础，是jQuery选择器中最为重要的部分

名称	选择器	描述	示例
ID选择器	#id	通过HTML元素的id属性选取指定的元素	$("#test")表示选择id为"test" 属性的元素
类选择器	.class	通过HTML元素的class属性选取指定的元素	$(".test")表示选择class为"test" 属性的元素
标签选择器	element	通过元素名选取元素	$("p")表示选择所有的p元素
复合选择器	selector1,selector2	将多个选择器组合在一起	$("div,p")表示选择所有div元素和p元素
通配符选择器	*	选择所有元素	$("*")表示选择所有元素

 层级选择器

• 通过DOM 元素之间的层次关系来获取元素

名称	选择器	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )表示选择#menu下的span元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )表示选择#menu的子元素span
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )表示选择紧邻h2元素之后的同辈元素dl
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )表示选择h2元素之后所有的同辈元素dl

 过滤选择器——简单过滤器

• 简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器

过滤器	描述	示例
:first	匹配找到的第一个元素	$("tr:first " )表示选择表格的第一行
:last	匹配找到的最后一个元素	$("tr:last" )表示选择表格的最后一行
:even	匹配所有索引值为偶数的元素	$("tr:even" )表示选择索引值为偶数的行
:odd	匹配所有索引值为奇数的元素	$("tr:odd" )表示选择索引值为奇数的行
:eq(index)	匹配一个给定索引值的元素	$("div:eq(1) " )表示选择第2个div元素
:gt(index)	匹配所有大于给定索引值的元素	$("div:gt(0) " )表示选择索引大于0的div元素
:lt(index)	匹配所有小于给定索引值的元素	$("div:lt(2) " )表示选择索引小于2的div元素
:header	匹配如h1、h2、h3......之类的标题元素	$(":header" )表示选择全部的标题元素
:not(selector)	去除所有与给定选择器匹配的元素	$("input:not(:checked) " )表示选择没有被选中的input元素
:animated	匹配所有正在执行动画效果的元素	$(":animated " )表示选择所有正在执行动画效果的元素

 过滤选择器——内容过滤器

• 内容过滤器是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选

过滤器	描述	示例
:contains(text)	匹配包含给定文本的元素	$(":contains("百度")")表示选择含有“百度”文本的元素
:empty	匹配所有不包含子元素或者文本的空元素	$("td:empty" )表示选择不包含子元素或者文本的单元格
:has(selector)	匹配含有选择器所匹配元素的元素	$("td:has(p)" )表示选择含有p元素的单元格
:parent	匹配含有子元素或者文本的元素	$("td:parent" )表示选择含有子元素或者文本的单元格

 过滤选择器——可见性过滤器

过滤器

描述

示例

:visible

选取所有可见的元素

$(":visible" )表示选择所有可见的元素

:hidden

选取所有隐藏的元素

$(":hidden" )表示选择所有隐藏的元素

• 通过表单元素的状态属性（例如选择、不可用等状态）匹配元素

过滤器	描述	示例
:checked	匹配所有被选中元素	$("input:checked" )表示选择checked属性为checked的input元素
:disabled	匹配所有不可用元素	$("input:disabled" )表示选择disabled属性为disabled的input元素
:enabled	匹配所有可用元素	$("input:enabled" )表示选择enabled属性为enabled的input元素
:selected	匹配所有选中的option元素	$("input:selected" )表示选择selected元素中被选中的option元素

• 筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定

过滤器	描述	示例
:first-child	匹配所有给定元素的第一个子元素	$("ul li:first-child" )表示选择ul元素中的第一个子元素li
:last-child	匹配所有给定元素的最后一个子元素	$("ul li:last-child" )表示选择ul元素中的最后一个子元素li
:only-child	匹配元素中唯一的子元素	$("ul li:only-child" )表示选择只含有一个li元素的ul元素中的li
:nth-child()	匹配其父元素下的第N个子元素	$("ul li:nth-child(3)" )表示选择ul元素中第3个子元素li

• 通过HTML元素的属性来选择元素

选择器	描述	示例
[attribute]	匹配包含给定属性的元素	$("div[name]" )表示选择含有name属性的div元素
[attribute=value]	匹配给定的属性是某个特定值的元素	$("div[name='test']" )表示选择name属性是test的div元素
[attribute^=value]	匹配给定属性是以某些特定值开始的元素	$(" [href^='en']" )表示选择href属性值以en开头的元素
[attribute$=value]	匹配给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" )表示选择href属性值以.jpg结尾的元素
[attribute*=value]	匹配给定属性是以包含某些值的元素	$(" [href* ='txt']" )表示选择href属性值中含有txt的元素

• 匹配经常在表单中出现的元素，但是匹配的元素不一定在表单中

选择器	描述	示例
:input	匹配所有input元素	$(":input") //表示选择所有input元素
:checkbox	匹配所有的复选框	$(":checkbox") //表示选择所有的复选框
:file	匹配所有的文件域	$(":file") //表示选择所有的文件域
:hidden	匹配所有的不可见元素，或者type为hidden的元素	$(":hidden") //表示选择所有的隐藏域
:password	匹配所有密码域	$(":password") //表示选择所有密码域
:radio	匹配所有单选按钮	$(":radio") //表示选择所有单选按钮
:submit	匹配所有的提交按钮，即type="submit"的input元素	$(":submit") //表示选择所有的提交按钮
:text	匹配所有的单行文本框	$(":text") //表示选择所有的单行文本框

 jQuery选择器的使用

• 以新闻列表为例主要演示一下如何在jQuery中使用选择器

	
	
	


	

		
新闻列表
		

			
 现实版樊胜美家属
			
 给自己宠物修毛的后果
			
 干饭人必备速瘦肚腩操 
			
 文件传输助手成职场人私密树洞
			
 鸡肉快乐吃法
			
 你喜欢哪些冬季运动项目？(点击进入调查页)
		
	
	
	

 

• 以新闻列表为例主要演示一下如何在jQuery中使用选择器

	
	
	


	

		
新闻列表
		

			
 现实版樊胜美家属
			
 给自己宠物修毛的后果
			
 干饭人必备速瘦肚腩操 
			
 文件传输助手成职场人私密树洞
			
 鸡肉快乐吃法
			
 你喜欢哪些冬季运动项目？(点击进入调查页)
		
	
	
	

 jQuery事件

• jQuery中常用的基础事件有鼠标事件、键盘事件、表单事件、文档/窗口事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseover	keyup	focus	scroll
mouseout		blur	unload
hover

• jQuery事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件

• 如给p元素绑定一个点击事件：

$("p").click();

• 下一步是定义什么时间触发事件，可以通过一个事件函数实现：

$("p").click(function(){ 
	// 动作触发后执行的代码!! 
});

使用

• 根据jQuery事件语法，再结合表单事件，实现当input元素获得焦点时，表单背景颜色为灰色；当input元素失去焦点时，表单背景颜色为白色

	
	


	
姓名：
	
密码：
	
	

复合事件

• 在jQuery中，hover()方法是鼠标事件，也是复合事件，其用于模拟鼠标光标悬停。当鼠标移动到元素上时，会触发指定的第一个函数；当鼠标移出这个元素时，会触发指定的第二个函数

 实现隐藏和显示效果

• 通过jQuery可以使用hide()和show()方法来隐藏和显示HTML元素

	
	
	


	
我会隐藏，也会显示哦！
	
	
	
	

 带有参数-语法

• 在jQuery中，还可以规定元素隐藏和显示的速度及回调函数，其语法如下

//隐藏
$(selector).hide(speed,callback);

//显示
$(selector).show(speed,callback);

 带有参数-使用

• 根据语法在上一示例的基础上给div元素设置带有参数的隐藏和显示效果，并使用回调函数，使隐藏或显示完成后，弹出“hide()方法已完成！”或“show()方法已完成！”

	
	
	


	
我会隐藏，也会显示哦！
	
	
	
	

• 通过jQuery可以使用toggle()方法来切换hide()和show()方法

	
	
	


	
我会隐藏，也会显示哦！
	
	
	

animate()方法

语法

• 在jQuery中，animate()方法用于创建自定义动画

$(selector).animate({params},speed,callback);

 参数

• 必需的params参数用于定义形成动画的CSS属性
• 可选的speed参数规定效果的时长。它可以取值为“slow”、“fast”或毫秒
• 可选的callback参数是动画完成后所执行的函数名称

 使用

• 实现div元素距离左边有200像素，即元素需要向右移动200像素

操作多个属性

• 修改上一示例代码，使div元素不仅距离左边有200像素，还改变宽高为200像素

stop()方法

• jQuery的stop()方法用于在动画完成之前，停止动画或效果

$(selector).stop(stopAll,goToEnd);

参数

• 可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行
• 可选的goToEnd参数规定是否立即完成当前动画。默认是 false

• 实现在上一示例完成动画之前点击“停止动画”按钮，使动画停止下来

jQuery中的插件

jQuery UI

• 以jQuery为基础的开源JavaScript网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序

全屏滚动插件fullPage.js

• fullPage.js是一个基于jQuery的插件，能够很方便、很轻松的制作出全屏网站。它主要功能有：支持鼠标滚动、支持前进后退和键盘控制、支持手机、平板触摸事件、支持CSS3动画等等

 验证插件validate.js

• Validate是基于jQuery的一款轻量级表单验证插件，其内置丰富的验证规则，还有灵活的自定义规则接口，满足应用程序各种需求

 jQuery Growl插件

• jQuery Growl插件（消息提醒）允许很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失，不需要单击“确定”按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐藏信息

 轮播图插件Swiper .js

• Swiper.js是一个开源、免费、强大的触摸滑动插件，其面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果

 下载

• 登录Swiper官网“https://www.swiper.com.cn/”，选择“获取Swiper”中的“下载Swiper”

• 接着选择最新版本下载即可

• 步骤1：首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，代码如下：

    ...
    


    ...
    
    ...

• 步骤2：编写html代码如下：

    

        
Slide 1
        
Slide 2
        
Slide 3
    
    
    

    
    
    

    

    
    
    

• 步骤3：初始化Swiper代码：

• 根据上面的三个步骤，实现一个带有分页器及前进后退按钮的轮播图