web从入门到下海

马天行文档笔记

我QQ:1213952416 本人单身有资源或者妹子加

Web前端马天行编写UI部分大家补全荡

马天行文档笔记 1

我QQ:1213952416 本人单身有资源或者妹子加

Web前端马天行编写UI部分大家补全荡

HTML 7

HTML基础 7

Css 36

Css基础 36

CSS高级 49

基础 49

2!! 53

UI 57

UI基础 57

JavaScript基础 Day1 58

4. ***变量 58

5. ***数据类型 58

Day2 63

1. ***数据类型转换 64

2. ***函数 64

3. 分支结构 64

1. ***函数 66

2. ***分支结构 66

Day3 67

Day4 71

1. ***数组 73

2. DOM入门 73

DOM树 74

查找元素 74

修改元素 74

JavaScript 深度 77

Day1 77

Am 77

Pm 78

Day2 80

Am 80

1. 函数 81

2. 分支 81

Pm 82

1. 全局函数:（了解） 83

2. 分支结构: 83

Day3 85

Am 85

1. 循环: 85

2. 数组 85

Pm 87

1. 数组: 87

Day4 90

Am 90

1. ***数组API 90

1. 转字符串: 90

Pm 91

1. ***数组 91

栈和队列 91

二维数组 91

Day5 94

Am 94

1. ***String 94

截取子字符串 94

***查找关键字 94

*****正则表达式 94

***替换(删除，格式化) 94

切割 94

Pm 96

Day6 98

Am 98

1. ***RegExp: 100

2. Math: 100

3. *Date: 100

Pm 101

Day7 103

Am 103

1. 错误处理 104

2. ***Function 104

***重载 104

***匿名函数 104

***作用域和作用域链 104

*****闭包 104

Pm 105

1. ***Function 106

***匿名函数 106

***作用域和作用域链 106

*****闭包 106

Day8 107

Am 107

Pm 108

1. *****面向对象: 109

*****原型和原型链 109

*****继承 109

# 112

Day09 113

Am 113

*****3. 即继承原型，又扩展结构: 最像Java的继承 116

*****call 和 apply 116

Pm 117

1. ECMAScript5.0 117

1. 对象: 117

对象的本质: 属性的集合 117

Day10 119

Am 119

1. ES5: 121

对象： 121

防篡改 121

函数API: bind方法 121

数组API: 121

严格模式: 121

Pm 123

1. ES5: 123

数组API: 123

bind: 123

严格模式: 123

DOM 125

Day01 125

1. 什么是DOM 125

2. DOM树 125

递归API: 127

Day02 130

1. 修改 130

改内容 130

改属性: 标准属性，自定义属性 130

改样式: 内联样式，样式表(外部/内部) 130

Day3 132

1. 创建和删除 132

2. HTML DOM常用对象: Select Table Form 132

Day4 137

1. BOM: 137

window: 打开，关闭，定位，大小 137

*****定时器 137

Day5 139

1. BOM的常用对象: history location navigator 139

2. *****Event: 139

第一月考试题目B 143

第二月考试题目 162

什么是this 177

jQuery 178

Day1 178

Day2 183

Day3 188

Day04 190

Sql 194

02 196

Day03 199

Day04 202

Day05 203

原生AJAX请求的步骤 204

Day06 208

Day07 211

Day08 214

Html5 217

Day02 221

Day03 225

Day04 227

Day05 230

Day06 233

Day07 238

Day08 241

Day09 244

Ajxs boos 247

Day01 247

DAY02 250

Day03 257

Day4 266

Bootstrap 278

Day01 278

Day2 282

Bootdtrap笔记 284

0. 工具软件介绍 284

1. 响应式网页 284

1.1. 响应式网页概述 284

1.1.1 什么是响应式网页 284

1.1.2 实现方式 284

1.1.3 所用技术 284

1.1.4 如何测试 284

1.2. 手工编写响应式网页 284

2. Bootstrap起步 285

2.1. 基本概念 285

2.1.1 什么是Bootstrap 285

2.1.2 主要构成 285

2.1.3 常用文件 285

2.2. 环境搭建 285

2.2.1. 基本模版 285

2.2.2 bootstrap.css 286

3. 全局CSS样式 286

3.1 基本元素 286

3.2 布局容器 286

3.3 按钮 286

3.4 图片 286

3.5 文本 287

3.6 排版 287

3.7 列表 287

3.8 表格 287

3.9 辅助样式 287

3.10 栅格系统 287

3.10.1 什么是栅格系统 287

3.10.2 栅格系统的工作原理 287

3.10.3 栅格布局 287

3.11. 表单 288

3.11.1 基础表单：每个元素都独占一行 288

3.11.2 行内表单：挤在同一行 <form class="form-inline" /> 288

3.11.3 水平表单: <form class="form-hor" 288

4. 组件 288

4.1 字体图标 289

4.2 下拉菜单 289

4.3 按钮组 289

4.3 警告框 289

4.4 导航 289

4.5 导航条 290

4.6 媒体对象 291

4.7 列表组 291

4.8 面板 291

4.9 输入框组 292

4.10 其他组件 292

5. 插件 292

5.1. JS插件概述 292

5.2 下拉菜单 293

5.3 警告框 293

5.3. 标签页 293

5.3 折叠框 293

5.4 工具提示 294

5.5 弹出框 294

5.6 模态框 294

5.7 轮播Carousel 294

5.8 附加菜单 295

5.9 滚动监听 295

6. LESS 295

6.1. LESS概述 295

6.2. LESS语法 296

6.2.1. 注释 296

6.2.2. 变量 296

6.2.3. 混合 296

6.2.4. 带参混合 296

6.2.5. 嵌套规则 296

6.2.6. 运算 296

6.2.7. 函数 296

6.2.8. 文件导入 296

6.3. 定制 296

6.3.1. Boot源码 296

6.3.2. 使用定制 296

CSS面试题答案 297

JavaScript面试 303

jQuery面试 310

HTML

HTML基础

web:网页

前端：界面，速度

设计型：偏向ui

开发型：网页实现与用户交互

第一阶段：基础

HTML+css+javascript

html5basic

css3basic

web ui

css3core

javasceiptbasic

开发型web前端：

第二阶段：

javascript

第三阶段

jquery 框架

HTML5core（核心）

服务器端

Ajax

第四阶段

bootstrap:css框架

angularJS:js框架

微信开发

设计型web前端：

第二阶段：

web ui:设计网页 +实现

第三阶段：

javascript

第四结算：

HTML·5（核心）

Ajax

jQery

bootstrap

微信开发

学习方法

练：写代码

背：背效果，背单词

1，web与internet

1,interner

英特网，互联网

主要服务

www，BBS（电子公告板，论坛），Email。。。telnet,ftp

目标：信息共享

实现技术

分组交换原理：

tcp/ip协议

2.web

1,什么是web

web就是Internet上面的一种网页应用程序

将各种服务与信息进行连接，并且提供生动的图形用户界面

2，web的工作原理

基予b/s结构的模式

b/s:b:browser:浏览器

s:server,服务器

通过浏览器去访问服务器的一种模式，都称为bs结构模式

C;/S:

C:client,客户端

s:server,服务器

必须制定的客户端，才能访问的服务器的一种程序或模式，统称cs结构模式

代表QQ

2,web的组成

由web服务器（server）,浏览器（browser），通信协议（http协议）

http：hyper text transfef prtocol

超级文本传输协议

规定了数据是如何打包的以及数据在互联网上是如何传递的。

服务器的概念：

pc：不是服务器：personal computer(个人计算机)

server:硬件强悍

3，浏览器与服务器

1服务器

主要功能

储存web页面。提供托管环境

响应浏览器请求，执行服务器端程序

主流的服务器软件

tomcat:apache

iis:微软

apache:apache

2,浏览器

主要功能

USER AGENT :UA ,用户代理

提交用户请求

· 解释HTML代码和脚本程序

··· 使用图形化方式显示内容

浏览器产品

chrome：Google

ie：Microsoft

opera:欧朋

safari:apple

firefox:mizilla

4,web相关技术

1，服务器端技术

只能运行在服务器端

所有的服务器端技术都提供了数据库访问能力

2，客户端（浏览器）技术

运行与客户端。由浏览器解释运行

HTML

css

JavaScript

2，HTML快速入门

1，HTML概述

HTML;hype text markup language

超级文本标记语言

html文件以。html或,htm作为结尾

2，HTML基本语法

1，标记语法

1，什么是标记

在HTML中用于描述功能的符号，称为标记，不同标记具备不同功能

2，标记的组成

由<>组成

<标记名称>：<a><b><br>

3标记的类型

标记分成2大类

1，封闭类型标记

2，非封闭类型标记

有开始，也有显示结束的标记，称为封闭类型标记也叫双标记

<标记名称></标记名称>

注意内容是受标记的样式控制的，

3，非封闭类型标记

有开始，可以没有结束。自己即可以表示开始也可以表示结束。也可以称为空标记或者单标记

语法：<标记名称>或</标记名称>

注意：单标记本身就是一段独立功能

<br>换行

<hr>:水平线

<img>图片

2,元素

就是标记

从开始标记开始到结束标记之间的所有内容，都统称为元素

元素：标记，属性，内容

1，元素嵌套

在一个元素里嵌套

语法：

<标记>

<标记></标记>

</标记>

1嵌套顺序

一定要完整嵌套

2，代码缩近

嵌套代码中子集元素，前要通过几个空格

来表示我们层级关系

嵌套标记写法：

1开始结束一起写

3，属性和值

属性：修饰元素不同显示效果的内容

值：最终确定显示效果的内容

属性：只能声明在开始标记中，并且属性与标记名称中间用空格分开

语法：<标记属性></标记>

在一个元素中，属性可以有多个，多个属性间用空格区分，并且排名不分先后

语法：<标记属性1 属性2 属性3></标记>

属性与值

属性和值用=关联

语法<标记属性1=“值” 属性2=“值”,></标记>

标准属性：

所有的元素都具备的属性

id=表示元素在页面表中的唯一名称

title:鼠标移入到元素上时，所提示的文本内容

class:定义元素的类样式与css

style：定义元素的内联样式（与css相关）

4，HTML注释

标识内容不会被浏览器解释运行。

通常会将对代码的解释说明

语法<!---被注释的内容---!>

注意：

1，注释不能被嵌套

2，注释不能写在标签内

3,html文档类型

1文档类型

<!doctype html>

2,html页面

位置：<!doctype html>之下

有且只有一个

标签：<html></html>

HTML页面包涵两大部分：

1，网页头部

负责定义网页的全局信息

网页头部可以包涵以下内容

1<title></title>

2<meta/>定义页面元素

3<script></style>定义内部样式表

2，网页主体

标签<body></body>

定义网页主体，所有的显示内容，都要放在body中。

2，网页主题

4,文本标记

1，特殊字符

需求：页面中打印输出<p></p>

注意1HTML中，<>不能随意输出

2，页面中不问多少空格和回车都会被解释成一个空格。

解决方案

靠转义字符解决这些特殊的效果

转义字符：

空格

©商业标记

¥$

2，文本标记

1，文本样式

能够改变文本的显示效果的标记

<b>:加粗

<i>:斜体

<u>；下划线

<s>:删除线

<sub>：下标

<sup>:上标

2，标题元素

通过改变文字的大小和加粗方式来显示的显示效果，主要作用为突出显示文字

<hn></hn> n:1-6

一级标题字最大，六级标题字最小

3，段落元素

突出显示文本为段落，变现形式为上下会具备垂直的空白

<p></p>

换行元素

效果等同元素<br></br>

cv大发复制粘贴

5，分区元素

1行内分区元素

作用：自定义显示效果

2，块分区元素

作用：布局

6，分割线元素

作用：在页面绘制一条水平线的前后会换行显示

<hr>

属性

width:宽度

height:高度；

color：颜色

align：线条水平对齐方向

取值：left（左）center（中）right（右）

7，与格式化

作用：保留源文档中的格式（回车和空格）

8,行内元素与块级元素

1，行内元素：多个元素会在同一行显示 b s u

2，块级元素：

默认情况下，块级元素会独占一行（宽度100%）

块级元素

1、WEB 与 Internet

1、Internet

因特网、互联网

主要服务:

WWW,BBS(电子公告板，论坛),Email...Telnet,FTP

目标：信息共享

实现技术：

分组交换原理：

TCP/IP协议

2、WEB

1、什么是WEB

WEB就是 Internet 上面的一种网页应用程序

将各种服务与信息进行连接，并且提供了生动的图形用户界面

2、WEB的工作原理

1、基于 B/S 结构的模式

B/S :

B : Browser , 浏览器

S : Server , 服务器

通过浏览器去访问服务器的一种模式，都称为BS结构模式

C/S :

C ：Client , 客户端

S ：Server , 服务器

必须荣国指定的客户端才能访问的服务器的一种程序或模式，统称为 CS结构模式

代表：QQ

2、WEB的组成

由 WEB服务器(Server)、浏览器(Browser)、通信协议(HTTP协议)

HTTP:Hyper Text Transfer Protocol

超级文本传输协议

规定了数据是如何打包的以及数据在互联网上是如何传递的。

服务器：

PC ：不是服务器，Personal Computer(个人计算机)

Server : 硬件强悍

3、浏览器与服务器

1、服务器

主要功能：

存储web页面，提供托管环境

响应浏览器的请求，执行服务器端程序

主流的服务器软件：

TOMCAT : Apache

IIS ：微软

APACHE : Apache

2、浏览器

主要功能：

User Agent : UA,用户代理

提交用户请求

解释 HTML代码和脚本程序

使用图形化方式显示内容

浏览器产品：

Chrome : Google

IE : Microsoft

Opera : 欧朋

Safari ： Apple

Firefox : Mizilla

4、WEB相关技术

1、服务器端技术

只能运行在服务器端

所有的服务器端技术都提供了数据库访问能力

php

jsp : Java Server Page

asp : Active Server Page

aspx : ASP.NET

2、客户端(浏览器)技术

运行与客户端，由浏览器解释运行

HTML

CSS

Javascript

2、HTML快速入门

1、HTML概述

HTML：Hyper Text Markup Language

超级文本标记语言

html文件以 .html 或 .htm 作为结尾的

2、HTML 基本语法

1、标记语法

1、什么是标记

在HTML中，用于描述功能的符号，称为标记,不同标记具备不同的功能

2、标记的组成

由 < > 组成

<标记名称> : <a> <b> <br>

3、标记的类型

标记分成2大类：

1、封闭类型标记

有开始，也有显示的结束的标记，称为封闭类型标记，也叫 "双标记"

语法：

<标记名称>内容</标记名称>

<a></a> : 超链接

<b></b> : 加粗

注意：内容，是受标记的样式控制的。

2、非封闭类型标记

有开始，可以没有结束。自己既可以表示开始也可以表示结束。也称为空标记或单标记

语法：<标记名称> 或 <标记名称/>

注意：单标记本身就是一段独立的功能

<br> : 换行

<hr> : 水平线

<img> : 图片

2、元素

就是标记

从开始标记开始到结束标记之间的所有内容，都统称为元素

元素：标记、属性、内容

1、元素嵌套

在一个元素内部又增加了另外一个元素

一个html页面就是由各种各样的嵌套元素所组成的

语法：

<标记1>

<标记2></标记2>

</标记1>

注意：

1、嵌套顺序

一定要完整嵌套

<div>

<p></p>

</div> 正确

<div>

<p>

fdsafdsafdsa

</div>

</p> 错误

2、代码缩进

嵌套代码中，子级元素前，要通过几个空格来表示层级关系

<div>

<p></p>

</div>

嵌套标记写法：

1、开始结束一起写

<div>

<p>

<a></a>

</p>

</div>

3、属性和值

属性：修饰元素不同显示效果的内容

值：最终，确定显示的效果的内容

属性只能声明在开始标记中，并且属性与标记名称中间用空格分开

语法：<标记属性></标记>

在一个元素中，属性可以有过个，多个属性间用空格区分，并且排名不分先后

语法：<标记属性1 属性2 属性3></标记>

属性与值：

属性和值用 = 关联

语法 <标记属性1="值" 属性2='值'></标记>

标准属性：

所有的元素都具备的属性

id : 标识元素在页面中的唯一名称

title : 鼠标移入到元素上时，所提示的文本内容

class : 定义元素的类样式(与CSS相关)

style : 定义元素的内联样式 (与CSS相关)

4、html 注释

标识内容不会被浏览器解释运行。

通常会将对代码的解释说明放在注释中

语法：

注意：

1、注释不能嵌套注释

<!--

-->

错误

2、注释不能写在标签内

<div></div>

错误

5、HTML版本

HTML2.0

HTML3.0

HTML4.01 1999 12 24 发布

XHTML1.0 2000 1 26 发布

HTML4.01

XHTML1.0

HTML4.01

<br>

XHTML1.0

<br/>

HTML5 : H5

目标：让代码更简洁

1、所有的单标记可以不加 /

2、某些特定的属性可以不给值

disabled

checked

selected

readonly

3、html文档结构

1、文档类型声明

用于指定 html 文档的风格和版本

html5 :

<!doctype html>

出现在整个 html 文档最顶层

2、html页面

位置：<!doctype html>之下

数量：有且仅有一个

标签：<html></html>

html页面包含两大部分：

1、网页头部

负责定义网页的全局信息

标签：<head></head>

网页头部允许包含以下内容：

1、<title></title> --标题

2、<meta/> --定义页面元数据(编码、关键字、描述 ...)

3、<script></script> -- 定义/引入Javascript

4、<link /> -- 引入外部 CSS 样式表

5、<style></style> -- 定义内部样式表

2、网页主体

标签：<body></body>

作用：定义网页的主体，所有的显示内容，都要放在body中

4、文本标记

1、特殊字符

需求：页面中打印输出 <p></p>

注意：

1、html中， <> 不能随意输出

2、页面中无论出现多少个回车和空格，最终都被解释成 1 个空格

解决方案：

靠 "转义字符" 解决这些特殊的效果

转义字符：

< <

> >

空格

¥ ￥

2、文本标记

1、文本样式

能够改变文本的显示效果的标记

<b></b> : 加粗

<i></i> : 斜体

<u></u> : 下划线

<s></s> : 删除线

<sub></sub> : 下标

<sup></sup> : 上标

2、标题元素

通过改变文字的大小和加粗方式来呈现文本的显示效果，主要作用为突出显示文字

<hn></hn> n:1~6

一级标题字最大，六级标题字最小

3、段落元素

突出显示文本为段落，表现形式为上下会具备垂直的空白

<p></p>

4、换行元素

效果等同于回车的效果

CV大法:

Ctrl + C : 复制

Ctrl + V : 粘贴

5、分区元素

1、行内分区元素

作用：自定义显示效果

2、块分区元素

作用：布局

6、分割线元素

作用：在页面绘制一条水平线

<hr>

注意：水平线的前后内容会换行显示

属性：

size：高度

width：宽度

color : 颜色

align : 线条的水平对齐方式

取值：left(左) center(中) right(右)

7、预格式化

作用：保留源文档中的格式（回车和空格）

8、行内元素与块级元素

1、行内元素：

多个元素会在同一行内显示

<b></b>

<s></s>

<u></u>

....

作用：修饰文本的不同表现形式

2、块级元素

默认情况下，块级元素会独占一行(宽度 100% )，块级元素的前后都会自动换行

作用：布局

1、图像和链接

1、URL

1、目录

文件夹

所谓的目录就是 web 站点中的文件夹名称

2、URL

1、什么是URL

Uniform Resource Locator

统一资源定位器

俗称：路径，

从一个位置到目标文件位置所经过的路线描述

URL的表现形式：

1、绝对路径

2、相对路径

3、根相对路径

以上三种形式的本质区别：查找资源文件的起始位置不同

2、绝对路径

从资源文件所在的最高级目录下开始查找

1、获取网络资源

1、协议名称

2、主机名称(域名、IP地址)

3、各级目录路径

4、文件名称

http://www.baidu.com/img/270_36cdbb596e619fcc8548d28d9506ad3d.gif

2、获取本机资源

从文件所在的盘符开始查找

C:/Users/Public/Pictures/Sample Pictures/Koala-1.jpg

弊端：不能更换计算机,不适合程序的移植

3、相对路径

是通过当前文件与资源文件之间的位置关系进行查找的

从当前文件位置出发找到资源文件所在位置所经过的路径就是相对路径

同级别：直接找

子目录：先进入

父目录：先返回

4、根相对路径(了解)

永远都是从 WEB 站点的根目录处开始查找

语法：/

/images/login.jpg

注意：根相对路径，只有将web项目部署到服务器时才可用

注意：路径要严格区分大小写。尤其是在服务器上。

2、图像

1、图像格式

jpeg ：*.jpg *.jpeg (有损压缩，压缩较大，文件小)

gif：*.gif (动画)

png：*.png (透明)

2、图像元素

将图像显示在页面中

标签：<img> 或 <img/>

属性：

src : 要显示图像的URL(绝对、相对、根相对)

width : 宽度

height：高度

数字作为值，像素(px)作为单位

注意：width 或 height 如果只给定一个属性的话，那么图片会按照给定的值进行等比缩放

title : 鼠标移入到图片时或者图片不显示时，所提示的文字

alt : 作用与title一样，老版本浏览器支持，现在主流浏览器支持性很差。

3、注意问题

1、align

尽量加在块级元素中

行内元素没有作用

2、标签嵌套问题

1、p 标记中只能嵌套文本、图像、行内元素，绝对不能嵌套块级元素，否则的话块级元素会将 p 元素拆开

2、hn 标题，一般只嵌套文本或行内元素

3、div 允许嵌套任何元素(除 html 、body、head之外)

4、行内元素不许嵌套块级元素

3、链接

1、允许用户进行点击的操作，可以通过链接来表示

典型代表：用户点击文字，跳转到另外一个页面

2、标签

标签：<a>内容</a>

属性：

href : 链接URL

注意：添加了 href 属性后，链接才可以被点击，否则，没有效果

target : 目标

打开新页面的方式（在当前标签页打开还是在新标签页中打开）

取值：

_self : 在当前标签页中打开(默认值)

_blank : 新标签页中打开

3、链接的表现形式

1、目标文档为下载资源

以上两种格式的文件出现在 href 中，不是跳转，而是下载

2、目标为发送电子邮件

3、返回页面顶部的空链接

4、链接到Javascript

4、锚点

在文档的某个位置处，做一个记号.随时随地可以跳转到该记号的位置处。

锚点的使用方式：

1、定义锚点

1、<a name="锚点名称"></a>

2、<标签 id="值"></标签>

2、链接到锚点

<a href="#锚点名称"></a> --跳转到本页的锚点处

<a href="页面url#锚点名称"></a> --跳转到其他页面的指定锚点处

http://www.tmooc.cn

2、表格

1、什么是表格

用来组织结构化信息的一个"容器"

表格是由一系列的”单元格“按照从左到右从上到下的顺序排列组成的。表格的最终使用目的是将数据保存在单元格中

html中的表格主要由三大部分组成

1、表格 : <table></table>

2、在表格的内部，由若干行组成的 <tr></tr>

3、在行的内部，由单元格(列)组成的 <td></td>

注意：默认情况下，所有行的列数都是统一化的。即每行的列数都一样。

练习：在html中，创建一个 5行4列的表格

4、表格标题

出现的位置在表格之上，水平居中的内容

注意：

1、caption的位置位于所有tr 之上，紧跟着table之下

2、一个table最多只能有一个 caption

2、属性

1、table 属性

width : 宽度

height : 高度

align : 表格在其容器内的水平对齐方式,取值：left(默认),center,right

border : 边框,边框宽度以px为单位的数值

bgcolor : 表格的背景颜色

cellpadding ：内边距,即单元格与内容之间的距离

cellspacing : 外边距,即单元格与单元格之间的距离

2、tr 属性

align : 当前行数据的水平对齐方式

valign: 当期行数据的垂直对齐方式(top,middle,bottom)

3、td属性

width

height

align

valign

bgcolor

colspan : 设置单元格跨列

rowspan : 设置单元格跨行

3、th 标记

th 与 td 是同级别的

th ：标题，当前列的内容，以标题的样式呈现出来的（加粗显示，水平居中）

4、表格的复杂应用

1、行分组

table 可以将 tr 划分为 3大部分：表头、表主体、表尾

表头：<thead></thead>

表主体：<tbody></tbody>

表尾：<tfoot></tfoot>

2、不规则的表格

改变传统表格的模式，每行的列数可以不同

实现方式：设置 td 的跨行和跨列属性

跨行：rowspan

跨列：colspan

跨列：从某个单元格位置处横向向右，合并几个单元格(包含自己)

注意：被合并掉的单元格，一定要从代码中删除出去，否则当前行会多出几个单元格

跨行：从某个单元格位置处纵向向下，合并几个单元格(包含自己)

注意：被合并掉的单元格，一定要从代码中删除出去，否则当前行会多出几个单元格

3、表格嵌套

在单元格中，允许放置另一个表格

在 <td> 中再包含一个 <table>

3、列表

1、什么是列表

列表也是按照一定的格式来显示数据的

格式：默认情况，从上到下的显示数据

2、什么样的数据适合放在列表中

会将具有相似特征或明显具备先后顺序的内容放在列表中

3、列表的组成

列表类型：有序列表和无序列表

列表项：列表中所显示的内容

4、使用列表

1、有序列表

可以将列表项的"顺序"罗列出来的列表

标记:<ol></ol> --> Order List

列表项：<li></li>

<ol>

</ol>

属性:

1、type

列表项前面的标识类型是什么

取值：

1 ：数字（默认值）

a ：小写字母

A ：大写字母

i ：小写罗马数字 i ii iii iv v vi ...

I ：大写罗马数字

2、start

规定在 type 值中的第几个位置处开始

2、无序列表

通过统一的固定标识，显示出列表项

标签：<ul></ul> --> Unorder List

列表项：<li></li> --> List Item

属性：

1、type

列表项标识类型

取值：

disc : 实心圆(默认值)

circle : 空心圆

square : 实心矩形

3、使用场合

1、数据按照从上到下的顺序来排列的时候

2、数据按照从左到右的顺序来排列的时候 - 网页导航

5、定义列表

给出一类事物定义的情形时使用

张无忌

英俊潇洒，玉树临风... 有好几个对象 ....

语法：

<dl>

<dt>描述的术语或名词</dt>

<dd>对上述名词或术语的解释</dd>

</dl>

使用场合：图文混排

<dl>

<dt>

</dt>

<dd>

Price : 125.55

xxxxx

</dd>

</dl>

1、结构标记

...

...

1、作用

为了提升标记的语义性

2、结构标记

1、<header></header>

作用：用于定义文档的页眉，就是html文档中最上面的内容

等同于：<div id="header"></div>

<h1>Welcome</h1>

</header>

2、<nav></nav>

作用：用来定义页面的导航链接部分

<nav>

<ul>

</ul>

</nav>

等同于：<div id="nav"></div>

3、<section></section>

作用：文档主体内容中的小节,现在，section可以表示整个页面中的主体内容

等同于：<div id="main"></div>

4、<article></article>

作用：用于描述文本性较强，或艺术气息较强的

一般情况下，论坛中的帖子信息、报纸中的文章信息、博客或微博中的条目信息、用户回复信息优先考虑放在 article 中

5、<footer></footer>

作用：定义页面中或某个区域中的脚注信息（位置靠下的信息）

6、<aside></aside>

作用：多数情况用于定义页面中的侧边栏信息

2、表单

1、表单作用

用于显示、收集信息并且将信息提交个服务器

表单中主要包含两组内容：

1、表单元素

2、表单控件

2、表单元素 <form>

标签：<form></form>

注意：

1、使用表单控件提交数据时，表单不能省略

属性：

1、action : 动作，后台处理程序的地址(服务器端工程师提供)。默认提交给本页。

2、method : 方法、方式，表单的提交方式。不同的提交方式，约束的内容不一样。

常用取值：2个

get ：

1、显示提交数据，会将提交信息显示在地址栏上，安全性不够高

2、大小限制，最大支持到 2KB 的提交

3、如果不设置 method 属性的话，默认就会按照 get 的方式进行提交

4、使用场合：向服务器索取数据时，优先使用get。

post :

1、隐式提交数据，不会将提交的信息显示在地址栏上，安全性较高，所有有关密码的信息提交时，必须用post

2、post 没有大小限制(大量数据提交时，可以使用)

3、使用场合：

1、安全性要求较高的页面(如包含敏感信息)

2、要求服务器去处理数据时，使用post

3、传递数据量较大时使用

3、enctype(了解)

功能：设置表单中提交的数据的编码方式

规范哪些数据可以提交给服务器...

取值：

1、applicatioin/x-www-form-urlencoded

默认值，

可以将普通的文本，特殊的字符，一起提交给服务器

2、multipart/form-data

允许将表单中的文件，传递给服务器，普通文本不能直接传递

3、text/plain

只能将普通文本(英文、数字)传递给服务器，特殊字符(=,& ...)不允许

4、id

5、name

3、表单控件

1、什么是表单控件

包含在表单中的元素，具备可视化外观，并且可以接受用户输入的数据

2、分类

1、input 元素

2、textarea 文本域

3、select 和 option 选项框

1、input 元素

作用：收集用户信息

语法：<input>

属性：

1、type ：根据不同的类型值，可以创建不同的输入控件

2、value ：控件的值，提交给服务器的数据

3、name ：控件的名称，必须设置，否则无法提交。服务器主要根据name的值，来获取value。

4、disabled ：禁用控件,该属性可以没有值。

具体的 input 类型的控件

1、文本框与密码框

文本框: type="text"

作用：允许用户输入任意字符的数据，明文显示。

密码框：type="password"

作用：允许用户输入任意字符的数据，密文显示。

属性：

1、maxlength ：限制输入的字符数

2、readonly ：只读,无需给值，只有有该属性即可

3、value ：控件值，同时也可以设置控件的默认值

注意：input元素下，如果不写 type值，或者 type值写错时，都默认为文本框

2、单选框和复选框

单选框：type="radio"

属性：

1、name ：定义名称并且实现控件分组。只有一组内的元素才能实现单选

2、value

3、checked ：设置默认被选中,该属性不需要值

复选框：type="checkbox"

属性：

name ：定义名称并且分组

value :

checked :

3、按钮

1、提交按钮

功能固定化，负责将数据提交给服务器

2、重置按钮

功能固定化，负责将表单控件恢复到初始化的状态

3、普通按钮

没有固定功能，由开发者通过 JS 来设置

属性：

value : 显示在按钮上的文本

name : 名称

4、非 input 标签的按钮

属性：type

4、隐藏域和文件选择框

1、隐藏域

不想让用户看见，但是又要提交给服务器的数据，可以放在隐藏域中

eg ：用户 id

type="hidden"

属性：

name

value

https://www.baidu.com/?username=admin&userpass=admin&repass=admin&gender=Male&hobby=drink&userID=334455

2、文件选择框

作用：提供一个基础控件，允许用户选择本机的文件上传到服务器

type="file"

属性：

name

注意：

1、表单的method 属性值必须为post

2、表单的enctype属性值必须为 multipart/form-data

2、textarea

文本域，能够接收用户录入的多行数据

标签：<textarea>默认文本</textarea>

属性：

name ：名称

readonly ：只读

cols : 指定文本区域的列数,变相的设置控件的宽度

rows : 指定文本区域的行数,变相的设置控件的高度，数据如果超出高度的话，则出现滚动条

3、选项框

1、下拉选项框

2、滚动列表

标签：

1、选项框

属性：

name：

size：默认显示的选项数量是几个

如果值大于1 则为滚动列表，否则就是下拉选项框

multiple : 设置多选，可以没有值，配合着键盘上的 ctrl 或 shift 键位一起

2、选项

属性：

value ：提交给后台服务器的值

selected : 设置默认被选中，可以没有值

4、其他标记

1、<label><label>

作用：关联文本和表单控件，关联后，点击文本就如同是点击控件一样。

语法：<label>文本<label>

属性：

for : 指定与当前 label 相关联的控件的 id 值

2、为控件分组

分组：<fieldset></fieldset>

标题：<legend></legend>

3、其他标记

1、浮动框架

可以将多个页面放到一个页面中去显示，就是页面间的嵌套

标签：<iframe></iframe>

属性：

1、src

要引入的网页url

2、width

3、height

4、frameborder

浮动框架的边框，可以手动设置为 0

2、摘要与细节

简单模拟展开与收缩的动作的标记

标记：

<details></details> 用于定义细节信息

<summary></summary> 定义细节内容的标题，允许被用户点击的部分，是 <details>的子标记

3、度量元素

可以在页面中定义一个度量衡,可以描述有关比例信息

标记：

属性：

min : 定义范围的最小值,默认值为0

max : 定义范围的最大值,默认值为1

value : 度量值，当前显示的值，默认为0

4、时间元素

用于定义显示的时间与具体时间值的一个关联操作

标记:

<time>显示的文本</time>

属性：

datetime : 设置关联的日期和时间,日期与时间之间用T来分割

5、高亮文本显示

标记：

<mark>高亮显示的文本</mark>

1、结构标记

...

...

1、作用

为了提升标记的语义性

2、结构标记

1、<header></header>

作用：用于定义文档的页眉，就是html文档中最上面的内容

等同于：<div id="header"></div>

<h1>Welcome</h1>

</header>

2、<nav></nav>

作用：用来定义页面的导航链接部分

<nav>

<ul>

</ul>

</nav>

等同于：<div id="nav"></div>

3、<section></section>

作用：文档主体内容中的小节,现在，section可以表示整个页面中的主体内容

等同于：<div id="main"></div>

4、<article></article>

作用：用于描述文本性较强，或艺术气息较强的

一般情况下，论坛中的帖子信息、报纸中的文章信息、博客或微博中的条目信息、用户回复信息优先考虑放在 article 中

5、<footer></footer>

作用：定义页面中或某个区域中的脚注信息（位置靠下的信息）

6、<aside></aside>

作用：多数情况用于定义页面中的侧边栏信息

2、表单

1、表单作用

用于显示、收集信息并且将信息提交个服务器

表单中主要包含两组内容：

1、表单元素

2、表单控件

2、表单元素 <form>

标签：<form></form>

注意：

1、使用表单控件提交数据时，表单不能省略

属性：

1、action : 动作，后台处理程序的地址(服务器端工程师提供)。默认提交给本页。

2、method : 方法、方式，表单的提交方式。不同的提交方式，约束的内容不一样。

常用取值：2个

get ：

1、显示提交数据，会将提交信息显示在地址栏上，安全性不够高

2、大小限制，最大支持到 2KB 的提交

3、如果不设置 method 属性的话，默认就会按照 get 的方式进行提交

4、使用场合：向服务器索取数据时，优先使用get。

post :

1、隐式提交数据，不会将提交的信息显示在地址栏上，安全性较高，所有有关密码的信息提交时，必须用post

2、post 没有大小限制(大量数据提交时，可以使用)

3、使用场合：

1、安全性要求较高的页面(如包含敏感信息)

2、要求服务器去处理数据时，使用post

3、传递数据量较大时使用

3、enctype(了解)

功能：设置表单中提交的数据的编码方式

规范哪些数据可以提交给服务器...

取值：

1、applicatioin/x-www-form-urlencoded

默认值，

可以将普通的文本，特殊的字符，一起提交给服务器

2、multipart/form-data

允许将表单中的文件，传递给服务器，普通文本不能直接传递

3、text/plain

只能将普通文本(英文、数字)传递给服务器，特殊字符(=,& ...)不允许

4、id

5、name

3、表单控件

1、什么是表单控件

包含在表单中的元素，具备可视化外观，并且可以接受用户输入的数据

2、分类

1、input 元素

2、textarea 文本域

3、select 和 option 选项框

1、input 元素

作用：收集用户信息

语法：<input>

属性：

1、type ：根据不同的类型值，可以创建不同的输入控件

2、value ：控件的值，提交给服务器的数据

3、name ：控件的名称，必须设置，否则无法提交。服务器主要根据name的值，来获取value。

4、disabled ：禁用控件,该属性可以没有值。

具体的 input 类型的控件

1、文本框与密码框

文本框: type="text"

作用：允许用户输入任意字符的数据，明文显示。

密码框：type="password"

作用：允许用户输入任意字符的数据，密文显示。

属性：

1、maxlength ：限制输入的字符数

2、readonly ：只读,无需给值，只有有该属性即可

3、value ：控件值，同时也可以设置控件的默认值

注意：input元素下，如果不写 type值，或者 type值写错时，都默认为文本框

2、单选框和复选框

单选框：type="radio"

属性：

1、name ：定义名称并且实现控件分组。只有一组内的元素才能实现单选

2、value

3、checked ：设置默认被选中,该属性不需要值

Css

Css基础

1,css概述

1，HTML控制样式的弊端

1，相同的样式效果，通过不同属性来完成的

2.程序可维护性不高

2，通过CSS解决上述问题

可以让哥哥元素都是用统一的样式声明从而提高程序的可重用性和可维护性

3，什么是CSS

CSS：cascading style sheet 层叠样式表级联样式表，简称样式表

作用：为HTML元素去定义样式

能够实现内容与表现相分离

提高程序的可重用性和可维护性

重用性：可以让多个元素使用相同的样式

维护性：一个元素的样式改变ITA元素也可以改着变

4，HTML与css之间的关系

HTML主要负责显示内容

css主要负责样式的定义

一个完整的页面=HTML+css

w3c建议尽量使用css样式取代HTML属性

5，css样式表的使用

1，使用方式

1，内联样式，行内样式

将样式定义在HTML元素中

特点：只能控制摸一个元素的显示效果

语法：<标记 style="样式属性：值；样式属性：值">

常用属性：

color：文本颜色，取值表示颜色的英文单词

style=“color:red;”

background-color：green；”

font-size:字体大小，取值以px为单位

style="font-size:20px"

2,内部样式表

将是一条的样式内容放在<head></head>中的

<style>/元素内

在这里添加若干样式会泽

样式规则对一套样式的完整描述主要包含两部分

1，那些标记允许使用定义好的样式-选择器

2样式内容-若干样式声明

样式规则语法

选择器{}

3，外部样式表

1实现内容与表现相分离

2，将可重用性和可维护性体现的最完美

3，可以在征网站乃至于互联网中做通用的样式定义

步骤

内联样式最高，就近原则

unknown property name：样式属性错了

3，CSS基础选择器

1，选择器的作用

规范了页面中的哪些元素能够使用定义好的样式

color:red

}

.redback{

}

class="redback"

1,群组选择器以，隔开选择器列表

作用：定义一组选择器的公共样式

语法：选择器1 选择器2 选择器3

egdiv,p,span,#manu,.big{

font-size:24px;

}

7,后代选择器

通过标签进行选择，上下关系，

语法，选择器1，选择器2

8，子代选择器

要求选择器之间只能存在父子关系

语法：选择器1>选择器2

注意：子代选择器，只能下下找一级

9，伪类选择器

1，不同状态匹配元素

2，伪类选择器分类

1，链接伪类、

2，动态伪类

3，目标伪类

4，元素状态伪类

5，结构伪类

6，否定伪类

3，语法规范

1，链接伪类

link·匹配尚未访问的超链接

visited匹配访问过的超链接

先定义链接伪劣在定义动作伪类

2，动态伪类

选择器权值

标签选择器

类选择器：10

伪类选择器10

id选择器100

内联样式1000

3，尺寸与边框

1，单位

2，尺寸

多表示元素的宽和高，取值为数字，单位为px或%

1宽度

属性：width

min-width

max-width

高度：height

不是所有元素都可以设置宽和高

1，块级元素允许设置尺寸属性

2，具备width height 属性的HTML元素

img table input

3行内元素不允许谁知宽度尺寸

溢出

设置元素尺寸时，并且元素中的内容所占空间超出元素本身的话，会导致内容溢出。

属性：overflow

取值：

1，visible：默认值，溢出可见

2，hidden

隐藏

3，scroll

滚动条，元素增加滚动条溢出可用

4，auto

自动，自动显示滚动条

3，边框

1，边框

1，简写方式

style:边框线条样式取值：solid实线dotted虚线

dashed虚线

2,单边定义

border-left/right/top/bottom:width style

color;

3，单属性定义

border-width:四条边宽度

border-style：四条边样式

border-color:颜色

4,单边单属性

border-方向-属性

方向：top/bottom/left/right

属性：width/style/color

注意

1，边框颜色，可取值为transparent（透明）

边框组成是由四个三角形或梯形组成

2边框倒角

圆形矩形

属性：border-radius

取值：以px为单位的数字或%

注意：当框模型（内边距，外边距边框）介入到元素后，元素的内容区域尺寸是不变的，但是会增加元素的总尺寸

元素总宽度=左右外边框+左右边框+左右内边距+width

元素总高度=上下外边距+上下边框+上下内边距+hight

div{

width：200px;

border:2px solid #ddd;

左右外边距：15px

左内边距：8px;

右内边距：4px;

}

总宽度：200+2*2+15*2+8+4=200+4+30+12=246px;

2,语法：

margin：value

margin-left：左外边框

取值：

单位

auto：自动只对左右外边具有有效设置水平居中

margin-left：取负值，为了向左移动的元素

margin-right：取负值，为了向右移动

取值数量

margin：value;四个方向外边距

margin：v1v2上下左右

4，外边距问题

垂直外边距合并

当两个垂直外边距相遇是他们都将形成一个外边距

称为合并外边距

合并后外边距高度值为连号元素中

内边距

1，什么是内边距

内容区域与边框之间的距离控件

注意：内边距会将元素边框撑大

数量

padding：value:上下左右

1、框模型

1、框

框就是个容器，目的为了承装其他的东西

html中所有的元素都可以称之为框

2、框模型

Box Model : 也称为盒子模型

定义了元素框处理元素内容尺寸、内边距、边框和外边距的方式

元素内容尺寸： width , height

div{

width:100px;

height:100px; `

}

边框：border

div{

border:1px solid #ddd;

}

注意：当框模型(内边距，外边距，边框)介入到元素后，元素的内容区域尺寸是不变的，但是会增加元素框的总尺寸

元素总宽度 = 左右外边距 + 左右边框 + 左右内边距 + width;

元素总高度 = 上下外边距 + 上下边框 + 上下内边距 + height;

eg :

div{

width : 200px ;

border: 2px solid #ddd;

左右外边距 : 15px;

左内边距: 8px;

右内边距: 4px;

}

总宽度：200 + 2*2 + 15*2 + 8 + 4 =

200 + 4 + 30 + 12 = 246px

3、外边距

1、什么是外边距

在元素边框周围的一些空白区域，这些区域是透明的，默认情况下，是不允许被其他元素所占据的。也可以表示为当前元素与其他元素之间的距离

2、语法：

margin:value; (四个方向的外边距)

单边设置：

margin-top : 上外边距

margin-bottom:下外边距

margin-left:左外边距

margin-right:右外边距

取值：

单位:

auto : 自动，只对左右外边距有效,设置水平居中

负值 : 目的是为了移动元素

margin-left:取负值，为了向左移动元素

margin-top :取负值，为了向上移动元素

取值为 auto ：由浏览器自己计算外边距。左右方向取值为 auto 时，会呈现出元素水平居中对齐显示方式（仅仅局限于块级元素，而且必须要设置宽度属性）

取值数量：

margin:value; 四个方向外边距

margin:v1 v2; 上下左右

margin:v1 v2 v3; 上左右下

margin:v1 v2 v3 v4; 上右下左

3、默认外边距

html元素里，有些元素默认具备外边距的

h1~h6

body

dl,dd

如果程序中，不想使用默认的外边距，可以设置为 0

4、外边距问题

1、(垂直)外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距，称为外边距合并

合并后的外边距的高度值为两个元素中外边距较大者的值

2、外边距溢出

父子元素中，如果设置子元素的上下外边距时，默认情况会被作用到父元素的外边距上

解决方式：

1、可以为父元素增加边框

2、增加父元素的 padding-top

最好将父元素的高度相应的减少一部分数值

4、内边距

1、什么是内边距

内容区域与边框之间的距离控件

注意：内边距会将元素边框撑大

2、属性

padding : value;

padding-top:

padding-bottom:

padding-right:

padding-left:

取值：

单位：

数量：

padding:value ; 上下左右

padding:v1 v2 ; 上下左右

padding:v1 v2 v3;上左右下

padding:v1 v2 v3 v4;上右下左

2、背景

1、背景颜色

属性：background-color

取值：可设置为合法的值或 transparent

注意：默认情况下，背景(颜色、图像)是从边框位置处就开始填充

2、背景图片

属性：background-image

取值：url("图像URL")

background-image:url("xxxx/xxx.jpg");

background-image:url('xxxx/xxx.jpg');

background-image:url(xxxx/xxx.jpg);

3、背景平铺

属性：background-repeat

取值：

repeat : 即水平方向又垂直方向平铺(默认值)

no-repeat : 没有平铺

repeat-x : 仅水平方向平铺

repeat-y : 仅垂直方向平铺

4、背景图片尺寸

属性：background-size

取值：

value1 value2 : 宽度高度

value1% value2% : 父容器的宽和高的占比

cover : 覆盖，将背景图像扩展至足够大，直到背景图已经覆盖了元素的所有区域.有可能导致背景图不能完整的显示在元素中

contain: 包含，将背景图扩大，直到背景图已经碰都某一个边缘位置（右、下）,背景图能够完完整整的显示在元素中，不一定能覆盖到所有的区域

5、背景图片固定

属性：background-attachment

取值：

scroll ：背景会随文档发生滚动

fixed : 固定，背景不会随着内容而发生滚动

6、背景定位

改变背景图片在元素中的位置

属性：background-position

取值：

x y : x水平偏移位置,值为正向右移动，值为负，向左移动

y垂直偏移位置,值为正向下移动，值为负，向上移动

x% y% :

左上角 : 0% 0%

右下角 : 100% 100%

居中显示 : 50% 50%

关键字：

x : left,center,right

y : top,center,bottom

CSS Sprite : 将多个背景图合并到一张里面去，根据需求情况，通过背景定位对背景图片进行偏移，从而找到要显示的图像

7、背景属性

将以上几个属性全部综合到一起,通过一个属性描述所有的值

属性:background

取值：color url() repeat attachment position;

常用值：

background:url() reapeat position;

background-image:url(Images/user.png);

background-repeat:no-repeat;

background-position:right center;

background:url(Images/user.png) no-repeat right center;

3、渐变

1、渐变语法：

属性：background-image

取值：

linear-gradient() -- 线性渐变

radial-gradient() -- 径向渐变

repeating-linear-gradient() -- 重复线性渐变

repeating-radial-gradient() -- 重复径向渐变

background-image:url(); -- 显示背景图像

background-image:linear-gradient(); -- 显示线性渐变颜色

2、线性渐变

属性：background-image

取值:linear-gradient(angle,color-point1,color-point2,...)

angle:方向(角度)

to top : 向上 --> 0deg

to right : 向右 --> 90deg

to bottom : 向下 --> 180deg

to left : 向左 --> 270deg

color-point :

表示颜色的数值和位置

red 10px

red 0%

background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);

3、径向渐变

属性：background-image

取值: radial-gradient();

radial-gradient([size at position],color-point1,color-point2,....);

size at postion :

可以省略不写

size : 标识的圆的半径以 px 为单位

position : 圆心的位置

top,left,right,bottom,center

具体数值

百分比

4、重复渐变

repeating-linear-gradient(angle,color-point);

color-point:

位置取具体的数值或者不到 100% 的数字

repeating-radial-gradient();

1、文本格式化(重要)

1、字体属性

1、指定字体(非重要)

font-family:value1,value2,value3....;

font-family:"微软雅黑","宋体","Arial";

2、字体大小(重要)

font-size:

取值： px 或 pt 作为单位的值

3、字体加粗(非重要)

相当于 : <b></b>

font-weight:normal/bold/无单位数字;

无单位数字：400 - normal

900 - bold

4、字体样式(非重要)

相当于：<i></i>

功能：斜体显示文字

font-style : normal / italic;

5、小型大写字母(非重要)

font-variant:normal/small-caps;

6、字体属性

font:font-style font-variant font-weight font-size font-family;

常用设置方式：

font:12px "微软雅黑","Arial";

font:12px/24px "microsoft yahei";

font:font-size/line-height "微软雅黑";

行高

2、文本属性

1、文本颜色 (重要)

color:value;

2、文本水平排列方式(重要)

相当于：html 属性中的 align

text-align:left / right / center

功能：能够控制当前元素内所有的文本、行内元素、行内块、水平对齐方式。

3、文字线条修饰

属性：text-decoration

取值：

none 无线条(重要)

underline 下划线(重要)

overline 上划线(非重点)

line-through 删除线(非重点) --> <s></s>

4、行高(重要)

一行文本所占据的高度是多少

如果行高大于文本大小的话，那么这行文字将呈现出垂直居中的显示方式

属性：line-height

取值：以 px 为单位的值

5、首行文本缩进(非重要)

属性：text-indent

取值：以 px 为单位的值

6、文本阴影(非重要)

text-shadow:h-shadow v-shadow blur color;

h-shadow:水平投射距离

v-shadow:垂直投射距离

blur:模糊距离

color:颜色

******************************************************

1、表格属性

1、表格常用属性(重点)

1、内边距 : padding

2、尺寸属性：width,height

3、文本属性 : font-* , text-*

4、背景属性 : background-*

5、边框 : border

6、vertical-align

功能：控制单元格内容的垂直对齐方式

取值：top / middle / bottom

2、表格特有属性

注意：该组属性只能在 table 中使用

1、边框合并(重要)

属性：border-collapse

功能：合并两个相邻的边框

取值：

separate : 默认值，分离边框

collapse : 合并

2、边框边距(非重点)

两个边框间的上下和左右的距离

注意：只有在 border-collapse:separate;时才有效

属性：border-spacing

取值：

取一个值：每两个单元格之间的垂直和水平间距是一致的。

取两个值：第一个值，指定的是水平间距，第二个值，指定的是垂直间距。两个值用空格隔开

3、显示规则(非重点)

属性：table-layout

取值：

auto : 列宽度由内容来决定，默认值。自动表格布局

fixed: 列宽度由设置的值来决定。固定表格布局

自动表格布局：

单元格的大小会适应内容的大小

加载时较慢

适用于不确定每列大小时使用

固定表格布局：

列宽度取决于设置好的相关属性值，与内容无关

会加速显示表格，每次加载表格时不用计算

固定表格布局虽然速度较快，但是不够灵活，不能体现出表格的特点。

自动表格布局，虽然算法较慢，但是是传统表格的体现

2、浮动定位

1、定位

元素框相对于其正常位置应该出现的位置在哪

分类：

1、普通流定位

流：排列元素的一种方式

又称为文档流定位，是页面默认排列元素的一种方式。

页面中的块级元素：元素是从上到下的方式排列

页面中的行内元素：元素是从左到右的方式排列

弊端：块级元素无法一行内显示多个，布局不好做。

2、浮动定位

解决问题：让多个块级元素能够在一行内显示

3、相对定位

4、绝对定位

5、固定定位

2、浮动定位

解决问题：让多个块级元素能够在一行内显示

1、什么是浮动定位

1、将元素排除在文档流之外，即元素脱离文档流。不受默认排列方式(从上到下或从左到右)的控制

2、元素将不再占用页面的空间

有可能会压住其他的元素

3、元素会停靠在包含框的左边或右边，或者停靠在已经浮动的元素的左边或右边

4、元素无论怎么浮动，最终还是在包含框之内

2、浮动属性

属性：float

取值：none / left / right;

注意：

1、块级元素浮动后，宽度会变成自适应

2、行内元素浮动起来后，除具备以上特点外，它将变成块级元素

3、清除浮动

功能：清除当前元素的左边(上边) 或右边已浮动元素对它所带来的影响

属性：clear

取值：left / right / both / none

4、float 与 overflow

原因：浮动元素会对父元素的高度带来影响，父元素的高度，最终以没有浮动元素的高度为准。

解决方案：

1、手动设置元素的高度

弊端：自适应高度时无法使用

2、通过 overflow 属性改变

overflow:hidden;放在包含浮动元素的父元素中，它会撑起当前元素的高度，变得自适应

弊端：能够隐藏超出范围的元素

3、在父元素内最后位置处，追加一个子元素 div，增加 clear:both;属性即可

CSS高级

基础

1、复杂选择器

选择器作用：为了匹配页面的元素

1、兄弟选择器

兄弟：平级，具备相同父元素的标记，都可以成为兄弟标记

1、相邻兄弟选择器

相邻：与某元素紧紧挨在一起的元素

作用：匹配下一个相邻元素

注意：相邻兄弟只能向下找不能向上找

<div>

<p></p>

</div>

语法：+ 作为结合符

selector1+selector2

h1+p{

}

.head+p{}

#myH1+p{}

2、通用兄弟选择器

作用：匹配某元素后面[所有的]兄弟元素

语法：~作为结合符

selector1~selector2

2、属性选择器

1、什么是属性选择器

能够将元素所附带的属性及其值用于选择器当中。

id,class,style,title

type,name,value ...

2、语法

[]

1、[attr]

attr:表示任意一个元素所支持的属性

eg:

[id] : 匹配页面中所有附带 id 属性的元素

[type]:匹配页面中所有附带 type属性的元素

2、element[attr]

element:表示页面中能够出现的任意一个元素

eg:

div[id]:匹配页面中所有附带 id属性的div元素

div input[type]:

3、element[attr1][attr2]...

eg:

div[id][class]:页面中同时附带了id和class属性的div元素

匹配页面中所有已禁用的 input 元素

input[disabled]

4、element[attr=value]

element:元素

attr:属性

value"值

匹配页面中附带属性等于指定值的元素

匹配页面中 attr = value 的 element

问题：

匹配页面中 id 值为 p1 的 p元素

p[id=p1] / p[id='p1'] / p[id="p1"]

匹配页面中 id 值为 p1 并且 class 值为 important的p元素

p[id=p1][class=important]

5、element[class~=value]

特点：

1、class 属性值是一个由空格隔开的值列表

2、value 是值列表中一个独立的单词

eg :

获取 class 值列表中包含 lf_btn 独立单词（类样式）的div元素

div[class~=lf_btn]

div[class~=btn]

6、element[class^=value]

匹配 class 属性值是以 value 作为开始的 element元素

div[class^="im"]

能匹配出

7、element[class$=value]

匹配 class 属性值是以 value 作为结尾的 element元素

div[class$="nd"]

能匹配出

8、element[class*=value]

匹配 class 属性值中包含 value 字符的element元素

3、伪类选择器

1、分类

1、链接伪类

:link

:visited

2、动态伪类

:hover

:active

:focus

3、目标伪类

4、元素状态伪类

5、结构伪类

6、否定伪类

2、高级伪类

1、目标伪类

作用：突出显示活动的 html 锚点元素

语法：:target / element:target

2、元素状态伪类

作用：匹配页面中已启用、禁用、被选中的元素

场合：多数用在表单元素中

语法：

:enabled , 匹配每个已启用的元素(非disabled)

:disabled , 匹配每个被禁用的元素(附带有disabled属性的元素)

:checked , 匹配被选中的input元素(只用在 checkbox 和 radio 上 )

3、结构伪类

语法：

1、:first-child

匹配属于其父元素中的首个子元素

table tbody tr td:first-child

tbody 中的每行里的第一列

table td:first-child

2、:last-child

匹配属于其父元素中的最后一个子元素

3、:empty

匹配没有子元素的每个元素

Q1:

<div>Hello World</div>

有子元素

Q2:

<div>

<p>Hello</p>

</div>

有子元素

Q3:

<div>

</div>

有子元素

Q4:

没有子元素

4、:only-child

匹配是其父元素中的唯一子元素

<div>

<p>Hello</p>

</div>

<div>

<p>Hello</p>

</div>

5、:nth-child(n)

作用：匹配属于其父元素中的第 n 个子元素

4、否定伪类

作用：把指定选择器匹配到的元素排除出去

语法：:not(selector)

eg :

table td:not(:first-child) : 匹配除每行第一列以外的所有列

与

table td:first-child

相对的

2!!

课程目标：

(1)转换/变形——次重点

(2)过渡/渐变动画——重点

(3)帧动画——次重点

(4)CSS优化——面试题

1.CSS3高级属性——转换

transform: 转换、变形

语法：

父容器 {

perspective: 视点距离;

}

选择器 {

transform: none/变形函数

transform-origin: 50% 50%;

}

常用的2D转换函数：

(1)位移：translate(x)、translate(x, y)，无需指定轴点

(2)旋转：rotate(deg)，可以指定轴点

(3)缩放：scale(x)、scale(x,y) 1代表100%，可以指定缩放的原点

(4)倾斜：skew(xdeg)、skew(xdeg, ydeg)，可以指定倾斜的原点

常用的3D转换函数：

注意：所有的3D转换函数都必须要配合“视点”的使用。Perspective属性必须放在执行3D转换的元素的父元素身上；单位是px——指人的眼睛距屏幕的距离。同一个3D转换，若视点越近，转换效果越夸张。

(1)3D旋转函数——重点：

rotateX(deg)单杠 rotateY(deg)钢管舞 rotateZ(deg)

(2)3D位移函数——了解

translateZ(z) Z轴位移效果与缩放类似

(3)3D缩放——了解

scaleZ(z) 在Z轴上进行拉伸或压缩——必须配合在X轴或Y轴旋转才能出现Z轴上的缩放效果，注意书写顺序：

transform: scaleZ(1.5) rotateX(45deg);

transform

translate()

transition

2.CSS3高级属性——过渡/渐变

transition：用户需要指定动画开始和结束两个点的状态，CSS3自动补全中间缺少的变化过程。如下的CSS属性都可以执行渐变动画：

·颜色属性，如background-color、color

·取值为数值的属性，如width、opacity、font-size...

·转换属性，如transform:各种转换函数

·visibility 属性

·阴影属性，box-shadow

注意：有些CSS属性是不能实现渐变动画的，如字体、背景图片...

语法：

选择器 {

CSS属性: 值1;

transition: 属性持续时间;

}

选择器 {

CSS属性: 值2;

}

transition属性完整形式：transition: property duration timing-function delay;

提示：渐变动画只能提供的开始和结束两个点的状态样式，中间的过程由CSS补充——如位移：只能做直线位移。

3.CSS高级属性——关键帧(keyframe)动画

关键帧动画：由程序员提供的一个动画过程中的若干个关键点的样式属性，每相邻的两个点中间的过渡效果由CSS补充——关键字动画比Transition动画多了很多关键点。使用方法：

步骤一：使用 @keyframes 声明动画的关键帧

@keyframes 动画名称 {

0% { }

xx% { }

100% { }

}

步骤二：在某个选择器中使用指定的关键帧动画

选择器 {

animation: 动画名称持续时间;

}

动画属性：

animation: name duration timing-function delay;

动画子属性：

animation-name

animation-duration

animation-timing-function

animation-delay

更多的其它子属性——了解

Transition(渐变动画)和Keyframes Animation(关键帧动画)的区别：

img {

width: 200px;

transition: width .15s linear;

}

img:hover {

width: 400px;

}

@-webkit-keyframes bianKuan {

0% {

width: 200px;

}

100% {

width: 400px;

}

img:hover {

-webkit-animation: bianKuan .15s linear;

}

(1)transition动画简单，只能指定两个关键帧

keyframes动画复杂，可以指定多个关键帧

(2)transition动画浏览器支持性较好

keyframes动画目前仍需要加 -webkit- 或 -moz-前缀

(3)transition动画只能执行一次

keyframes可以反复执行多次，并指定每次的执行方向

4.面试题——谈谈如何进行前端页面优化

(1)HTML优化

(2)JavaScript优化

(3)CSS优化

1)减少HTTP请求的次数，如把多张小图合并为一张大图——CSS Sprites。

2)所有的外部样式文件都放在页面的头部里，而不是页面的最后。

3)除首页外的其他页面尽量使用外部样式文件，被多个页面所公用。

4)首页中尽量少使用外部样式文件，全部样式写在页内部。

5)样式文件中的内容越少越精简越好，尽可能使用简称。

6)使用压缩工具压缩样式文件，如YUI-Compressor。

7)尽量不要缩放图片。

UI

UI基础

瞅你咋地，没文档看其他的！

JavaScript基础 Day1

张东

zhangdong@tedu.cn

正课:

1. 什么是JavaScript

2. 如何使用

3. 如何调试

4. *变量**

5. *数据类型**

1. 什么是JavaScript

前端三大语言:

HTML: 专门编写网页内容的语言

CSS: 专门设计网页样式的语言

JavaScript: 专门编写交互行为的语言

什么是交互? 用户在页面执行操作

网页响应用户的操作，处理用户数据

返回处理结果

JavaScript发展历程:

NetScape 1995 客户端语言在客户端进行基本数据处理

为什么: 节约网络流量，减少用户等待时间

Java write once run anywhere

起名为: JavaScript

客户端脚本语言，像极了Java，比Java简单

1995 JavaScript->ECMA->ECMAScript标准->规定了核心语法

ES标准3.1 8天 ES5标准 1天

1996 Microsoft IE JScript

ECMAScript:JavaScript语言的国际标准不能直接使用

JavaScript:NetScape参照ECMAScript标准实现的JavaScript版本

JScript:微软参照ECMAScript标准实现的JavaScript版本

2000 W3C DOM标准: 专门操作网页内容的一套程序标准 3天

几乎所有浏览器100%支持

2003 NetScape -> Mozilla -> Firefox

总结: JavaScript=ECMAScript(核心语法 9天)

DOM(专门操作网页内容的程序标准 3天)

BOM(专门操作浏览器窗口的程序 2天)

JavaScript特点:

1. 运行在客户端浏览器

2. 解释执行: 变读取变执行，后读取的相同内容会覆盖先读取的。

3. 弱类型

4. 基于对象

JavaScript的用途:

2. 如何使用：

1. 如何编写: JavaScript程序就是最简单的文本

3种方式：

1. 在网页的script标签中

什么是script标签: 网页中专门编写JavaScript程序的区域。

script可出现在页面的任何位置。

一般2处: 1. head元素中

2. body元素的结尾

何时使用: 如果一段程序只被当前页面使用

2. 在外部js文件中

什么是js文件: 专门保存js程序的文件

何时使用: 如果一段程序，可能被多个页面共用

如何使用: 2步:

1. 定义.js文件，在其中编写js程序

2. 引入.js文件:<script src="路径"></script>

js文件中的程序和script标签中的程序执行方式完全一样

课堂练习:

输出一句话: 3种:

1. alert("输出内容"): 弹出警告框

2. document.write("输出内容"): 出现在网页的body内

html网页

其实向网页中写入html内容，所有html内容给都可写入

3. console.log("输出内容"): 向控制台输出一句话

控制台

什么是控制台：专门输出数据并调试程序的窗口

控制台只支持js语法，不支持定制样式

引号: js中单双引号不分

配置快速打开浏览器:Ctrl+B

1. 开始菜单->GoogleChrome->GoogleChrome->右键属性

2. 复制"目标"中的全部内容

3. Tools->Preference->点Tools->右侧下拉列表选:other browser(...)->将复制的内容，粘贴到下方文档框中->点apply

结果: 在html文件的编辑界面，同时按Ctrl+B,在Chrome打开

2. 如何运行:

在浏览器软件中，包含了两个小软件：

内容排版引擎: 加载html内容，渲染css样式的软件

脚本解释引擎: 读取js程序，并执行程序的软件

正课:

1. 如何调试程序

2. ***变量

3. ***数据类型

1. 如何调试程序:

bug: 程序运行过程中遇到的错误

debug: 发现问题，并解决问题

如何调试: 只要希望的效果没出来，先按F12，打开console

如果程序出错，在console会提示错误的原因和位置

回到js文件中的相同位置，修改后，重新运行

ECMAScript3.1

基本语法:

1. js中区分大小写

2. 每句话结尾强烈建议用分号结束

注释:

多行注释: /*

注释的内容

单行注释: //注释的内容

2. ***变量:

什么是变量: 内存中，存储数据的一块存储空间，再起一个名字

何时使用: 只要一个数据，可能被反复使用，就都要先保存在变量中，再使用变量。

如何使用:

声明: 在内存中开辟一块存储空间，再起一个名字

如何声明: var 变量名;

强烈建议: 所有变量必须用var声明;

特殊: 仅声明，但还未赋值，默认保存的是undefined

什么是undefined: 所有变量的默认值

赋值: 将数据保存到变量中

如何赋值: 变量名=值;

意为: 将等号右边的值，保存到等号左边的变量中。

特殊: 如果给未声明的变量赋值，会自动创建——强烈不建议

预防: 在程序开始开始位置加一句: "use strict";

简写: 声明同时就初始化变量的值:

什么是初始化: 第一次给变量赋值

var 变量名=值;

同时声明多个变量:

var 变量名1=值1,变量名2=值2,...;

取值: 从变量中取出值，做运算

如何取值: 任何位置，只要使用变量名，就等效于使用变量中的值。

特殊: 试图从未声明的变量中取值，报错:ReferenceError:

变量的命名:

建议： 1. 见名知义:

2. 驼峰命名: 首字母小写，之后每个单词首字母大写

禁忌: 1. 不能以数字开头

2. 不能使用js保留字

什么是保留字: js已经占用的，具有特殊意义的词

常量:

什么是: 一旦创建，值不可改变的量

何时使用: 如果一个值，一旦创建，不能被修改，就要保存在常量

如何使用:

创建: const 常量名=值;

一般常量名全部大写！

使用: 除了值不能改之外，其余和普通变量用法完全一样

3. ***数据类型:

什么是数据类型: 一个数据在内存中的存储格式

为什么: 现实中不同类型的数据，都能执行不同的操作

不同的操作，需要专门存储格式支持。

2大类:

原始类型:值直接保存在变量中的数据类型

5类:

数字类型number: 程序中专门存储数字的类型

number可存储整数和浮点数

何时使用: 一个数字可能用于计算或比较时

如何使用: 程序中凡是不加引号的数字，默认都是数字类型

内存占用: 整数占4字节 32位

浮点数占8字节 64位

数值大小和存储空间无关

特殊:

舍入误差：计算机中也有计算不尽的数字

减，乘，除都可能发生。

无法彻底避免

只能近似解决: 将计算结果，按指定小数位数四舍五入

n.toFixed(d);//d表示小数位数

字符串类型string: 程序中专门存储一串文字的类型

何时使用: 如果一串字符仅用于显示或标识只用，就要加""

如何使用: 程序中凡是用引号包裹的一串文字，默认是字符串。

字符串一般不用做计算或比较大小。

内存占用: js使用unicode编码保存每个字符

什么是unicode编码: 对全球主要语言中每个字编一个号

练习: 获取一个字的unicode号

1个汉字占 2字节

1个英文字母或数字，标点占 1字节

字符串的内存占用直接取决于字符个数

特殊:

字符串的内容，一旦创建不可改变，只能整个替换。

布尔类型boolean: 只有两个值: true/false

何时使用: 今后只要表示一个判断的结果，就用布尔类型

undefined:undefined: 是所有变量的默认值

null:null ?

引用类型:值不直接保存在变量中的数据类型

Day2

回顾:

1. 变量

什么是: 内存中存储一个数据的存储空间

如何使用:

声明: var 变量名;

特殊: 仅声明，但未赋值的变量，默认保存undefined

赋值: 变量名=值;

特殊: 普通模式: 给未声明的变量赋值，不会出错。会自动创建变量并保存数据。

严格模式: 报错！

简写:

1. 声明同时初始化: var 变量名=值;

2. 同时声明并初始化多个变量:

var 变量1=值1,变量2=值2,...

取值: 任何位置，只要使用变量名等效于直接使用变量的值

特殊: 任何情况下，只要使用未声明的变量都会报错！

ReferenceError

2. 数据类型:

原始类型: 值直接保存在变量本地的简单数据类型

number: 保存用于计算或比较的数字类型

即可存整数，也可存浮点数

内存占用: 整数 4字节浮点数 8字节

特殊: 舍入误差，

解决: 按指定小数位数四舍五入n.toFixed(d)

string: 保存用于显示或标识的一串字符

必须用引号包裹，但单双引号不分

内存占用: unicode编码

一个汉字：占2字节

一个字母，数字或英文标点：占1字节

特殊: 字符串一旦创建，内容不可改变，只能整体替换

boolean: true false

undefined: undefined

null: null

引用类型: 值无法直接保存在变量本地的复杂类型

正课:

1. *数据类型转换**

2. *函数**

3. 分支结构

准备:

设置空白页: 三->设置->启动时->打开特定网页...->设置网页:

输入:about:blank->回车->点确定

控制台常用操作:

1. 基本操作: 输入一条语句，按回车执行

2. 输入多行: shift+回车

3. 清屏: 点左上角clear图标

4. 切换已经执行过的语句: 键盘上下键

5. 方法字体: ctrl+鼠标滚轮

1. 数据类型转换:

js是弱类型语言: 要求不严格

1. 声明变量时，不需要提前指定变量的数据类型

2. 同一个变量，先后可保存不同类型的数据

3. 在运行时，会根据程序自身的需要，隐式转换数据的类型

隐式转换: 程序自动完成的，不需要程序员干预的数据类型转换

算数运算: + - * / %

%:取余数,模运算: m%n，m除以n，取除不尽余数部分

算数运算的返回结果，一定是一个数字

转换规则: 默认所有值都转为数字类型number，再计算

特殊: 1. +运算中，只要碰到字符串:

就统一转为字符串，+运算变为字符串拼接

2. bool类型: true->1 false->0

3. 如果参与计算的数字，无法被隐式转为number

则被转为NaN(not a number),无效数字

NaN参与任何算数计算，结果永远为NaN

课堂练习:

typeof(变量名) 返回变量中保存的值的数据类型名

强制转换: 程序员主动干预，执行的数据类型转换

何时使用: 只要默认隐式转换的结果不是想要的，就要强制转换

转数字:

任意类型转数字: Number(x)

其实，隐式转换时，调用的就是Number函数

问题: 只能转换纯数字组成的字符串

字符串转数字: parseInt(str);

何时使用: 只要将字符串转数字，都用parseInt

原理: 从头依次读取字符串中每个字符

跳过开头的空字符

仅读取数字字符

碰到第一个非数字字符，就停止

问题: 不认识小数点，只能读取整数部分，省略小数

如果转浮点数: parseFloat(str)

用法和parseInt完全相同！

只不过，多认识第一个小数点

parseFloat也可转整数，实际开发中经常用parseFloat代替parseInt。

课堂练习: 输入框:

什么是输入框: 专门收集用户输入的数据的对话框

如何使用: var input=prompt("提示信息")

弹出输入框，显示"提示信息"

用户在输入框中输入数据，点确定

输入框返回用户输入的数据给程序的变量

强调: 凡是从页面上获得的，都是字符串！

2. ***函数:

什么是函数: 封装一项任务的步骤清单的代码段，再起一个名字

为什么: 代码重用！

何时使用: 如果一项任务，可能被反复执行

如何使用:

声明: 将一项任务的步骤清单定义在一个函数内

function 函数名(参数列表){

步骤清单

return 返回值;

}

函数名，就是任务名

参数列表:

什么是参数：专门保存执行任务所必须的数据的变量

何时定义：如果一项任务，必须提供指定数据才能正常执行时，就必须定义参数。

如何定义: 在函数名后的()中，不用var声明，直接写变量名。多个变量之间用逗号分隔。不用初始化。

返回值: 一项任务的执行结果

何时定义: 使用者需要获得任务的执行结果时，就要定义返回值。

如何定义: 在函数体的结尾，使用return 值;

调用: 让引擎按照函数的步骤执行任务

如何调用: var 返回值=函数名(参数值列表);

正课:

1. *函数**

2. *分支结构**

1. ***函数:

函数只有调用才执行！不调用不执行！

****变量的范围(scope,作用域):

js中两种范围:

1. 全局: 在函数外声明的变量都属于全局——也称全局变量

全局变量: 在程序任何位置，都可访问到！

2. 函数内: 在函数内声明的变量或函数的参数——也成局部变量

局部变量: 只能在函数内使用

总结：变量使用的规则：优先使用当前范围内的变量

如果自己没有，就要用全局的

如果全局还没有，就报错！

****按值传递: 两变量间赋值或将变量作为参数传入函数时

其实都是将原变量中的值复制一个副本给对方

结论:对于原始类型的值，函数内修改参数变量，不影响外部的全局变量。

****声明提前(hoist):

在程序正式执行前

都会将var声明的变量和function声明的函数，提前到当前范围的顶部集中创建。

但是，赋值留在原地！

鄙视时: 如果发现先使用，后声明的情况，都是在考声明提前

解决: 都要先改为声明提前后的样式，再判断输出

Day3

回顾:

1. ***函数

什么是: 一项任务的步骤清单，再起一个名字

为什么: 代码重用

何时使用: 只要一段代码可能被反复执行，就先定义在函数中，再调用函数

如何使用:

声明: 创建一个函数，封装步骤清单

function 函数名(参数列表){

函数体;

return 返回值;

}

参数: 专门接受函数调用时必须的数据的变量

何时使用: 如果函数必须提供必要数据才能正常执行时

如何定义: 不用var，可同时定义多个，用逗号分隔每个参数

返回值: 函数的执行结果

何时使用: 如果函数的调用者必须得到函数的执行结果时，就要定义返回值。

如何定义: return 值;

强调: 函数要想向内存中返回一个结果，只能用return

调用: *找*到函数定义，并按照函数的步骤*执行*

var 返回值=函数名(参数值列表);

强调: 一个函数，如果不调用，绝不执行！

参数值，会自动赋值给函数的参数变量，用于执行

函数的本质: 函数是一个引用类型的对象

函数名其实是一个引用函数对象的变量

什么是对象: 程序中保存多个数据的整体

****范围(scope 作用域): 一个变量的可用范围

2种：全局作用域: window

全局变量: 在函数外声明的变量都是全局变量

特点: 在任何位置都可使用

函数作用域:

局部变量: 在函数内声明的变量和函数的参数变量都是局部变量

特点: 只能在函数内使用，出了函数就不能用！

变量的使用规则: 如果局部有，就优先使用局部的

局部没有，才用全局的

如果全局没有，才报错

****按值传递(byValue):

两种情况: 1. 两变量间赋值

2. 将变量作为参数传入函数时

都是将原变量中的值，复制一个副本给对方

修改新变量的值，不影响原变量

****声明提前(hoist):

在程序开始执行前,

将var声明的变量和function声明的函数

提前到当前作用域的顶部，集中声明

但，赋值留在原地

鄙视时: 只要发现先使用，后声明，都是在考声明提前

都要先转化为声明提前后的样子，再执行。

正课:

1. 分支

2. ***循环

3. *数组

程序三大结构: 顺序,分支，循环

顺序: 程序默认都是从上向下顺序执行

分支: 根据不同的条件，执行不同的任务

循环: 让程序反复执行相同的任务

补: 关系运算: 做比较

> < >= <= == !=

所有关系运算返回的都是bool值(true/false)

如果返回true，说明成立；返回false，说明不成立

何时使用: 专门用于判断条件中

隐式转换: 默认都转为数字，再比大小

特殊: 如果比较的*两个值都*是字符串，

按位比较每个字符的unicode号

特殊: 如果参与比较的值不能被转为数字，则用NaN参与比较

结果: NaN不大于，不小于，不等于任何值

NaN做不等于比较时，返回true

1. ***分支:

正课:

1. 分支

2. ***循环

1. 分支结构:

什么是: 根据不同的条件执行不同的任务

何时使用:

如何使用:

1. 1个条件，1件事。满足条件才执行。不满足就不执行

如何实现: if(条件){操作}

2. 1个条件，2件事。二选一执行。

如何实现: if(条件){操作1}

else{操作2}

如果满足条件，就执行操作1

否则就执行操作2

强调: 必须二选一。不能都执行，也不能都不执行

3. 多个条件，多件事，多选一执行

如何实现: if(条件1){操作1}

else if(条件2){操作2}

else if(...){...}

else{默认操作}

强调: 1. 如果前一个条件已经满足，则后续条件不再执行

2. 如果进入后一个条件，一定说明前一个条件不满足 3. 最后一个else可省略。后果，

2. ***循环结构:

什么是: 让程序反复执行同一代码段

何时使用: 只要一段代码会被反复执行，就用循环

如何使用: 三要素:

1. 循环条件: 保证循环可以继续执行的判断条件

2. 循环变量: 循环条件中，用作比较的变量

循环变量每次都会向着不满足条件的趋势变化

3. 循环体: 循环反复执行的代码段

3种:

1. while循环:

var 循环变量=初始值;

while(循环条件){

循环体

变化循环变量

}

何时使用: 如果循环变量的变化没有规律，就用while循环

break: 中断当前结构的执行，并退出结构

何时使用: 专门用于手动中止循环

课堂练习:

随机数: Math.random() 0~1之间的小数

公式: 在任意min~max之间取一个随机整数

var r=parseInt(Math.random()*(max-min+1)+min);

2. for循环:

for(var 循环变量=初始值; 循环条件; 变化循环变量){

循环体

}

何时使用: 如果循环变量的变化有规律，就用for循环

总结: for循环其实和while循环是完全等效的！

简写: 3种:

1. for的第一部分可同时声明并初始化多个变量

2. 第三部分可同时执行多个短小的操作，每个操作之间用逗号分隔。强调: 不能改变原执行顺序

3. 第一部分可放在for之前的外部

第三部分可放在循环体之后

死循环: for(;;){操作}

while(true){操作}

Day4

回顾:

1. 分支

什么是: 根据不同条件，执行不同任务

如何使用:

　　　1. 一个条件，一件事，满足就做，不满足就不做

if(条件){操作}

2. 一个条件，两件事，二选一执行

if(条件){操作1}

else{操作2}

3. 多个条件，多件事，多选一执行

if(条件1){操作1}

else if(条件2){操作2}

...

else{默认操作}

强调: 1. 如果前一个条件已经满足，则后续条件不再执行

2. 如果走到下一个条件，就暗示前一个条件不满足

3. 最后一个else可省略，一旦所有条件都不满足，就什么都不执行

2. ***循环:

什么是: 反复执行同一代码段

如何使用:

三要素:

1. 循环条件: 允许进入循环的条件

2. 循环变量: 循环条件中用作比较的变量

一般都会向着不满足条件的趋势不断变换

3. 循环体: 反复执行的代码段

如果循环变量的变化没有规律:while循环

var 循环变量=初始值;

|---->while(循环条件){

| 循环体

| 修改循环变量

|-----}

如果循环变量的变化有规律: for循环

for(var 循环变量=初始值; | 循环条件;<-修改循环变量 |){

| ↓ ↑ |

| 循环体----------| |

}

特殊: 1. 第一部分可同时声明并初始化多个循环变量

2. 第三部分可同时执行多个短小的操作，用逗号

3. 第一部分可提前到循环外或省略

第三部分可放在循环体之后，或省略

死循环: for(;;){操作} ==> while(true){操作}

正课

1. *数组**

2. DOM入门

1.***数组:

什么是数组: 内存中连续存储多个值的存储空间，再起一个统一的名字

一组连续的变量，起一个统一的变量名

为什么: 程序=数据结构+算法

算法: 解决问题的步骤

顺序，分支，循环其实都是最简单的算法

数据结构: 数据在内存中的存储方式

*良好的数据结构，可极大提高程序的执行效率

何时使用: 如果存储多个相关的数据时，都要集中连续存储

如何使用:

创建:

1. 创建空数组:

var arr=[];

var arr=new Array();

新建数组

2. 创建数组同时，初始化数组内容:

var arr=[值1,值2,......];

var arr=new Array(值1,值2,......);

3. 创建n个空元素的数组:

var arr=new Array(n);

下标: 每个元素的唯一序号

自动分配，从0开始，连续不重复

访问元素：数组名[下标] ->元素

每个元素的用法和普通变量，完全一样！

特殊： 1. 下标越界：

获取元素值: 不会报错，而是返回undefined

修改元素值: 不会报错，而是在指定位置自动创建新元素。后果:

下标不再连续——也称为稀疏数组

2. 不限制每个元素的数据类型

数组.length属性: 记录了数组的元素个数(长度)

但是: length无法实际表示存储个数

***length只是一个理论值，永远是最大下标+1

***最后一个下标永远等于length-1

固定套路:

1. 获得数组最后一个元素:arr[arr.length-1]

2. 在数组末尾追加一个新元素: arr[arr.length]=新值;

数组遍历: 依次对数组的每个元素执行相同的操作

如何遍历: for(var i=0;i<arr.length;i++){

arr[i]//当前元素

}

正课:

1. ***DOM:

DOM树

查找元素

修改元素

1. ***DOM: Document Object Model

文档对象模型

什么是: 专门操作网页内容的API

功能: 增，删，改，查

鄙视题: HTML XHTML DHTML

HTML: 专门编写网页内容的语言

XHTML: 更严格的HTML标准

DHTML: 一切实现网页动态效果的技术的统称

DHTML=HTML+CSS+JS

DOM树: 一个网页被加载进内存时

都会先创建一个对象document，指代正在打开的网页内容

网页中的一切内容都是document的子节点（Node）

以document为根，所有网页中的内容组成的树形结构就是DOM树。

查找元素:

1. 按照节点关系查找:

节点树: 包含所有内容的节点

父子关系: parentNode childNodes firstChild lastChild

兄弟关系: previousSibling nextSibling

强调: 看不见的空字符(空格，回车，制表符)

除了parentNode外，都会受到空字符的干扰!

元素树: 仅包含元素节点

问题: 不包含任何文本节点

父子关系:

parentElementNode children firstElementChild lastElementChild

兄弟关系: previousElementSibling nextElementSibling

2. 用API查找：通过HTML属性:

1. 按id查找元素:

var elem=document.getElementById("id");

返回值: 返回一个节点对象

其实，id本身就是一个全局变量

2. 按标签名查找:

var elems=elem.getElementsByTagName("标签名");

意为: 在elem元素下，查找所有指定的“标签”

返回值: 返回多个节点对象，组成的一个集合(像数组一样)

强调:getElementsByTagName不但可找到直接子节点，还会找到所有间接子节点。

3. 按name属性查找:

var elems=elem.getElementsByName("name");

意为: 在elem元素下，查找所有name属性为指定值得元素

返回值: 返回多个节点对象，组成的一个集合(像数组一样)

4. 按class属性查找:

var elems=elem.getElementsByClassName("class")

意为: 在elem元素下，查找所有class属性为"class"的元素

3. 按选择器查找:

1. 找一个元素:

var elem=elem.querySelector("选择器");

2. 找多个元素:

var elems=elem.querySelectorAll("选择器");

修改：

1. 修改元素内容:

elem.innerHTML: 表示开始标签到结束标签之间的html内容

课堂练习:

事件:用户出发的浏览器元素状态的改变

单击事件: onclick

何时定义事件: 只要希望单击元素时，指定的任务都要定义在onclick中

如何定义: 2步

1. 定义一个函数: 用于在事件发生时执行任务

2. 在元素的onclick属性上调用任务函数

强调: 事件最大的特点是只有事件触发，才执行任务

this关键字，在事件发生时，自动获得当前触发事件的元素

何时使用: 如果事件的函数内用到了当前元素

2. 获取或修改标准属性:

elem.标准属性

比如: elem.id

修改样式: elem.style.css属性

JavaScript 深度

Day1

Am

正课:

1. 运算符和表达式:

1. 运算符和表达式:

程序: 人的想法，在计算机中的执行

运算符: 程序中，模拟人想法的特殊符号

表达式: 由数据，变量和运算符组成的公式

所有的表达式，都有一个返回值

算数运算: + - * / %

返回值: 通常都是数字！不区分整数和浮点数

JavaScript: 10/4 2.5

vs Java: 10/4 2

隐式转换: 默认都转为number，再运算

特殊: +运算中，碰到一个字符串，则都转为字符串

+运算变为字符串拼接

%: 模运算，取余数: m%n，m除以n，取除不尽的余数部分

何时使用: 1. 限制运算结果的最大值<除数n

2. 判断能否整除

判断偶数: num%2==0

判断奇数: num%2!=0

Pm

书: JavaScript权威指南（犀牛书）

公众号: 前端大全

www.js1k.com

正课:

1. 运算符和表达式

1. 运算符和表达式

1. 算数运算

2. 关系运算: 做比较，做判断

包括: > >= < <= == !=

返回值: bool类型true/false

隐式转换: 默认,都转为数字再比较

特殊,两个值都是字符串时，按位比较每个字符的unicode号。

特殊: 1. 区分null和undefined

全等===: 要求数据类型首先相等，再比较值是否相等

不带隐式转换的==比较

何时使用: 只要不希望在等于比较时，自动隐式转换

固定套路: 今后，只要区分null和undefined，就用全等

不全等!==: 不带隐式转换的!=比较，作为全等的反义

2. 判断NaN：

问题：不能用==或!=判断

解决: var bool=isNaN(num)

何时使用: 判断num是否是NaN时专用。

返回值: num是NaN，就返回true

不是NaN，就返回false

3. 逻辑运算: 将多个条件(关系运算)综合起来得出最终结论

包含: &&(逻辑与，而且) ||(逻辑或，或者) !

条件1&&条件2: 只有两个条件都为true时，才返回true

只要其中一个为false，就返回false

条件1或条件2: 只要其中之一为true，就返回true

除非2个条件都为false，才返回false

!条件: 取反

隐式转换：将每个条件隐式转为Boolean

运算符优先级: 见:operators.jpg

优先级高的先运算

***短路逻辑: 如果前一个条件已经可以得出最终结论

则后续条件不再执行。

&&: 如果前一个条件为false,后续条件不再执行。结论为false

||: 如果前一个条件为true，后续条件不再执行。结论为true

***利用短路逻辑:

&&: 实现简单分支: 一个条件一件事，满足就做，不满足就不做

条件&&操作; 相当于：if(条件){操作}

只有条件满足(true)，才执行后续“操作”

如果条件不满足，就什么也不做

||: 实现两个值，二选一。

值1||值2: 如果值1转为bool后为true，则返回值1

如果值1转为bool后为false，则选值2返回

返回值: 默认逻辑预算返回bool值true、false

在利用短路逻辑时，不再返回bool值，而是返回两个值之一

4. 位运算:

左移和右移:

n<<m => n* 2的m次方

n>>m => n/ 2的m次方

固定套路: 取整: n>>>0 n^0 n|0

5. 赋值运算:

=: 将等号右边的值，保存在等号左边的变量中

赋值表达式也有返回值: 返回将要保存回变量的新值

扩展赋值运算：简写:

a=a+5; 简写为: a+=5; 累加

a=a-5; 简写为: a-=5;

a=a*5; 简写为: a*=5;

a=a/5; 简写为: a/=5;

a=a%5; 简写为: a%=5;

***递增/递减: 简写:

a=a+1; 简写为: a+=1; 简写为: a++;

a=a-1; 简写为: a-=1; 简写为: a--;

前++和后++: a++ vs ++a;

相同点: a中的值一定被+了1

不同点: 返回值: a++返回a的旧值

++a返回a的新值

Day2

Am

回顾:

1. 运算符和表达式

隐式转换是临时性的操作，不会实际改变数据的值

强制转换是永久的操作，一旦执行，数据的值就被替换为转换后的结果。

关系运算: 做比较，做判断

包括: > < >= <= == !=

返回值: bool

隐式转换: 默认都转为数字再比大小

特殊: ==,null,不隐式转换，其余运算符都隐式转为0

==,undefined,隐式转为null,其余运算符都转为NaN

逻辑运算: 多个条件，综合得出最终结论

包括: && || !

隐式转换: 默认将每个条件都隐式转为boolean类型再执行逻辑运算。

返回值: 默认是bool值

短路逻辑中,在两值中二选一，则返回两值之一

短路逻辑: 如果前一个条件已经可以得出最终结论，则后续条件不再执行。

&&: 如果前一个条件为false，则后续条件不再执行，结果为false。

||: 如果前一个条件为true，则后续条件不再执行，结果为

true。

利用短路逻辑:

&&: 实现简单分支

条件&&操作：只有条件为true，才执行操作

||: 两值二选一

值1||值2: 如果值1可被隐式转为true，则选值1，否则选值2

递增/递减: 将变量中的值+1或-1后再存回变量中

n=n+1; -> n+=1; -> n++;

n=n-1; -> n-=1; -> n--;

前++和后++:

相同: 只要执行一次，变量中的值一定被+1

不同: 表达式返回的值

前++: 返回新值

后++: 返回旧值

正课:

1. 函数

2. 分支

1. ***函数: 步骤清单，再起一个任务名

为什么: 代码重用!

何时使用: 只要一段代码可能被多次调用，就要先封装在函数中，再反复调用函数。

如何使用:

声明: 创建一个函数，封装一段代码，再起个名字

function 函数名(参数列表){

函数体;

return 返回值;

}

参数: 接收函数执行时的必要数据的变量

为什么: 让函数变得更灵活

何时定义: 如果函数必须一些数据才能正常执行时

返回值: 函数执行的结果

何时定义: 如果调用者需要获得函数的执行结果时

调用: 让引擎找到函数，并按照函数的步骤执行任务

var 返回值=函数名(参数值列表);

作用域(scope): 变量的可用范围

全局作用域: 全局变量

特点: 任何位置都可访问，可反复访问

函数作用域: 局部变量

特点: 只能在函数内部访问，函数外，不能访问

vs Java: 3种:

全局作用域:

函数作用域:

块级作用域:

*****函数的生命周期:

程序开始执行:

创建执行环境栈:ECS: 依次保存每个函数调用的执行环境的数组

在ECS中，默认添加全局执行环境(EC)，全局EC引用window对象

window对象中保存所有全局变量和函数

声明函数:

创建函数对象

在全局添加函数名为变量

函数名变量引用函数对象

调用函数时:

创建活动对象（AO）: 在函数调用时，专门保存局部变量的对象

生命周期: 调用函数时自动创建

函数调用后自动释放——局部变量一同释放

向ECS中添加一个新的EC，引用正在调用的函数的AO

执行时:

优先使用AO中的局部变量

如果AO中没有，就去window中找

调用后:

当前函数的EC出栈，AO被释放，局部变量一同释放

***声明提前:

在程序开始执行前，都会将var声明的变量和function声明的函数提前到当前作用域的顶部，集中创建。

赋值留在原地。

***按值传递:

两变量间赋值时或将变量作为参数传入函数时

其实都是将原变量的值复制给对方

对于原始类型: 修改新变量，不会影响原变量

对于引用类型: 修改新变量，?

Pm

正课:

1. 全局函数:（了解）

2. 分支结构:

1. 全局函数: ES标准中规定的，不需要任何对象就可直接访问的函数

包含: W3C手册->JavaScript->JavaScript->JavaScript对象

->JS Functions

编码解码:

问题1: url标准规定，在url中不允许出现多字节字符

比如: 汉字

wd=宋小宝

wd=%E5%AE%8B %E5%B0%8F %E5%AE%9D utf-8编码

解决: 编码:将url中的多字节字符，转化为单字节字符

var url=encodeURI("url");

解码: 将编码后的url，解码回原文

var url=decodeURI("url");

问题2: url标准规定，url中不允许出现保留字符:

比如: : /

解决: 编码: encodeURIComponent("url")

解码: decodeURIComponent("url")

eval: 专门执行字符串格式的表达式:

何时使用: 用于将收到的服务器响应字符串转化为程序中的代码

如何使用: eval(str)

强调: 普通模式下: eval中代码的作用域就是eval所在的作用域

严格模式下: eval自己一个作用域

eval中声明的变量或函数，在eval外不能用

isFinit: 专门用于判断一个数是否在有效范围内

infinity: js中除数可以为0，结果为infinity，表示无穷大

判断一个结构是否为无穷大: var bool=isFinite(num)

num在有效范围内，返回true

num是NaN或Infinity，返回false

2. 分支结构: 根据不同的条件，执行不同的操作

隐式转换: 分支结构中的条件都默认转为bool类型

1. 一个条件，一件事，满足才做，不满足就什么也不做

如果操作简单: 短路逻辑: 条件&&(操作1,操作2,...)

如果操作复杂: if(条件){操作}

2. 一个条件，两件事，二选一执行

如果操作简单: 三目(条件，三元)运算

如何使用: 条件? 操作1 : 操作2

如果根据不同的条件选择不同的值: 条件?值1:值2

在值1和值2中二选一。

如果操作复杂: if(条件){操作1}else{操作2}

3. 多个条件，多件事，多选一执行

如果操作简单: 三目运算

如何使用: 条件1?操作1:

条件2?操作2:

...?...:

默认操作;

如果根据不同条件返回不同的值:

条件1?值1:

条件2?值2:

...?...:

默认值

如果操作复杂: if(条件1){操作1}

else if(条件2){操作2}

... ...

else{默认操作}

如果条件都是等值比较: switch case

如何使用: switch(表达式){

case 值1:

操作1;

case 值2:

操作2;

case ...:

...

default:

默认操作

}

先计算表达式的值

用表达式的值和每个case做*全等*比较

如果表达式的值等于case的值，就进入case执行操作

问题: 入口case及其之后的所有case都会执行

解决: break; 中止并退出当前结构

如何使用: 默认，每个case之间都要用break分隔

何时不需要加break: 1. 最后一个不用加break

2. 相邻两个case执行相同操作时，之间不用加

关于默认操作:

三目运算: 最后一个默认值或默认操作，不能省略

if else: 最后一个else可省略，后果，如果所有条件都不满足，则什么也不执行.

switch case: 最后一个default也可省略

Day3

Am

回顾：

1. 分支结构:作业

正课:

1. 循环:

2. 数组

1. 循环: 程序反复执行同一代码段

何时使用: 反复执行同一代码段

如何使用:

三要素: 1. 循环条件: 允许再次*进入*循环的条件

2. 循环变量: 循环条件中用作比较的变量

从?开始，到?结束，每次递增/减?

3. 循环体: 要反复执行的同一代码段

如果循环变量的变化没有规律: while

var 循环变量=初始值;

while(循环条件){

循环体;

迭代变化循环变量;

}

do-while: 先执行一次循环体，再判断条件

何时使用: 如果第一次条件都不满足，也希望至少执行一次时

如何使用:

var 循环变量=初始值;

do{

循环体;

迭代变化循环变量;

}while(循环条件);

鄙视: vs while：只看第一次条件是否满足:

如果第一次条件满足，则两者效果完全相同！

如果第一次条件不满足，

do while至少可以执行一次

while一次都不执行

如果循环变量的变化有规律: for

for(var 循环变量=初始值;循环条件;迭代变化循环变量){

循环体;

}

for的特殊用法:

1. 第一部分可同时声明并初始化多个循环变量,也可省略或移到循环之前外部。

2. 第三部分可同时执行多个短小的操作，用逗号分隔，也可省略，还可以放在循环内部循环体之后

3. 死循环: for(;;) while(true)

退出循环: 2种办法：

1. 使用循环条件: 优雅，要求高——建议

2. 使用break，随时手动退出循环: 野蛮，简单

continue: 跳过本轮循环，继续下一轮

Pm

正课:

1. 数组:

什么是: 连续存储多个数据的存储空间，再起一个名字

多个变量的集合，起一个统一的名字

为什么: 连续存储的数据结构，便于提高程序的执行效率

便于分类管理多个相关数据

何时使用: 只要连续存储多个数据就用数组

如何使用:

创建: 1. 创建空数组: var arr=[];

强调: 只要见到[]，都是创建新数组的意思

var arr=new Array();

2. 创建数组同时，初始化数组元素:

var arr=[值1,值2,...]

var arr=new Array(值1,值2,...);

3. 创建n个空元素的数组: var arr=new Array(n);

访问元素: arr[i]

i是下标: 唯一标识数组中每个元素的位置的序号

自动分配的下标默认从0开始，每次增1

每个数组元素的用法和变量完全一样

特殊: 越界: 都不会报错

赋值时：在指定位置添加新元素并自动修改length属性

下标不连续的数组叫稀疏数组

取值时: 返回undefined

数组的属性: arr.length 记录数组中理论上的元素个数

特点: arr.length永远是最大下标+1

最大下标永远是arr.length-1

固定套路: 数组最后一个元素: arr[arr.length-1]

在数组末尾追加新元素:arr[arr.length]=值

遍历: for(var i=0;i<arr.length;i++){

arr[i]//当前元素

}

数组是引用类型的对象:

垃圾回收: 释放不再被引用的对象

垃圾回收器: 在后台自动执行的，回收不再使用的对象的程序。

一个对象每被一个变量引用，引用计数器都会+1

何时回收: 只有一个对象，不再被任何变量引用（引用计数器为0）时，垃圾回收器就会自动释放对象的空间。

问题: 无法实时回收

建议: 使用完较大的对象后，主动释放总是好的习惯

如何释放: 变量名=null

索引数组: 下标为序号的数组

关联数组前所学的数组都是索引数组

关联(hash)数组:

什么是: 可自定义下标名称的数组

为什么: 有些数组的元素必须指明其表示的意义

查找极快，查找速度和元素个数无关，因为无需遍历

何时使用: 希望按照元素名称快速定位(查找)数组元素时

如何使用:

创建: 2步:

var arr=[];

arr["sname"]="杨幂";

arr["shx"]=81;

arr["yuw"]=53;

arr["yy"]=89;

访问元素: 和索引数组完全一样

arr["下标"]

***原理:

hash算法: 专门接受一个字符串，并计算出一个尽量不重复的编号。相同字符串，计算出的号一定相同！不同字符串，计算的号几乎不相同。

添加元素时: 将下标名称交给hash算法，计算出一个唯一的序号，将值保存到数组对应序号的元素中。

读取元素时: 将下标名称交给hash算法，计算出一个和存入时完全相同的序号，直接查找序号位置的元素值。不需要遍历！

特殊: 关联数组length属性失效(永远为0)

遍历: 依次获得arr中每个下标的名称,保存在变量key中

for(var key in arr){

arr[key]//当前元素

}

常用API:

1. 转为字符串:

1. String(arr): 输出数组的每个元素值，用逗号分隔

2. arr.join("分隔符"): 输出数组的每个元素值，用指定"分隔符"分隔。

如果join中省略分隔符，则join等效于String

比如: 单词拼成句子: words.join(" ")

字符拼成单词: words.join("");

固定套路: 频繁的字符串拼接会浪费内存

解决：将字符串换为数组，将拼接换为在数组末尾追加新元素。在拼接完数组后，使用join("")将数组拼接成想要的字符串

2. 连接和截取:

1. 连接: 将两个数组拼接为一个新数组

或者将多个元素，追加到数组结尾，生成新数组

var newArr=arr1.concat(arr2);

concat不修改原数组，总是返回新数组

var newArr=arr1.concat(值1,值2,arr2,值3,...)

强调: concat会自动打散参数中的数组，以单个元素形式拼接到新数组中。

2. 截取: 选取开始位置到结束位置之间的子数组

var subArr=arr.slice(starti,endi+1);

意为: 截取arr中starti位置开始到endi位置之间的子元素组成的子数组。

注意: 含头不含尾

slice不修改原数组，总是返回新数组

3. splice: 删除，插入，替换

删除: var deleted=arr.splice(starti,n);

删除arr中starti位置开始的n个元素

直接删除arr中的元素

返回被删除的元素组成的临时数组

如果被删除的元素不想要了，可省略赋值部分

插入: arr.splice(starti,0,值1,arr2,....)

在arr中starti位置插入值1或arr2中的元素

原starti位置及其之后的元素被向后顺移

splice也有打散数组参数的功能

替换: var deleted=arr.splice(starti,n,值1,arr2,....)

在arr中先删除starti位置开始的n个元素，再在starti位置插入新元素。

4. 颠倒数组: arr.reverse();

Day4

Am

回顾:

1. *数组API**

1. 转字符串:

String(arr): 输出元素的内容，用逗号分隔每个元素

arr.join("分隔符"): 输出元素的内容，可自定义分隔符

2. 拼接和截取: 都不修改原数组，只能返回新数组

1. 拼接: var newArr=arr1.concat(值1,值2,arr2,值3,...);

2. 截取: var subArr=arr.slice(starti,endi+1);

说明: 1. 如果希望截取到结尾，就可省略第二个参数

2. slice支持负数参数(倒数下标)

3. splice:

1. 删除: var deleted=arr.splice(starti,n);

2. 插入: arr.splice(starti,0,值1,值2,...)

强调:splice不会自动打散参数中的数组

3. 替换: var deleted=arr.splice(starti,n,值1,值2,...)

4. 颠倒: arr.reverse();

正课:

1. ***数组:

排序

栈和队列

二维数组

2. ***String

1. ***数组:

排序:

自定义排序算法: 冒泡排序（手写）

排序API: arr.sort();

意为: 将arr中元素按升序排列

强调: 默认将每个元素都转为字符串，PK unicode号

何时使用默认排序: 只有排序字符串类型的元素时

如果排序除字符串外的其他类型就要自定义比较逻辑！

自定义比较逻辑:

2步: 1. 定义比较器函数：

什么是: 专门比较任意两值大小的函数

要求: 一定有2个参数: a,b

返回值: 如果a>b，就返回正数

如果a<b，就返回负数

如果a==b，就返回0

如何使用: function compare(a,b){

return a-b;

}

2. 将比较器函数作为参数传入sort函数中

arr.sort(比较器函数名)

降序排列: 颠倒比较器函数返回值的正负，可改升序为降序

function compare(a,b){return -(a-b);}

Pm

正课:

1. *数组**

栈和队列

二维数组

2. ***String

1. ***数组:

栈(stack)和队列(queue):

其实都是普通数组，只不过调用了不同API而已

栈: 一端封闭，只能从另一端进出的数组

FILO

何时使用: 希望始终使用最新进入数组的元素时

如何使用:

1. 从结尾出入栈

入栈(压栈): arr.push(值1,值2,...)

不支持数组参数

出栈(弹栈): var last=arr.pop();

好处: 无论出入栈都不改变剩余元素的位置

2. 从开头出入栈

入栈: arr.unshift(值1,值2,...)

unshift入栈的顺序值从右向左读取参数

出栈: var first=arr.shift();

缺点: 每次出入栈都会导致其余元素的位置改变

队列: 从结尾进入，从开头出的数组

FIFO

何时使用: 希望按照先来后到的顺序依次使用元素时

1. 入队列(排队): arr.push();

2. 出队列: var first=arr.shift();

二维数组: 数组中的元素，又引用另一个子数组

何时使用: 1. 要存储的数据就是横行竖列的二维数据时

2. 如果多个数据需要分类存储时

如何使用:

创建: 2步:

1. 创建空数组

var data=[];

2. 向数组中添加新元素，新元素再赋值为一个子数组

data[0]=[8,4,4,2]

data[1]=[4,16,8,4]

也可在创建同时初始化子数组:

data=[

[8,4,4,2],

[4,16,8,4]

]

访问数组中的元素:

arr[r] --> 获得下标为r位置的子数组

arr[r][c] --> 获得r行c列位置的元素

单个元素的用法和普通变量完全一样

强调: 越界: r不越界，c越界，返回undefined

r越界，报错

遍历: for(var r=0;r<arr.length;r++){

for(var c=0;c<arr[r].length;c++){

arr[r][c]//当前元素

}

2. ***String:

内置对象: ES标准中规定的，浏览器厂商已经实现的API

11个: String Number Boolean ->包装类型

Array Date Math RegExp

Error

Function Object

Global（window）

包装类型: 专门封装原始类型的值，并提供操作值得API 的对象

为什么: 原始类型的值不能拥有属性和方法

但是实际开发中需要对原始类型值反复执行相同操作

如何使用: 自动创建和调用

生命周期:

创建: 试图用原始类型的值调用函数时，自动创建对应类型的包装类型对象。

其实调用的是包装类型对象的函数。

释放: 调用完函数后，自动释放！

什么字符串: 一串字符组成的只读数组

相同: 1. 用[i]方式访问每个字符

2. 都有length属性记录字符个数

3. 都可用slice截取子字符串

4. 都用for遍历每个字符

String API: 所有API都不直接修改原字符串，只能返回新字符串

1. 转义字符: 将字符串内容中和语法冲突的特殊符号转为普通字符

比如: \" \' \\

在字符串中代替空字符: \n 换行 \t制表符

2. 大小写转换:

何时使用: 不区分大小写时，都要先转为统一的大小写，再比较

如何转换:

str=str.toUpperCase();

str=str.toLowerCase();

3. 获取指定位置的字符:

var char=str.charAt(i); =>str[i]

var unicode=str.charCodeAt(i);

获得str中i位置字符的unicode号

Day5

Am

回顾:

正课:

1. *String**

截取子字符串

***查找关键字

*****正则表达式

***替换(删除，格式化)

切割

1. ***String

截取子字符串: 3种:

var substr=str.slice(starti[,endi+1]);

str.substring(starti[,endi+1]);

不支持负数参数，可用str.length-n代替 str.substr(starti,n)

从starti开始，截取n个字符，不考虑含头不含尾

***检索关键词: 4种

1. 查询固定的一个关键词:

var i=str.indexOf("关键词"[,fromi]);

查找str中fromi位置之后的下*一个*“关键词”的位置

返回值: 关键词第一个的位置下标

如果找不到，返回-1

省略第二个参数，默认从0位置开始查找

var i=str.lastIndexOf("关键词"[,fromi]);

查找str中fromi位置之前的前*一个*“关键词”的位置

返回值: 关键词第一个的位置下标

如果找不到，返回-1

省略第二个参数，默认从length-1位置开始查找

2. 利用正则表达式查找关键词:

*****正则表达式:

什么是: 专门描述字符串中每位字符出现规律的表达式

格式的定义

何时使用: 只要按规律同时查找，替换，验证多个关键词时

都要先定义格式规则

如何使用:

1. 最简单的正则就是关键词的原文

2. 字符集: 规定一位字符的备选字符列表

[备选字符的列表]

强调: 一个字符集[]，只能匹配一位字符

特殊: 1. 如果字符集中的字符部分连续

可用-省略中间的字符，-读作“到”

常用: 一位数字: [0-9]

一位大写字母:[A-Z] 小写[a-z]

一位汉字: [\u4e00-\u9fa5]

一位字母数字或下划线: [0-9A-Za-z_]

2. 除了xxx：[^xxx]

^读作"除了"，必须在[]的开头

比如: 除了4和7之外所有字符:[^47]

3. 预定义字符集: 对常用字符集的简化写法

一位数字: \d =>[0-9]

一位字母数字或下划线: \w =>[0-9A-Za-z_]

一位空字符: \s => 包括: 空格制表符换行

一位任意字符: .

何时使用: 如果需求和预定义字符集完全匹配，则优先使用预定义字符集。否则自定义普通字符集

4. 量词: 规定字符集出现次数的规则

一般紧跟在字符集之后，修饰相邻的字符集

有明确数量:

{n,m} 最少n次，最多m次

{n,} 最少n次，多了不限

{n} 必须n次，不能多也不能少

不确定数量:

? 可有可无，最多一次

* 可有可无，多了不限

+ 至少一次，多了不限

5. 选择和分组:

选择：或 | 表示在两个规则之间挑一个匹配

优先级最低

分组: 在正则表达式内部用()划分子表达式

何时: 获取关键词的部分内容时，都要先分组再匹配

希望数量词修改一组字符集时

手机号: +86或0086 可有可无，最多一次

空字符可有可无，多了不限

3,4,5,7,8

9位数字

(\+86|0086)?\s*1[34578]\d{9}

Pm

正课:

1. ***String

*****正则表达式

***检索关键词

***替换(删除，格式化)

切割

1. ***String

*****正则表达式:

6. 指定匹配位置:

^字符串开头

$字符串结尾

同时前加^后加$，表示从头到尾必须完整匹配()

何时使用: 在查找和替换中，很少使用

在验证中，要求从头到尾必须完整匹配，用^和$

\b: 单词边界: 字符串开头，空字符，标点，字符串结尾

何时使用: 专门匹配符合条件的单词

比如: no zuo no die nothing 中

\bno 返回3个 ——以no开头的单词

no\b 以no结尾的单词返回2个

\bno\b 独立的no 返回2个

鄙视题: 匹配首字母和结尾字母相同的单词

首字母:\b([a-zA-Z])

中间字母: [a-zA-Z]+

结尾字母: \1\b

\b([a-zA-Z])[a-zA-Z]+\1\b

强调: 正则表达式中每个分组，自动会获得一个序号

序号从1开始

后边希望匹配和前边分组相同的内容可用\n匹配

密码强度:

8位字母数字的组合，至少包含一位大写字母和一位数字

预判: 从头到尾预览字符串

1. 不全由字母组成: (?![a-zA-Z]+$)

结论: 至少包含一位数字，还可能有特殊符号

2. 不全由小写字母和数字组成: (?![0-9a-z]+$)

结论: 至少包含一位大写字母，还可能包含特殊符号

3. 只能由字母和数字组成: [0-9A-Za-z]{8}

排除特殊符号的可能

(?![a-zA-Z]+$)(?![0-9a-z]+$)[0-9A-Za-z]{8}

***检索关键字:

1. 查找固定关键词: var i=str.indexOf("关键词",fromi);

var i=str.lastIndexOf("关键词",fromi);

2. 使用正则表达式查找： 3种

在js中创建正则:

var reg=/正则表达式/后缀;

后缀: i 忽略大小写

g 全部

1. 只判断有没有: var i=str.search(reg);

在str中找第一个和reg匹配的关键词位置

找到返回关键词位置i

每找到返回-1

2. 检索所有关键词的内容，不返回位置:

Step1. 创建正则时，加后缀g

Step2. var kwords=str.match(reg);

返回值: 返回包含所有关键词内容的数组

***没找到，返回null

一定要先判断不是null，再后续操作

特殊: 万一正则没加g

match：返回一个数组:

[第一个敏感词,第一组子字符串,第二组子字符串,...]

.index属性保存了第一个敏感词的位置

3. reg.exec();

***替换: (删除,格式化)

str=str.replace(reg,"替换后的新值");

如果替换的值和关键词无关，是固定的，用上一种方法

如果替换值依赖于本次找到的关键词，用下一种方法

Step1: 定义一个函数：

var fun=function(kword[,$1,$2,...]){

根据本次找到的关键词kword，返回新的替换值

}

Step2: 将函数对象传入replace，作为第二个参数

str=str.replace(reg,fun);

删除: 其实就是替换成空字符串

格式化: 2步:

1. 用正则将要格式化的内容分组

2. 用替换将分组重新拼接为新的格式

获得第n个分组的子字符串? 在替换值内用$n

切割: 按指定分隔符，将字符串分割为多段子字符串

var substrs=str.split(reg);

返回值: 子字符串组成的数组，

分隔符不包含在结果中

作业: 1, 11, 13, 14, 21, 22, 23

Day6

Am

回顾:

1. ***String

1. 大小写转换: str.toUpperCase();

str.toLowerCase();

2. 获取指定位置字符: str.charAt(i);

var unicode=str.charCodeAt(i)

var char=String.fromCharCode(unicode)

3. 获取子字符串:

str.slice(starti,endi+1);

str.substring(starti,endi+1);

str.substr(starti,n);

4. 检索关键词:

1. 检索一个固定的关键词:

var i=str.indexOf("关键词",fromi);

str.lastIndexOf("关键词",fromi);

2. 检查有没有: var i=str.search(reg);

3. 获得所有关键词的内容:

var arr=str.match(reg);//reg一定要加g

4. 即找每个关键词的内容，又找位置:

var arr=reg.exec(str)

5. 替换: 删除和格式化

str.replace(reg,"替换值");

str.replace(reg,function(kword,$1,$2,....){

return 处理后的替换值;

});

删除: 将关键词替换为""

格式化: 2步:

Step1. 用正则将关键词分组

Step2. 在replace的第二个参数中用$n，重新拼接新的格式

$n 正则中第n个()匹配的子关键词

6. 切割: var subs=str.split(reg);

固定套路:将字符串打散为字符数组:

var chars=str.split("");

2. *****正则表达式:

1. 最简单的正则表达式: 关键词原文

2. 字符集: [备选字符列表]

如果字符列表部分连续: 可用-省略中间字符

如果表示除了个别字符: [^xxx]

3. 备选字符集:

一位数字 \d 一位字母数组或下划线: \w

一位空字符 \s 任意一个字符: .

4. 量词:

有明确数量:

字符集{m,n} 至少m次，最多n次

字符集{m,} 至少m次，多了不限

字符集{m} 必须m次，不能多不能少

没有明确数量:

字符集? 可有可无，最多一次

字符集* 可有可无，多了不限

字符集+ 至少一次，多了不限

5. 选择和分组:

选择: 或 |

分组: () 每个分组在匹配时，自动获得一个序号，从1开始

2种用途: 1. 在正则内部\n，匹配和第n个分组相同的内容

2. js中使用$n获得关键词的第n个分组子关键词

6. 指定匹配位置:

^: 字符串的开始位置

$: 字符串的结束位置

\b: 单词边界, 默认仅匹配一边。

如果匹配独立单词，要两边同时加\b

密码强度: 8位字母数字的组合，至少包含一位大写字母和一位数字

1. 不都是字母: 至少有一个数字或特殊符号

(?![a-zA-Z]+$)

2. 不都是小写子母和数字: 至少有一个大写字母或特殊符号

(?![a-z0-9]+$)

3. 只能由字母和数字组成:

[a-zA-Z0-9]{8}

结果： ^(?![a-zA-Z]+$)(?![a-z0-9]+$)[a-zA-Z0-9]{8}$

正课:

1. *RegExp:**

2. Math:

**3. *Date:**

1. ***RegExp: 专门封装一个正则表达式，提供用正则表达式执行查找和验证的API 的对象

1. 创建:

1. 直接量: var reg=/正则/ig;

何时使用: 如果正则是固定的，不需要动态拼接

转义: 如果包含/,都要转为\/

2. 使用new关键字: var reg=new RegExp("正则"[,"ig"]);

何时使用: 如果正则不是现成的，需要运行时拼接

转义: 如果包含"或'，都要转为\"和\'

如果包含\d,\w,\s，必须写成\\d,\\w,\\s

2. API:

1. 查找关键词：查找每个关键词的内容和位置

var arr=reg.exec(str);

意为: 在str中查找下*一个*和reg匹配的关键词

返回值: arr: [kword,$1,$2,...]

arr.index: 保存了本次找到的关键词的位置

如果没找到返回null

原理: 默认从开头查找下一个关键词

如果找到，就将将关键词保存在结果数组的第一个元素

将关键词位置保存在结果数组的index属性中

exec自动将reg的lastIndex调整到本次找到的关键词之后

reg.lastIndex：标识正则下次匹配的开始位置

课堂练习:

贪婪模式: 正则表达式默认匹配最长的符合条件的字符串

比如: .* .+

懒惰模式: 让正则仅匹配最短的符合条件的字符串

贪婪->懒惰: (.*?) (.+?)

Pm

正课:

1. ***RegExp:

2. Math

3. *Date

1. ***RegExp:

1. 查找关键词：查找每个关键词的内容和位置

var arr=reg.exec(str);

返回值: arr:[kword,$1,$2,...]

arr.index: 本次找到的关键词的位置

RegExp.$n: 直接获取第n个分组的子内容

强调: reg要加g，才能反复查找所有。

不加g，仅查找第一个关键词

2. 验证: var bool=reg.test(str);

验证要求完整匹配，通常前加^，后加$，不加g

意为: 验证str是否和reg的规则完整匹配

身份证: \d{15}(\d\d[0-9Xx])?

2. Math: 专门提供数学计算的常用API的对象

不能new！

1. 取整:

Math.ceil(num): 上取整: 只要超过，就取下一个整数

Math.floor(num): 下取整: 只要超过，就省略小数部分

位运算也可实现下取整: m^0 m|0 m>>>0

Math.round(num): 四舍五入取整:

vs toFixed(d): d只能在0~20之间，只能返回字符串

2. 乘方和开平方:

Math.pow(底数,幂): Math.pow(10,2)=100

Math.sqrt(num): 将num开平方

3. 最大值和最小值:

Math.max(值1,值2,...): 在给定的多个值中返回最大的一个值

Math.min(值1,值2,...)

问题: 默认不支持查找数组中的最大值

解决: Math.max.apply(Math,arr)：返回arr数组中最大元素

4. 随机数:

Math.random(): 0<=r<1

公式: 任意最大值max最小值min之间取随机整数

parseInt(Math.random()*(max-min+1)+min);

简化: 在0~任意值之间取随机整数

parseInt(Math.random()*(max+1))

3. *Date: 专门封装一个时间点，提供操作时间的API

何时使用: 只要在程序中保存日期或时间，都要用Date对象

创建: 4种:

1. 创建日期对象同时获得客户端系统时间: var now=new Date();

2. 创建自定义时间的日期对象:

　　　 var date=new Date("yyyy/MM/dd hh:mm:ss");

var date=new Date(yyyy,MM-1,dd,hh,mm,ss);

3. 复制一个日期:

假设: var d1=new Date("yyyy/MM/dd hh:mm:ss);

var d2=new Date(d1);

日期的原理:

日期对象中，封装的起始是一个1970年1月1日0点至今的毫秒数

日期API:

日期的分量/单位:

FullYear Month Date Day

Hours Minutes Seconds Milliseconds

1. 每个分量都有一对儿getXXX()、setXXX()方法

date.getxxx()方法，获取一个分量的值

date.setxxx(n)方法，设置一个分量的值

特殊: Day，没有set方法()

2. 取值范围:

月中的日: 1~31 不用修正

星期: 0~6 不用修正

月: 0~11 ***要修正: 计算机中的月份至比现实小1

时: 0~23 不用

分秒: 0~59 不用

日期计算:

1. 两日期可相减，结果为毫秒差

2. 对日期的分量做加减: 3步:

1. 取出来: var n=date.getXXX();

2. 做加减:

3. 放回去: date.setXXX(修改后的n)

setXXX方法可根据传入的数值，自动调整进制

强调: setXXX方法直接修改原日期对象

其实可简化为: date.setXXX(date.getXXX()+/-n)

日期转字符串:

date.toString();->中国标注时间格式

date.toGMTString();->转为国际标准时间

date.toLocaleString();->转为操作系统当地时间格式

*date.toLocaleDateString();

->转为操作系统当地时间格式,仅包含日期部分

date.toLocaleTimeString();

->转为操作系统当地时间格式,仅包含时间部分

Day7

Am

回顾:

1. *Date

正课:

1. 错误处理

2. *Function**

***重载

***匿名函数

***作用域和作用域链

*****闭包

1. 错误处理:

错误: 程序运行中发生的异常问题

一旦发生错误，引擎停止执行后续程序

错误(异常)处理: 在程序发生错误时，依然保证程序不强行退出的机制。

如何处理:

try{

可能出错的正常代码;

}catch(err){

错误处理的代码;

}finally{

无论是否出错，始终执行的代码

}

err: 在错误发生时，获得错误对象

错误对象: 封装错误信息的对象，在发生错误时自动创建

性能: 放在try中的代码，执行效率会降低

建议: 1. 在try中尽量少的，仅包含可能出错的代码

2. 绝大多数的错误，都可通过if提前预防——经验

特殊用途：判断浏览器兼容性问题:

异常处理中的return:

1. 如果finally中没有return：

finally中的代码一定会在返回前被执行

finally中的代码不会影响返回值的结果

2. 如果finally中有return

finally中的return会覆盖之前的return

主动抛出异常：

throw new Error("错误信息");

何时使用: 函数的定义者，向函数调用者提示错误之用

2. ***Function: 封装一个函数定义，提供对函数操作的API 的对象

创建: 3种:

1. 声明: function 函数名(参数列表){函数体; return 返回值}

*********只有声明方式创建的函数才能被声明提前*********

2. 直接量:

var 函数名=function(参数列表){函数体; return 返回值}

3. 用new关键字:

var 函数名=new Function("参数1","参数2",...,"函数体")

重载(overload):

什么是: 相同函数名，不同参数列表的多个函数。在调用时根据传入参数的不同，自动挑选对应的函数执行。

为什么: 现实中，不同操作步骤的相关任务，通常都起相同的任务名。为了减轻使用者的负担。

何时使用: 多个相似的任务，具有相同的任务名，只是参数和步骤不一样，则都要定义相同的函数名。

问题: js中不支持重载的语法。因为js不允许多个同名函数存在

解决: arguments

什么是: arguments是专门接受调用时所有传入的参数值的类数组对象。

什么是类数组对象: 像数组的对象

vs 数组: 相同:用下标访问每个元素

length属性记录元素个数

不同: 不能使用数组的任何API

arguments在调用函数时，在函数内部自动创建，并保存参数值

Pm

正课:

1. *Function**

***匿名函数

***作用域和作用域链

*****闭包

1. ***Function

***匿名函数: 定义时，没有给定函数名的函数

为什么: 为了一次性使用，节省内存空间

何时使用: 只要一个函数，只执行一次，都要用匿名函数

如何使用:

1. 回调: 将函数作为对象交给别的函数去调用

函数的调用时机，次数，以及参数与函数定义者无关

2. 自调: 定义完函数，立刻调用

(function(...){...})();

作用域和作用域链:

作用域: 变量的可用范围

1. 全局作用域: 全局变量，随处可用，可反复使用

2. 函数作用域: 局部变量，仅函数内可用，函数调用后释放

作用域链: 从当前函数的AO到全局对象window形成的链式结构

*****闭包: 保护并重用局部变量的机制

为什么: 全局变量: 优: 随处可用，可重用，缺: 易被污染

局部变量: 优: 仅在函数内用，安全，缺: 不可重用

何时使用: 希望重用一个变量，又不希望被污染时-保护局部变量

如何定义: 3步:

1. 定义受保护的局部变量

2. 定义内层函数专门操作受保护的变量

3. 定义外层函数将受保护的变量和操作变量的函数封装起来，外层函数将内层函数返回到外部

鄙视时:

判断闭包: 1. 局部变量 2. 内层函数 3. 外层函数

判断输出:

1. 找到受保护的局部变量，判断外层函数调用后，它的值

2. 同一次外层函数调用返回的多个内层对象，操作的是同一个受保护的变量。

Day8

Am

正课:

1. *****面向对象: OOP

什么是对象: 内存中集中存储多个数据或函数的存储空间，再起一个名字。

对象是程序中描述现实中一个具体事物的属性和功能的结构

什么是面向对象: 程序中都是先用对象描述现实中一个具体事物，然后再访问对象的属性和功能。

为什么面向对象: 现实中，一个属性或一个功能都必须依附在一个具体的事物上才有意义！不同的事物，即使是同一功能，它的定义也可能不一样。

如何使用面向对象:

1. 先创建对象: ——封装

描述现实中一个事物，需要两类成员:

1.事物的属性，会成为程序中对象的属性

属性: 对象中存储一个数据的变量

2.事物的功能，会成为程序中对象的方法

方法: 保存在对象中的一个函数

属性和方法统称为: 对象的成员

将一个事物的属性和方法集中定义在一个对象中。

3种:

1. 直接量,创建*一个*独特的对象:

var obj={

属性名:属性值,

...:...,

方法名:function(...){...},

...:...

}

*****js中一切都是对象！对象的底层都是关联数组！

1. 每个成员名其实都是字符串，但对象中成员名的引号可省略

2. 都可用for in遍历对象的每个成员

3. 对象也可在任何时候添加新成员

对象自己的方法，如何使用自己的属性:

*****this: 在函数调用时，引用正在调用函数的对象的变量

其实就是.前的对象

不使用任何对象调用的函数，this默认是window

2.用new关键字: var obj=new Object();//创建一个空对象

obj.属性名=值;

obj.方法名=function(){...}

*****3.使用构造函数，反复创建*多个*相同结构的对象:

构造函数: 专门描述一类对象的结构的函数

为什么: 代码重用！

如何使用: 2步:

1. 定义构造函数/类型:

function 类型名/构造函数名(属性参数,...){

为当前对象添加指定属性，赋值为属性参数的值:

比如: this.属性名=属性参数

this.方法名=functon(...){...}

}

2. 调用构造函数创建对象，也称为创建类型的一个实例

——也称为实例化！

var obj=new 构造函数名/类型名(属性值列表,...);

new执行了4个操作：

1. 创建一个空对象

2. ?

3. 用新对象调用构造函数

4. 返回新对象的地址给变量

2. 访问对象成员:

1. 访问属性: 对象.属性名 -> 和变量完全一样

2. 调用方法: 对象.方法名() -> 和函数完全一样

Pm

正课:

1. *面向对象:

*****原型和原型链

*****继承

1. *****面向对象:

面向对象三大特点:

封装：将事物的属性和功能集中定义在一个对象中

继承：父对象的成员，子对象不用反复创建，也可直接使用

多态：同一类事物或父子关系的事物，也可能表现出不同的状态

js中都是继承原型:

原型对象: 集中保存一类对象共有成员的父级对象

何时使用原型对象: 凡是所有子对象共有的属性*值*和方法，都要在原型中集中定义一次。子对象共同使用。

如何使用:

如何获得原型对象: 每个函数都有一个prototype属性引用自己的原型对象。

回顾: new 4件事:

1. 创建空对象

2. 设置空对象的__proto__属性继承构造函数的原型对象

原型对象中的属性，新对象可直接使用，不用重复定义

3. 调用构造函数为新对象添加属性和方法

4. 返回新对象地址保存在变量中

如何向原型对象中添加共有属性和方法:

构造函数.prototype.属性名/方法名=....

原型链: 由各级对象的__proto__属性连续继承形成的链式结构

用来控制属性的使用顺序: 自己有，就不用父级的。

自己没有，才到父级找。

如果父级没有，继续延原型链向上找

如果到顶级对象都没有，才返回undefined

vs 作用域链: 用于控制变量的使用顺序。

自有属性和共有属性:

1. 判断自有属性: var bool=obj.hasOwnProperty("属性名");

如果指定"属性"，直接保存在obj本地，则是自有属性，返回true。

如果指定"属性"，没有保存在obj本地，则返回false。

2. 判断共有属性: 不是自有，且在原型链中有

!obj.hasOwnProperty("属性名")

&&("属性名" in obj)//判断obj的原型链上是否包含指定属性。

内置对象的原型对象: 保存了内置对象共有的API和属性值

原型相关API:

1. 获得对象的父级原型对象: 2种:

1. 通过构造函数获得: 构造函数.prototype

2. 通过子对象获得:

obj.__proto__ 问题: __proto__是内部属性，可能被禁用

Object.getPrototypeOf(obj)

2. 判断两对象间的父子关系:

父对象.isPrototypeOf(子对象)

如果父对象确实是子对象的父级，就返回true

如果父对象不是子对象的父级，就返回false

强调: 检查整个原型链

重写（override）: 如果子对象觉得父对象的成员你不好用，可在本地定义同名成员覆盖父对象成员

//判断一个对象是不是数组类型，有几种方法:

/*typeof 无法判断只能判断原始类型的值和函数

console.log(typeof []);

console.log(typeof {});

console.log(typeof function(){});

console.log(typeof new Date());

console.log(typeof /\d/);

/*1. isPrototypeOf 可检查整个原型链

console.log(Array.prototype.isPrototypeOf([])?"是数组":"不是数组");

console.log(Array.prototype.isPrototypeOf({})?"是数组":"不是数组");

console.log(Array.prototype.isPrototypeOf(function(){})?"是数组":"不是数组");

/*2. constructor 检查指定对象的构造函数，检查整个原型链

var father={};

var son={};

father.__proto__=Array.prototype;

son.__proto__=father;

console.log(son.constructor==Array?"是数组":"不是数组");

/*3. instanceof 检查一个对象是否是指定构造函数的实例

//检查整个原型链

var father={};

var son={};

father.__proto__=Array.prototype;

son.__proto__=father;

console.log(son instanceof Array?"是数组":"不是数组");

console.log({} instanceof Array?"是数组":"不是数组");

console.log(function(){} instanceof Array?"是数组":"不是数组");

/*4. 强行用要检查的对象，调用原始的toString方法

//[object class]: class-Array Date Object...

//只能检查最初就是数组创建的对象。

console.log(

Object.prototype.toString.call([])

=="[object Array]"?"是数组":"不是数组");

console.log(

Object.prototype.toString.call({}));

console.log(

Object.prototype.toString.call(function(){}));

console.log(

Object.prototype.toString.call(/\d/));

var father={};

var son={};

father.__proto__=Array.prototype;

son.__proto__=father;

console.log(

Object.prototype.toString.call(son)

=="[object Array]"?"是数组":"不是数组");//不是

//结论: 对象一旦创建，class属性就无法修改

//修改继承关系，也无法修改class属性

/*5. Array.isArray(obj)

console.log(Array.isArray([])?"是数组":"不是数组");

console.log(Array.isArray({})?"是数组":"不是数组");

var father={};

var son={};

father.__proto__=Array.prototype;

son.__proto__=father;

console.log(Array.isArray(son)?"是数组":"不是数组");

//如果浏览器不支持isArray

//给?添加isArray方法

//强行调用原始toString方法，和"[object Array]"比较

console.log(Array.isArray([]));//true

console.log(Array.isArray({}));//false

#JavaScript代码中可以使用的对象有很多，来源不同，也涉及到不同程度的浏览器兼容性问题，请详细的加以区分。

(1)内置对象：或称为JavaScript原生对象，在ECMAScript标准定义的对象，由浏览器厂家来提供实现，由于标准统一，兼容性比较好。如：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、Math、Global

(2)宿主对象：由浏览器厂家自主提供的对象，早期兼容性问题比较混乱，当前其中的一些对象在大部分浏览器中的功能大体相当，但仍需要注意细节上的兼容性。宿主对象又分为两种：DOM对象和BOM对象

(3)自定义对象：由用户自定义的对象，兼容性问题需要编写者加以注意。如Emp、Book、News等。

Function对象的arguments属性中保存着函数当前传递进来的实际参数列表，由于实参可能有多个，那么arguments是Array类型的吗？

虽然arguments属性有length属性，也可以像数组那样使用[index]的格式来获取第index个实参的值，但它并不是Array类型，如:

console.log(arguments instanceof Array);

split()方法使用一个固定的字符串或者正则表达式实现字符串的拆分。indexOf()方法只能接收一个固定内容的字符串，搜索其第一次出现的下标。match()方法接收一个固定字符串或正则表达式，返回匹配的数组。replace()方法实现固定字符串或正则表达式的替换。search()方法检索一个正则表达式第一次出现的下标。

Day09

Am

回顾:

1. *****面向对象:

面向对象三大特点: 封装，继承，多态

什么是封装: 将一个事物的属性和功能集中定义在一个对象中

何时封装: 面向对象程序中，都是先将对象的属性和功能封装在一个对象中，再按需访问对象的成员

为什么封装: 代码重用；更符合人的思维方式

如何封装: 3种:

1. 仅创建一个对象:

1. 直接量: var obj={

属性名:"属性值",

...:...,

方法名:function(){...this.属性名...}

};

*****js中一切都是对象；一切对象都是关联数组:

1. 每个属性都有两种访问方式:

obj.属性名或 obj["属性名"]

2. 都可用for in 遍历对象的每个成员

in是获得一个对象中每个属性名

3. 对象也可以随时添加新的属性

*****this: 正在调用函数的对象

何时使用: 在函数内，希望获得正在调用函数的对象时

(.前的对象)

2. 实例化Object类型对象: var obj=new Object();

obj.属性=值;

obj.方法=function(){}

强调: new可省略

()也可省略

不能同时省略

2. 使用构造函数反复创建多个相同结构的对象：

构造函数：专门描述一类对象的统一结构的函数

如何使用: 2步:

1. 定义构造函数:

function 构造函数名/类型名(属性参数){

this.属性名=属性参数;

...

this.方法名=function(){}//浪费内存空间

}

2. 实例化类型的对象:

var obj=new 构造函数名/类型名(属性值列表);

new的执行过程:

1. 创建一个空对象

2. 让空对象继承构造函数的原型

(设置空对象的__proto__为构造函数的原型)

3. 调用构造函数向空对象中添加属性和方法

4. 返回新对象的地址给变量

什么是继承: 父对象的成员，子对象不必重复定义，可直接使用

为什么继承: 代码重用; 节约内存

何时继承: 1. 自动: 在创建对象时，默认都会继承构造函数的原型对象

2. 手动: 希望直接获得其它对象中的成员时

如何继承: js中一切继承都是继承原型——原型继承

什么是原型: 保存同一类型的所有子对象共有成员的对象

何时将成员放入原型: 如果一个成员希望被多个子对象共有时

就一定要将共有成员放入原型

如何将成员放入原型: 2步：

1. 获得对象的父级原型对象: 2个途径:

1. 通过构造函数获得: 构造函数.prototype

2. 通过子对象，向上获得:

subObj.__proto__ //内部属性，可能被禁用

代替: Object.getPrototypeOf(subObj)

获得subObj对象的父级原型对象

2. 向原型对象中添加共有成员:

构造函数.prototype.新成员

原型链: 由各级对象的__proto__属性，逐级继承形成的链式结构

原型链中属性的使用规则: 优先使用当前对象的自有成员

如果自己没有，延原型链去父级对象中找

所有原型链的顶部都是Object.prototype

如果找到Object.prototype都没有，就返回undefined

vs 作用域链: 作用域链用来规定局部变量的使用顺序

原型链: 用来规定对象的属性的使用顺序

自有属性和共有属性:

1. 自有属性: 直接保存在对象本地的属性

判断: obj.hasOwnProperty("属性名");

2. 共有属性: 保存在当前对象的原型链上的属性

判断: !obj.hasOwnProperty("属性名")

&&("属性名" in obj)

//in: 在obj的整个原型链上查找“属性名”是否存在

判断继承关系: 父对象.isPrototypeOf(子对象)

如果指定父对象在子对象的*原型链*上，就返回true

如果指定父对象不再子对象的原型链上就返回false

*****判断一个对象是不是数组:

typeof不能区分数组类型和对象

1. 判断父级对象: isPrototypeOf：检查整个原型链

Array.prototype.isPrototypeOf(obj)

返回true: obj本身就是数组类型

obj本身不是数组类型，但可能继承自数组类型

返回false: obj既不是数组，也没有继承数组

2. 判断构造函数: 检查整个原型链

obj.constructor==Array 是数组，也可能继承自数组

obj instanceof Array 是数组，也可能继承自数组

3. 判断对象的内部属性class: 不检查原型链

class属性: 记录对象创建时的最初类型名

如何访问: Object.prototype.toString.call(obj)

判断: Object.prototype.toString.call(obj)

=="[object Array]"

class

问题: class仅保留创建时的类型，不反应继承关系

如果判断返回true：只能说明obj本身就是数组

如果obj本身不是数组，但继承自数组: 会返回false

4. 使用新API: Array.isArray(obj) 不检查原型链

原理: isArray内部使用的就是: Object.prototype.toString.call(obj)

多态: 同一类型的对象或父子对象之间都存在着差异

如何使用:

重写(override)：子对象觉得从父对象继承来的成员不好用，可在本地定义同名自有成员，覆盖父对象的成员

正课:

1. *****面向对象:

自定义继承: 3种:

1. 直接设置两个对象间的继承关系:

子对象.__proto__=父对象 //内部属性，可能被禁用

Object.setPrototypeOf(子对象，父对象)

让子对象继承父对象

2. 直接修改构造函数的原型对象，实现批量修改子对象的父对象

时机: 在定义完构造函数后，为原型对象添加共有属性前，立刻更改原型对象

构造函数.prototype=父对象

*****3. 即继承原型，又扩展结构: 最像Java的继承

其实是两个类型间的继承

继承(inherit): 子类型的原型继承父类型的原型

扩展(extends): 子类型的构造函数调用了父类型的构造函数并扩展了新的属性。

如何实现: 2步:

1. 在子类型构造函数内调用父类型的构造函数

父类型构造函数.apply(this,arguments)

*****call 和 apply

相同: 借用函数，并更换调用时的this为指定对象

不同: call要求传入的参数必须单独传入

apply要求传入的参数必须以数组方式整体传入

2. 让子类型构造函数的原型，继承父类型构造函数的原型

Object.setPrototypeOf(

子类型构造函数的原型，

父类型构造函数的原型

)

Pm

正课:

1. ECMAScript5.0

1. 对象:

对象的本质: 属性的集合

对象的属性:

命名属性: 可直接通过.访问到的属性

数据属性: 专门保存一个值的属性

访问器属性: 保护数据属性的特殊属性

内部属性: 不能通过.直接访问的属性

比如: class __proto__

数据属性: 4大特性: 描述属性的配置信息

value: 实际存储属性值的特性

writable: 定义了当前属性是否可修改

默认true

如果改为false，当前属性变为只读

enumerable: 定义能否被for in遍历到

默认true

如果改为false，当前属性在for in时不会被遍历

但是，使用.依然可正常访问

configurable: 定义了属性能否被删除或能否修改其他特性

默认true

如果改为false，不能删除当前属性

也不能修改当前属性的其他特性

***不可逆

如何获取四大特性:

var 数性描述对象=

Object.getOwnPropertyDescriptor(obj,"属性名");

如何修改四大特性:

Object.defineProperty(obj,"属性名",{

需要修改的特性

})

特例: 如果obj中包含指定属性，则修改现有属性的值

如果obj中不包含指定属性，则在obj中自动添加新属性

特性的默认值:

1. 属性在创建对象时就定义好了：所有特性的默认值都为true

2. 使用defineProperty添加的属性，特性的默认值都为false

所以，在使用defineProperty添加属性时，必须显式定义属性的特性为true，否则默认都为false

访问器属性:

getter/setter访问器: 两个专门操作1个变量的方法

其中get方法负责读取变量的值

set方法负责修改变量的值

四大特性:

get:function(){return 局部变量的值;}

set:function(value){

先验证value是否符合要求

局部变量=value;

}

enumerable:

configurable:

如何定义访问器属性:

Object.defineProperty(obj,"属性名",{

访问器属性的四大特性

})

何时调用get/set：

试图通过访问器属性取值时，自动调用get特性的函数

试图通过访问器属性设置值时，自动调用set特性的函数

一般在set中设置对要设置的新值得验证

特殊: 如果省略set特性，则该属性为只读

2. Object.create(): 基于指定父对象，创建并扩展子对象

做3件事: 1. 创建一个新对象

2. 设置新对象继承父对象

3. 为新对象扩展新属性

何时使用: 只要基于现有的父对象，创建并扩展一个新的子对象时。

如何使用: var son=Object.create(father,{

新属性:{属性的四大特性},

...:{...}

});

Day10

Am

回顾:

1. ES5标准：

对象:

对象属性:

命名属性:

数据属性: 专门存储数据的属性

四大特性: {

value:值,

writable:true/false,

enumerable:true/false,

configurable:true/false //一旦改为false不可逆

}

访问器属性: 专门保护数据属性的特殊属性，不实际存储数据

四大特性:{

get:function(){return 局部变量},

set:function(value){局部变量=value},

enumerable:同数据属性

configurable:同数据属性

}

强调: 使用访问器属性，必须有一个受保护的局部变量

都要通过闭包来添加访问器属性:

单独添加访问器属性:

(function(){

var 局部变量=值;

Object.defineProperty(obj,"属性名",{

get:function(){return 局部变量},

set:function(value){局部变量=value},

enumerable:true, configurable:true

})

})();

在构造函数中添加访问器属性:

function(属性参数){

this.公有属性=参数,

...

Object.defineProperty(obj,"属性名",{

get:function(){return 属性参数},

set:function(value){属性参数=value},

enumerable:true, configurable:true

})

}

定义命名属性:

1. 只定义一个命名属性:

Object.defineProperty(obj,"属性名",{

四大特性

})

2. 同时定义多个属性:

Object.defineProperties(obj,{

属性名1:{

四大特性

...:{...}

})

如果指定名称的属性存在，则修改现有属性

如果指定名称的属性不存在，则自动创建同名属性

默认值: 非defineProperty定义的属性，四大特性默认值都是true。

defineProperty添加的属性，四大特性默认值都是false。

何时修改四大特性: 只要保护属性，就用四大特性控制

何时使用数据属性: 只想控制只读，遍历或删除

何时使用访问器属性: 希望用自定义逻辑保护变量

内部属性:

Object.create(): 基于现有父对象，创建新对象，继承父对象，同时可为新对象扩展新属性。

3件事： 1. 创建新对象

2. 设置新对象继承指定父对象

3. 为新对象扩展新属性

实现继承: 4种:

1. 仅修改两个对象间的继承:

Object.setPrototypeOf(子，父)

2. 修改所有子对象的父对象: 修改构造函数的原型对象

时机: 定义完构造函数后，立刻修改

构造函数.prototype=父

3. 两种类型间的继承。即继承原型(inherit)，又扩展结构(extends): 最像Java的继承。

2步:

1. extends: 在子类型构造函数开始位置，借用父类型构造函数

父类型构造函数.apply(this,arguments) 2. inherit: 设置子类型构造函数的原型继承父类型构造函数的原型

Object.setPrototypeOf(

子类型构造函数.prototype,

父类型构造函数.prototype

)

4. 基于现有父对象，创建并扩展一个新的子对象:

var son=Object.create(parent,{同defineProperties})

强调: 第二个参数的属性特性定义时，默认所有特性都为false

建议: 使用Object.create时，都要显示定义所有值为true的特性。

Object.create(parent) vs Object.clone(org):

create: 新对象继承parent

新对象不会复制parent的属性

clone: 新对象和org之间没有继承关系

新对象会复制parent的属性保存在新对象本地

正课:

1. ES5:

对象：

防篡改

函数API: bind方法

数组API:

严格模式:

1. 防篡改: 创建对象后，限制对对象的修改

3个级别:

1. 禁止扩展:

extensible: 内部,控制能否给对象添加新属性

默认: true,可添加新属性

获取extensible的值: Object.isExtensible(obj)

用于检查obj能否扩展

禁止扩展: Object.preventExtensions(obj)

禁止obj后续添加新属性（extensible=false）

2. 密封: 在禁止扩展的基础上,将所有属性的configurable设置为false。

Object.issealed(obj)判断obj是否被密封

Object.seal(obj) 密封obj

chrome中特例: 依然可修改其它特性。

3. 冻结: 在密封基础上，禁止修改属性的值

Object.isFrozen(obj) 判断obj是否被冻结

Object.freeze(obj) 冻结一个对象

都不可逆！

2. 数组API: 迭代方法: 依次对数组中每个元素执行相同的操作

3大类:

1.判断:

1. 数组的所有元素，是否都符合要求

var bool=arr.every(function(val,idx,arr){

return 判断条件

})

其中:val 当前元素的值

idx 当前元素的下标i

arr 当前数组

所有元素都返回true时，才返回true

只要一个元素返回false，就返回false

2. 数组中是否包含符合要求的元素

var bool=arr.some(function(val,idx,arr){

return 判断条件

})

只要一个元素返回true，就返回true

除非所有元素都返回false，才返回false

2. 遍历:

1. forEach:

对原数组中每个元素执行相同操作，直接修改原数组

2. map:

对原数组中每个元素的值执行相同的操作，再生成新数组

原数组元素保持不变

Pm

正课

1. ES5:

数组API:

bind:

严格模式:

1. 数组API:

过滤和汇总:

过滤: 从数组中筛选出符合条件的元素，组成新数组

var sub=arr.filter(function(val,idx,arr){

return 判断条件

});

只有符合判断条件的元素，才放入新数组sub中

原数组不变。

汇总: 依次将数组中每个元素的值，汇总出一个最后结果

var result=arr.reduce(function(prev,val,idx,arr){

return prev和val汇总的结果

},base)

其中: prev是目前为止的汇总值

base表示初始值

2. bind:

call apply bind

call vs apply:

相同: 借用函数，并更改函数调用时的this为指定对象

不同: 第二个参数:

call, 所有参数必须单独传入

apply，所有参数必须放在一个数组内整体传入

apply再自动打散数组，将参数传递给函数

bind: 基于现有函数，创建一个新函数，提前将替换this的对象，绑定给新函数。

何时使用: 基于现有函数，创建一个新函数

并提前永久绑定this，和部分参数值时

vs call/apply: 都是替换this

不同: call/apply：借用: this都是临时替换

*调用*:

bind: 永久绑定this

为指定对象*创建*一个专属的函数副本。

如何使用:

1. 仅将newFun中的this绑定为obj:var newFun=fun.bind(obj);

2. 同时给newFun提前绑定this和个别参数:

var newFun=fun.bind(obj,param1,...);

仅绑定部分参数。

剩余参数需要在调用时动态传入:

newFun(剩余参数值);

3. 严格模式:

启用严格模式： 2个范围:

1. 整个<script>范围内都采用严格模式:

在<script>的顶部写: "use strict";

何时使用: 新开发的项目，建议全用严格模式

2. 仅在一个函数内使用严格模式:

在函数定义的顶部: "use strict"

何时使用: 维护旧的项目，逐个函数向严格模式迁移

规定:

1. 不允许对未声明的变量赋值

2. 将静默失败升级为错误

3. 严格模式下新增eval作用域: eval内声明的变量，eval结束后无法使用。

4. 匿名函数自调中arguments.callee失效

意味着: 匿名函数不再允许递归调用

Cookie:什么是在客户端持久存储用户信息的文件

为什么：有些数据需要持久保存，一些私密的信息最好保存在客户端本地

DOM

Day01

正课: DOM

1. 什么是DOM

2. DOM树

3. 选取元素

1. 什么是DOM: Document Object Model

专门操作网页内容的API

js=ECMAScript(核心语法)+DOM+BOM(Browser Object Model)

DHTML: 一切实现网页动态效果的技术的统称：

DHTML=HTML+CSS+JS

鄙视题: 区分: DHTML HTML XHTML XML

DHTML模型:

BOM: window 全局对象（2天）

history: 封装历史记录栈(和前进，后退，刷新有关)

navigator: 封装浏览器的配置信息

location: 封装当前网页的url信息（地址栏）

screen: 封装桌面分辨率信息——判断设备种类

event: 封装事件信息，并监听事件触发

DOM:

DOM标准分为:

核心DOM: 本来是希望操作一切结构化文档(HTML XML)

优: 万能缺: API繁琐

HTML DOM: 对核心DOM中部分常用API提供的简化版本，

专门用于操作HTML的内容

优: 简洁缺: 无法实现所有功能，更侧重修改

实际开发中: 优先使用HTML DOM，如果无法实现的功能，用核心DOM补充。

2. ***DOM Tree：

什么是: 浏览器为页面中每个内容分别创建节点对象

所有节点都是按上下级包含关系在内存中以树形结构存储

什么是节点: 封装网页中任意一项内容的属性的对象

包括:

document对象：根节点

当浏览器获得一个网页时，会自动创建document对象

所有网页内容中的对象，都是document的子节点

包括: 查找创建

元素节点: 专门封装页面中的一个元素

文本节点: 专门封装页面中的一段连续的文本

属性节点: 专门封装页面中元素的一个属性

注释节点: 专门封装页面中一段注释

所有节点的父类型都是:Node

节点对象的公共属性: 3个

nodeType: 描述节点对象的类型，值是一个数字

ELEMENT_NODE: 1

ATTRIBUTE_NODE: 2

TEXT_NODE: 3

DOCUMENT_NODE: 9

nodeName: 获取节点名称

元素节点: 更精确的获得元素的标签名

属性节点: 属性名

文本节点: #text

document: #document

nodeValue: 节点的值

元素节点: null

属性节点: 属性值

文本节点: 文本内容

document: null

节点间关系: 节点树: 包含所有节点对象的树结构

2类:

1. 父子关系: parentNode childNodes firstChild lastChild

childNodes: 返回所有直接子节点的集合——类数组对象

遍历: for(var i=0,len=parent.childNodes.length;i<len;i++){

}

childNodes返回动态集合。

动态集合: 不返回完整节点对象，仅返回对节点对象的快速扫描结果。

优点: 查询速度快缺点: 每次查询都要重新访问DOM树

问题: 如果反复直接和childNodes.length比较，会造成反复查找

解决: 今后，凡是遍历动态集合，都要提前存储集合的length

再和存储的length比较

2. 兄弟关系: previousSibling nextSibling

课堂练习: 递归遍历节点树(手写)

递归: 函数内部又调用函数自己

何时使用: 希望对子内容执行和父内容相同的操作时

如何使用: 2步:

1. 定义对父元素及其直接子节点的操作方法:

2. 遍历父元素下的直接子元素，对每个子元素在调用和父元素相同的方法

算法: 深度优先: 优先遍历一个节点的下级节点

只有下级节点遍历完，才遍历兄弟节点

元素树: 仅包含元素节点的树结构

优: 不会受到空字符的干扰

缺: 无法获得文本节点

6个关系:

1.父子关系: parentElementNode

children IE8兼容

firstElementChild

lastElementChild

2. 兄弟关系: previousElementSibling,nextElementSibling

递归API:

1. NodeIterator: 按照深度优先的算法，依次取出每个节点对象

强调: 每次只能取1个

何时使用: 希望按照深度优先的顺序遍历每个子节点时

如何使用: 2步:

1. 创建NodeIterator对象:

var iterator=document.createNodeIterator(

parentNode,

NodeFilter.SHOW_ALL/SHOW_ELEMENT,

null,false

);

强调: 刚创建完迭代器时，并没有站在第一个节点上

必须nextNode一次，才可站到第一个节点上

2. 使用循环反复调用迭代器对象，获取子节点:

var node=iterator.nextNode()

如果有下一个，则返回下一个节点对象

否则，返回null

var node=iterator.previousNode();

如何遍历获得所有子节点:

while((node=iterator.nextNode())!=null){

node//当前节点

}

2. TreeWalker

正课:

1. DOM

递归API

2. 选取元素

1. 递归API:

1. NodeIterator: 按照深度优先的顺序，依次遍历每个节点对象

如何使用: 2步:

1. 创建NodeIterator对象:

var iterator=document.createNodeIterator(

parent, NodeFilter.SHOW_ALL, null, false

SHOW_ELEMENT

);

iterator就站在开始父节点上

2. 循环调用iterator，遍历每个节点对象

var currNode=iterator.nextNode(): 1. 返回当前节点

2. 然后跳到下一个节点

var prevNode=iterator.previousNode():1. 倒退一步

2. 返回当前节点

循环条用: while((node=iterator.nextNode())!=null){

node//当前节点

}

2. TreeWalker: 可选择跳转方向的迭代器

基本功能和NodeIterator完全一样

相同: 开始时都站在开始父元素上

不同: nextNode()返回的是下一个节点对象

previousNode()返回的是上一个节点对象

API: parentNode(): 跳到父节点

firstChild(): 跳到第一个子节点

lastChild(): 跳到最后一个子节点

previousSibling(): 跳到前一个兄弟节点

nextSibling(): 跳到后一个兄弟节点

2. ***选取元素:

1. 按HTML属性选取:

1. 按id查找: var elem=document.getElementByid("id");

返回一个元素对象。如果未找到，返回null

2. 按标签名查找:

var elems=parent.getElementsByTagName("tagName");

不但找直接子元素，而且还找所有子元素

3. 按name属性查找:

var elems=parent.getElementsByName("name");

4. 按class属性查找:

var elems=parent.getElementsByClassName("class")

返回值: 返回动态集合(live collection)(类数组对象)

优: 查询效率高

遍历时都要先缓存length属性到变量，在和变量比较

如果没找到，返回空数组[]

2. 按选择器查找:

1. 只查找一个符合条件的元素:

var elem=docuemnt.querySelector("selector");

返回一个元素对象,如果没找到，返回null

2. 查找所有符合条件的元素

var elems=document.querySelectorAll("selector");

返回静态集合(static collection)

缺点: 查询效率低

包含完整的节点对象及其属性

DOM树的更改，不会影响当前结果

如果没找到,返回空集合[]

getXXXByXXX vs querySelector

1. getXXXByXXX的效率，比querySelector高的多

2. querySelector比getXXXByXXX 使用更简洁

如果通过一个属性就可获得结果时，首选getXXX

必须通过复杂的查询才可获得结果时，首选querySelector

Day02

正课

1. 修改

改内容

改属性: 标准属性，自定义属性

改样式: 内联样式，样式表(外部/内部)

1. 获取和修改元素的内容:

1. 获取和修改原始的html内容:

elem.innerHTML: 指代元素开始标签到结束标签之间的一切html原文。

2. 获取和修改纯文本的内容:

(不包含子元素的标签，自动转换特殊字符)

elem.textContent: 指代元素开始标签到结束标签之间的文本正文。（IE8不兼容）

IE8 : elem.innerText

2. 获取和修改元素的属性:

1. 标准属性:

核心DOM: 万能

获取属性:

1. 获取所有属性的集合: elem.attributes

2. 获取属性节点对象: (了解)

var node=elem.attributes[i/"属性名"]

var node=elem.getAttributeNode("属性名")

3. 获得属性值:

elem.attributes[i/"属性名"].value

elem.getAttributeNode("属性名").value

var value=elem.getAttribute("属性名")

设置属性:

node.value="值"; 了解

elem.setAttribute("属性名","值")

HTML DOM: 仅能访问标准属性

elem.属性名="值";

class属性: 核心DOM API中，写"class"

HTML DOM中，写为.className

2. 自定义属性:

正课：

1. 修改:

修改属性: 标准属性，自定义属性

修改样式: 内联样式，样式表

1. 修改属性:

1. 标准属性: HTML标准中已经规定好的元素属性

核心DOM:

elem.attributes 封装了所有属性节点的集合

elem.getAttribute("属性名") 获得指定属性的值

elem.setAttribute("属性名","属性值") 设置指定属性的值

elem.removeAttribute("属性名") 移除属性

elem.hasAttribute("属性名") 判断元素是否包含指定属性

HTML DOM:

elem.属性名

如果不包含指定属性，则返回""

如果给一个属性赋值为""，相当于移除了

2. 自定义属性: 在元素开始标签中定义的自定义属性名的属性

只能使用核心DOM访问

特性attribute vs 属性property

attribute: 指出现在html元素开始标签中的标准属性

property: 内存中，对象上的保存一个数据的属性变量

HTML DOM将标准attribute，同样也封装为了内存中元素对象的property

HTML5中: 规定:

html中如何定义自定义属性: data-属性名="值"

js中如何定义自定义属性: elem.dataset.属性名="值"

如何访问: elem.dataset.属性名

2. 获取或修改元素的样式:

HTML DOM:

内联样式:

获取: elem.style.属性名

style: 封装所有CSS属性的CSSStyleDeclaration对象

js中CSS属性名都变为: 去横线改驼峰

问题: 只能获得内联样式

解决: 获得计算后的样式: 一个元素最终应用的所有样式

即包含内联样式，又包含样式表中的样式和浏览器的默认样式

var style=getComputedStyle(elem)

IE8: elem.currentStyle

var value=style.属性名

样式表: 危险，了解

找到要修改的属性所在的位置:

1. 找到样式表: var sheet=document.styleSheets[i]

2. 获得样式表中要修改的CSSRule对象:

var rule=sheet.cssRules[i]

3. 获得CSSRule对象中的一个属性:

var value=rule.style.属性名

特殊: 动画的关键帧规则中：

rule.cssRules[i]获取每一帧的CSSRule对象

Day3

正课:

1. 创建和删除

2. HTML DOM常用对象: Select Table Form

1. 创建和删除：

1. 创建: 3步:

Step1. 创建空元素对象:

var elem=document.createElement("标签名")

相当于: <标签名></标签名>

Step2. 为空元素添加关键属性

elem.属性名="值"

elem.innerHTML="内容"

相当于: <标签名属性名="值">内容</标签名>

Step3. 将新元素挂到DOM树中指定父元素下

追加: parent.appendChild(elem)

插入: parent.insertBefore(elem,现有元素)

替换: parent.replaceChild(elem,现有元素)

2. 删除: parent.removeChild(elem)

网页加载过程:

获得HTML内容->构建DOM Tree

将CSSRules附加到DOM Tree-*layout*-paint

获得CSS内容->构建COM(CSSRules)

只要改变DOM树上的元素，都会重新layout——效率更低

如何减少layout的次数：先在内存中拼凑要添加的DOM子树

然后一次性挂到页面

只会触发一次layout——效率提高

课堂练习:

select: 事件: onchange, 当选中项发生改变时触发

属性: selectedIndex：获得当前选中项的下标

3. 文档片段: 内存中临时存储一个DOM子树的临时父节点

用法和普通父节点完全一样

可将DOM子树整体挂到DOM树上，但自己不出现在DOM中

何时使用: 同时添加多个平级元素时，都要先放在文档片段中，再将文档片段整体挂到页面

如何使用: 3步:

Step1: 创建文档片段对象：

var frag=document.createDocumentFragment();

Step2: 将平级子元素，追加到文档片段中

frag.appendChild(elem)

Step3: 将文档片段挂到DOM树上指定父节点下

parent.appendChild(frag);

2. HTML DOM常用对象:

Select对象: 指代一个select元素

属性: options: 包含一个select下所有option元素对象的集合

selectedIndex: 获得当前选中项的下标

方法: add(opt): 将opt元素对象追加到当前sel下

remove(i): 移除sel下下标为i的option元素对象

事件: onchange:

Option对象: 指代select元素下一个option元素

创建Option: var opt=new Option(innerHTML,value)

相当于核心DOM:

var opt=document.createElement("option");

opt.innerHTML=innerHTML;

opt.value=value;

简写：创建，设置，并追加option:

sel.add(new Option(innerHTML,value));

属性: index: 当前option元素在select中的下标位置

selected: 返回当前option是否被选中，返回bool值

正课:

1. 创建和删除

2. HTML DOM常用对象: Select Table Form

1. 创建和删除：

1. 创建: 3步:

Step1. 创建空元素对象:

var elem=document.createElement("标签名")

相当于: <标签名></标签名>

Step2. 为空元素添加关键属性

elem.属性名="值"

elem.innerHTML="内容"

相当于: <标签名属性名="值">内容</标签名>

Step3. 将新元素挂到DOM树中指定父元素下

追加: parent.appendChild(elem)

插入: parent.insertBefore(elem,现有元素)

替换: parent.replaceChild(elem,现有元素)

2. 删除: parent.removeChild(elem)

网页加载过程:

获得HTML内容->构建DOM Tree

将CSSRules附加到DOM Tree-*layout*-paint

获得CSS内容->构建COM(CSSRules)

只要改变DOM树上的元素，都会重新layout——效率更低

如何减少layout的次数：先在内存中拼凑要添加的DOM子树

然后一次性挂到页面

只会触发一次layout——效率提高

课堂练习:

select: 事件: onchange, 当选中项发生改变时触发

属性: selectedIndex：获得当前选中项的下标

3. 文档片段: 内存中临时存储一个DOM子树的临时父节点

用法和普通父节点完全一样

可将DOM子树整体挂到DOM树上，但自己不出现在DOM中

何时使用: 同时添加多个平级元素时，都要先放在文档片段中，再将文档片段整体挂到页面

如何使用: 3步:

Step1: 创建文档片段对象：

var frag=document.createDocumentFragment();

Step2: 将平级子元素，追加到文档片段中

frag.appendChild(elem)

Step3: 将文档片段挂到DOM树上指定父节点下

parent.appendChild(frag);

2. HTML DOM常用对象:

Select对象: 指代一个select元素

属性: options: 包含一个select下所有option元素对象的集合

selectedIndex: 获得当前选中项的下标

方法: add(opt): 将opt元素对象追加到当前sel下

remove(i): 移除sel下下标为i的option元素对象

事件: onchange:

Option对象: 指代select元素下一个option元素

创建Option: var opt=new Option(innerHTML,value)

相当于核心DOM:

var opt=document.createElement("option");

opt.innerHTML=innerHTML;

opt.value=value;

简写：创建，设置，并追加option:

sel.add(new Option(innerHTML,value));

属性: index: 当前option元素在select中的下标位置

selected: 返回当前option是否被选中，返回bool值

Table对象: 指代一个table元素

创建: createTHead/TBody/TFoot

返回刚创建的对象，用于继续添加子内容

删除: deleteTHead/TFoot

获取: .tHead/tFoot .tBodies[i]

tHead

添加: .insertRow(i)，如果省略i，表示在最后一行追加

如果i在中间，就在i位置插入，原i位置的行向后顺移

返回刚创建的对象，用于继续添加子内容

删除: .deleteRow(i), 如果省略i，表示删除第一行

获取: .rows[i]

添加: .insertCell(i),省略i表示末尾追加

删除: .deleteCell(i),省略i删除第一个

获取: .cells[i]

tBodies

tBody

tFoot

table.insertRow()

看最后一个tr所在的行分组是哪个，就将新tr追加到哪个行分组内

table.deleteRow(),永远删除全表的第一行

table.deleteRow(i),删除相对于全表的下标为i的行

tBody.deleteRow(i),删除当前tBody内下标为i的行

tr.rowIndex: 表示tr相对于整个表的下标位置

几乎专用于deleteRow

3. Form对象: 专门指代一个form元素

获取form对象: var form=document.forms[i/name];

获取form元素下的表单控件:

var elem=form.elements[i/name]

其中: elements仅包含所有输入控件和按钮

其实可以更简单: form.name

方法: form.submit();//手动提交表单

何时使用: 不希望自动提交时，可使用自定义按钮调用form的submit方法，手动提交

elem.focus();//让当前elem元素获得焦点

elem.blur();//让elem失去焦点，但很少主动使用

Day4

正课:

1. BOM:

window: 打开，关闭，定位，大小

*****定时器

1. window对象:

2个角色: 1. 代替ES标准中的Global，充当全局对象

2. 封装了浏览器软件以及窗口的信息

打开窗口: window.open("url","name")

其中: name属性是内存中窗口的名称

在打开窗口时，才赋值

name的默认值: _self _top _blank

也可自定义name属性

规定: 相同name属性的窗口只能打开一个

后打开的会替代先打开的

打开链接:

1. 替换当前窗口内容,可以后退

html:<a href="url" [target="_self"]>

js:window.open("url","_self");

2. 替换当前窗口内容，禁止后退

js:location.replace("url")

3. 在新窗口打开，可重复打开多个

html:<a href="url" target="_blank">

js:window.open("url"/*,"_blank"*/);

4. 在新窗口打开，只能打开一个

html:<a href="url" target="自定义name属性">

js:window.open("url","自定义name属性")

窗口大小和窗口位置:

窗口大小:

完整窗口大小: window.outerHeight/outerWidth

文档显示区大小: window.innerHeight/innerWidth

调整窗口大小:

1. 在打开窗口时:

var config="top=?,left=?,height=?,width=?";

window.open("url","name","config")

2. 在窗口打开后，调整大小:

window.resizeTo(宽,高)

window.resizeBy(宽的增量,高的增量)

窗口定位:

窗口左上角相对于屏幕左上角的坐标:

top： window.screenTop|screenY

left: window.screenLeft|screenX

移动窗口位置:

window.moveTo(x,y): 将窗口左上角移动到x，y的位置

window.moveBy(x的增量，y的增量)

屏幕的宽和高:

1. 完整分辨率的宽高: screen.width/height

2. 去掉任务栏后的可用宽高: screen.availWidth/availHeight

在事件发生时，获得鼠标位置:

e.screenX/screenY

正课:

1. *****定时器:

周期性定时器

一次性定时器

1. 周期性定时器: 让程序每隔一段时间间隔，反复执行一项任务

何时使用: 只要连续，有规律的持续播放的动画

如何使用: 3件事：

1. ***任务函数: 定时器每次执行的任务

function task(){...}

任务函数通常要自己考虑:*何时停止*定时器的临界值

2. 将任务函数放入定时器，定时执行:

timer=setInterval(task,interval)

其中: interval 是间隔的毫秒数

timer往往是一个全局变量: 用来保存当前定时器的序号

序号是内存中唯一标识一项任务的编号

原理：首先将task函数对象和interval时间间隔记录在定时器对象中，再返回当前任务的序号

然后，定时器会按照指定时间间隔，将task函数定时加入回调队列(callback queue)中。

只有ECS中没有正在执行的函数时，才将callbackqueue中的函数加入ECS中执行

3. 停止定时器:

clearInterval(timer);

2. 一次性定时器: 先等待一段时间，再自动执行一次任务

何时使用: 1. 如果任务只执行一次时

2. 如果动画的启动，停止，变化规律都很随意

如何使用: 3件事:

1. 任务函数:

function task(){...}

任务函数的结尾要考虑: *何时启动下一次*

2. 启动一次性定时器

timer=setTimeout(task,wait)

其中: wait是等待的毫秒数

3. 停止一次性定时器: 其实是停止等待，不再执行任务

clearTimeout(timer);

timer=null;

其实: 一次性定时器连续启动，也可实现周期性的效果

区别: 任务函数的结尾:

周期性定时器任务: 判断何时停止定时器

一次性定时器任务: 判断何时启动定时器

Day5

正课:

1. BOM的常用对象: history location navigator

2. *Event:

1. BOM的常用对象:

history: 保存当前窗口打开后，访问过的url的历史记录栈

开发人员无法访问历史记录栈的内容。

前进，后退，刷新

history.go(1)

history.go(-1)

history.go(0)

history.go(n)

location: 保存当前窗口正在打开的url的信息

protocol: 协议 :前的协议名: http

host: 主机名和端口号

hostname: 主机名

port: 端口号如果端口号为""，默认是80

pathname: 相对路径名

search: 获得?及之后的查询字符串参数列表

在当前窗口打开新连接:

open("url","_self");

location.href="url";

location="url";

location.assign("url");

在当前窗口打开新连接，禁止后退

location.replace("url");

刷新:

location.reload(force);

false //优先从服务器缓存中快速获取

//除非缓存中文件和硬盘文件修改时间不一致，才会再次去硬盘获取

true //强制服务器绕过缓存，始终读硬盘

navigator: 专门封装浏览器软件和配置信息的对象

.cookieEnabled: 判断当前浏览器是否启用cookie

.plugins: 封装浏览器安装的所有插件列表

.userAgent: 记录浏览器内核，名称和版本号的字符串

正课:

1. *****Event

什么是事件: 用户手动触发的或浏览器自动触发的页面内容状态的改变。

浏览器都会监听事件的发生:

1. 自动触发事件处理函数:

事件处理函数: 当事件发生时，自动调用的函数

如何定义:3种:

1. 在html元素的开始标签中:

DOM: var btn=document.createElement("button");

btn.onclick=new Function("js语句");

事件发生时: btn.onclick();//事件处理函数

js语句中的this->btn

缺点: 不符合内容与行为分离的原则——不便于维护

2. 在js中，为元素动态绑定事件处理函数:　2种:

1. elem.onclick=function(){

//this->elem

}

事件发生时: elem.onclick();

优点: 符合内容与行为分离的原则——便于维护

缺点: 一次onclick只能绑定一个函数对象

2. elem.addEventListener("事件名",函数对象,捕获)

其中: 捕获: bool：是否在捕获阶段就提前出发

默认为false，默认都在冒泡阶段触发

改为true，当前事件处理函数可在捕获阶段提前触发

btn.addEventListener("click",function(){...})

优点: 同一时刻可为一个onclick绑定多个函数对象

IE8: elem.attachEvent("事件处理函数名",函数对象)

*****事件周期: 当事件发生时，一直到所有事件处理函数执行完

为什么: 因为点击内层元素，等效于同时点在了外层父元素上

DOM 3个阶段:

1. 捕获: 由外向内，记录各级元素绑定的事件处理函数

捕获只到目标元素结束

2. 目标出发：出发实际点击的元素上的事件处理函数

3. 冒泡: 由内向外，依次执行各级元素绑定的事件处理函数

冒泡只从目标元素开始

目标元素: 实际触发事件的元素

IE8 2个阶段: 目标出发，冒泡，没有捕获

2. 封装事件对象:

事件对象: 专门封装事件发生时的鼠标，键盘，屏幕，元素等信息。

如何获得事件对象:

DOM: 调用事件处理函数时，自动将创建的event对象作为第一个参数传入函数对象中。

IE8: 调用事件处理函数时，将event对象保存到全局变量event中: window.event

兼容: e=e||window.event;

取消冒泡: 不再冒泡执行父元素上的事件处理函数

何时取消: 不希望继续冒泡执行父元素上的事件处理函数时

如何取消: DOM: e.stopPropagation();

IE8: e.cancelBubble=true;

兼容: if(e.stopPropagation){

e.stopPropagation();

}else{

e.cancelBubble=true;

}

利用冒泡:

js优化: 如果多个平级的子元素都定义了相同的事件处理函数，则只要在父元素上定义一次事件处理函数，所有子元素公用。

为什么: 页面中每个事件绑定都会创建一个事件监听对象。绑定的事件处理函数越多，创建的事件监听对象就越多。导致大量内存占用，降低执行效率。所以，要尽量减少页面中绑定的事件处理函数个数

获得目标元素: DOM: e.target

IE8: e.srcElement

兼容: var target=e.target||e.srcElement;

取消事件: 在事件处理函数执行过程中，如果出现问题，可取消本次事件，相当于没发生过。

何时使用: 只要不希望默认的事件行为继续执行时

如何取消:

1. 用html绑定的事件处理函数： 2个return

第一个return：写在html开始标签的事件绑定中

课堂练习: form元素: 事件: onsubmit()

在正式提交表单前自动触发

专门在提交前执行验证，还可取消提价

2. 用js动态绑定的事件处理函数:

取消事件: DOM: e.preventDefault()

IE8: e.returnValue=false;

兼容: if(e.preventDefault){

e.preventDefault();

}else{

e.returnValue=false;

}

鼠标的坐标: 4组

1. 相对于屏幕的坐标: e.screenX/screenY

2. 相对于页面左上角的坐标: e.pageX/pageY IE8不支持

3. 相对于文档显示区左上角的坐标: e.clientX/x

e.clientY/y

4. 相对于当前元素左上角的坐标:

第一月考试题目B

(单选题)有 CSS 代码如下：

#d1 span {color:Red;font-size:20pt;}

div>span {color:Green;}

</style>

有 HTML 代码如下：

aa<span>bb</span>cc

</div>

上述代码运行后，文本“bb”的样式为（b）。

A.灰色背景，绿色文本，文本大小为20pt

B.灰色背景，红色文本，文本大小为20pt

C.红色文本，文本大小为20pt，没有背景色

D.绿色文本，灰色背景，文本为默认大小

单选题)一次四人会议，A、B、C、D四个人分别从事不同职业，来自中国、巴西、印度、俄罗斯四个国家。已知巴西人是艺术家，俄罗斯人年龄最小且是警察，C比巴西人年龄大，B是商人且是中国人的朋友，D从来都没有接触过艺术。由此可知C是（a）。

A.中国人

B.巴西人

C.俄罗斯人

D.印度人

18.

(单选题)关于 CSS 中的过渡属性，下列说法中，错误的是（b）。

A.使用过渡属性，可以使得 CSS 的某些属性值在一段时间内实现逐渐变化的效果

B.所有的 CSS 样式属性都可以设置过渡效果

C.设置过渡时，可以指定 4 个要素：过渡的属性、过渡所需时间、过渡函数以及过渡延迟时间

D.过渡可以由用户的行为（如点击、悬浮等）触发，也可以由元素的状态变化触发，或者由 JavaScript 代码触发

(多选题)有关JavaScript特点的描述中，错误的是（a b）。

A.弱类型语言，没有数据类型的概念

B.一次编译，到处运行

C.解释型语言

D.有函数的概念，也有对象的概念

20.

(单选题)下列关于背景层的描述哪个是正确的？（a）

A.在图层面板上，背景层是不能上下移动的，只能是最下面一层

B.背景层可以设置图层蒙版

C.背景层不能转换为其它类型的图层

D.背景层不可以执行滤镜效果

30.

(单选题)下列和文本相关的样式属性中，错误的是：（a）。

A.text-weight

B.font-style

C.text-indent

D.font-variant

31.

(单选题)在括号内填上合适的字母：Cross(sore) rents makes(a) inlet

A.skin

B.skan

C.lake

D.make

33.

(单选题)下列代码中，错误的是（b）。

A.<meta name="keywords" content="html,css" />

B.<title align="center">标题</title>

C.<meta http-equiv="content-type" content="text/html;charset=utf-8" />

D.<head>

<title>我的第一个HTML页面</title>

</head>

34.

(多选题)关于切片工具，以下说法正确的是？（a b）

A.使用切片工具将图像分成不同的区域，可以加速图像在网页浏览时的速度

B.将切片以后的图像输出时，可以针对每个切片设置不同的链接

C.我们可以调节不同切片的颜色、层次变化

D.切片可以是任意形状的

(多选题)十年可能有多少天？bcd

A.3650

B.3651

C.3652

D.3653

37.

(多选题)关于网站图标拼合的目的，说法正确的是：（ab）

A.缩小文件大小

B.减少请求次数

C.加快hover时的图片加载速度

D.方便前端实现

38.

(多选题)查看如下 html 代码：

有图像 m1.gif，图像高宽均为 25px。现需要将背景图像显示为 <div> 元素一半的大小，在元素中居中显示一次。

下列样式定义中，正确的是（bc）。

A.div {

background-position: center center;

background-size: 50%;

background-repeat: none;

}

B.div {

background-position: 50% 50%;

background-size: 50px 50px;

background-repeat: no-repeat;

}

C.div {

background: url(m1.gif);

background-position: center 50%;

background-size: 50% 50%;

background-repeat: no-repeat;

}

D.div {

background: url(m1.gif);

background-position: 50%;

background-size: center;

background-repeat: no-repeat;

}

43.

(单选题)有样式定义如下：

div.parent {

width:100px;

height:70px;

border:1px solid gray;

position:relative;

}

div.child {

width:80px;

height:30px;

border:1px solid black;

}

同时，有 html 代码如下所示：

<body>

</div>

</body>

第二个 div （其中文本为 2 的 div）在页面上的最终位置是（b）

A.其上边框距离 body 元素上边框为 15 px 距离

B.其上边框距离其父元素的上边框为 15 px 距离

C.其上边框距离其原有位置为 15 px 距离

D.使用默认位置，定位并未发生改变

46.

(多选题)以下关于分辨率，说法正确的是（ac）

A.分辨率就是像素的密度

B.分辨率决定了图像的尺寸

C.分辨率决定了图像的清晰度

D.分辨率大小与屏幕显示效果无关

48.

(单选题)下列属性中，不能用于 <td> 元素的是（a）。

A.border

B.colspan

C.rowSpan

D.valign

全部题目

在线考试本次考试得分：70.0

(单选题)有数列为：81，27，9，3，（）。括号中应该填入的数字为（）。

A.0

B.1

C.2

D.3

答案：B 解析：...

(单选题)有 CSS 代码如下：

#d1 span {color:Red;font-size:20pt;}

div>span {color:Green;}

</style>

有 HTML 代码如下：

aa<span>bb</span>cc

</div>

上述代码运行后，文本“bb”的样式为（）。

A.灰色背景，绿色文本，文本大小为20pt

B.灰色背景，红色文本，文本大小为20pt

C.红色文本，文本大小为20pt，没有背景色

D.绿色文本，灰色背景，文本为默认大小

答案：B 解析：...

(单选题)查看如下样式定义：

#d1 {

width:50px;

height:100px;

border-top:4px solid black;

border:1px solid green;

border-bottom-width:0px;

}

同时，有 html 代码如下所示：

请问，该 <div> 的边框显示效果是（）。

A.左右上边框为1px宽度的绿色边框，无下边框

B.左右边框为 1px 宽度的绿色边框，上边框为 4px 的黑色边框，无下边框

C.四个边框均为 1px宽度的绿色边框

D.左右上边框为 1px 宽度的绿色边框，无上边框

答案：A 解析：...

(多选题)关于显示相关的属性，下列说法中，错误的是（）。

A.cursor 属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

B.对于行内块级元素，如 <img>，可以使用vertical-align 属性设置垂直对齐方式

C.opacity 属性设置元素的不透明级别，取值为 0 到 1 之间的数值，取值为 1 ，表示完全透明

D.opacity 属性取值为 0.0 ，表示完全不透明

答案：CD 解析：...

(单选题)李娜、王美和赵红每人都拥有3辆车：一辆双门，一辆四门，一辆五门。每个人也都分别有一辆别克、一辆现代、一辆奥迪。但同一品牌的汽车的门的数量却各不相同：李娜的别克汽车的门的数量与王美的现代汽车的门的数量一样；赵红的别克汽车的门的数量与李娜的现代汽车的门的数量一样；李娜的奥迪汽车为双门，而王美的奥迪汽车则有四门。拥有一辆五门的现代汽车的是：（）。

A.李娜

B.王美

C.赵红

D.无法确定

答案：B 解析：...

(多选题)查看下列代码，能正确创建表格的是（）。

A.<table border="1">

<tr>

</tr>

<tr>

</tr>

</table>

B.<table border="1">

<tr>

</tr>

<tr>

</tr>

</table>

C.<table border="1">

<tr>

</tr>

<tr>

</tr>

</table>

D.<table border="1">

<tr>

</tr>

<tr>

</tr>

</table>

答案：AC 解析：...

(单选题)有样式定义如下：

p{ border:1px solid black;}

p#p1~p { background-color:#ccc;}

p.s1+p { color:red; background-color:blue;}

同时，有 html 代码如下所示：

关于上述代码在页面上的显示效果，下列说法中，错误的是（）

A.第一个段落（段落1）只有边框，文本为黑色，无背景色

B.第二个段落（段落2）有边框，红色文本，蓝色背景

C.第二个段落（段落2）有边框，红色文本，灰色背景

D.第三个段落（段落3）有边框，黑色文本，灰色背景

答案：B 解析：...

(多选题)有 HTML 代码如下所示：

<div>div中的文本</div>

已知 <div> 元素高为 50像素。现需要设置 <div> 中的文本效果为：红色文本，有下划线，且有黑色的文本阴影，文本在 <div> 中垂直方向上居中，文本距离 <div> 元素的左边框有 20像素的距离。

下列 CSS 代码中，正确的是（）。

A.div {

color : #F00 ;

text-decoration : underline ;

height:50px;

text-shadow : 5px 5px black;

}

B.div {

color : #F00 ;

text-decoration : underline ;

line-height:50px;

text-shadow : 5px 5px black;

}

C.div {

color : #F00 ;

text-decoration : underline ;

line-height:50px;

padding-left : 20px ;

text-shadow : 5px 5px black;

}

D.div {

color : #F00 ;

text-decoration : underline ;

line-height:50px;

text-indent : 20px ;

text-shadow : 5px 5px black;

}

答案：CD 解析：...

(单选题)一次四人会议，A、B、C、D四个人分别从事不同职业，来自中国、巴西、印度、俄罗斯四个国家。已知巴西人是艺术家，俄罗斯人年龄最小且是警察，C比巴西人年龄大，B是商人且是中国人的朋友，D从来都没有接触过艺术。由此可知C是（）。

A.中国人

B.巴西人

C.俄罗斯人

D.印度人

答案：A 解析：...

10.

(单选题)有数列为：－1，0，3，12，（）。括号中应该填入的数字为（）。

A.24

B.27

C.36

D.39

答案：D 解析：...

11.

(单选题)查看如下代码：

function test(a) {

a = a + 10;

}

var a = 10;

test(a);

console.log(a);

上述代码执行后，输出变量a的值为（）。

A.10

B.20

C.错误

D.undefined

答案：A 解析：...

12.

(单选题)有数列为：2，6，13，39，15，45，23，（）。括号中应该填入的数字为（）。

A.46

B.66

C.68

D.69

答案：D 解析：...

13.

(单选题)有 CSS 样式代码如下：

div {

width:100px;

height:100px;

border:1px solid black;

}

并有 html 代码如下：

此代码在页面上的显示效果为（）。

A.第一行上显示一个<div>，第二行上显示两个<div>，分别显示在左右两侧，第三行上显示一个 <div>

B.第一行上显示三个 <div>，第二行上显示一个 <div>

C.第一行上显示一个<div>，第二行上显示三个<div>

D.第一行上显示一个<div>，第二行上显示两个 <div>，分别显示在左右两侧，第三行上没有 <div>

答案：D 解析：...

14.

(多选题)查看下列代码，能正确创建表格的是（）。

A.<table border="1">

<tr>

</tr>

<tr>

</tr>

</table>

B.<table border="1">

<tr>

</tr>

<tr>

</tr>

</table>

C.<table border="1">

<tr>

</tr>

<tr>

</tr>

</table>

D.<table border="1">

<tr>

</tr>

<tr>

</tr>

</table>

答案：BC 解析：...

15.

(多选题)下列样式属性中，对于 <td> 元素无效的样式属性是（）。

A.border-collapse

B.table-layout

C.vertical-align

D.border

答案：AB 解析：...

16.

(单选题)有数列为：0，2，8，18，（）。括号中应该填入的数字为（）。

A.32

B.36

C.48

D.64

答案：A 解析：...

17.

(单选题)A、B、C都买了新汽车，汽车的牌子是奔驰、本田、皇冠。他们一起来到朋友家里，让朋友猜猜他们三人各买的是什么牌子的车。朋友猜到：“A买的是奔驰车，C买的肯定不是皇冠车，B自然不会是奔驰车。”很可惜，朋友的这种猜法，只猜对了一个。问，据此推断 A 买的是（）。

A.本田车

B.奔驰车

C.皇冠车

D.无法确定

答案：C 解析：...

18.

(单选题)关于 CSS 中的过渡属性，下列说法中，错误的是（）。

A.使用过渡属性，可以使得 CSS 的某些属性值在一段时间内实现逐渐变化的效果

B.所有的 CSS 样式属性都可以设置过渡效果

C.设置过渡时，可以指定 4 个要素：过渡的属性、过渡所需时间、过渡函数以及过渡延迟时间

D.过渡可以由用户的行为（如点击、悬浮等）触发，也可以由元素的状态变化触发，或者由 JavaScript 代码触发

答案：B 解析：...

19.

(多选题)有关JavaScript特点的描述中，错误的是（）。

A.弱类型语言，没有数据类型的概念

B.一次编译，到处运行

C.解释型语言

D.有函数的概念，也有对象的概念

答案：AB 解析：...

20.

(单选题)下列关于背景层的描述哪个是正确的？（）

A.在图层面板上，背景层是不能上下移动的，只能是最下面一层

B.背景层可以设置图层蒙版

C.背景层不能转换为其它类型的图层

D.背景层不可以执行滤镜效果

答案：A 解析：...

21.

(单选题)有 CSS 代码如下所示：

div {

height:200px;

margin-top:20px;

}

p {

margin-top:20px;

width:100px;

height:100px;

background-color:gray;

border:1px solid black;

}

同时，还有html 代码如下所示：

<body>

<div>

<p></p>

</div>

</body>

关于上述代码在页面上的显示效果，下列说法中，正确的是（）。

A.段落 <p> 和 <div> 之间，没有上外边距

B.段落 <p> 距离 <div> 之间，有 20px 的上外边距

C.<div> 距离<body>之间，有 20px 的上外边距

D.<div> 距离 <body> 之间，没有上外边距

答案：A 解析：...

22.

(单选题)heart 对应 there,就象 35172 对应（）。

A.32557

B.52375

C.23575

D.不能确定

答案：C 解析：...

23.

(单选题)有2匹马、3头牛和4只羊，它们各自的总价都不满10000文钱（古时的货币单位）。如果2匹马加上1头牛，或者3 头牛加上1只羊，或者4只羊加上1匹马，那么它们各自的总价都正好是10000文钱了。问：马的单价是多少文钱？

A.3600

B.2800

C.1600

D.2500

答案：A 解析：...

24.

(单选题)关于 CSS 中的3D转换，下列说法中，错误的是（）。

A.3D转换是指，元素还可以在 Z 轴上发生变化

B.常用的3D 转换有3D位移、3D旋转和3D缩放

C.为元素定义 perspective 属性时，该元素会获得透视效果，实现3D转换效果

D.perspective 属性定义 3D 元素距视图的距离，以像素计

答案：C 解析：...

25.

(单选题)有 HTML 代码如下：

关于上述代码在页面上的显示效果，下列选项中，正确的是（）。

A.页面上显示链接1、链接3和链接5，3个链接之间没有空白区域

B.页面上显示链接1、链接3和链接5，其中，3个链接之间均有空白区域

C.页面上显示链接1、链接3和链接5，其中，链接1和链接3之间有空白区域

D.页面上显示链接1、链接3和链接5，其中，链接3和链接5之间有空白区域

答案：C 解析：...

26.

(单选题)有HTML 代码如下：

现需要将该 <div> 元素设置为圆形显示，且圆心背景色为红色，径向向外渐变为白色。下列选项中，正确的样式定义为（）。

A.#d1 {background-image:radial-gradient(#fff,red); }

B.#d1 { background-image:radial-gradient(red,#fff);}

C.#d1 {

border-radius:50px;

background-image:radial-gradient(#fff,red);

}

D.#d1 {

border-radius:50px;

background-image:radial-gradient(red,#fff);

}

答案：D 解析：...

27.

(单选题)页面上有id 属性值为 d1 的 <div> 元素，现需要设置该元素的背景色为绿色，当鼠标悬停该 <div> 元素时，其背景色在5s之内，线性的由绿色变为蓝色，鼠标移走后，再在 5s 之内，线性的由蓝色变回绿色。下列 CSS 代码中，正确的是（）。

A.#d1{

width:100px;

height:100px;

background:green;

transition:background 5s linear 1s;

}

#d1:hover{background:blue;}

B.#d1{

width:100px;

height:100px;

background:green;

}

#d1:hover{

background:blue;

transition:background 5s linear 1s;

}

C.#d1{

width:100px;

height:100px;

background:green;

transition:background 5s linear 1s;

}

D.#d1{

width:100px;

height:100px;

transition:background 5s linear 1s;

}

#d1:hover{background:blue;}

答案：A 解析：...

28.

(单选题)桌子上摆着金匣子、银匣子和铜匣子。金匣子上写着一句话：“珠宝不在此匣中”，银匣子上写着一句话：“珠宝在金匣中”，铜匣子上写着一句话：“珠宝不在此匣中”。现已知道，这三句话中，只有一句话是真的，那么：（）。

A.珠宝在金匣中

B.珠宝在银匣中

C.珠宝在铜匣中

D.珠宝不在任何匣中

答案：C 解析：...

29.

(单选题)查看如下代码：

var x = 200;

var y = "100";

var a = x + y;

console.log(a);

上述代码执行后，变量 a 的值是（）。

A.300

B.200100

C.错误

D.undefined

答案：B 解析：...

30.

(单选题)下列和文本相关的样式属性中，错误的是：（）。

A.text-weight

B.font-style

C.text-indent

D.font-variant

答案：A 解析：...

31.

(单选题)在括号内填上合适的字母：Cross(sore) rents makes() inlet

A.skin

B.skan

C.lake

D.make

答案：A 解析：...

32.

(单选题)在PhotoShop中，前景色和背景色恢复为默认颜色的快捷键是（）

A.D

B.X

C.Tab

D.Alt

答案：A 解析：...

33.

(单选题)下列代码中，错误的是（）。

A.<meta name="keywords" content="html,css" />

B.<title align="center">标题</title>

C.<meta http-equiv="content-type" content="text/html;charset=utf-8" />

D.<head>

<title>我的第一个HTML页面</title>

</head>

答案：B 解析：...

34.

(多选题)关于切片工具，以下说法正确的是？（）

A.使用切片工具将图像分成不同的区域，可以加速图像在网页浏览时的速度

B.将切片以后的图像输出时，可以针对每个切片设置不同的链接

C.我们可以调节不同切片的颜色、层次变化

D.切片可以是任意形状的

答案：AB 解析：...

35.

(单选题)在一次选举活动中，甲乙丙丁四个人作为候选人，他们四个人共获得5213张选票，最后甲当选，甲超出乙20票，超出丙30票，超出丁73票，那么甲以多少票当选？（）

A.1314

B.1334

C.1308

D.1335

答案：B 解析：...

36.

(多选题)十年可能有多少天？

A.3650

B.3651

C.3652

D.3653

答案：BCD 解析：...

37.

(多选题)关于网站图标拼合的目的，说法正确的是：（）

A.缩小文件大小

B.减少请求次数

C.加快hover时的图片加载速度

D.方便前端实现

答案：AB 解析：...

38.

(多选题)查看如下 html 代码：

有图像 m1.gif，图像高宽均为 25px。现需要将背景图像显示为 <div> 元素一半的大小，在元素中居中显示一次。

下列样式定义中，正确的是（）。

A.div {

background-position: center center;

background-size: 50%;

background-repeat: none;

}

B.div {

background-position: 50% 50%;

background-size: 50px 50px;

background-repeat: no-repeat;

}

C.div {

background: url(m1.gif);

background-position: center 50%;

background-size: 50% 50%;

background-repeat: no-repeat;

}

D.div {

background: url(m1.gif);

background-position: 50%;

background-size: center;

background-repeat: no-repeat;

}

答案：BC 解析：...

39.

(多选题)对于 <span> 元素，下列样式代码中，无效的是（）。

A.margin:10px auto;

B.padding:10px;

C.margin-left:20px;

D.margin-top:20px;

答案：AD 解析：...

40.

(单选题)从0、1、2、7、9 五个数字中任选四个不重复的数字，组成的最大四位数和最小四位数的差是多少？

A.8694

B.8442

C.9694

D.8740

答案：A 解析：...

41.

(单选题)查看如下代码：

var x = 10;

var y = "aa";

var z = true;

var a = x + z + y;

console.log(a);

上述代码执行后，变量 a 的值是（）。

A.10trueaa

B.11aa

C.10aa

D.undefined

答案：B 解析：...

42.

(单选题)把自然数1，2，3，4，5…175，176分成四组，如果每组的平均数恰好相等，那么此平均数为多少？

A.87.5

B.88

C.88.5

D.89

答案：C 解析：...

43.

(单选题)有样式定义如下：

div.parent {

width:100px;

height:70px;

border:1px solid gray;

position:relative;

}

div.child {

width:80px;

height:30px;

border:1px solid black;

}

同时，有 html 代码如下所示：

<body>

</div>

</body>

第二个 div （其中文本为 2 的 div）在页面上的最终位置是（）

A.其上边框距离 body 元素上边框为 15 px 距离

B.其上边框距离其父元素的上边框为 15 px 距离

C.其上边框距离其原有位置为 15 px 距离

D.使用默认位置，定位并未发生改变

答案：B 解析：...

44.

(单选题)有样式定义如下：

div.parent {

width:100px;

height:70px;

border:1px solid gray;

}

div.child {

width:80px;

height:30px;

border:1px solid black;

}

同时，有 html 代码如下所示：

<body>

</div>

</body>

第二个 div （其中文本为 2 的 div）在页面上的最终位置是（）。

A.其上边框距离 body 元素上边框为 15 px 距离

B.其上边框距离其父元素的上边框为 15 px 距离

C.其上边框距离其原有位置为 15 px 距离

D.使用默认位置，定位并未发生改变

答案：A 解析：...

45.

(多选题)下列变量名中，哪些是非法的（）。

A.myVar2_

B.2myVar

C.$_myVar

D.class

答案：BD 解析：...

46.

(多选题)以下关于分辨率，说法正确的是（）

A.分辨率就是像素的密度

B.分辨率决定了图像的尺寸

C.分辨率决定了图像的清晰度

D.分辨率大小与屏幕显示效果无关

答案：AC 解析：...

47.

(单选题)有HTML 代码如下：

上述代码运行后，样式为（）。

A.设置背景色从左向右线性渐变，左侧为白色，右侧为绿色，均匀过渡

B.设置背景色从右向左线性渐变，右侧为白色，左侧为绿色，均匀过渡

C.设置背景色从上向下线性渐变，顶端为白色，底端为绿色，均匀过渡

D.设置背景色从下向上线性渐变，底端为白色，顶端为绿色，均匀过渡

答案：C 解析：...

48.

(单选题)下列属性中，不能用于 <td> 元素的是（）。

A.border

B.colspan

C.rowSpan

D.valign

答案：A 解析：...

49.

(单选题)现需要在页面上创建一个列表框，包含2个选项，列表框的高度显示为 4 个选项，且可以实现多选。下列 HTML 代码中，正确的是（）。

A.<select size="4" multiple="multiple">

</select>

B.<select length="4" multiple="multiple">

</select>

C.<select height="4">

</select>

D.<select size="4">

</select>

答案：A 解析：...

50.

(单选题)有 CSS 代码如下：

#list1 a{color:Yellow;font-size:20pt;}

ul li a{color:Red;}

a{color:blue;background-color:Silver;}

</style>

有 HTML 代码如下：

</ul>

上述代码运行后，文本“链接1”的样式为（）。

A.背景为Gray，黄色文本，文本大小为20pt

B.背景为Silver，黄色文本，文本大小为20pt

C.背景为Gray，红色文本，文本大小为20pt

D.以上都不对

答案：A 解析：...

达内时代科技集团有限公司 2013-2014

中关村中心企业合作：62117598 UID中心企业合作：82168421、82168831

第二月考试题目

在线考试本次考试得分：84.0

(单选题)查看如下代码：

var x = "10";

function f1( x ){

x = x+2;

return x;

}

console.log(x);

x = f1(x);

console.log(x);

执行后的结果是（）。

A.10 和 102

B.10 和 10

C.undefined 和 102

D.10 和 12

正确答案：A...

(单选题)下列选项中，能够在新的浏览器窗口或者标签页中打开目标页面的是（）。

A.location.href = "http://tts.tarena.com.cn";

B.history.go("http://tts.tarena.com.cn");

C.window.open("http://tts.tarena.com.cn");

D.location.replace("http://tts.tarena.com.cn");

正确答案：C...

(单选题)有下述JS代码：

var i = 0;

var sum = 0;

do{

i++;

if( i%2 === 0){

continue;

}

if( i%5 === 0){

break;

}

sum += i;

}while( i<10 );

console.log( 'sum=' + sum );

其运行结果应该是下列哪项（）。

A.sum=0

B.sum=4

C.sum=Infinity

D.死循环

正确答案：B...

(单选题)查看如下代码：

var datas = [10,20,30,40,50];

var arr1 = datas.splice(3,2,60,70);

arr1.concat(80);

console.log(arr1.toString());

执行后的结果是（）。

A.10,20,30,60,70,80

B.10,20,30,40,60,70,80

C.40,50,80

D.40,50

正确答案：D...

(单选题)查看如下代码：

var arr1 = [10, 20];

arr1.push( 30,40 );

arr1.pop();

arr1.push([50,60]);

arr1.pop();

console.log(arr1.toString());

执行后的结果是（）。

A.10,20,30

B.10,20

C.10,20,30,50

D.10

正确答案：A...

(单选题)下列关于JS中字符串的描述中，错误的有（）。

A.字符串有“值类型字符串”和“引用类型字符串”两种。

B.字符串内容都是不可变的。

C.new String('abc') 和 String('abc')创建的是两个完全一样的变量。

D.String对象所有的方法都不会影响这个字符串本身，只能返回一个操作后的副本。

正确答案：C...

(单选题)查看如下代码：

var a = 2;

var b = 2<<4;

console.log(b);

上述代码的输出结果是（）。

A.0

B.8

C.16

D.32

正确答案：D...

(单选题)查看如下代码：

var setObj=function(o){

o.name="mary";

}

var p={ name:"john", age:24};

setObj(p);

console.log(p.name);

console.log(p.age);

上述代码运行后，输出结果为（）。

A.输出 mary 和 24

B.输出 mary 和 undefined

C.输出 john 和 undefined

D.输出 mary 和 0

正确答案：A...

(单选题)查看如下代码：

var str = "1 < 2";

console.log(str);

console.log(eval(str));

执行后的结果是（）。

A.1 < 2 和 true

B.true 和 true

C.先输出1 < 2，然后程序错误

D.以上均不对

正确答案：A...

10.

(单选题)有 html 代码如下：

还有 JavaScript 代码如下：

var p = document.getElementById('msg');

console.log( p.nodeValue );

console.log( p.textContent );

上述代码的输出结果是（）。

A.先输出“通知：”，再输出“通知：消息”

B.先输出 null，再输出“通知：消息”

C.先输出null，再输出“消息”

D.先输出“通知：”，再输出“<span>消息</span>”

正确答案：B...

11.

(单选题)查看如下代码：

function f1( ){

x = 10;

++x;

}

f1();

console.log(x);

执行后的结果是（）。

A.10

B.11

C.Undefined

D.程序错误

正确答案：B...

12.

(单选题)下列表达式的值哪个为true（）。

A.null instanceof Object

B.null === undefined

C.null == undefined

D.NaN == NaN

正确答案：C...

13.

(单选题)查看如下代码：

var arr1 = [ [ 11,34 ], [12, 45,9],[81,6] ];

var str = arr1.toString();

var arr2 = ;

arr2.sort(function(a,b){return a-b;});

console.log( );

上述代码需要实现的功能是：输出 arr1 中的最大数值。为实现此功能，可以填入横线处的代码是（）。

A.str.split() 和 arr2[arr2.length-1]

B.str.split(",") 和 arr2[arr2.length]

C.str.split() 和 arr2[arr2.length]

D.str.split(",") 和 arr2[arr2.length-1]

正确答案：D...

14.

(单选题)有 html 代码如下：

</div>

还有 JavaScript 代码如下：

var obj = document.getElementById("d1");

console.log(obj.firstChild.nodeName);

上述代码的输出结果是（）。

A.span

B.SPAN

C.#text

D.#TEXT

正确答案：C...

15.

(单选题)查看如下代码：

function func1(n){

var arr = [1,1];

for(var i=0;i<n;i++){

arr[i+2] = arr[i] + arr[i+1];

}

return arr[n-1];

}

console.log(func1(7));

上述代码运行后，输出结果是（）。

A.undefined

B.8

C.13

D.21

正确答案：C...

16.

(单选题)查看如下代码：

var a = "10";

var b = 10;

console.log (a+1 == b + 1);

上述代码的输出结果是（）。

A.true

B.false

C.程序错误

D.undefined

正确答案：B...

17.

(单选题)有下述JS代码：

var status = '党员';

switch( status ) {

case '党员':

console.log('您好！党员！');

case '团员':

console.log('您好！团员！');

default:

console.log('您好！群众！');

}

其运行结果是下列的哪一项（）。

A.您好！党员！

B.您好！党员！

您好！团员！

C.您好！党员！

您好！团员！

您好！群众！

D.执行错误

正确答案：C...

18.

(单选题)有下述JS代码：

var x = 10;

var y = 20;

var z = x<y ? x++ : ++y ;

console.log( 'x=' + x + '; y=' + y + '; z=' + z);

其运行结果是（）。

A.x=11; y=21; z=11

B.x=11; y=20; z=10

C.x=11; y=21; z=10

D.x=11; y=20; z=11

正确答案：B...

19.

(单选题)查看如下代码：

function func1(arr) {

for(var data in arr) {

data++;

}

for(var i=0;i<arr.length;i++) {

arr[i]++;

}

var datas = [10,20];

func1(datas);

console.log(datas.toString());

执行后的结果是（）。

A.10,20

B.11,21

C.12,22

D.13,23

正确答案：B...

20.

(单选题)查看如下代码：

var x = 10;

function f1( num ){

return num++;

}

var y = f1( x );

console.log(x);

console.log(y);

执行后的结果是（）。

A.10 和 11

B.10 和 10

C.11 和 10

D.11 和 11

正确答案：B...

21.

(单选题)查看如下代码：

var datas = [10,20,30];

datas.unshift(40,50);

datas.pop();

datas.push(60,70);

datas.shift();

console.log(datas.toString());

执行后的结果是（）。

A.50,10,20,60,70

B.40,10,20,60,70

C.10,20,30

D.50,10,20,60

正确答案：A...

22.

(单选题)下列有关for(;;)循环和for(in)循环的表述中，错误的是（）。

A.for(;;)循环可以得到顺序、倒序、跳序的下标，故可以顺序、倒序、跳序遍历集合中的每个元素;

B.for(in)循环可以得到顺序、倒序、跳序的下标，故可以顺序、倒序、跳序遍历集合中的每个元素;

C.for(;;)循环可以修改集合中值;

D.for(in)循环可以修改集合中值;

正确答案：B...

23.

(单选题)在HTML文档中包含一个超链接，要实现当鼠标移入该链接时，超链接文本大小变为30px。下列选项中，正确的是（）。

A.<a href="#" onmouseover="this.style.fontSize=’30px’">注册</a>

B.<a href="#" onmouseover ="this.style.font-size=’30px’">注册</a>

C.<a href="#" onmouseover="this.style.fontsize=’30px’">注册</a>

D.<a href="#" onmouseover="this.style.font.size=’30px’">注册</a>

正确答案：A...

24.

(单选题)下列关于ECMAScript5中对象的属性的描述错误的是（）。

A.ES5中对象的属性可以分为“数据属性”和“访问器属性”两种。

B.数据属性一般用于存储数据值；访问器属性对应的是set/get操作，不能直接存储数据值。

C.数据属性有value、writable、enumerable、configurable四个特性。

D.访问器属性有value、writable、enumerable、configurable四个特性。

正确答案：D...

25.

(单选题)查看如下代码：

var arr = [ [ 11, 12, 13 ], [ 21 ], [ 31, 32] ];

console.log( arr[1][1] );

console.log( arr[2][1] );

执行后的结果是（）。

A.undefined 和 32

B.21 和 31

C.11 和 21

D.程序错误

正确答案：A...

26.

(单选题)现需要创建数组，下列选项中，错误的是（）。

A.var arr1 = [ ];

B.var arr2 = [97, 85, 79];

C.var arr3 = new Array("Tom","Mary","John");

D.var arr4 = new Array()[true,123];

正确答案：D...

27.

(单选题)查看如下代码：

function func1(num){

if(num < 0)

console.log("负数");

else if(num === 0)

console.log("零");

else if(num > 0)

console.log("正数");

else

console.log("非数字");

}

func1("-1");

func1("0");

执行后的结果是（）。

A.“非数字”和“非数字”

B.“负数”和“零”

C.“非数字”和“零”

D.“负数”和“非数字”

正确答案：D...

28.

(单选题)有下述JS代码：

var arr = [10, 20, 30];

function add( arrayObj ){

for(var i in arr){

arrayObj[i] ++;

}

console.log( arrayObj );

}

add( arr );

console.log( arr );

此段代码执行后的结果是（）。

A.[10,20,30]

[10,20,30]

B.[11,21,31]

[10,20,30]

C.[10,20,30]

[11,21,31]

D.[11,21,31]

[11,21,31]

正确答案：D...

29.

(单选题)下列关于JavaScript中数组的描述中，错误的是（）。

A.var arr = [3]; 创建了一个长度为1的数组，值为3。

B.var arr = new Array(3); 创建了一个长度为1的数组，值为3。

C.var arr = [ [3] ]; 创建了一个长度为1的数组，值为一个长度为1的数组。

D.var arr = new Array( [3] ); 创建了一个长度为1的数组，值为一个长度为1的数组。

正确答案：B...

30.

(单选题)查看如下代码：

var a = 20;

var b = "2";

var c = (a+1)/b;

document.write (c);

上述代码的输出结果是（）。

A.10.5

B.10

C.11

D.(20+1)/2

正确答案：A...

31.

(单选题)查看如下代码：

var i = 0;

var sum = 0;

while (i < 10) {

sum = sum + i;

i++;

}

console.log(i);

console.log(sum);

上述代码执行后，输出结果为（）。

A.先输出10，再输出45

B.先输出10，再输出55

C.先输出11，再输出45

D.先输出11，再输出55

正确答案：A...

32.

(单选题)页面上有一个提交按钮，单击该提交按钮后，需要弹出确认对话框。如果单击对话框上的“取消”按钮，则页面停留在当前页面；如果单击对话框上的“确定”按钮，则发生表单提交。为实现此功能，以下代码中，正确的是（）。

A.<form>

</form>

B.<form>

</form>

C.<form>

</form>

D.<form>

</form>

正确答案：A...

33.

(单选题)有 html 代码如下：

<body>

</body>

还有 JavaScript 代码如下：

var p = document.getElementById('p1');

console.log(p.firstChild.innerHTML);

console.log(p.firstElementChild.innerHTML);

上述代码的输出结果是（）。

A.代码错误

B.两次都输出 10

C.先输出 undefined，再输出 10

D.先输出 “回复”，再输出 10

正确答案：C...

34.

(单选题)查看如下代码：

var score = 75;

var result = score >= 90 ? "aa" : (score>=80 ? "bb" : (score < 60 ? "cc" : "dd") );

console.log(result);

上述代码的输出结果是（）。

A.aa

B.bb

C.cc

D.dd

正确答案：D...

35.

(单选题)查看如下代码：

function f1( ){

console.log(x);

var x = 10;

++x;

console.log(x);

}

f1();

执行后的结果是（）。

A.程序错误

B.undefined 和 10

C.undefined 和 11

D.10 和 11

正确答案：C...

36.

(单选题)查看如下代码：

var index = 0;

var arr = [97, 85, 97, 90, 85];

for (var i = 0; i < arr.length; i++) {

if (arr[i] == 85) {

index = i;

}

console.log(index);

上述代码执行后，输出结果为（）。

A.1

B.4

C.0

D.以上都不对

正确答案：B...

37.

(单选题)有 html 代码如下：

<body>

<a>login</a>

</div>

</body>

还有 JavaScript 代码如下：

var div = document.querySelector('#news');

var aNodes = div.querySelectorAll('a');

console.log(aNodes.length);

var node = div.querySelector('a.current');

console.log(node.innerHTML);

上述代码的输出结果是（）。

A.先输出 3，再输出“新闻标题2”

B.先输出 4，再输出“新闻标题2”

C.先输出 3，再输出 null

D.先输出 4，再输出 null

正确答案：A...

38.

(单选题)查看如下代码：

var a = 20;

var b = "2";

var c = (a+"1")/b;

console.log (c);

上述代码的输出结果是（）。

A.10.5

B.100.5

C.(20+1)/2

D.以上都不对

正确答案：B...

39.

(单选题)假设有一个整数数组numArray，下列哪个选项可以实现把其中的元素由小到大排列（）。

A.numArray.sort();

B.numArray.sort( function(a,b){return a-b;} );

C.numArray.sort( (function(a,b){return a-b;})() );

D.numArray.sort( ).reverse( );

正确答案：B...

40.

(单选题)假设有数组对象：

var arr = [2018,5,20];

下列对于此数组的操作及描述中，错误的是（）。

A.var str = arr.join('-');

返回值str是一个形如 2018-5-20 的字符串。

B.var newArr = arr.concat([23,53,45]);

返回值newArr是一个形如 [2018,5,20,23,53,45]的新数组。

C.var subArr = arr.slice(1) ;

返回值subArr是一个形如[5,20]的新数组。

D.arr.sort();

进行排序后，数组arr的内容变为[5,20,2018]。

正确答案：D...

41.

(多选题)JavaScript中的Global对象用于收集所有的全局函数，下列不是全局函数的有哪些（）。

A.setTimeout( )

B.getElementById( )

C.parseInt( )

D.alert( )

正确答案：ABD...

42.

(多选题)下列哪些选项中的ECMAScript对象不能实例化（即不能使用new关键字创建新的实例）（）。

A.Error

B.Math

C.Object

D.Global

正确答案：BD...

43.

(多选题)下列哪些方法可以在数组尾部添加一个新元素（）。

A.arr[ ] = 10;

B.arr[ arr.length ] = 10;

C.arr[ arr.length+1 ] = 10;

D.arr.push( 10 );

正确答案：BD...

44.

(多选题)有 html 代码如下：

</select>

现需要删除列表框中的第二项（文本为bb的选项）。下列选项中，正确的是（）。

A.var obj = document.getElementById("datas");

obj.removeChild(obj.firstElementChild.nextElementSibling);

B.var obj = document.getElementById("datas");

obj.removeChild(obj.getElementsByTagName("option")[1]);

C.var obj = document.getElementById("datas");

obj.removeChild(obj.firstChild.nextSibling);

D.var obj = document.getElementById("datas");

obj.removeChild(obj.getElementsByTagName("option")[0]);

正确答案：AB...

45.

(多选题)有 html 代码如下：

<body>

<form>

</form>

</body>

下列选项中，能向 id 为 t1 的文本框中写入文本的是（）。

A.document.getElementById("t1").innerHTML = "aa";

B.document.getElementById("t1").setAttribute("value","aa");

C.document.getElementsByTagName("input")[0].innerHTML = "aa";

D.document.getElementsByTagName("input")[0].setAttribute("value","aa");

正确答案：BD...

46.

(多选题)有 html 代码如下：

现需要将该按钮修改为文本框。下列选项中，正确的是（）。

A.var obj = document.getElementById("t1");

obj.attributes["type"].remove();

B.var obj = document.getElementById("t1");

obj.removeAttribute("type");

C.var obj = document.getElementById("t1");

obj.removeAttributeNode(obj.attributes["type"]);

D.var obj = document.getElementById("t1");

obj.deleteAttribute("type");

正确答案：BC...

47.

(多选题)查看如下代码：

var n = 5;

var result = ;

console.log(result);

现需要判断变量 n 的值是否为10：如果为 10 ，则输出“对了”；如果比10小，则输出“小了”；否则输出“大了”。为实现此功能，横线处的代码为（）。

A.n == 10 ? ("对了" : n > 10 ? "大了" : "小了")

B.n == 10 ? ("对了" : n > 10) ? ("大了" : "小了")

C.n == 10 ? "对了" : ( n > 10 ? "大了" : "小了")

D.n == 10 ? "对了" : n > 10 ? "大了" : "小了"

正确答案：CD...

48.

(多选题)页面上有一个id为course的下拉列表框，下面选项中，能向下拉列表中添加一个新的选项的是（）。

A.document.course.add(new Option("JS"));

B.var newObj = document.createElement("option");

newObj.innerHTML = "JS";

document.course.add(newObj);

C.document.getElementById("course").add(new Option("JS"));

D.var newObj = document.createElement("option");

newObj.innerHTML = "JS";

document.getElementById("course").add(newObj);

正确答案：CD...

49.

(多选题)下列哪些选项中的语句可以查找出一个数组中的最大值（）。

A.var max = arr[0] ;

for( var i=0; i<arr.length; i++ ){

max = arr[i] > max ? arr[i] : max;

}

B.var max = arr[0] ;

var i = 0;

while( i < arr.length ){

max = arr[i] > max ? arr[i] : max;

i++;

}

C.var max = arr[0] ;

for( var i in arr ){

max = i > max ? i : max;

}

D.var max = arr[0] ;

for( var i in arr ){

max = arr[i] > max ? arr[i] : max;

}

正确答案：ABD...

50.

(多选题)有变量 obj 表示页面上的某个元素。现需要设置该元素在页面上不可见。下列选项中，正确的是（）。

A.obj.style.display = "none";

B.obj.style.visibility = "hidden";

C.obj.style.opacity = 0;

D.obj.style.width = 0;

正确答案：ABC...

达内时代科技集团有限公司 2013-2014

中关村中心企业合作：62117598 UID中心企业合作：82168421、82168831

什么是this: *在调用函数时*，引用正在调用函数的对象的关键字

何时使用: 只要对象自己的方法，要使用自己的属性时，就用this

各种情况:

1. 对象内部的方法,被对象自己调用:

var ename="scott";

var obj={

ename:"eric",

fun:function(){console.log(this.ename);}

}

obj.fun();//this->obj

2. 函数传递给其他变量存储:

var fun=obj.fun;

fun();//this->window scott

***鄙视时: this和定义在哪儿无关！

只和调用时，使用的对象(.前的对象)有关

如果没有用任何对象，就直接调用的函数this->window

3. 使用call/apply 临时替换this —— 临时的

this->call/apply的第一个参数对象

4. 使用bind基于一个函数创建一个新函数，同时提前绑定this

永久的，不可被替换的！

5. 绑定事件处理函数:

function fun(){...}

1. html: 绑定:<button onclick="fun()" this->

btn.onclick=new Function("fun()")

function(){//this->btn

fun();//this->window

}

调用: btn.onclick();//this->btn

2. js: 绑定: btn.onclick=fun; //this->btn

btn.addEventListener("click",fun);

fun中的this->btn

调用: btn.onclick();//btn.fun();

3. 在对象的方法内部绑定事件处理函数:

事件处理函数中要求即使用对象的属性，由使用当前事件绑定的元素对象:

不能用bind！因为bind会将当前事件绑定的元素对象替换

解决: 留住this : var me=this

6. 定时器回调和匿名函数自调: this默认都指window

如果希望使用所属对象的属性: 用bind永久替换this

jQuery

Day1

阶段1： HTML + CSS

阶段2： JS + DOM

阶段3： jQuery + AJAX + H5新特性

阶段4： CSS/JS框架

1.W3C的DOM标准

核心DOM：

查找节点： document.getElementByXxx() querySelector()

操作属性： node.setAttribute()/getAttribute()

操作内容： node.innerHTML/innerText/textContent

操作样式： node.style.xxx node.className

增加节点： document.createElement() parent.appendChild()

删除节点： parent.removeChild()

替代节点： parent.replaceChild()

HTML DOM:

var img = new Image() img.src =””;

XML DOM:

2.jQuery概述

jQuery是一个JS函数库，用于简化核心DOM操作，屏蔽浏览器兼容性。

http://jquery.com/ Write Less， Do More

jquery-1.12.3.js 兼容老IE（IE8-）

jquery-1.12.3.min.js 压缩版本

jquery-2.3.3.js 不兼容老IE

jquery-2.3.3.min.js 压缩版本

jQuery提供的如下几个方面的简化函数：

(1) 查找元素

(2) 操作元素(属性/内容/样式/添加/删除/替换)

(3) 事件操作

(4) 动画操作

(5) AJAX操作

ftp://172.163.100.136

ZenCoding代码补全：

div+TAB

div*3+TAB

div#id+TAB

div.className+TAB

ul>li>a+TAB

lorem+TAB

常用快捷键：

Delete Line 删除行 Ctrl+D

Duplicate Line 重复行 Ctrl+Alt+↓

Move Up 上移 Alt+↑

Move Down 下移 Alt+↓

Line Comment 行注释 Ctrl+/

3.jQuery的使用

(1)引入js文件，可以书写在<head>或<body>(推荐)中

(2)编写自定义的script脚本

//1. 查找元素

//2. 操作元素

</script>

4.面试题：DOM对象和jQuery对象的关系

DOM对象：W3C的核心DOM标准定义浏览器内部都已经默认提供的对象

var btn = document.getElementById(‘btn1’);

btn.innerHTML = ‘’;

btn.setAttribute(‘class’, ‘’);

btn.style.xxXx = ‘’;

div.appendChild(btn);

jQuery对象：由jQuery.js函数库提供的，本质是一个“类数组对象”

var $btn = jQuery( btn );

var $btn = jQuery(‘#btn1’);

$btn.html(‘’);

$btn.attr(‘’, ‘’);

$btn.css(‘’, ‘’);

$btn.appendTo( div );

提示：DOM对象不能使用jQuery对象的属性和方法；jQuery对象也不能使用DOM对象的属性和方法！

DOM对象封装为jQuery对象（DOM=>jQuery）：

$(DOM对象)、jQuery(DOM对象)

如： $(this)、$(document)、$(window)

jQuery对象拆解为DOM对象(jQuery=>DOM)：

var domObj = $(‘.mybox’)[0];

var domObj = $(‘input’).get(1);

5.使用选择器查找DOM对象，构建出jQuery对象——基本选择器

提示：jQuery支持CSS1~3所有的选择器！用于查找需要的元素。屏蔽了选择器的兼容性问题。

ID选择器： #id

元素选择器： element

Class选择器： .class

通用选择器： *

群组选择器： selector1,selector2,selectorN

练习：

若btn1的id不存在，则下面两行代码有何不同？

document.getElementById(‘btn1’).style.color = ‘#f00’;

$(‘#btn1’).css(‘color’, ‘#0f0’);

休息&练习：

$('#btn1').click(function(){

$('#one').css('background', 'red');

});

6.使用选择器查找DOM对象，构建出jQuery对象——层级选择器

后代选择器： ancestor descendant

直接子代选择器： parent > child

相邻兄弟选择器： prev + next

后续所有兄弟选择器： prev ~ siblings

7.使用选择器查找DOM对象，构建出jQuery对象——基本过滤选择器

提示：基本过滤选择器下标从0开始

:first .box:first

:last input:last

:even tr:even

:odd tr:odd

:eq(index) Equals

:gt(index) div:gt(3) Greater Than

:lt(index) div:lt(3) Less Than

:not(selector) li:not(.active)

练习：

(1)使用jQuery选择器控制样式，实现“按钮组”组件

(2)使用jQuery选择器控制样式，实现隔行变色的表格

重点&非重点分割线

8.使用选择器查找DOM对象，构建出jQuery对象——内容过滤选择器

:contains(text) span:contains('购物车')

:empty span:empty 选择空span

:parent span:parent 选择非空span

:has(selector) div:has(.active) 有指定的子元素

9.使用选择器查找DOM对象，构建出jQuery对象——可见性过滤选择器

:hidden 选择所有的隐藏元素，包括不可见元素(如head/meta/script)、外加display:none的元素。

:visible 选择所有的可见元素

10.使用选择器查找DOM对象，构建出jQuery对象——属性选择器

[attribute] img[title]

[attribute=value] a[data-toggle="tab"]

[attribute!=value]

[attribute^=value] 属性值以指定内容开头

[attribute$=value] 属性值以指定内容结尾

[attribute*=value] 属性值包含指定内容

练习：使用属性选择器实现标签页头的切换

11.使用选择器查找DOM对象，构建出jQuery对象——表单元素过滤选择器

:input 选择所有的输入控件

:text 选择type="text"的输入控件

:password 选择type="password"的输入控件

:radio 选择type="radio"的输入控件

:checkbox

:submit

:image <input type="image">

:reset

:button <input type="button">

:file <input type="file">

:hidden <input type="hidden">

课后作业：

实现一个下拉菜单组件

<div>

<ul>

</ul>

</div>

Day2

复习：

jQuery是一个JS函数库，用于简化核心DOM操作，分为如下几部分：

(1)查找节点

(2)操作节点的属性 attr( )

(3)操作节点的内容 html( ) text( ) val( ) empty( )

(4)操作节点的样式 css( )

(5)增加新节点

(6)删除节点

(7)替换节点

(8)事件处理

(9)动画

(10)AJAX封装

1.复习：jQuery中的选择器

基本选择器：$('#id') $('.class') $('*') $('div') $('s1,s2')

层级选择器：$('p c') $('p > c') $('b + b') $('b ~ b')

过滤选择器——基本：

$('li:first') $('li:last') $('li:eq(0)') $('li:gt(3)') $('li:lt(3)') $('tr:odd') $('tr:even')

过滤选择器——内容：

$('p:contains("提交")') $('p:empty') $('p:parent') $('p:has(a)')

过滤选择器——属性：

$('[title]') $('[title^="图片"]') $('[title$="相关"]') $('[title="达内图片"]')

$('[title*="达内"]')

过滤选择器——可见性：

$('div:hidden') $('div:visible')

过滤选择器——子元素：

过滤选择器——表单元素状态：

表单元素选择器：

$(':input') $(':text') $(':password') $(':raido') $(':checkbox') $(':hidden') $(':file') $(':submit') $(':reset') $(':image') $(':button')

2.jQuery选择器：过滤选择器——表单元素状态

----------------------------------------------------

$(':disabled')

$(':enabled')

$(':checked')

$(':selected')

3.jQuery过滤选择器——子元素

提示：子元素过滤选择器容易与基本过滤选择器混淆！

基本过滤选择器：下标从0开始，选择的是整个大的类数组对象中的某一个

$('li:first') $('tr:odd')

子元素过滤选择器：下标从1开始，选择的当前父元素中的第n个

:first-child 只选中第一个子元素

:last-child 只选中最后一个子元素

:nth-child 只选中第n个子元素

:only-child 只选中唯一子元素

$('li:first-child') $('tr:nth-child(odd)')

4.操作节点的属性

$(..).attr( '属性名' ) <=> e.getAttribute('');

$(..).attr( '属性名', '属性值' ) <=> e.setAttrbiute('', '')

练习：点击图片，则图片内容改变为下一张，title文字随之改变

5.操作元素的内容

$(..).html( ) <=> e.innerHTML

$(..).html('HTML片段') <=> e.innerHTML = '片段'

$(..).text( ) <=> e.innerText

$(..).text('文本') <=> e.innerText = '文本'

$(..).empty( ) <=> e.innerHTML = ''

6.操作表单元素的值

$(..).val( ) <=> input.value

$(..).val( '值' ) <=> input.value = '值'

练习：注册新用户的表单，用户点击“提交”按钮时，读取用户输入的用户名和密码，在输入框后面提示出输入是否存在问题

7.操作节点的样式

$(..).css( '样式名' ) <=> window.getComputedStyle()

$(..).css( '样式名', '值' ) <=> e.style.xxxXxx = 值;

$(..).css( {

样式名: 值,

....

} )

提示：

css()可以获得哪些样式？ : 行内、内部、外部

css()可以修改哪些样式？：行内！

样式名的命名规则？：可以使用驼峰法则，或-连字符(必须使用引号括起来)

8.操作元素的样式——直接修改class属性值

$(..).addClass( '名' )

$(..).removeClass( '名' )

$(..).hasClass( '名' )

$(..).toggleClass( '名' ) 切换，若有则删除；否则添加

9.添加新的节点

核心DOM中添加新节点：

var span = document.createElement('span');

span.innerHTML = '用户名已经存在';

span.setAttribute('title', '错误提示');

div.appendChild( span);

jQuery对添加新节点的简化：

var $span = $('<span title="错误提示">用户名已经存在</span>');

$('div').append($span);

插入节点相关jQuery函数：

append( )

prepend( )

appendTo( )

prependTo( )

before()

after()

insertBefore()

insertAfter()

wrap()

unwrap()

10.删除已有节点

$(..).remove( ) 删除选定元素

练习：添加和删除区块

替换已有节点

$('已有元素').replaceWith('新元素')

$('新元素').replaceAll('已有元素')

12.复制节点

$(..).clone( ) 复制当前选定元素

$(..).clone( true ) 复制当前选定元素+事件监听函数

总结：jQuery是对DOM操作的简化函数库

(1)查找元素——选择器

(2)操作属性 attr()

(3)操作内容 html() text() val() empty()

(4)操作样式 css() addClass() removeClass() hasClass() toggleClass()

(5)添加节点 $(parent).append( child ) ...

(6)删除节点 $(..).remove( )

(7)替换节点 replaceWith() replaceAll()

(8)克隆节点 clone() clone(true)

==========上述内容为jQuery最核心的部分===========

==========下述内容为jQuery的扩展部分============

(1)事件处理

(2)动画特效

(3)AJAX封装

13.jQuery扩展内容——事件处理——面试题

历史上，jQuery先后出现了如下几个事件处理方法：

(1)$(..).bind( '事件类型', fn ) <=> addEventListener()

$(..).unbind( '事件类型' ) <=> removeEventListener()

$(..).one( '事件类型', fn ) 监听函数仅执行一次

(2)bind函数的简化版本——只有常见事件才有简化版本

$(..).click(fn) <=> $(..).bind('click', fn)

$(..).dblclick(fn) <=> $(..).bind('dblclick', fn)

$(..).mouseover(fn) <=> $(..).bind('mouseover', fn)

$(..).keyup(fn) <=> $(..).bind('keyup', fn)

.......

注意：上述所有的事件绑定方法，都只对当前已经存在DOM元素有效；即后添加的DOM元素无法被绑定上。

(3) delegate( )

undelegate()

(4) live( )

die( )

(5) on( )

作业：实现一个计算器的界面及简单输入逻辑

Day3

复习：

jQuery DOM操作练习：

1.jQuery中的事件处理相关函数——面试题

jQuery历史上先后出现的几个事件处理函数：

(1)$(..).bind('类型', fn)

$(..).unbind('类型')

$(..).one('类型', fn)

(2)bind()函数的简化版本

$(..).click(fn)

$(..).mousemove(fn)

$(..).keyup(fn)

...

提示：上述函数的共同缺陷——只能为当前已有的DOM元素添加事件监听

(3)$('parent').delegate('子元素选择器', '事件类型', fn)

$('parent').undelegate('子元素选择器', '事件类型')

事件代理与事件源对象的事件绑定区别：

事件源对象事件绑定：每个源对象都必需一个监听函数。对后添加的元素无效。

事件代理：只需要给某个父元素绑定一个监听函数即可。对后添加的元素有效。

(4)$('target').live('事件类型', fn)——已过时

$('target').die('事件类型')——已过时

这两个形式与bind()相似，但底层是监听函数绑定在document上——事件代理，对后添加的元素也有效。

(5)$('target').on('事件类型', fn) —— 监听函数绑定在目标对象身上，等价于 $('target').bind( '', fn )

$('parent').on('子元素选择器', '事件类型', fn) —— 事件代理，等价于 $('parent').delegate('', '', fn)

$().off()

$('.btn').click(fn);

$('.btn').on('click', fn);

$('.parent').on('button', 'click', fn)

$('.parent').delegate('button', 'click', fn)

2.jQuery中的一个特殊事件

页面加载完成事件，原生DOM中有两种表示“页面加载完成”事件：

window.onload（Load）：页面加载完成，包括HTML、CSS、图片、Flash....

window.ondomcontentloaded（DOMContentLoaded）：页面内容加载完成，指DOM相关内容，如HTML、Script，不包括CSS、图片、Flash....，一般情况下，DOMContentLoaded事件会先与Load事件发生。

面试题： $(document).ready(fn) 与 window.onload = fn 的区别？

(1)$(document).ready()底层监听的是DOMContentLoaded事件，发生事件要先于window.onload。

(2)$(document).ready()底层的实现使用的addEventListener('DOMContentLoaded', fn, false)方法，而window.onload = fn是直接赋值。前者可以先后绑定多个监听函数，后者只能最后一次赋值有效。

3.jQuery动画函数——隐藏&显示动画

show( )

hide( )

使用定时器，控制元素的width、height、opacity等属性的改变。

4.jQuery动画函数——高度动画

slideUp( )

slideDown( )

slideToggle( )

使用定时器，控制元素的height等属性的改变。

5.jQuery动画函数——透明度动画

fadeIn( )

fadeOut( )

fadeToggle( )

使用定时器，控制元素的opacity属性的改变。

6.jQuery万能动画函数——animate( )函数

animate()可以对数值类型(如大小/位置/透明度/边框宽度/字体大小等)的CSS样式执行定时器动画，默认不能对非数值型(背景图片/字体/display等)属性做动画。

使用方法：

$(..).animate( {}, duration, fn )

动画的串行(一个属性的改变完毕后再执行另一个)：

$(..).animate( { 属性1: 值1 }, 1000)

$(..).animate( { 属性2: 值2 }, 1000)

动画的串行(多个属性的改变同时进行)：

$(..).animate( { 属性1: 值1，属性2: 值2 }, 1000)

练习：

(1)创建几个IMG元素，一旦被点击，则变大，同时变淡，最后消失

(2)创建两个撑满浏览器的区块，先显示出第一个，当它被点击时，慢慢的向左侧移走，同时第二个区块进入浏览器

作业：

点击第二个PAGE，还可以慢慢的返回第一个PAGE

Day04

复习： jQLite 、 Zepto

jQuery是一个JS函数库，用于简化DOM操作。包括下列函数：

(1)查找节点 $(选择器)

(2)操作节点

属性：

内容：

样式：

增加：

删除：

替换：

克隆：

遍历：

(3)事件处理

bind()/one()

click()/mouseover()...

$(parent).delegate('子元素选择器', '类型', fn)

$(target).live('类型', fn)

$(target).on('类型', fn)

$(parent).on('类型','子元素选择器', fn)

(4)动画

show()/hide()/toggle()

slideUp()/slideDown/slideToggle()

fadeIn()/fadeOut()/fadeToggle()

animate({ 大小/位置/边框宽度/透明度 }, 2000, fn)

(5)AJAX封装

ES核心对象：String Date Math ...

NodeJS对象： ES核心对象 + N百个扩展对象

1.jQuery的扩展——jQuery插件函数

(1)jQuery官方插件函数——jQueryUI

(2)第三方提供的插件函数

(3)如何自己编写一个插件函数

2.jQueryUI函数库

UI：User Interface

UI库/HTML组件库：使用HTML/CSS/JS实现的特殊的页面功能效果的集合。

jQueryUI是一个基于jQuery而编写的一套HTML组件库，通常用于PC浏览的网页。

官网：http://jqueryui.com/

手册：http://api.jqueryui.com/

提供的组件库分为三部分：

(1)Effects：动画特效

(2)Interactions：交互组件

(3)Widgets：小部件

3.jQueryUI组件之第一部分：Effects

jQueryUI为jQuery动画函数添加了更加丰富的动画特效，如颜色动画、爆炸/弹跳/滑动特效、速度函数....

这些动画特效对jQuery的如下函数进行了动画特效扩展：

(1)animate( ) 添加了颜色相关动画

(2)addClass( ) / removeClass( ) / toggleClass( )

(3)show( ) / hide( ) / toggle( )

注意：上述动画特效扩展底层仍然是使用定时器，不能与CSS Transition组合应用。

新的动画特效：

blind(遮蔽) bounce(弹跳) clip(缩短) drop(丢弃) explode(爆炸) fold(折叠) highlight(高亮) puff(膨胀) pulsate(心跳) scale shake(震动) size slide

练习：输入框获得焦点后边框颜色/阴影颜色发生渐变，失去焦点后变回原样

4.jQueryUI组件之第二部分：Interactions(交互组件)

(1)$(..).draggable( ) 目标元素可拖拽

(2)$(..).droppable( ) 目标元素可放置

(3)$(..).resizable( ) 目标元素可重设大小

(4)$(..).selectable( ) 目标元素可选中

(5)$(..).sortable( ) 目标元素可排序

提示：由于上述5个函数对HTML代码有“侵入性”——添加class或必需相关元素，使用时必需同时引入 jquery-ui.css，且有时还必须手工添加样式。

5.jQueryUI组件之第三部分：Widgets(小部件)——今日小重点

提示：jQueryUI总共提供了12个Widgets，每一个使用起来都很简单，但都有“侵入性”——为已有的元素添加class或子元素，需要手工引入jquery-ui.css。

(1)手风琴组件

$(..).accordion( )

(2)自动补全组件

$('input').autocomplete( { source: ['','',''] } );

(3)日期选择器组件

$('input').datepicker( {dateFormat: 'yy-mm-dd'} );

(4)弹出式对话框组件

$('div').dialog( );

(5)标签页组件(tabs)

$('div').tabs( );

(6)工具提示组件(tooltip)

$(document).tooltip( ); 对所有的title属性改变外观

HTML5规范中与无障碍阅读相关的属性：

role="元素的角色"

aria-*=""

6.第三方JS插件——日期选择器插件

百度搜“日期插件”可以很多的结果，如：

jQueryUI Datepicker

My97

layDate(http://laydate.layui.com/)

7.第三方插件——轮播广告插件

百度搜“轮播广告”可以很多的结果，如：

.....

8.第三方插件——表单验证插件

百度搜“表单验证插件”可以很多的结果，如：

formValidator

easyForm

validate.js

jQuery.validate(https://jqueryvalidation.org/)

1602A班：练习内容 - 使用jQuery和jQueryUI操作购物车

功能点要求：

(1)使用jQuery控制表格主体的隔行变色 $('tbody tr:nth-child(2n)')

(2)使用jQuery控制表格主体的悬停变色 $('tr').hover(fn, fn) addClass

(3)点击X号，可以从表格主体中删除当前行 $(this).parent().parent().remove()

(4)使用jQueryUI的Spinner组件修改商品数量 $(input).spinner()

(5)每个商品数量的改变，都要影响当前商品的小计及总计

$(input).blur() $(this).parent().next().html()

$('.小计').each( fn )

Sql

1.访问服务器

客户端访问服务器必须提供URL地址，包含如下几部分：

(1)协议

(2)地址

(3)端口号

一个操作系统最多可以打开65535(2^16)个端口；

已经被占用的端口不能再被其他服务程序所占用。

查看当前端口占用情况：

netstat

netstat -anb

MB GB TB PB EB ZB YB BB

2.数据库服务器

数据库的种类：网状数据库 => 树形数据库 => 关系型数据库（当前主流） => 对象型数据库

关系型数据库系统分为两部分：

(1)数据库服务器：保存数据、维护数据

(2)数据库客户端：向服务器发起命令(增删改查)

关系型数据库服务器中的数据的逻辑结构：

DBServer -> Database -> Table -> Row -> Column

3.使用MySQL数据库系统

(1)安装MySQL服务器端软件（http://www.mysql.com/）

c:/xampp/mysql/bin/mysqld.exe 服务器启动/停止程序

(2)启动MySQL服务器

启动服务器之前必须确保3306端口未被占用！

服务器启动成功的标识：3306端口已打开。

(3)在客户端安装MySQL客户端软件

命令行版本客户端： c:/xampp/mysql/bin/mysql.exe

网页版本的客户端： phpMyAdmin

(4)在客户端使用MySQL客户端软件远程连接机房中MySQL服务器

c:/xampp/mysql/bin/mysql.exe -h127.0.0.1 -uroot -p -P3306

-h: Host -u: User -p: password -P: Port

可以简写为： mysql -uroot

XAMPP是一个开源的服务器套装(https://www.apachefriends.org)

XAMPP = Apache + MySQL + PHP + Perl

LAMP / WAMP / XAMP

1602A：练习内容：根据下面提示，编写出需要的SQL语句

##告诉服务器下述SQL语句所用的编码方式

##删除一个jd数据库(如果存在的话)

##创建一个jd数据库，指定其中保存的数据所用的编码

##进入刚刚创建的数据库

##创建一个部门信息的表： dept，保存部门编号、部门名称、所在地

##向部门表中插入三行记录，分别是“研发部”、“市场部”、“运营部”

##创建一个员工信息的表： emp，保存员工编号、姓名、性别、生日、工资、所在部门等信息。

##向员工表中插入五行记录

##查询两个表中的所有记录行

##查询研发部的所有员工信息

查询：

02

复习：

关系型数据库逻辑结构：

服务器 > 库 > 表 > 行 > 列

关系型数据库部署结构：

数据库服务器：存储数据

c:/xampp/mysql/bin/mysqld.exe

数据库客户端：向服务器发出操作指令

网页版本客户端：phpMyAdmin

命令行版本客户端： c:/xampp/mysql/bin/mysql.exe

如何使用客户端操作数据库服务器：

(1)启动服务器软件，保证其端口已经正常打开

(2)启动客户端软件，远程连接到服务器

C:\xampp\mysql\bin\mysql.exe -h127.0.0.1 -uroot -p -P3306

或者简写为： mysql -uroot

(3)使用客户端向服务器发出增删改查命令，获得服务器返回操作结果

1.复习：SQL语句的分类

(1)DDL：Data Definition Language，用于定义数据的结构

CREATE / DROP / ALTER / TRUNCATE

(2)DML：Data Manipulate Language，用于操作表中的记录行

INSERT / UPDATE / DELETE

(3)DQL：Data Query Language，用于查询数据

SELECT

(4)DCL：Data Control Language，用于操作用户的权限

GRANT / REVOKE

2.Web服务器

Web服务器的作用(面包小姐)：等待客户端的连接请求，解析请求内容(如：获取服务器上的某个网页/图片/CSS/JS等)，在服务器端的文件系统中找到客户端请求网页，发送给客户端。

Web服务器分为两类：

(1)静态Web服务器：只能向客户端提供一成不变的Web内容，如：

HTML / CSS / JS / GIF / SWF ....

(2)动态Web服务器：可以向不同的客户端在不同的时间提供不同的内容，如：

账户当前的余额 / 论坛中的帖子 / 新闻网的新闻 / 商城中的商品展示 ...

网页中的动态内容一般是保存在数据库/文件系统/其它服务器中的，必须使用某种后台编程语言来获取，常见的有：

1) JSP = HTML + Java 一般适用于大型项目

2) ASP.NET = HTML + C# 一般适用于Windows服务器上的项目

3) PHP = HTML + PHP 适用于中小型项目

4) NodeJS 适用于互联网&社区型项目.......

3.PHP语法

(1)数据类型

4种值类型： string boolean integer float

2种复合类型： object array PHP中不是Object，不能打印输出

2种特殊类型： NULL resource

(2)定义变量常量

定义变量：$变量名 = 值 ; //所有PHP变量都必须以$开头

定义常量：const 常量名＝值；　　define('常量名', 值)

(3)运算

算术运算： + - * / % ++ --

比较运算： > < >= <= ===

逻辑运算： && || !

三目运算： ?:

字符串拼接运算： .

(4)逻辑结构

选择： if...else.... switch..case...

循环： for($i=0; $i<num; $i++){ } foreach( ){ } while do..while...

(5)通用小程序

使用PHP输出九九乘法表

(6)模块的编写(函数/对象/类)

function add($a, $b){

$c = $a + $b;

return $c;

}

4.使用PHP向数据库服务器发送SQL指令

实现“添加新员工”功能点：

(1)创建一个empadd.html页面，用于收集用户的输入

(2)创建一个empadd.php页面，接收客户端提交的数据，拼接为SQL语句，提交给数据库服务器来执行，输出操作结果给用户

信息查询：select*from emp;

结束：qurt;

午间练习：

创建PHP页面，分别完成如下功能：

(1)创建1.php页面，向客户端输出1个*

(2)创建2.php页面，向客户端输出50个*

(3)创建3.php页面，向客户端输出5行10列个*

(4)创建4.php页面，向客户端输出“九九乘法表”

1602A：练习内容 — 完成“员工删除”功能点

(1)创建一个empdelete.html页面，用于收集用户的输入

请输入待删除的员工的编号：.....

</form>

(2)创建一个empdelete.php页面，接收客户端提交的数据，拼接为SQL语句（DELETE...），提交给数据库服务器来执行，输出操作结果给用户

面试题：

1) Unicode和UTF-8的关系？

Unicode是一种编码表格，例如给一个汉字规定一个代码，一个Unicode码可能转成长度为一个byte，或者两个三个四个byte的utf-8码，取决于Unicode码的值，英文Unicode码因为值小于0x80,只要用一个byte的utf-8传送，比传送Unicode的两个BYTEs要快，utf8市委传送Unicode而想出来的“再编码”方法罢了。Utf转Unicode程序反转。

utf-8是对Unicode字符集进行编码的一种编码方式。

Day03

复习：

DB Server：SQL

服务器端：存储数据

客户端： cmd、网页、php解释器

Web Server：PHP语法、连接数据库

使用PHP页面连接数据库的步骤：

提示：下述步骤与命令行连接数据库服务器的步骤是一样的。

(1)建立到数据库服务器的连接

$conn = mysqli_connect('127.0.0.1', 'root', '', 'jd', 3306);

(2)编写SQL语句，提交给服务器执行

$sql = "INSERT/DELETE/UPDATE/SELECT.......";

$result = mysqli_query($conn, $sql);

(3)查看服务器返回的执行结果

SQL：Structured Query Language

1.mysqli_query()函数可能返回的执行结果

对于任意语句只要执行失败，就返回FALSE；可能原因：

(1)SQL语法错误

(2)表名/列名根本不存在

(3)权限不足

(4)磁盘已满

执行成功的话，依据执行的语句：

1)INSERT/DELETE/UPDATE/CREATE/DROP 返回 TRUE

2)SELECT 返回查询结果集

2.基于单表的CRUD

Create Retrieve Update Delete：增删改查

一个CRUD称为项目中的一个功能项；一个完整的项目一般包含多个CRUD。一个CRUD一般包含如下的页面：

1) query.php

2) add.html + add.do.php

3) delete.php

4) update_query.php + update.do.php

3.HTTP协议

目标：

(1)进行页面访问优化

(2)进行页面请求调用——解决“看不见摸不着”的错误

4.URL地址

URL： Unified Resource Locator，用于定位互联网上的一个唯一的资源

URN：Unified Resource Naming，

URI： Unified Resource Identifier

URI = URL + URN

5.HTTP协议

Hyper Text Transfer Protocol：由W3C制定，用于规范在Web客户端和Web服务器之前传输Web内容所必须经过步骤和格式。由各大浏览器厂家和Web服务器厂家共同遵守。

HTTP RFC-2616

Request For Comment 标准发布前的意见征求稿

面试题： HTTP/1.1对1.0有哪些改进？

(1)支持持久连接 Connection: keep-alive

(2)支持虚拟主机 Host: www.tmooc.cn

(3)支持代理连接

HTTP协议把客户端和服务器间通信过程分为两个阶段

(1)请求阶段 - Request Message

(2)响应阶段 - Response Message

GET请求和POST请求消息的不同？

(1)二者的语义不同！ GET-获得 POST-提交/传递

(2)GET可以提交请求数据，追加在请求URI后面，以 ?k=v&k=v&k=v 形式——HTTP协议规定：请求起始行总长度不能超过1024字节，且不能包含特殊标点符号以及中文(一个汉字会被编码为9个字节！)

(3)POST请求把请求数据放在请求消息主体中——HTTP协议规定：请求主体没有长度限制

(4)GET和POST请求安全级别上是一样的——都是明文传输。

GET /ajax_day03/5.html HTTP/1.1

Host: 127.0.0.1

POST /ajax_day03/5.html HTTP/1.1

Host: 127.0.0.1

uname=tom&age=20

HEAD /ajax_day03/5.html HTTP/1.1

Host: 127.0.0.1

PUT /ajax_day03/5.html HTTP/1.1

Host: 127.0.0.1

Hello！ This is NEW 5.HTML!

DELETE /ajax_day03/5.html HTTP/1.1

Host: 127.0.0.1

1602班：练习内容使用Web服务器和DB服务器

步骤：

(1)创建一个.sql文件，编写下述要求需要的SQL语句

删除并重新创建一个数据库-tarena，进入该数据库；

创建一个存储用户信息的表-users，保存用户编号、用户名、密码、邮箱、生日等信息；

把上述.sql文件中的命令提交给MySQL服务器执行。

(2)创建一个register.html，包含一个用户注册的表单。

(3)创建一个register.php，接收register.html提交的注册数据，把新用户的信息保存到数据库中。提示“注册成功”或“注册失败”。

(4)创建一个login.html，包含一个用户登录的表单。

(5)创建一个login.php，接收login.html提交的用户名和密码，执行数据库验证，判定用户名和密码是否都正确，给用户以提示，“登录成功”或“登录失败”。

Day04

(1)创建一个.sql文件，编写下述要求需要的SQL语句

删除并重新创建一个数据库-tarena，进入该数据库；

创建一个存储用户信息的表-users，保存用户编号、用户名、密码、邮箱、生日等信息；

把上述.sql文件中的命令提交给MySQL服务器执行。

(2)创建一个register.html，包含一个用户注册的表单。

(3)创建一个register.php，接收register.html提交的注册数据，把新用户的信息保存到数据库中。提示“注册成功”或“注册失败”。

(4)创建一个login.html，包含一个用户登录的表单。

1.HTML FORM的编码方式

<form action="" method="" enctype="">

Encode Type：用于指定表单数据的编码类型，可取值：

(1)application/x-www-form-urlencoded：默认值，表单数据编码后再提交 k=v&k=v&k=v

(2)text/plain：表单数据不经编码直接提交，服务器拒绝接收——HTTP协议规定：请求消息只能包含ASCII字符！

(3)multipart/form-data：专用于提交包含文件上传的表单数据

2.今日笔记在导图中

Day05

复习：

数据库服务器：

(1)常用SQL语句

(2)PHP连接数据库服务器的步骤

$conn = mysqli_connect('127.0.0.1', 'root','','db',3306);

$result = mysqli_query($conn, $sql);

Web服务器：

静态Web服务器：HTML/CSS/JS/GIF/SWF...

动态Web服务器：Apache+PHP引擎 string/array/foreach

HTTP协议：

客户端向服务器发送-请求消息：

POST /day05/5.html HTTP/1.1

Host: http://www.baidu.com/

Connection: keep-alive

User-Agent: xxx

Content-Type: application/x-www-form-urlencoded

Content-Length: 25

uname=tom&age=20&pno=1110

服务器向客户端发送-响应消息：

HTTP/1.1 200 OK

Server: Apache httpd

Last-Modified: Thu, 12 May 2016 01:23:27 GMT

Content-Type: text/html

Cache-Control: max-age=3600

浏览器客户端可以向Web服务器发起的请求的种类：

(1)同步请求：地址栏写url、超链接、表单提交、JS页面......

(2)异步请求：AJAX

AJAX技术用于向服务器发起异步HTTP请求消息，接收服务器返回的响应消息。

原生AJAX请求的步骤：

(1) 创建XHR对象

var xhr = new XMLHttpRequest( );

(2) 监听XHR对象的状态改变

xhr.onreadystatechange = function( ){

if(xhr.readyState===4){

//处理响应消息主体： xhr.responseText

}

(3) 打开到服务器的连接

xhr.open(method, url, true);

(4) 发送请求消息

xhr.send( null/请求主体 );

1.使用XHR发起GET请求

//////1

var xhr = new XMLHttpRequest();

//////2

xhr.onreadystatechange = function(){

if(xhr.readyState===4){

if(xhr.status===200){ doResponse(xhr.responseText) }

else { alert('响应完成但存在问题') }

}

/////3

xhr.open('GET', 'xx.php?k=v&k=v&k=v', true);

/////4

xhr.send( null );

2.使用XHR发起POST请求

//////1

var xhr = new XMLHttpRequest();

//////2

xhr.onreadystatechange = function(){

if(xhr.readyState===4){

if(xhr.status===200){ doResponse(xhr.responseText) }

else { alert('响应完成但存在问题') }

}

/////3

xhr.open('POST', 'xx.php', true);

/////3.5

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

/////4

xhr.send( 'k=v&k=v&k=v' );

同步的HTTP请求，服务器可能给出的响应消息类型：

text/html（完整的HTML文件）、text/css、application/javascript、image/jpeg ....

异步的HTTP请求，服务器一般仅限于如下的响应消息类型：

text/plain、text/html（片段）、application/javascript、application/xml、application/json

3.使用XHR接收响应消息——text/plain

服务器端(PHP)：

header('Content-Type: text/plain');

echo 'cunzai';

客户端(JS)：

//1//2 if(xhr.responseText==='cunzai'){ span.innerHTML='已占用' }

//3//4

4.使用XHR接收响应消息——text/html

演示：仿写Google Suggest

服务器端（PHP）：

header('Content-Type: text/html');

echo '<li>Ada</li><li>Pascal</li>'; //不是完整的HTML

客户端（JS）；

//1 //2 element.innerHTML = xhr.responseText;

//3 //4

5.使用XHR接收响应消息——application/javascript

演示：实现网页的国际化(i18n)-根据浏览器首选语言的不同，向客户端返回不同的JavaScript脚本内容。

internationalization

服务器端（PHP）：

header('Content-Type: application/javascript');

echo 'alert(123)';

客户端（JS）：

//1 //2 eval( xhr.responseText );

//3 //4

6.思考场景：

每次异步请求，服务器应该返回字符串，其中描述多个商品的信息，而每个商品又具备多个属性——对象/对象的数组/多维数组。

PHP： $arr = [ [], [], [] ]; echo $arr; //PHP中数组不能输出

JS： var arr = new Array( ); JS中的数组和PHP中的数组不兼容！

HTTP协议规定：请求主体和响应主体数据都是字符串！该场景中：

PHP数组 => PHP字符串 => HTTP响应 => JS字符串 =>挂载到DOM

"鱼香肉丝303.jpg京酱肉丝204.jpg青椒肉丝25104.jpg"

"鱼香肉丝@30@3.jpg#京酱肉丝@20@4.jpg#青椒肉丝@25@104.jpg"

"鱼香肉丝@TARENA@30@3.jpg#京酱肉丝#2@20@4.jpg#青椒肉丝@25@104.jpg"

需要一种字符串格式规范，很容易阅读，没有歧义，被各种语言所处理：

(1)XML字符串格式 (2)JSON字符串格式

行业通用的字符串格式——XML格式

HTML-描述网页内容 XML-是一种字符串格式，用于描述数据

XML字符串的格式要求：

(1)有且只有一个根标签

(2)标签有开始就必须有结束

(3)标签可以有属性，必须有值，值必需用单引号或双引号

(4)标签可以有子标签，可以嵌套

行业通用的字符串格式——JSON格式

7.使用XHR接收响应消息——application/xml —— 了解

演示：点击“加载更多”按钮，异步请求获取更多的菜品信息

服务器端（PHP）：

header('Content-Type: application/xml');

echo '<?xml version="1.0" encoding="UTF-8" ?>';

echo '<dishList>';

echo '</dishList>'

客户端（JS）：

//1 //2 var xmlDocument = xhr.responseXML; 继续使用核心DOM方法操作XML DOM树

//3 //4

3.使用XHR接收响应消息——application/json —— 重点

1602A班 - 练习内容：异步加载页头和页尾

描述：

<body>

<div id="header">页头加载中，请稍后...</div>

<div id="main">这里是主体内容</div>

<div id="footer">页尾加载中，请稍后...</div>

</body>

Day06

复习：

使用XHR发起异步HTTP请求消息的步骤：

(1)创建XHR

var xhr = new XMLHttpRequest();

(2)监听状态改变

xhr.onreadystatechange = function(){}

(3)打开连接

xhr.open(method, url, isAsync);

(4)发送请求

xhr.send( null/k=v&k=v )

使用XHR发起请求——GET

使用XHR发起请求——POST 3.5

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

使用XHR接收响应——text/plain

if( xhr.responseText === 'cunzai') { }

使用XHR接收响应——text/html（片段）

element.innerHTML = xhr.responseText

使用XHR接收响应——application/javascript

eval( xhr.responseText )

====若服务器端响应数据结构比较复杂，如对象/多维数组=====

=========使用下面两种响应消息的主体格式===========

使用XHR接收响应——application/xml —— 了解

服务器端（PHP）：

header('Content-Type: application/xml');

echo "<?xml version='1' encoding='UTF-8'?>";

echo "<empList>";

echo "</empList>";

客户端（JS）：

var xmlDocument = xhr.responseXML;

使用XHR接收响应——application/json —— 重点

1.字符串数据格式——JSON

JSON是一种字符串格式的规范，被各种编程语言所支持，用于在不同的系统/不同的编程语言之间传递字符串数据——JSON的作用与XML一样，都是一种字符串格式，用于描述数据。JSON格式不使用标签(<标签名>)，而是使用{ }和[ ]

{ }表示对象，如： ' { "age": 20, "name": "Tom", "birthday":"2015-5-15" } '

[ ]表示数组，如： ' [ 10, "Tom", {"x":10, "y":20} ] '

JSON字符串可以比XML更加精简，处理速度更快。

几乎所有的编程语言都支持JSON格式。

(1.1)PHP: 把JSON字符串解析为PHP数组 $arr = json_decode($json);

(1.2)PHP: 把PHP数组转换为JSON字符串 $json = json_encode($arr);

(2.1)JS: 把JSON字符串解析为JS对象 var obj = JSON.parse(jsonString);

(2.2)JS: 把JS对象转换为JSON字符串 var jsonString = JSON.stringify(obj);

JSON在项目中的实际用途：

1)PHP数组 => JSON字符串 => HTTP响应消息 => JSON字符串 => JS对象

2)JS对象 => JSON字符串 => HTTP请求消息 => JSON字符串 => PHP数组

2.XHR接收响应消息——application/json

演示：点击“加载更多”按钮加载更多的菜品信息

服务器端（PHP）：

header('Content-Type: application/json');

$arr = [ [ ], [ ], [ ] ];

$jsonString = json_encode($arr);

echo $jsonString;

客户端（JS）：

//1 //2 var obj = JSON.parse(xhr.responseText)

//3 //4

3.jQuery中提供的AJAX封装函数

(1)load( )

用法： $(选择器).load( url )

作用：发起异步请求，获得指定URL返回的响应消息——必须是text/html格式，设置为当前选定元素的innerHTML。

不足：(1)响应数据必须是html格式 (2)当前元素已有内容会被替换 (3)只能影响当前选定元素的内容

练习：实现一个动态的下拉列表

待页面加载完成后，发起异步请求，获取服务器端有哪些部门

(2)$.get( )

语法： $.get(url, [data], fn)

作用：发起异步的GET请求，获得成功的响应消息后，调用指定的回调函数，处理响应主体内容

演示：异步的分页显示

$.get( 'xx.php', {k:v, k:v}, function(data){ } );

练习：使用$.get()改写：注册用户名，验证用户名是否存在

(3)$.post( )

语法： $.post(url, [data], fn)

作用：发起异步的POST请求，获得成功的响应消息后，调用指定的回调函数，处理响应主体内容

练习：成绩录入系统，使用$.post()

表单序列化(Serialize): 把表单中所有的输入域的name及值拼接为“k=v&k=v”形式。

<form>

</form>

jQuery: var result = $('form').serialize( ); // uname=value&upwd=value

1602A班 — 练习内容：异步加载更多的数据

(4)$.getScript( )

(5)$.getJSON( )

(6)$.ajax( )

Day07

复习：

原生AJAX：

//1 var xhr = new XMLHttpRequest();

//2 xhr.onreadystatechange = fn;

//3 xhr.open(method, url, isAsync);

//4 xhr.send( null/data );

使用XHR发起请求： GET/POST

使用XHR获取响应： html/text/script/xml/json

jQuery中AJAX的封装函数：

(1)load(url, [data], [fn])：异步加载指定url返回的html，作为当前选定元素的innerHTML

用法：$('div').load('header.html');

(2)$.get(url, [data], [fn])：发起异步的GET请求，使用指定的回调函数处理响应数据

用法：$.get('checkuname.php', {uname:'Tom'}, function(data, msg, xhr){ })

(3)$.post(url, [data], [fn])：发起异步的POST请求，使用指定的回调函数处理响应数据

用法：$.post('addrecord.php', {stuName:'丁丁', chinese: 90, math:80}, function(data, msg, xhr){ })

(4)$.getScript()

(5)$.getJSON()

(6)$.ajax()

1.jQuery对AJAX的封装函数——$.getJSON

用法： $.getJSON(url, data, fn)

作用：发起异步GET请求，获取服务器端返回的JSON字符串，自动调用JSON.parse()将其解析为JS对象——要求返回的响应主体必须是application/json，如果不是，也会强行调用JSON.parse()而可能导致解析失败！

2.jQuery对AJAX的封装函数——$.getScript

用法： $.getScript(url, [data], [fn])

作用：发起异步GET请求，获取服务器端返回的application/javascript字符串，自动调用eval( )执行其中的JS语句——要求返回的响应主体必须是application/javascript;如果不是，也会强行调用eval()把响应消息作为JS来执行！

测试：使用$.get、$.post请求一个不存在的页面，查看执行结果

前面的5个函数的第三个参数——回调函数，是成功响应消息的回调函数——只有响应消息完成且响应状态码为200才会调用。

if(xhr.readyState===4){

if(xhr.status===200){

doResponse();

}

面试题：使用jQuery如何处理AJAX请求时的异常情形？

3.jQuery对AJAX的封装函数——$.ajax() —— 万能函数

用法： $.ajax( {

type: 'GET', //POST、PUT、DELETE

url: 'xx.php', //请求地址，默认为空,指当前页面

data: 'k=v&k=v', //请求数据，键值对/对象格式

contentType: 'application/x-www-form-urlencoded',

dataType: 'text', //html/script/xml/json/jsonp

beforeSend: function(){ }, //请求发送之前的回调

success: function(){ }, //响应消息接收成功的回调

error: function( ){ }, //响应消息接收失败的回调

complete: function( ){ } //响应接收完成(不论成败)的回调

} );

练习：级联下拉列表

午间练习：在用户选定某个厂家后，继续添加 “请选择产品型号”下拉框。

AJAX阶段项目 —— 京东的“用户中心”

完成的功能点：

(1)页面显示时，首先弹出“用户登录”模态对话框

(2)登录成功后，显示“用户中心”页面，上方提示出当前登录用户的用户名

(3)点击左侧的附加导航，右侧主体内容随之改变

(4)当点击“我的订单”，右侧在TABLE显示当前登录用户所下的订单

(5)(选作)“我的订单”实现分页显示

项目目录结构：

完成的顺序： 14:37~15:10 统一讲解

(1)把项目必需的数据结构导入到数据库服务器 source xx.sql

(2)创建页头和页尾文件： header.html和footer.html —— 不是完整的页面，只是HTML片段

(3)创建项目中唯一完整的HTML页面： usercenter.html

<div class="main">这里是主体</div>

</body></html>

(4)主页面加载完成后，异步请求页头和页尾

(5)为主页面创建模态对话框，实现异步用户登录；登录成功后，去除模态框。

(6)主页面的主体中，分为“左-附加导航；右-主体内容”两部分；点击附加导航，可以实现主体内容的切换

(7)显示出当前登录用户所有的订单.....

1602A班练习内容： “京东用户中心项目”功能点

(1)点击左侧的附加导航实现内容的切换

(2)编写“我的订单”中TABLE的静态内容

Day08

复习：

第三阶段知识点整理：见思维导图

1.AJAX阶段项目 —— 京东“用户中心”

完成的功能点：

(1)页面显示时，首先弹出“用户登录”模态对话框

(2)登录成功后，显示“用户中心”页面，上方提示出当前登录用户的用户名

(3)点击左侧的附加导航，右侧主体内容随之改变

(4)当点击“我的订单”，右侧在TABLE显示当前登录用户所下的订单

(5)(选作)“我的订单”实现分页显示

项目目录结构：

完成的顺序：

(8)把项目必需的数据结构导入到数据库服务器 source xx.sql

(9)创建页头和页尾文件： header.html和footer.html —— 不是完整的页面，只是HTML片段

(10)创建项目中唯一完整的HTML页面： usercenter.html

<div class="main">这里是主体</div>

</body></html>

(11)主页面加载完成后，异步请求页头和页尾

(12)为主页面创建模态对话框，实现异步用户登录；登录成功后，去除模态框。

(13)主页面的主体中，分为“左-附加导航；右-主体内容”两部分；点击附加导航，可以实现主体内容的切换

(14)显示出当前登录用户所有的订单.....

(15)(选作)分页显示所有订单

2.面试题：如何使用CSS实现下面的布局

.parent {

}

.left {

width: 210px; /*1*/

float: left; /*2*/

}

.right {

margin-left: 210px; /*3*/

}

3.SQL中的复杂查询语句——子查询

子查询：在一条查询语句中再执行一条查询语句。例如：

为了查询指定编号的订单有哪些产品，需要查询该订单对应的产品编号有哪些，然后再到产品表查询对应的产品信息。

jd_orders / jd_products / jd_order_product_detail

SELECT * FROM jd_orders WHERE user_name='强东';

SELECT *

FROM jd_products

WHERE product_id IN (

SELECT product_id

FROM jd_order_product_detail

WHERE order_id='1'

);

4.实现分页显示，前端和后端传递的数据格式

JSON字符串，形如：

{

"record_count": 22, /*总记录数*/

"page_size": 5, /*页面大小，每页包含的记录数*/

"page_count": 5, /*总的页数*/

"cur_page": 3, /*当前页号*/

"data": [ {}, {}, {}, {}, {} ] /*当前页的数据*/

}

12345

1234

123

2345

345

补充：

(1) SQL语句中如何获取一个表中满足条件的总记录数量：

SELECT COUNT(order_id) FROM jd_orders WHERE ....;

(2) SQL语句中实现分页查询

SELECT * FROM jd_orders WHERE ... LIMIT start,count ;

每页大小为5，想查询第1页： ... LIMIT 0,5 ;

每页大小为5，想查询第2页： ... LIMIT 5,5 ;

每页大小为5，想查询第3页： ... LIMIT 10,5 ;

每页大小为5，想查询第4页： ... LIMIT 15,5 ;

....

每页大小为page_size，想查询第cur_page页：

... LIMIT (cur_page-1)*page_size, page_size ;

1602A班，练习内容：“京东用户中心”项目-完成“幸运抽奖”前期准备

当用户登录成功后，异步请求服务器端的数据(data/lottery-stat.php)，获取当前登录用户的总可抽奖次数，当前已用的抽奖次数，剩余抽奖次数，返回数据形如：

{

"total_count": 39, /*总抽奖次数*/

"used_count": 3, /*已经使用的抽奖次数*/

"left_count": 36 /*剩余抽奖次数*/

}

抽奖规则：计算订单总金额，每满100块钱有一次抽奖机会

SELECT SUM(price) FROM jd_orders WHERE ....;

SELECT COUNT(id) FROM jd_lottery WHERE ...;

选作：当抽奖按钮可以点击后，绑定监听函数，随机获取一个中奖项目，

var lotteryItems = ['鼓励奖', '一等奖', '二等奖', '三等奖','特等奖'];

把所中奖项异步提交给服务器(data/save-lottery.php)，保存到jd_lottery表；剩余抽奖次数-1；

INSERT INTO jd_lottery VALUES( ...... );

Html5

1.面试题：跨域请求和JSONP——非常抽象

跨域：Cross Domain Request，请求不同的域上的资源(HTML/CSS/JS/SCRIPT/JPEG等)，不同的域可能是：

(1)不同的协议

(2)不同的域名

(3)不同的端口号

(1)默认情况下，浏览器可以针对HTML、CSS、JS、图片发起跨域请求——同步请求。

(2)客户端浏览器默认禁用XHR的跨域请求（不论何种资源）——出于安全考虑！

	非跨域资源	跨域资源
同步请求	可以	可以
异步请求(XHR)	可以	不可以

使用场景：项目很大，于是把静态HTML放在A服务器，动态数据(PHP文件)放在B服务器，动态数据(JSP文件)放在C服务器；A服务器上的静态HTML需要动态数据，必需使用异步请求——不能使用XHR发起跨域请求。

浏览器禁用XHR的跨域请求有若干解决办法——百度。

解决办法之一： JSON with Padding，JSONP，填充式JSON，是以一种手段、一种技巧，可以巧妙的跨过XHR跨域请求的限制——与JSON不同，不是一种字符串格式。

思路：

(1)不使用XHR对象——XHR的跨域请求会被浏览器禁止！

(2)在DOM树动态添加script元素——SCRIPT的跨域请求浏览器允许

(3)PHP页面返回的JSON字符串稍加改造：

$json = '{"ename":"Tom", "age":20}';

//echo $json;

echo 'doResponse('. $json .')'; //字符串

(4)在静态HTML页面中声明function doResponse(data){ ...}即可

==============================================

客户端最终执行的语句如下：

doResponse({"ename":"Tom", "age":20})

其中的函数本地在HTML中声明，其中的数据是PHP返回的。

AJAX和JSONP的关系？

严格说，二者没有任何关系！

AJAX的核心是XHR对象，不能发起跨域请求；

JSONP的核心是SCRIPT元素，可以发起跨域请求；

二者的相似点：都能实现异步请求，异步获取服务器端数据。

2.jQuery对JSONP的支持

jQuery对AJAX的封装函数：

$(...).load( )

$.get( )

$.post( )

$.getScript( )

$.getJSON( ) 使用XHR对象发起异步请求

$.ajax( ) 使用XHR对象发起异步请求

jQuery对JSONP的封装函数：

$.getJSON( ) 使用动态SCRIPT元素发起异步请求

语法：$.getJSON('跨域地址/xx.php?callback=?', function(data){ })

$.ajax( ) 使用动态SCRIPT元素发起异步请求

语法：$.ajax({

url: '跨域地址/xx.php',

dataType: 'jsonp',

success: function(data){ }

});

第三阶段的三个话题：

(1)jQuery

(2)AJAX

(3)HTML5新特性 —— 杂乱，且存在兼容性问题，学习中要抓住重点

1)表单新特性

3)Canvas绘图技术

4)SVG绘图技术

2.HTML5高级新特性——表单新特性

(1)新的input类型 <input type="email">

(2)新的表单元素 <progress >

(3)表单元素新的属性 <input maxvalue="" pattern="">

3.新的input 类型

HTML4/XHTML提供的input类型：

text、password、radio、checkbox、submit、reset、button、file、hidden、image

HTML5新增的input类型：

(1)email

(2)search

(3)url

(4)tel 在PC浏览器中无效果，只在手机中有效

(5)number 只允许输入数字，且可以限定范围和步长

(6)range 在指定范围内选择，可以限定范围和步长

(7)color 颜色选择输入框

(8)date 日期选择输入框

(9)week 周选择输入框

练习：使用范围选择输入域(range)，实现颜色的选择（原始版+jQuery版）

14:43 ~ 15:00

练习：创建一个学生信息录入表单，尽可能的使用新的input类型

用户名: type="text"

年龄： type="nubmer"

生日： type="date"

语文： type="range"

数学： type="range"

英语： type="range"

电子邮箱： type="email"

联系电话： type="tel"

微博地址： type="url"

入学月份： type="month"

4.新的表单元素

HTML4/XHTML可以使用的表单元素：

input、select、textarea

HTML5新添的表单元素：

(1)datalist 用于为其它输入框提供输入可选项

(2)progress 显示进度条，用于提示进行中，或提示执行进度，不能用于提交数据 max value

(3)meter 显示刻度尺、标尺、度量衡 min max value(当前值) low(下限值） high(上限值) optimum(最优值)

(4)output 显示一个运算输出项，如小计、总计等，只是一个语义标签，没有任何外观效果

5.表单元素的新属性

(1)autocomplete：是否启用输入记录功能，为下次输入提供提示。可取值为“on”、“off”

(2)placeholder：为输入框提供提示性文字，注意：说明文字不是value！

(3)multiple：无需指定值，只要出现，就表示当前输入框可以输入多个值，用英文逗号隔开

(4)autofous：无需指定值，只要出现，就可以自动获得输入焦点

(5)form：需要赋值为某个form的id，用于将输入域放置在FORM元素的外部，但仍然可以随同表单一同提交

1602A班练习内容 - 绘制HTML5新特性的思维导图

要求：每个知识点，给出一段示例性代码

Day02

复习：

见导图

1.HTML5新特性—>表单新特性—>表单元素新属性—>与输入验证相关的属性

(1)required 必填项

(2)minlength="数字" 指定最少的字符个数

(3)maxlength="数字" 指定最多的字符个数

(4)min="数值" 限定可取最小数值

(5)max="数值" 限定可取最大数值

(6)step="数值" 限定可取的步长

(7)pattern="正则表达式" 使用正则表达式进行输入验证

如何在失去焦点时进行验证？如何自定义错误提示消息？

——使用Input的validity属性。

input.validity：判定当前输入元素的value是否有效

ValidityState {

badInput: false 无效的输入 —— type="number"

customError: false 存在自定义错误

patternMismatch: false 正则表达式不匹配 —— pattern

rangeOverflow: false 值上溢出 —— max

rangeUnderflow: false 值下溢出 —— min

stepMismatch: false 步长不匹配 —— step

tooLong: false 字符串太长 —— maxlength

tooShort: false 字符串太短 —— minlength

typeMismatch: false 类型不匹配 —— type="email"

valid: true

valueMissing: false 缺少值 —— required

}

练习：使用HTML5提供的验证属性以及 input.validity 属性，实现表单提交时弹出自定义的错误消息

用户名：必填

密码：必填长度在6~12之间

确认密码：必填值必须与“密码”相同

年龄：必须是数字，值在18~60之间

邮箱：必须是邮箱

微博：必须是URL

手机：值必须满足手机号码格式

2.HTML5新特性——视频播放

HTML5提供了 <video>和<audio> 两个新元素，可以直接在浏览器播放视频和音频，不再依赖于Flash播放器了。

<video src="x.mp4">您的浏览器不支持VIDEO标签</video>

或者

<video>

<source src="1.mp4"></source>

<source src="1.ogg"></source>

您的浏览器不支持VIDEO标签

</video>

VIDEO标签的常用属性：

(1) src="xx.mp4" 必需属性，指定播放的视频源

(2) width="800" 视频播放区域(行内块)的宽度

(3) height="600" 视频播放区域(行内块)的宽度

(4) controls 显示播放控件

(5) autoplay 自动播放

(6) loop 循环播放

(7) poster="yy.jpg" 视频尚未播放之前显示的海报

练习：不使用Video元素自带的controls，创建一个自定义的按钮，放在视频的正中央，控制视频播放和暂停。

2.HTML5新特性——音频播放

您的浏览器不支持AUDIO标签

</audio>

3.HTML5新特性——Canvas绘图——重点

Canvas：画布，可以实现在HTML页面中绘制图形和图像，例如：绘制统计图、图标、动画游戏等——所有的绘图内容都是使用js来控制的。

您的浏览器不支持Canvas绘图技术！

</canvas>

接下来的绘图任务全部由JS来完成。

提示：Canvas是画布，可用于盛放绘制的内容；但是绘制图形图像必须使用“画笔” —— Graphics / Context

var ctx = canvas.getContext( '2d' );

绘图上下文对象的成员：

常用属性：

fillStyle: "#000000"

font: "10px sans-serif":字体

globalAlpha: 1

lineCap: "butt"

lineJoin: "miter"：倾斜

lineWidth: 1

miterLimit: 10

shadowBlur: 0

shadowColor: "rgba(0, 0, 0, 0)"

shadowOffsetX: 0

shadowOffsetY: 0

strokeStyle: "#000000"

textAlign: "start"

textBaseline: "alphabetic"

常用方法：

arc: function arc() { [native code] }

arcTo: function arcTo() { [native code] }

beginPath: function beginPath() { [native code] }

clearRect: function clearRect() { [native code] }

clip: function clip() { [native code] }

closePath: function closePath() { [native code] }

createLinearGradient: function createLinearGradient() { [native code] }

createRadialGradient: function createRadialGradient() { [native code] }

drawImage: function drawImage() { [native code] }

ellipse: function ellipse() { [native code] }

fill: function fill() { [native code] }

fillRect: function fillRect() { [native code] }

fillText: function fillText() { [native code] }

lineTo: function lineTo() { [native code] }

measureText: function measureText() { [native code] }

moveTo: function moveTo() { [native code] }

rect: function rect() { [native code] }

restore: function restore() { [native code] }

rotate: function rotate() { [native code] }

save: function save() { [native code] }

scale: function scale() { [native code] }

stroke: function stroke() { [native code] }

strokeRect: function strokeRect() { [native code] }

strokeText: function strokeText() { [native code] }

transform: function transform() { [native code] }

translate: function translate() { [native code] }

(1)使用画笔绘制矩形(Rectangle)

ctx.fillRect( x, y, w, h ) 填充一个矩形区域

ctx.strokeRect( x, y, w, h ) 描边一个矩形区域

ctx.clearRect( x, y, w, h ) 清除一个矩形区域内的所有内容

ctx.fillStyle = "rgb(255,0,0)"; //填充所使用的颜色或渐变色

ctx.strokeStyle = "rgb(255,0,0)"; //描边所使用的颜色或渐变色

ctx.lineWidth = 1; //用于描边的线的宽度

练习：绘制国际象棋棋盘(8行8列) v1: 黑白交错 v2:颜色随机

练习：使用定时器绘制一个可以往右移动的矩形

(2)使用画笔绘制圆形

提示：没有直接绘制圆形的方法

(3)使用画笔绘制文本

ctx.fillText( txt, x, y )

ctx.strokeText( txt, x, y )

ctx.font = "10px sans-serif"

ctx.fillStyle = "#f00"; //单色或渐变色

ctx.strokeStyle = "#f00"; //单色或渐变色

(4)使用画笔绘制线条

1602A班练习内容：使用Canvas绘制统计图

要求：假设有如下数据

var data = { '9月': 3500, '10月':5000, '11月':2000, '12月': 6000};

根据上述数据，绘制出如下的图形

提示：图形中的数据必须依据data中的数值，不能是定值

矩形顶部对齐要简单些

Day03

复习：

HTML5新特性——九个

(1)表单新特性

新的input类型、新元素、输入域新属性

(2)视频和音频

video audio

(3)Canvas绘图

您的浏览器不支持Canvas绘图

</canvas>

//var ctx = $('#c1')[0].getContext('2d');

var ctx = c1.getContext('2d');

//使用绘图上下文对象绘制图形图像

1.使用绘图对象绘制图形

(1)绘制矩形

ctx.fillStyle = '单色'/渐变色;

ctx.fillRect( x, y, w, h );

ctx.strokeStyle = '单色'/渐变色;

ctx.lineWidth = 1;

ctx.strokeRect( x, y, w, h );

ctx.clearRect( x, y, w, h );

(2)绘制文本

ctx.font = '12px SimHei';

var w = ctx.measureText( txt ).width;

ctx.fillText( txt, x, y );

ctx.strokeText( txt, x, y );

(3)绘制路径（直线/折线/曲线）

ctx.beginPath( );

ctx.moveTo(x, y);

ctx.lineTo(x, y);

ctx.arc( x,y,r,sAngle,eAngle,counterclockwise)

ctx.ellipse(x,y,hr,vr,sAngle,eAngle,counterclockwise) ctx.closePath( ); //闭合路径，用于填充

----------------------

ctx.stroke( );

ctx.fill( );

练习：(1)绘制一个信封 (2)绘制吃豆人

2.使用绘图对象绘制图像

var img = new Image();

img.src = '1.jpg';

img.onload = function(){ //必须待图片加载完成，才能绘制

ctx.drawImage(img, x, y); //图片的定位点在左上角

ctx.drawImage(img, x, y, w, h); //缩放绘制

}

//练习：绘制一个可以在画布上飞来飞去的飞机

ctx.rotate( 弧度制角度 ); //将画笔进行转换，绘制出旋转后的图像——旋转以画布的原点的为轴心——画布的轴点默认在左上角。

ctx.translate( x, y ); //位移，改变整个画布的原点坐标

//练习：绘制一个可以绕自身旋转的飞机

3.异步请求间的同步问题

需求：使用异步请求获取图片1和图片2——谁先被获取到无法预测；要求必须待两个图片全部加载完成，才能执行某项任务。

img1.src = "1.jpg"

boolean img1Loaded = false;

img1.onload = function(){ true true

img1Loaded = true;

if(img2Loaded){ chiFan() }

}

img2.src = "2.jpg";

boolean img2Loaded = false;

img2.onload = function(){

img2Loaded = true;

if(img1Loaded){ chiFan() }

}

function chiFan(){ }

1602A班，练习内容： “京东用户中心”项目“幸运抽奖”功能点

Day04

复习：

阶段三的内容：

jQuery

AJAX

HTML5新特性：

(1)表单新特性

(2)视频和音频

(3)Canvas绘图

基本用法：

var ctx = c1.getContext('2d'); //console.log(ctx)

//绘制矩形

ctx.fillRect() / ctx.strokeRect() / ctx.clearRect() / ...

//绘制文本

ctx.fillText() / ctx.strokeText() / ctx.font = "" / ...

//绘制路径

ctx.beginPath() / ctx.moveTo() / ctx.lineTo() / ctx.arc() /

ctx.stroke() / ctx.fill() / ctx.clip()

//绘制图像

ctx.drawImage( img, x, y )

ctx.drawImage( img, x, y, w, h )

(4)SVG绘图

1.项目中Canvas绘图技术应用场合

(1)动画/游戏

(2)统计图表

1)手工调用ctx.xxx()相关函数，绘制图表

2)还可以使用第三方提供的统计图表绘制函数库

· FusionCharts

· HighCharts

· ECharts

· FreeChart

· Chart.js

2.学习Chart.js的使用

目标：不单单是如何使用Chart.js，更多的是熟悉“自学第三方工具库”的过程——官网和手册的使用！

http://www.chartjs.org/

Chart.js的特点：

(1)开源

(2)8种图形可用

(3)原生JS，基于Canvas

(4)支持响应式特性

3.学习FusionCharts的使用

目标：不单单是如何使用FusionCharts，更多的是熟悉“自学第三方工具库”的过程——官网和手册的使用！

http://www.fusioncharts.com/

FusionCharts的特点：

(1)仅对商业应用收费

(2)90+种图形可用，支持地图应用

(3)可以整合jQuery、AngularJS等框架

(4)支持响应式特性

4.思考：如何为Canvas上的某个图形图像添加事件监听？

<canvas id="c2"></canvas>

var ctx = c2.getContext('2d');

ctx.fillRect( 10, 10, 50, 50 );

-------------------------------

c2.onmousemove = function(event){ //JS事件只能绑定到元素上

var x = event.offsetX;

var y = event.offsetY;

if( x>= ? && x<=? && y>=? && y<=? ){

///重新绘图

}

5.浏览器中支持的绘图技术共有三种

(1)Canvas绘图技术——HTML5标准

(2)SVG绘图技术——W3C标准，HTML5支持

(3)WebGL——功能强大，非标准

Canvas：是位图技术，缩放后会失真，善于表现颜色/线条细节

SVG：是矢量图技术，可以无限缩放，不适合丰富的色彩/线条细节

6.SVG绘图技术

Scalable Vector Graphic，可缩放的矢量图，可以任意缩放而不会失真，效果类似于Flash、AI设计图。

SVG（HTML技术，不依赖于任何播放器）的竞争对手：Flash（私有技术，依赖于播放器）。

Canvas绘图技术和SVG绘图技术的比较：

Canvas	SVG
位图技术，可以保存为.png	矢量图技术，不能保存为位图
善于表现颜色/线条细节	可以缩放，不善于表现细节
网页游戏、统计图	图标、统计图、地图
1个标签 + 1个对象——所有图形图像都靠ctx绘制	几十个标签——每个图形对应一个标签
不能被搜索引擎爬虫所访问	可以被搜索引擎所访问
只能为整个Canvas绑定监听函数	每个图形(标签)可以绑定事件

7.绘制SVG图形的方法

SVG 2013就已经被W3C采纳为标准，当时还没有HTML5标准。

HTML5之前：SVG图形需要编写在独立的.svg文件中

(1)编写一个.svg文本文件——XML文件

(2)在HTML中使用img/iframe/embed/object引用.svg文件

HTML5之后：SVG标签可以直接书写在HTML文件中

(1)绘制矩形

(2)绘制圆形

(3)绘制椭圆

(4)绘制直线

(5)绘制折线

(6)绘制多边形

(7)绘制文本

(8)绘制图像

课下练习：使用SVG绘制消费统计图，并为每个柱添加鼠标悬停事件监听。

Day05

复习：

HTML5新特性：

（1）表单新特性

（2）视频和音频

（3）Canvas绘图（位图） <canvas></canvas>+ctx

（4）SVG绘图（矢量图）图形<=>标签

1.使用SVG绘图

（1）绘制矩形

</rect>

（2）绘制圆形

（3）绘制椭圆

（4）绘制直线

（5）绘制折线———消费统计图

（6）绘制多边形——必须闭合

（7）绘制文本

（8）绘制图像——可以引用另一个位图/SVG图的URL

注意：若绘制了位图，则SVG图就不能再无限缩放了

(9) 图形图像分组

.....

</g>

练习：使用svg绘制一个随机的验证码图片

练习：绘制一个笑脸，一起移动

提示：项目中，若SVG图形太复杂，刻意使用Illustrator画出图形，到处为.svg文件即可。

2.SVG图形图像可以支持的三种动画

（1）SMIL动画——过时

（2）JS动画——支持，定时器+属性值改变

（3）CSS动画——支持，Transition/Keyframes

3.SVG中如何动态的添加新的元素

(1)方法1：修改svg元素的innerHTML属性

(2)方法2：使用document.createElementNS('', '')

提示：使用document.createElement()方法是无效的。

午间练习：每隔半秒钟在svg随机出现一个小球(位置、大小、颜色、速度随机), 滚动3s后渐渐消失。

4.为图形添加渐变色

<svg>

<defs>

</linearGradien>

</defs>

</svg>

5.为图形添加滤镜

SVG技术为图形提供了几十种滤镜(Filter)——推荐先学习PS中的滤镜

此处演示“高斯模糊”滤镜的使用：

<svg>

<defs>

</filter>

</defs>

</svg>

浏览器支持三种绘图技术：

(1)Canvas

(2)SVG

(3)WebGL

都可以绘制图形、文字、路径、图像，但由于底层特性，调用的接口各不相同；增加了学习和使用的复杂度。

6.第三方绘图函数库——Two.js

一个二维绘图函数库，用一套完全的一样调用接口，可以随意的使用Canvas/SVG/WebGL实现绘图。

http://jonobr1.github.io/two.js/

7.第三方绘图函数库——Three.js

一个三维绘图函数库。

1602A班练习内容：

(1)使用SVG完成下述绘图效果

(2)学习Two.js手册，实现矩形和圆形的旋转动画

Day06

复习：

HTML5新特性：

(1)表单新特性

(2)视频和音频

(3)Canvas绘图

(4)SVG绘图

(5)地理定位

(6)拖放API

1.复习：SVG绘图

绘制矩形：<rect x="" y="" width="" height="">

绘制圆形：<circle cx="" cy="" r="">

绘制椭圆：<ellipse cx="" cy="" rx="" ry="">

绘制直线：<line x1="" y1="" x2="" y2="">

绘制折线：<polyline points="x1,y1 x2,y2 ...">

绘制多边形：<polygon points="x1,y1 x2,y2 ...">

绘制文本：<text x="" y="">内容</text>

绘制图像：<image xlink:href="">

绘制路径：<path>

使用渐变色

使用滤镜——高斯模糊

2.复习：Two.js

Two.js是一个二维绘图函数库，使用一套相同的API调用在canvas、svg、webgl进行绘图。

官方： http://jonobr1.github.io

绘制常见图形：

3.HTML5新特性——Geolocation——了解

地理定位，使用浏览器获得客户端所在的地理坐标，如维度(latitude)、经度(longitude)、海拔高度(altitude)、速度(speed)。进而实现LBS（Location Based Service）。

PC浏览器：一般没有定位模块，只能使用IP地址进行反向解析，获取大概地理定位数据，精度很低。

手机浏览器：内置的定位模块，手机浏览器可以从底层的操作系统读取到相应的数据——推荐PhoneGap直接读取底层操作系统的数据。

HTML5针对地理定位提供的新对象：

navigator.geolocation，它共有三个方法：

(1)getCurrentPosition(succ_fn, err_fn) 得到浏览器当前所在位置数据

(2)watchPosition(function(position){}) 不停的监视当前浏览器所在位置数据的变化

(3)clearWatch() 清除位置监视

开放API：某个厂家把自己的某种服务，公开给其它的应用使用

1) 微信开放API

2) 阿里掌柜开放API

3) 微博开放API

4) 搜索开放API

5) 语音开放API

6) 地图开放API

4.调用百度提供的地图开放API

官网：http://lbsyun.baidu.com/

API说明文档（使用手册）：

http://lbsyun.baidu.com/index.php?title=jspopular

使用百度地图开放API——JavaScript API的步骤：

(1)注册/并登录百度开发者账号

http://developer.baidu.com

(2)创建一个Web应用

(3)创建HTML页面，使用JS访问百度提供的地图API

<!DOCTYPE html>

<html>

<head>

html{height:100%}

body{height:100%;margin:0px;padding:0px}

#container{height:100%}

</style>

</script>

</head>

<body>

var map = new BMap.Map("container"); // 创建地图实例

var point = new BMap.Point(116.404, 39.915); // 创建点坐标

map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

</script>

</body>

</html>

5.HTML5新特性——拖放API（Drag & Drop）

拖放API：在HTML页面中实现GUI（Graphic User Interface）程序中的“拖”和“放”操作。共提供了七个新事件。

被拖动的对象（源对象）可以产生的事件：

(1)ondragstart：开始拖动

(2)ondrag：拖动中

(3)ondragend：拖动结束

被放置的对象（目标对象）可以产生的事件：

(4)ondragenter：源对象被拖动进入目标对象

(5)ondragover：源对象被拖动着在目标对象的上方

(6)ondrop：源对象被拖动着在目标对象上方松开

(7)ondragleave：源对象被拖动移出目标对象

注意：ondragover事件的默认后续事件必须是ondragleave——即使是松手，也不触发ondrop！只有在ondragover中阻止该默认事件，才有可能触发ondrop！！

target.ondragover = function(event){

event.preventDefault();

....

}

//练习：实现一个图片可以被拖动到div内部去

在一个系列的源对象拖放事件和目标对象拖放事件中，event对象是不相同的，若想传递数据数据，可以使用：

源对象：

event1.dataTransfer.setData( type, value );

目标对象：

event2.dataTransfer.getData( type );

可传递的数据的类型(type)可取值：

(1)text/uri-list

(2)text/html

(3)Files

1602A 练习内容：

(1) 图片拖动到垃圾箱图片，实现图片的从页面中的删除

要求：图片拖动到垃圾箱上方时，垃圾箱由半透明变为不透明；离开或者松开时，垃圾箱由不透明变为半透明。

(2) 拖动选餐，每道菜可以被添加到“我的订单”多次

提示：DOM对象的克隆可以使用：

element.cloneNode( false ) 浅克隆，只复制当前元素，不复制子元素

element.cloneNode( true ) 深克隆

传统的服务器端下载的网页只能显示服务器端图片。

6.如何在服务器端下载的网页中呈现一个客户端图片？以及拖拽方式的文件上传？——了解

HTML5中如何实现文件IO相关的对象？

File：表示一个文件对象

FileReader：表示一个文件读取器对象

readAsArrayBuffer( )

readAsBinaryString( )

readAsDataURL( )

readAsText( )

Day07

复习

HTML5新特性：

(1)表单新特性

(2)视频和音频

(3)Canvas绘图

(4)SVG绘图

(5)Geolocation navigator.geolocation

.getCurrentPosition()

.watchPosition()

.clearWatch()

(6)拖放API

(7)WebWorker

(8)WebStorage

(9)WebSocket

API：Application Programming Interface，应用程序编程接口，平台/第三方提供的一些对象/函数可供应用程序使用。

1.复习：拖放API

源对象可以触发的事件：

ondragstart event.dataTransfer.setData(type, value)

ondrag

ondragend

目标对象可以触发的事件：

ondragenter

ondragover

ondragleave

ondrop event.dataTransfer.getData(type)

在源对象事件和目标对象事件间传递数据：

event.dataTransfer

<body>

</div>

//源对象触发的事件

var imgList = document.querySelectorAll('#container img');

for(var i=0; i<imgList.length; i++){

var img = imgList[i];

img.ondragstart = function(event){

event.dataTransfer.setData('text/html', this.id);

}

//目标对象触发的事件

trash.ondragover = function(event){

event.preventDefault();

}

trash.ondrop = function(event){

var imgID = event.dataTransfer.getData('text/html');

var img = document.getElementById(imgID);

container.removeChild( img );

}

</script>

</body>

/////作业题第二道

<body>

</div>

</div>

//源对象的事件——菜单中的图片

var imgList = document.querySelectorAll('#menu img');

for(var i=0; i<imgList.length; i++){

var img = imgList[i];

img.ondragstart = function(event){

event.dataTransfer.setData('text/html', this.id);

}

//目标对象的事件——我的订单div

myorder.ondragover = function(event){

event.preventDefault();

}

myorder.ondrop = function(event){

var imgID = event.dataTransfer.getData('text/html');

var img = document.getElementById(imgID);

var copy = img.cloneNode( false ); //浅克隆即可

myorder.appendChild( copy );

}

</script>

<body>

练习：编写一个函数，接收一个数字作形参，返回一个boolean，说明形参数字是否为一个“质数/素数”

function isPrime( num ){

}

要求：上述函数必须至少运行5s才能退出！

2.计算机基础知识

进程(Process)：进程是操作系统中分配内存的基本单位——操作系统需要什么服务，就要运行某种程序，必须为其在内存中分配空间——咸菜厂

线程(Thread)：线程是进程内部执行代码的基本代码——所有的代码都要在某个线程中运行——咸菜生产线

进程和线程的关系：一个进程中必须至少一个线程(可以有多个)，线程必须处于某个进程内部。

注意：一个浏览器进程中会存在很多的线程，但是浏览器渲染某个HTML文件时，其中所有的HTML、CSS、JS代码都运行在同一个线程中——主渲染线程。一旦某段代码需要长时间运行，会导致后续的代码无法执行。

3.HTML5新特性——Web Worker——在浏览器中创建新线程

在HTML中需要运行一些JS代码，由于算法很耗时，若直接在HTML中加入，会导致“主渲染线程”阻塞，此时页面中动画、事件、后续元素的渲染都会无法进行。

解决方法：添加新的线程

HTML5新特性——Worker 对象，就相当于其他语言中的Thread对象，每个Worker对象都对应一个独立的执行线程。

new Worker('xx.js');

Worker的使用场合：适用于加载一个外部的需要长时间(算法复杂耗时间)运行的JS文件。

Day08

复习：

HTML5新特性：

(1)表单新特性

(2)视频和音频

(3)Canvas绘图

(4)SVG绘图

(5)地理定位

(6)拖放API

(7)WebWorker

(8)WebStorage

(9)WebSocket

1.复习：Web Storage——客户端本地存储

window.sessionStorage：会话级存储，可以同一个会话中的多个HTML中共享数据。

sessionStorage.setItem(k, v)

sessionStorage.getItem(k)

sessionStorage.removeItem(k)

sessionStorage.clear( )

sessionStorage.length

sessionStorage.key( i )

window.localStorage：跨会话级存储，可以在同一个站点的多个会话的多个HTML中共享数据。

localStorage.setItem(k, v)

localStorage.getItem(k)

localStorage.removeItem(k)

localStorage.clear( )

localStorage.length

localStorage.key( i )

关于localStorage的一个小问题：

(1)第1个页面修改了localStorage数据，跳转到第2个页面，可以读取到最新数据。

(2)若同时打开了第1和2个页面，然后再通过第1个页面修改了localStorage，第2个页面可以通过刷新或者onstorage事件获得最新的修改

练习：创建1.html / 2.html / view_count.html

view_count.html中一个可以实时的显示出当前客户端在当前网站总共访问过多少个页面(刷新也算一次)

2. HTML5 新特性——WebSocket

Socket：套接字，插座，用于与远程的连接，并发送和接收数据。每个Socket对象都有只是两个接口，一个用于发送数据，一个用于接收数据。

HTTP协议：浏览器连接服务器默认使用HTTP协议——是一个典型“请求-响应”协议，有一个请求消息，才会有一个响应消息，请求与响应一一对应。有些应用，HTTP协议显示出短板，如网络聊天室、实时股票。解决办法：

“心跳请求”= AJAX + 定时器

WebSocket协议：客户端通过套接字连接到服务器上，永久连接，一方可以不停的向另一方发送消息。

提示：HTML5中提供的WebSocket对象连接服务器使用的是ws协议，必须连接支持ws协议的服务器才行——Apache Httpd不能再使用了。

HTML5WebSocket的使用方法：

var ws = new WebSocket( 'ws://127.0.0.1:9999' );

ws.onopen = function(){ //成功连接到服务器 }

ws.onclose = function(){ //与服务器断开连接 }

ws.onmessage = function(){ //接收到服务器的消息}

ws.send( 'data' );

演示：简单的聊天室

(1)编写服务器端程序（如PHP、Java、C#、NodeJS）

(2)运行服务器端程序：

c:/xampp/php/php.exe e:/socket_server.php

(3)在客户端使用HTML5WebSocket创建WS客户端

var ws = new WebSocket( 'ws://127.0.0.1:9999' );

ws.send( 'hello' ); //发送消息

ws.onmessage = function(event){ //接收消息

console.log('接收到服务器的消息:')

console.log(event.data);

}

HTML5阶段项目 —— 飞机大战(AircraftWar)

主要技术：Canvas绘图 + 定时器

功能分析：

游戏分为六个阶段：

(1)DOWNLOAD：下载游戏所必需的图片

(2)READY：就绪阶段

(3)LOADING：加载阶段

(4)PLAY：游戏进行阶段

(5)PAUSE：游戏暂停阶段

(6)GAMEOVER：结束阶段

第一阶段：DOWNLOAD知识点

连续加载33张图片，全部加载完成，进度条显示100%

var img = new Image();

img.src = 'xx.png';

img.onload = function(){

progress += 3;

drawProgress( );

}

第二阶段：READY知识点

使用一张有限长度的背景图，实现可以无限延伸的效果

游戏中让画面动起来的是定时器，所以定时器在游戏中一般称为Engine（引擎）

第三阶段：LOADING知识点

如何N个定时器周期后才执行某动作

this.counter = 0;

this.move = function(){

this.counter++;

if(this.counter%3===0){

this.index++;

}

Day09

表单新特性

视频和音频

Canvas：统计图、游戏

SVG

地理定位

拖放API

Web Worker

Web Storage

Web Socket

1.HTML5阶段项目——飞机大战

技术点：Canvas + 定时器(游戏Engine)

功能点：

PHASE_DOWNLOAD 如何显示加载进度

PHASE_READY 有限大小的图片无限延伸

PHASE_LOADING 改变图片下标实现“移动”

PHASE_PLAY 瞬移、触摸屏、碰撞检验

PHASE_PAUSE

PHASE_GAMEOVER

function Hero(imgs){

}

function Bullet(img){

this.x = ...

this.y = ...

this.draw = ...

this.move = ...

}

function BulletList(){

this.arr = [ ]

this.add = ...

this.remove = ...

this.draw = ....

this.move = ...

}

2.我方英雄发射子弹

(1)创建子弹对象的构造方法：Bullet

(2)创建子弹列表对象的构造方法：BulletList

(3)修改英雄对象(Hero)，添加发射子弹的方法：fire()，移动方法中调用fire()方法

(4)创建英雄对象时，同时创建bulletList对象

(5)主定时器中“游戏进行阶段”添加bulletList的绘制和移动

3.敌机的生成策略

要求：敌机的数量和类型都是随机的，但可以控制出现的概率，小号敌机最频繁，大号敌机最少。

算法：

var num = Math.floor( Math.random()*200 );

if(num<6){

this.add( 小号敌机 );

}else if(num<9){

this.add( 中号敌机 );

}else if(num<10){

this.add( 大号敌机 );

}

4.碰撞检测

碰撞的四个条件：

obj1.x + obj1.width >= obj2.x

obj2.x + obj2.width >= obj1.x

obj1.y + obj1.height >= obj2.y

obj2.y + obj2.height >= obj1.y

5.云服务器的使用

目标：

(1)申请自己的云主机空间，把自己的作品上传互联网，掌握网站的管理和使用。

(2)为简历作准备，列出作品链接，让HR参考。

新浪云（SAE）服务器的使用步骤：

(1)注册一个微博账号： weibo.com

(2)使用微博账号注册一个关联的SAE账号：

邀请注册地址： http://t.cn/R4WcToI

注意：注册时提供的安全邮箱和安全密码是登录新浪云的账号！

(3)登录SAE，创建一个Web应用(即一个网站)，获得免费二级域名

登录地址： sae.sina.com.cn

创建一个Web应用：

再次登录，可以看到自己的Web应用：

(4)管理网站，上传自己的HTML/CSS/JS/PHP代码，通过域名访问自己的作品。

点击某个版本后面的“上传代码包”可以批量上传文件：

(5)管理网站的数据库——MySQL，上传SQL语句提交给数据库服务器执行

Ajxs boos

Day01

1、web前端基础的技术：html/css/js/ajax + HTML5

2、框架技术--》不同的目的，针对于不同的原生代码进行封装

3、jQuery(DOM操作的封装)、chart.js/two.js

4、框架整合：页面上使用多种框架技术

a、使用框架：引入js/css文件

b、根据需求灵活选择不同的框架中的 API

5、学习方式：

a、学会查手册

b、分析代码，模仿代码

c、记忆：核心点

Bootstrap：对 CSS 和 JS 进行了封装，提供了css样式类，常见动效，自适应（响应式）布局

一、概述

1、bootstrap的作用：

2、包含哪些内容

全局样式类、栅格布局、常用组件、插件、定制

3、开发工具：webstorm

二、手工实现响应式布局

1、百分比 + 浮动

2、CSS媒体查询技术：在CSS代码中，media技术--》根据屏幕的大小，自动选择执行哪些 CSS 代码

@media screen and (min-width:990px){

div.box {}

}

@media screen and (max-width:989px) and (min-w){

div.box {}

}

3、如何实现

a、使用 webstorm 开发：以项目作为文件的组织方式

b、添加特有的代码

4、如何测试

a、浏览器调试：模拟不同尺寸的屏幕

b、ADT

c、真机测试

5、定义页面的视口

a、声明页面适应不同的客户端设备

----页面宽度的自适应

6、定义响应式的 CSS 代码

a、尺寸使用百分比

b、img：使用 max-width

c、使用 :after 实现浮动的清除

d、字体：使用 em

e、使用媒体查询技术

7、media属性:link标记里添加 media 属性，实现选择性的执行某个 CSS 文件

--->把所有的 CSS 文件下载，选择性的使用

三个 css 文件做成 1 个 css，在css 文件里，选择执行某些代码

8、@media--CSS 媒体查询技术：使用 1 个CSS 文件即可，可以在文件中，添加媒体的查询

@media () {

}

@media () {

}

9、实践案例：布局、细节--》手工代码实现

a、代码的细节:CSS RESET

b、什么情况下适合使用响应式

不适应特别复杂的网站，电商

适应门户网站、个人站点

三、Bootstrap 框架

1、框架文件：css和js文件

帮助手册

2、建立一个使用 boot 的html 文件

<head>

<link css

<!-- if lt ie 9

<script js

3、可以使用提供的各种样式：按钮

4、bootstrap.css文件

a、CSS reset：基本元素的样式定义

b、盒子模型的计算方式

box-sizing:content-box;--->width/height：内容区域（padding会撑开元素的框）--》保证内容的显示，缺点是计算总尺寸麻烦

box-sizing:border-box;---》width/height：框的尺寸（padding计算在框之内的）优先保证布局和尺寸---》适用于响应式布局

c、百分比+浮动

d、@media

四、全局 CSS 样式

1、使用 boot 提供的全局样式的时候：使用 F12 查看源代码

2、容器：包含其他元素的div/header/section等

container：固定宽度的

container-fluit：100%，适用于移动设备

3、按钮的样式

btn：添加按钮的基本的样式：尺寸、边框

其他样式类：颜色、状态

btn-default/danger/warning/info/primary/success

---》CSS 中多类 <p class="s1 s2 d3"

active：根据当前元素的样式，进行重点提示的效果

btn-block：常用于移动设备，实现大个

尺寸：btn-default/btn-lg/btn-sm/btn-xs

disabled：禁用的状态

4、图片的样式

响应式：img-thumbnail(边框，常用于缩略图)

img-responsive（没有其他样式）

---》max-width:;

非响应

img-circle

img-rounded

5、文本的样式

文本颜色：tex-dange/success/....

文本对齐：text-center/

文本大小写：text-lowercase/..

bg-danger/success/..---》可以为所有元素使用

lead ---类似于 active--实现着重突出显示的效果

关于颜色：有一个比较饱和的主色调--作为网站的基色

lighter(80%) 60% 30%

darker()

6、其他小样式

每日一练：完成响应式布局的页面（手写）

进一步熟练使用工具

7、表格、表单、栅格系统

DAY02

1、web前端基础的技术：html/css/js/ajax + HTML5

2、框架技术--》不同的目的，针对于不同的原生代码进行封装

3、jQuery(DOM操作的封装)、chart.js/two.js

4、框架整合：页面上使用多种框架技术

a、使用框架：引入js/css文件

b、根据需求灵活选择不同的框架中的 API

5、学习方式：

a、学会查手册

b、分析代码，模仿代码

c、记忆：核心点

Bootstrap：对 CSS 和 JS 进行了封装，提供了css样式类，常见动效，自适应（响应式）布局

面试题：谈谈自适应（响应式）布局的理解（1、作用 2、如何实现 3、适用性）

前端性能优化：减少服务器的交互（背景图、1个css使用@media）

一、概述

1、bootstrap的作用：

2、包含哪些内容

全局样式类、栅格布局、常用组件、插件、定制

3、开发工具：webstorm

二、手工实现响应式布局

1、百分比 + 浮动

2、CSS媒体查询技术：在CSS代码中，media技术--》根据屏幕的大小，自动选择执行哪些 CSS 代码

@media screen and (min-width:990px){

div.box {}

}

@media screen and (max-width:989px) and (min-w){

div.box {}

}

3、如何实现

a、使用 webstorm 开发：以项目作为文件的组织方式

b、添加特有的代码

4、如何测试

a、浏览器调试：模拟不同尺寸的屏幕

b、ADT

c、真机测试

5、定义页面的视口

a、声明页面适应不同的客户端设备

----页面宽度的自适应

6、定义响应式的 CSS 代码

a、尺寸使用百分比

b、img：使用 max-width

c、使用 :after 实现浮动的清除

d、字体：使用 em <div>aa<p>bb</p></div>

e、使用媒体查询技术

7、media属性:link标记里添加 media 属性，实现选择性的执行某个 CSS 文件

--->把所有的 CSS 文件下载，选择性的使用

三个 css 文件做成 1 个 css，在css 文件里，选择执行某些代码

8、@media--CSS 媒体查询技术：使用 1 个CSS 文件即可，可以在文件中，添加媒体的查询

@media screen and (max-width:;) or (min-width:;) and (orientation:;) {

}

@media () {

}

---分开屏幕的尺寸

超大屏：>1200px

PC屏：992px ---1199

PAD屏幕：768 --- 991

PHONE：767

9、实践案例：布局、细节--》手工代码实现

a、代码的细节:CSS RESET

b、什么情况下适合使用响应式

不适应特别复杂的网站，电商

适应门户网站、个人站点

三、Bootstrap 框架：起步（介绍）、全局样式类、组件、插件、定制

1、框架文件：css和js文件

帮助手册

2、建立一个使用 boot 的html 文件

<head>

<link css

<!-- if lt ie 9

<script js

3、可以使用提供的各种样式：按钮

4、bootstrap.css文件

a、CSS reset：基本元素的样式定义

b、盒子模型的计算方式

box-sizing:content-box;--->width/height：内容区域（padding会撑开元素的框）--》保证内容的显示，缺点是计算总尺寸麻烦

box-sizing:border-box;---》width/height：框的尺寸（padding计算在框之内的）优先保证布局和尺寸---》适用于响应式布局

c、百分比+浮动

d、@media

四、全局 CSS 样式

1、使用 boot 提供的全局样式的时候：使用 F12 查看源代码

2、容器：包含其他元素的div/header/section等

container：固定宽度的---》针对于不同尺寸的屏幕，拥有不同的width

container-fluit（液体，流动）：100%，适用于移动设备

3、按钮的样式

btn：添加按钮的基本的样式：尺寸、边框

其他样式类：颜色、状态

btn-default/danger/warning/info/primary/success

---》CSS 中多类 <p class="s1 s2 d3"

active：根据当前元素的样式，进行重点提示的效果

btn-block：常用于移动设备，实现大个

尺寸：btn-default/btn-lg/btn-sm/btn-xs

disabled：禁用的状态

4、图片的样式

响应式：img-thumbnail(边框，常用于缩略图)

img-responsive（没有其他样式）

---》max-width:;

非响应

img-circle

img-rounded

5、文本的样式

文本颜色：tex-dange/success/....

文本对齐：text-center/

文本大小写：text-lowercase/..

bg-danger/success/..---》可以为所有元素使用

lead ---类似于 active--实现着重突出显示的效果

关于颜色：有一个比较饱和的主色调--作为网站的基色

lighter(80%) 60% 30%

darker()

6、其他小样式

每日一练：完成响应式布局的页面（手写）

进一步熟练使用工具

7、列表

ul ol dl/dt/dd---适用于大框中包含多个并列的小框

a、结构

b、 list-inline/unstyled

c、快捷键 ul>li

8、表格

a、结构

b、基础的样式 table--》横向边框、宽度

c、其他样式

table-striped---》隔行变色

table-hover---》鼠标悬停变色

table-bordered---》竖向边框

d、响应式表格：当表格的尺寸超过最小屏幕的尺寸时，表格区域出现滚动条，页面不受影响

<table>

9、栅格系统：实现整个页面的响应式布局--》页面的组成部分，根据屏幕尺寸的不同，占不同的比例

a、将屏幕横向划分为 12 等分

b、定义各个块占：某种屏幕下，占几个等分

c、将页面从上向下分为几个大的组成块--row

row行中：从左向右分为组成块（col列）

d、列：如何占比-->*是数字（1-12），表示占比

col-lg-* 1200px---超大屏幕PC

col-md-* 992------PC

col-sm-* 768 -- 991--PAD

col-xs-* 767--PHONE

---》底层代码添加的 width:？% float:left;

e、关于列的宽度：

col-sm-8：在小屏、中、大都会占8格

在xs情况下，会失效

f、自适应：大小尺寸下，都能显示

g、设置隐藏：hidden-lg/md/sm/xs

h、列的偏移：设置列向右移动 col-md-offset-*

i、列的嵌套：往往用来实现复杂的布局效果

</div>

</div>

</div>

</div>

10、表单

a、基础表单

文本和控件，都分别独占一行---》适用于小屏

<form>

<label>

<input>

</div>

b、内联表单：文本和控件都在同一行，可能和其他控件也位于同一行----》页面结构非常紧凑的情况下

c、水平表单：一行里，分为三个组成部分（文本、控件、提示信息）

将表单结合栅格系统的方式来实现

<div class="form-group"--》类似于row

<div class="col-xs-5"

d、组成元素的基础样式

control-label --》标签文本

form-control --》控件

help-block --》提示文本

11、辅助样式

a、关于浮动

<div>

</div>

<h1></h1> :after {..}

使用boot提供的样式类

</div>

b、隐藏

.hidden ---》display:none;

.invisible ---》visibility:;

区别：display为none，从文档中彻底删除

visible：不可见

五、组件:boot 提供的各种成型的组成部分，比如下拉菜单，导航条，页签。直接构建我们的页面

0、使用 CSS、JS、Fonts

1、图标字体：glyphicon基本效果 glyphicon-**

2、下拉菜单：折叠式的下拉效果

<select><option> -html标记

<button></button> ---原生代码

boot提供的组件：

<div class="dropdown/dropup">---外层的包含框

<a/button data-toggle="dropdown" ---点击

<ul class="dropdown-menu">---弹出的菜单项

</ul>

</div>

---》实现组件的动效，引入 jquery 和 boot.js

3、按钮组

</div>

4、警告框

<span data-dismiss="alert">文本或者图标

其他文本图标。。。

----》boot所提供的组件中，提供了一个非常重要的属性 data-***(自定义的扩展属性)

data-toggle

data-dismiss

Day03

1、web前端基础的技术：html/css/js/ajax + HTML5

2、框架技术--》不同的目的，针对于不同的原生代码进行封装

3、jQuery(DOM操作的封装)、chart.js/two.js

4、框架整合：页面上使用多种框架技术

a、使用框架：引入js/css文件

b、根据需求灵活选择不同的框架中的 API

5、学习方式：

a、学会查手册

b、分析代码，模仿代码

c、记忆：核心点

Bootstrap：对 CSS 和 JS 进行了封装，提供了css样式类，常见动效，自适应（响应式）布局

面试题：谈谈自适应（响应式）布局的理解（1、作用 2、如何实现 3、适用性）

前端性能优化：减少服务器的交互（背景图、1个css使用@media）

一、概述

1、bootstrap的作用：

2、包含哪些内容

全局样式类、栅格布局、常用组件、插件、定制

3、开发工具：webstorm

二、手工实现响应式布局

1、百分比 + 浮动

2、CSS媒体查询技术：在CSS代码中，media技术--》根据屏幕的大小，自动选择执行哪些 CSS 代码

@media screen and (min-width:990px){

div.box {}

}

@media screen and (max-width:989px) and (min-w){

div.box {}

}

3、如何实现

a、使用 webstorm 开发：以项目作为文件的组织方式

b、添加特有的代码

4、如何测试

a、浏览器调试：模拟不同尺寸的屏幕

b、ADT

c、真机测试

5、定义页面的视口

a、声明页面适应不同的客户端设备

----页面宽度的自适应

6、定义响应式的 CSS 代码

a、尺寸使用百分比

b、img：使用 max-width

c、使用 :after 实现浮动的清除

d、字体：使用 em <div>aa<p>bb</p></div>

e、使用媒体查询技术

7、media属性:link标记里添加 media 属性，实现选择性的执行某个 CSS 文件

--->把所有的 CSS 文件下载，选择性的使用

三个 css 文件做成 1 个 css，在css 文件里，选择执行某些代码

8、@media--CSS 媒体查询技术：使用 1 个CSS 文件即可，可以在文件中，添加媒体的查询

@media screen and (max-width:;) or (min-width:;) and (orientation:;) {

}

@media () {

}

---分开屏幕的尺寸

超大屏：>1200px

PC屏：992px ---1199

PAD屏幕：768 --- 991

PHONE：767

9、实践案例：布局、细节--》手工代码实现

a、代码的细节:CSS RESET

b、什么情况下适合使用响应式

不适应特别复杂的网站，电商

适应门户网站、个人站点

三、Bootstrap 框架：起步（介绍）、全局样式类、组件、插件、定制

1、框架文件：css和js文件

帮助手册

2、建立一个使用 boot 的html 文件

<head>

<link css

<!-- if lt ie 9

<script js

3、可以使用提供的各种样式：按钮

4、bootstrap.css文件

a、CSS reset：基本元素的样式定义

b、盒子模型的计算方式

box-sizing:content-box;--->width/height：内容区域（padding会撑开元素的框）--》保证内容的显示，缺点是计算总尺寸麻烦

box-sizing:border-box;---》width/height：框的尺寸（padding计算在框之内的）优先保证布局和尺寸---》适用于响应式布局

c、百分比+浮动

d、@media

四、全局 CSS 样式

1、使用 boot 提供的全局样式的时候：使用 F12 查看源代码

2、容器：包含其他元素的div/header/section等

container：固定宽度的---》针对于不同尺寸的屏幕，拥有不同的width

container-fluit（液体，流动）：100%，适用于移动设备

3、按钮的样式

btn：添加按钮的基本的样式：尺寸、边框

其他样式类：颜色、状态

btn-default/danger/warning/info/primary/success

---》CSS 中多类 <p class="s1 s2 d3"

active：根据当前元素的样式，进行重点提示的效果

btn-block：常用于移动设备，实现大个

尺寸：btn-default/btn-lg/btn-sm/btn-xs

disabled：禁用的状态

4、图片的样式

响应式：img-thumbnail(边框，常用于缩略图)

img-responsive（没有其他样式）

---》max-width:;

非响应

img-circle

img-rounded

5、文本的样式

文本颜色：tex-dange/success/....

文本对齐：text-center/

文本大小写：text-lowercase/..

bg-danger/success/..---》可以为所有元素使用

lead ---类似于 active--实现着重突出显示的效果

关于颜色：有一个比较饱和的主色调--作为网站的基色

lighter(80%) 60% 30%

darker()

6、其他小样式

每日一练：完成响应式布局的页面（手写）

进一步熟练使用工具

7、列表

ul ol dl/dt/dd---适用于大框中包含多个并列的小框

a、结构

b、 list-inline/unstyled

c、快捷键 ul>li

8、表格

a、结构

b、基础的样式 table--》横向边框、宽度

c、其他样式

table-striped---》隔行变色

table-hover---》鼠标悬停变色

table-bordered---》竖向边框

d、响应式表格：当表格的尺寸超过最小屏幕的尺寸时，表格区域出现滚动条，页面不受影响

<table>

9、栅格系统：实现整个页面的响应式布局--》页面的组成部分，根据屏幕尺寸的不同，占不同的比例

a、将屏幕横向划分为 12 等分

b、定义各个块占：某种屏幕下，占几个等分

c、将页面从上向下分为几个大的组成块--row

row行中：从左向右分为组成块（col列）

d、列：如何占比-->*是数字（1-12），表示占比

col-lg-* 1200px---超大屏幕PC

col-md-* 992------PC

col-sm-* 768 -- 991--PAD

col-xs-* 767--PHONE

---》底层代码添加的 width:？% float:left;

e、关于列的宽度：

col-sm-8：在小屏、中、大都会占8格

在xs情况下，会失效

f、自适应：大小尺寸下，都能显示

g、设置隐藏：hidden-lg/md/sm/xs

h、列的偏移：设置列向右移动 col-md-offset-*

i、列的嵌套：往往用来实现复杂的布局效果

</div>

</div>

</div>

</div>

10、表单

a、基础表单

文本和控件，都分别独占一行---》适用于小屏

<form>

<label>

<input>

</div>

b、内联表单：文本和控件都在同一行，可能和其他控件也位于同一行----》页面结构非常紧凑的情况下

c、水平表单：一行里，分为三个组成部分（文本、控件、提示信息）

将表单结合栅格系统的方式来实现

<div class="form-group"--》类似于row

<div class="col-xs-5 col-xs-offset-*"

<label/input/span

d、组成元素的基础样式

control-label --》标签文本

form-control --》控件

help-block --》提示文本

11、辅助样式

a、关于浮动

<div>

</div>

<h1></h1> :after {..}

使用boot提供的样式类

</div>

b、隐藏

.hidden ---》display:none;

.invisible ---》visibility:;

区别：display为none，从文档中彻底删除

visible：不可见

五、组件:boot 提供的各种成型的组成部分，比如下拉菜单，导航条，页签。直接构建我们的页面

0、使用 CSS、JS、Fonts

1、图标字体：glyphicon基本效果 glyphicon-**

--->font的文件

http://localhost:63342/P01/01_nav.html apach

2、下拉菜单：折叠式的下拉效果

<select><option> -html标记

<button></button> ---原生代码

boot提供的组件：

<div class="dropdown/dropup">---外层的包含框

<a/button data-toggle="dropdown" ---点击

<ul class="dropdown-menu">---弹出的菜单项

</ul>

</div>

---》实现组件的动效，引入 jquery 和 boot.js

3、按钮组

</div>

4、警告框

<span data-dismiss="alert">文本或者图标

其他文本图标。。。

----》boot所提供的组件中，提供了一个非常重要的属性 data-***(自定义的扩展属性)--js插件的定义（js代码）

data-toggle：切换，切换显示的地方---》根据属性的取值的不同，实现切换不同的元素

data-dismiss

5、导航：将多个元素组成一组，作为标签页类型的导航

<ul class="nav nav-tabs"

<li><a data-toggle="tab"

6、导航条：把多种元素放在一起，作为导航--》导航条---》经常做成响应式的导航条

a、划分结构

logo：固定在左侧

左侧菜单

右侧菜单

折叠指示框：当放不下的时候，切换显示隐藏起来的菜单项

b、html代码的结构

<div class="navbar navbar-default"

<div class="container"

<a/button class="navbar-toggle"

data-target="#n1"

data-toggle="collapse"

</a>

</div>

<li>

</ul>

<ul>

<li>

</ul>

</div>

c、样式

d、动态效果

7、面板：两层结构样式关键字 panel

8、媒体对象：两层结构，图和文字，水平方向如何排列样式关键字 media

9、路径导航

10、列表组：竖向的列表效果 list

11、输入框组

12、其他

六、插件

1、boot的插件：基于jQuery和boot.js（一次性的引入了所有的js插件所需要的功能）

单个引入js文件

2、如何实现的插件功能

方式一：使用扩展属性 data-*

<ul>

<li>

方式二：js 代码的方式

$('#b1').click(function(){

$(this).dropdown();

});

3、哪些插件：下拉框、导航、警告框

dropdown/alert---》API

4、页签式导航

a、API $().tab('show');

b、完整式的:带内容

<ul

<li class="active"

<button data-target="#a1"

c、过渡效果

fade

5、折叠

a、基础折叠效果

<a/button href/data-target="#d1"

<div class="collapse" id="d1"

b、复杂折叠：实现面板的折叠效果

<div class="panel-body"

c、多组面板，实现互斥的折叠效果

<div>

//...

</div>

Day4

1、web前端基础的技术：html/css/js/ajax + HTML5

2、框架技术--》不同的目的，针对于不同的原生代码进行封装

3、jQuery(DOM操作的封装)、chart.js/two.js

4、框架整合：页面上使用多种框架技术

a、使用框架：引入js/css文件

b、根据需求灵活选择不同的框架中的 API

5、学习方式：

a、学会查手册

b、分析代码，模仿代码

c、记忆：核心点

Bootstrap：对 CSS 和 JS 进行了封装，提供了css样式类，常见动效，自适应（响应式）布局

面试题：谈谈自适应（响应式）布局的理解（1、作用 2、如何实现 3、适用性）

前端性能优化：减少服务器的交互（背景图、1个css使用@media）

一、概述

1、bootstrap的作用：

2、包含哪些内容

全局样式类、栅格布局、常用组件、插件、定制

3、开发工具：webstorm

二、手工实现响应式布局

1、百分比 + 浮动

2、CSS媒体查询技术：在CSS代码中，media技术--》根据屏幕的大小，自动选择执行哪些 CSS 代码

@media screen and (min-width:990px){

div.box {}

}

@media screen and (max-width:989px) and (min-w){

div.box {}

}

3、如何实现

a、使用 webstorm 开发：以项目作为文件的组织方式

b、添加特有的代码

4、如何测试

a、浏览器调试：模拟不同尺寸的屏幕

b、ADT

c、真机测试

5、定义页面的视口

a、声明页面适应不同的客户端设备

----页面宽度的自适应

6、定义响应式的 CSS 代码

a、尺寸使用百分比

b、img：使用 max-width

c、使用 :after 实现浮动的清除

d、字体：使用 em <div>aa<p>bb</p></div>

e、使用媒体查询技术

7、media属性:link标记里添加 media 属性，实现选择性的执行某个 CSS 文件

--->把所有的 CSS 文件下载，选择性的使用

三个 css 文件做成 1 个 css，在css 文件里，选择执行某些代码

8、@media--CSS 媒体查询技术：使用 1 个CSS 文件即可，可以在文件中，添加媒体的查询

@media screen and (max-width:;) or (min-width:;) and (orientation:;) {

}

@media () {

}

---分开屏幕的尺寸

超大屏：>1200px

PC屏：992px ---1199

PAD屏幕：768 --- 991

PHONE：767

9、实践案例：布局、细节--》手工代码实现

a、代码的细节:CSS RESET

b、什么情况下适合使用响应式

不适应特别复杂的网站，电商

适应门户网站、个人站点

三、Bootstrap 框架：起步（介绍）、全局样式类、组件、插件、定制

1、框架文件：css和js文件

帮助手册

2、建立一个使用 boot 的html 文件

<head>

<link css

<!-- if lt ie 9

<script js

3、可以使用提供的各种样式：按钮

4、bootstrap.css文件

a、CSS reset：基本元素的样式定义

b、盒子模型的计算方式

box-sizing:content-box;--->width/height：内容区域（padding会撑开元素的框）--》保证内容的显示，缺点是计算总尺寸麻烦

box-sizing:border-box;---》width/height：框的尺寸（padding计算在框之内的）优先保证布局和尺寸---》适用于响应式布局

c、百分比+浮动

d、@media

四、全局 CSS 样式

1、使用 boot 提供的全局样式的时候：使用 F12 查看源代码

2、容器：包含其他元素的div/header/section等

container：固定宽度的---》针对于不同尺寸的屏幕，拥有不同的width

container-fluit（液体，流动）：100%，适用于移动设备

3、按钮的样式

btn：添加按钮的基本的样式：尺寸、边框

其他样式类：颜色、状态

btn-default/danger/warning/info/primary/success

---》CSS 中多类 <p class="s1 s2 d3"

active：根据当前元素的样式，进行重点提示的效果

btn-block：常用于移动设备，实现大个

尺寸：btn-default/btn-lg/btn-sm/btn-xs

disabled：禁用的状态

4、图片的样式

响应式：img-thumbnail(边框，常用于缩略图)

img-responsive（没有其他样式）

---》max-width:;

非响应

img-circle

img-rounded

5、文本的样式

文本颜色：tex-dange/success/....

文本对齐：text-center/

文本大小写：text-lowercase/..

bg-danger/success/..---》可以为所有元素使用

lead ---类似于 active--实现着重突出显示的效果

关于颜色：有一个比较饱和的主色调--作为网站的基色

lighter(80%) 60% 30%

darker()

6、其他小样式

每日一练：完成响应式布局的页面（手写）

进一步熟练使用工具

7、列表

ul ol dl/dt/dd---适用于大框中包含多个并列的小框

a、结构

b、 list-inline/unstyled

c、快捷键 ul>li

8、表格

a、结构

b、基础的样式 table--》横向边框、宽度

c、其他样式

table-striped---》隔行变色

table-hover---》鼠标悬停变色

table-bordered---》竖向边框

d、响应式表格：当表格的尺寸超过最小屏幕的尺寸时，表格区域出现滚动条，页面不受影响

<table>

9、栅格系统：实现整个页面的响应式布局--》页面的组成部分，根据屏幕尺寸的不同，占不同的比例

a、将屏幕横向划分为 12 等分

b、定义各个块占：某种屏幕下，占几个等分

c、将页面从上向下分为几个大的组成块--row

row行中：从左向右分为组成块（col列）

d、列：如何占比-->*是数字（1-12），表示占比

col-lg-* 1200px---超大屏幕PC

col-md-* 992------PC

col-sm-* 768 -- 991--PAD

col-xs-* 767--PHONE

---》底层代码添加的 width:？% float:left;

e、关于列的宽度：

col-sm-8：在小屏、中、大都会占8格

在xs情况下，会失效

f、自适应：大小尺寸下，都能显示

g、设置隐藏：hidden-lg/md/sm/xs

h、列的偏移：设置列向右移动 col-md-offset-*

i、列的嵌套：往往用来实现复杂的布局效果

</div>

</div>

</div>

</div>

10、表单

a、基础表单

文本和控件，都分别独占一行---》适用于小屏

<form>

<label>

<input>

</div>

b、内联表单：文本和控件都在同一行，可能和其他控件也位于同一行----》页面结构非常紧凑的情况下

c、水平表单：一行里，分为三个组成部分（文本、控件、提示信息）

将表单结合栅格系统的方式来实现

<div class="form-group"--》类似于row

<div class="col-xs-5 col-xs-offset-*"

<label/input/span

d、组成元素的基础样式

control-label --》标签文本

form-control --》控件

help-block --》提示文本

11、辅助样式

a、关于浮动

<div>

</div>

<h1></h1> :after {..}

使用boot提供的样式类

</div>

b、隐藏

.hidden ---》display:none;

.invisible ---》visibility:;

区别：display为none，从文档中彻底删除

visible：不可见

五、组件:boot 提供的各种成型的组成部分，比如下拉菜单，导航条，页签。直接构建我们的页面

0、使用 CSS、JS、Fonts

1、图标字体：glyphicon基本效果 glyphicon-**

--->font的文件

http://localhost:63342/P01/01_nav.html apach

2、下拉菜单：折叠式的下拉效果

<select><option> -html标记

<button></button> ---原生代码

boot提供的组件：

<div class="dropdown/dropup">---外层的包含框

<a/button data-toggle="dropdown" ---点击

<ul class="dropdown-menu">---弹出的菜单项

</ul>

</div>

---》实现组件的动效，引入 jquery 和 boot.js

3、按钮组

</div>

4、警告框

<span data-dismiss="alert">文本或者图标

其他文本图标。。。

----》boot所提供的组件中，提供了一个非常重要的属性 data-***(自定义的扩展属性)--js插件的定义（js代码）

data-toggle：切换，切换显示的地方---》根据属性的取值的不同，实现切换不同的元素

data-dismiss

5、导航：将多个元素组成一组，作为标签页类型的导航

<ul class="nav nav-tabs"

<li><a data-toggle="tab"

6、导航条：把多种元素放在一起，作为导航--》导航条---》经常做成响应式的导航条

a、划分结构

logo：固定在左侧

左侧菜单

右侧菜单

折叠指示框：当放不下的时候，切换显示隐藏起来的菜单项

b、html代码的结构

<div class="navbar navbar-default" --贯穿整个页面

<div class="container" --上下的边距一致

<a/button class="navbar-toggle"

data-target="#n1"

data-toggle="collapse"

</a>

</div>

<li>

</ul>

<ul>

<li>

</ul>

</div>

c、样式：navbar collapse

d、动态效果通过id进行绑定

7、面板：两层结构样式关键字 panel

8、媒体对象：两层结构，图和文字，水平方向如何排列样式关键字 media

9、路径导航

10、列表组：竖向的列表效果 list

11、输入框组

12、其他

DOM-->jquery-->其他js框架的封装

boot:CSS和js的封装---长处在于样式和动效，实现页面的组成

ng：js的进一步的封装----DOM操作（绑定和显示）

var arr = [11,222,333,4444];

ajax从服务器端获取来的

六、插件

1、boot的插件：基于jQuery和boot.js（一次性的引入了所有的js插件所需要的功能）

单个引入js文件

2、如何实现的插件功能

方式一：使用扩展属性 data-*--》优先建议使用

<ul>

<li>

方式二：js 代码的方式 --》个别情况

$('#b1').click(function(){

$(this).dropdown();

});

3、哪些插件：下拉框、导航、警告框

dropdown/alert---》API

4、页签式导航

a、API $().tab('show');

b、完整式的:带内容

<ul

<li class="active"

<button data-target="#a1"

c、过渡效果(和过渡效果相关的class）

fade

in---常用于元素的默认显示

5、折叠

a、基础折叠效果

<a/button href/data-target="#d1"

<div class="collapse" id="d1"

b、复杂折叠：实现面板的折叠效果

<div class="panel-body"

c、多组面板，实现互斥的折叠效果

<div>

//...

</div>

6、tooltip--工具提示---》实现动效，必须 data-* 和 js 一起使用--》鼠标移入显示，显示title属性的值

<元素 title="" data-toggle="tooltip" data-placement="top/left/right/bottom"

$('[data-toggle="tooltip"]').tooltip();

7、popover弹出框--》点击出现，点击消失--》出现的信息自定义的

<元素 data-toggle="popover" data-content="点完出现的信息" data-container="body" data-placement=""

$('[data-toggle="popover"]').popover();

8、模态框（modal）：阻塞当前操作---》常用于关键节点

a、alert/confirm/prompt

b、原生代码：遮罩层+对话框+元素

c、boot中的实现方式

<a/button 点谁

模态框:4层

<div ----外层

<div ----对话框

<div ---用于包含具体的内容

<div --header

<div --body

<div --footer

d、如果关闭

data-dismiss = "modal"

js的方式

$('#m1').modal('show/hide');

----》使用boot框架技术，导致页面的html代码结构复杂，借助bootlint检查，动态加载

s.onload = funtion(){bootlint.show...}

9、图片轮播

a、完整结构：

<div --外层

<div ---主体

<div ----左右切换

<div ---序号

六、定制（LESS）

0、静态样式表：CSS技术---没有编程语言的灵活，比如变量等

可以直接写 CSS 代码改写boot提供的样式---不方便维护

1、动态样式表技术（SASS/LESS/...）

2、LESS：编写.less文件---必须经过编译，变成CSS代码，由html文件使用

3、LESS语法：支持所有的 CSS 语法，基础上，可以加入一些灵活的策略（变量、嵌套、参数）

@mainColor:#add;

button{border:1px solid @mainColor;}

p{color:@mainColor}

ul{

color:;

.p{

color:;

}

4、如何使用 LESS（如何把LESS文件编译为 css文件）

a、客户端编译

页面直接引用 less 文件，同时引入 less.js文件---》由 less.js 文件负责将less文件变成css文件

--》服务器取回，less文件不会变成可以维护的css文件

b、手动编译：less---》css文件

必须安装编译环境：node.js--V8-->js的运行环境

包含一个组件： lessc--less的编译器

node的环境下:包含很多模块

node d:/npm/node_moduel/../bin/lessc e:/1.less > e:/1.css

c、工具进行：可以lessc配置成 webstrom 的filewatcher（文件监视器）---》自动调用lessc.cmd，生成css文件

5、LESS的语法

a、支持变量 @name:value;

b、混合--》把多个样式混合在一起

.s1 {color:red;} --》重用

.s2 {.s1;font-size:;}

c、带参数的混合

.s1(@a,@b:4px) {}

.s2{

.s1(#0f0,6px);

}

d、嵌套--》根据页面结构定义层次化的层次化的样式代码

.s1{

.s2{

}

>p{}

&:hover {}

}

e、运算符和函数---》帮助手册（代码示例部分）

运算 @w/12

函数 floor() darken/lighten()

f、@import "1.less";---在一个文件中引入其他文件的代码---》分成各个小文件，根据需要选择，减少文件的大小

情形一：index.css文件---@import "a.css";@import "b.css";

页面使用 index.css文件--》多次文件的下载---影响性能

情形二：

index.less文件--@import "a.less"; @import "b.css";

---先被编译为 index.css文件（成型）

页面使用 index.css

6、Boot的样式源代码

7、定制

a、瘦身

b、修改

c、增加或者删除

Bootstrap

Day01

1 回顾

框架：优秀的可以重复使用的代码，单独提取封装，供重复使用。完成复杂的功能

，提高代码的质量，提高开发的速度，帮助我们解决浏览器兼容等的问题。

angularJS jqm extJS 微信：

学习框架，不再只是记忆，而是理解动手查阅和编写的能力。

2 AngularJS

是一款基于MVC设计模式的JS框架，是基于JS封装的。

用在哪些场景？创建SPA（single page application）应用

设计原则和设计模式

拙劣的设计：

僵化性、脆弱性、不必要的重复、不必要的复杂性、晦涩性

前辈们给我们提供了反复使用的经验：

它可以提高代码的可重用行，增强系统的可维护性，以及解决一些列复杂的问题。

就是设计原则和模式

设计原则之简单认识：

1、 YAGNI 不写不需要的代码

2、KISS keep it simple and stupid

代码越简单越好（!().a），保持代码的简介和一目了然（傻瓜式）

3、DRY don't repeat yourself 使用封装和重用

4、高内聚低耦合(HCLC)

High Cohesion Low Coupling

聚合：一个组件内的不同部分之间的关系

耦合：两个组件间的关系

class Driver(Car car) class Car（）

{

start();

run();

stop();

}

5、SRP（Single Responsibility Principle）

单一责任的原则：模块具有独立性，a模块出问题，不影响其他模块

</div>

fdsjguiosa

</div>

6、OCP （Open Closed Principle）

对扩展开放，对于修改关闭

Open chest surgery is not needed when putting on a coat

代码可供别人进一步使用，但是不能被修改

7、LKP/LCP 最少知识法则

封装的功能单位要小，只与自己有关。

Dont't talk to Strangers.

设计模式：

23种设计模式+MVC模式

M：Model 业务数据（模型数据），对数据封装和定义。比如商品、订单、用户等

V： View 视图，业务数据的表现，由HTML来表示，

C: Controller 控制器，负责控制数据的获取、删除更新等

为什么需要MVC？

1、代码规模越来越大，要求切分责任，这是大势所趋。

2、为了复用，很多逻辑是一样的。

3、为了后期维护方便，修改一块功能不要影响其他功能。

MVC也好，现在流行的其他MV*框架也好，不是目的，只是一种手段，

终极目标都是让程序能够模块化和复用。

AngularJS的学习（ng）

09年发布，后被Google收购，是一个JS框架，适用于以数据操作为主的SPA应用，

实现数据的增删改查（CRUD）

AngularJS四大特征：

1、使用MVC模式

2、双向数据绑定

3、依赖注入

4、模块化设计

第一个AngularJS程序：

表达式：

ng表达式是由数据变量和运算符构成，可用于在HTML中执行运行算。

语法: {{ 表达式 }}

算数运算：加减乘除都没有问题，自增自减是不可以的

指令：

AngularJS中有作用域（控制范围）概念，在网页中，可以指定哪一块是ng的地盘，这个

范围，叫做AngularJS应用程序。

ng-app指令:

用途：指定AngularJS应用范围/作用域

语法:<ANY ng-app=""> </ANY>

ng-init指令：

用途：初始化ng应用程序的模型数据

语法：<ANY ng-init="赋值表达式"></ANY>

练习代码中出现的问题：

①重复的复制、粘贴

违背了DRY原则

②页面刷新的时候会闪烁

解决方案有2种：

1、ng-bind指令

2、ng-cloak

ng-bind 指令

用途：将指定的表达式的值输出到当前元素的innerHTML

用法：<ANY ng-bind=""></ANY>

ng-repeat指令

用途：为HTML添加循环功能.对于指定的对象或者数组的每个成员，

一次赋值给临时变量，将HTML元素循环输出一遍。

用法：<ANY ng-repeat="临时变量名 in 集合或者对象"></ANY>

ng-if指令

用途:当表达式为true时，当前元素会挂到DOM树上，

否则会删除

用法：<ANY ng-if='表达式'></ANY>

MVC模型：

Model：模型，表示数据，在AngularJS当中由JS变量来担当（$scope）

View:视图，表示HTML加上ng指令，用于显示数据，在AngularJS

由HTML来担当

Controller：控制器，负责数据的增删改查，在AngularJS当中由

function来担当。

由案例总结AngularJS MVC的创建使用步骤：

1、创建一个模块('myApp')，使用ngApp指令确定该模块的作用范围，

2、在模块当中声明一个控制器组件：通过模块的controller('myCtr',func)

使用ngController来指定的时候，我们要使用同一个名称（模块也是一样的道理）

3、为控制器注入$scope对象，声明模型数据，将数据声明为$scope的属性

4、在视图中绑定模型数据，进行呈现，使用{{}}也可以使用其他

Day2

AngularJS有四大特性：

MVC模式

双向数据绑定

依赖注入

模块化设计

Model View

方向1：Model的修改，View实现界面更新

方向2：View的修改，Model数据也跟着修改

主要用在表单提交和搜索

ng-model='kw' 在控制器当中，可以监听kw的变化。

$scope.$watch('kw',funciton()

{

})

ng-disabled='true/false'

ng-checked

ng-show

ng-hide

当我们需要对数据进行格式化，排序，只显示头几条数据，

过滤器：

$scope.price = 23.56;

<p>{{price | currency:'￥'}}</p>

currency number orderBy uppercase lowercase

<p>{{price | orderBy:'orderId':true}}</p>

对数据做额外操作，比如说JSON解析、大小写转换，需要

依赖AngularJS给提供：函数。

大小写转换。

json字符串和对象的转换

forEach函数

其他的自己去学习

总结MVC模式：

ng解决的是增强DOM的操作：如何让HTML页面元素灵活

且低耦合的去访问JS中的变量

为了不再代码中频繁的使用getElementById这种方式，

为了不再让代码受限于id，所以需要将页面显示和数据隔离。

此时数据作为变量存在，由控制器控制其作用域，不同的Controller有着

隔离的作用域

$scope 作用域

$rootScope 根作用域

$timeout

$interval

$http 可以用于向服务器发起AJAX请求，

异步的获取服务器端返回的数据，声明

为模型数据之后，即可在视图中呈现

用法1：

$http({method: 'GET', url: '/someUrl'}).

success(Function(data, status, headers, config) {

// this callback will be called asynchronously

// when the response is available

}).

error(Function(data, status, headers, config) {

// called asynchronously if an error occurs

// or server returns response with an error status.

});

用法2：

$http.get('/someUrl').success(successCallback);

$http.post('/someUrl', data).success(successCallback);

Bootdtrap笔记

0. 工具软件介绍

webstrom/apanta/slime
快捷键、创建文件模板、配置其他编译设置工具
工具里，直接用浏览器--》localhost://6333
项目建立在服务器管理--》htdocs

1. 响应式网页

1.1. 响应式网页概述

1.1.1 什么是响应式网页

页面可以实现自适应（屏幕大小自动调节），适用于门户网站、推广页面等，不适用于电商等复杂的应用

1.1.2 实现方式

手工编写、使用框架技术

1.1.3 所用技术

具体相关技术

1.1.4 如何测试

浏览器模拟、ADT、真实设备

1.2. 手工编写响应式网页

1、允许网页宽度自动调整：viewport

2、不使用绝对宽度

3、相对大小的字体

4、流式布局(float)

5、图片的自适应(max-width)

6、选择加载CSS(link)

7、CSS的@media规则

2. Bootstrap起步

2.1. 基本概念

2.1.1 什么是Bootstrap

是一种框架技术（CSS/js），实现响应式布局，同时提供了大量的css类、组件、插件，利用框架，可以快速高效的搭建应用。

2.1.2 主要构成

全局样式类、组件、插件、LESS定制

2.1.3 常用文件

CSS：LESS文件，编译为CSS

JS：IE兼容性的、插件的、bootlint

2.2. 环境搭建

2.2.1. 基本模版

创建一个响应式的网页应用，html的结构：

<html>

<head>

<script src=""

</head>

<body>

(function(){

var s=;

s.src=;

s.onload = function(){

bootlint.show...

};

document.body.append(s);

})();

</script>

</body>

</html>

2.2.2 bootstrap.css

CSS Reset:改写默认的样式

box-sizing:盒子模型的不同的方式（border/content-box）

3. 全局CSS样式

3.1 基本元素

为所有的元素定义了样式

3.2 布局容器

container/container-fluit

3.3 按钮

boot的几种情景模式（dange/info/..）

3.4 图片

响应式、非响应式（img-）

3.5 文本

text-

文本颜色，背景色、文本的对齐

3.6 排版

blockquote、code、abbr。。。

3.7 列表

list-style-unstyled/inline

3.8 表格

table table-bordered/hover/strip/respon

3.9 辅助样式

背景、浮动、隐藏

3.10 栅格系统

3.10.1 什么是栅格系统

boot提供的响应式方案，称为栅格系统

3.10.2 栅格系统的工作原理

将屏幕分为4种：lg/md/sm/xs

屏幕的宽度12等分，然后决定构成占据多少

3.10.3 栅格布局

行列：

</div>

设置某列，在不同的屏幕下占据不同的比例

位移：col-lg/md/sm/xs-offset-*

隐藏:hidden-lg/md/sm/xs

嵌套:在列中继续嵌套行列，实现复杂的布局

3.11. 表单

3.11.1 基础表单：每个元素都独占一行

3.11.2 行内表单：挤在同一行 <form class="form-inline" />

3.11.3 水平表单: <form class="form-hor"

代码实现上，如下所示：

</div>

</div>

</form>

常用的表单相关的样式：form-control/help-block/feedback/checkbox/radio

<div class="checkbox/radio"

4. 组件

组件是指，基于HTML元素，借助样式，创建具有特定显示效果的元素。Boot提供了无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

4.1 字体图标

先引入fonts文件夹（字体文件），class="glyphicon "

4.2 下拉菜单

必需结构：两层（第一层为包含框，第二层包含点击和弹出）

代码如下所示：

<div class="dropdown"> --》设置为相对定位

<div/ul class="dropdown-menu"> --》设置为绝对定位

隐藏菜单

</div/ul>

</div>

其他样式

4.3 按钮组

结构：两层（外层button-group，里层放置button）

4.3 警告框

常用于提示用户一些操作结果的时候。

结构：两层(外层alert，里层包含关闭按钮和具体的文本)

<div class="alert"

<a/button data-dismiss="alert"

<p>

4.4 导航

常用于一个大块中包含多个小块：列表的复杂应用

结构

<div/ul/l class="nav nav-tabs nav-pills bav-stacks"

<div/li

4.5 导航条

实现响应式导航的功能：

结构：

        <!—-导航头-->
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_intel">
            </button>
            <a href="#" class="navbar-brand">加logo</a>
        </div>

<div class="collapse navbar-collapse" id="nav_intel">
            
            <ul class="nav navbar-nav">
            </ul>

            
            <ul class="nav navbar-nav navbar-right">
            </ul>

            
            <form class="navbar-form navbar-right">
            </form>
        </div>
    </div>
</nav>

4.6 媒体对象

适用于一行中显示图片、视频以及文本，实现对齐

代码结构如：

</div>

常用样式：top/bottom/middle

4.7 列表组

代码结构如：

li*n

</ul>

<a></a>

...

<a></a>

</did>

4.8 面板

代码结构如：

</div>

4.9 输入框组

输入框组，用于实现将输入框和文本组成一组，使用类 input-group以及input-group-addon和form-control。

4.10 其他组件

路径导航(breadcrumb)

分页条(pagination)

翻页(pager)

标签(label)

徽章(badge)

巨幕(jumbotron)

页头(page-header)

缩略图(thumbnail)

水井(well)

进度条(progress/progress-bar)

5. 插件

5.1. JS插件概述

Bootstrap提供了十二个插件函数，这些插件中的大部分在jQueryUI库中有基本都对应的内容，但是更能精准控制样式，代码偏复杂。

需要注意的是，Boot 中的插件函数，都是基于JQ的，因此，需要引入JQ文件。

这12个插件函数有两种使用方式：

传统JS调用方式，例如：

$('xxx').dropdown/alert/tab/modal( );

使用data-*扩展属性方式，例如：

每一个data-*属性，都对应一个js插件的函数代码。

5.2 下拉菜单

5.3 警告框

5.3. 标签页

标签页：使用导航组件作为标签，再使用其他元素构建具体的内容区域

标签页的基本结构为：

</ul>

</div>

5.3 折叠框

折叠组件的基本结构如下所示：

....

</div>

折叠效果有两个重要的扩展应用：响应式导航条、手风琴效果。

</div>

</div>

5.4 工具提示

tooltip

5.5 弹出框

popover

5.6 模态框

modal

结构如下：

<div class="modal"> 半透明遮罩层

<div class="modal-dialog"> 宽高、定位层

<div class="modal-content"> 背景色、边框、倒角层

</div>

弹出或者关闭：data-dismiss="modal"

js：$().modal();

5.7 轮播Carousel

轮播必需的结构如下：

</div>

</div>

其他：

1、 carousel-caption

2、 carousel-control

3、 carousel-indicator

5.8 附加菜单

结构如下所示：

</ul>

</div>

5.9 滚动监听

Bootstrap中“滚动监听”插件的使用方法：

页面有多个元素具备ID属性
需要一个nav，其中的<a href="ID">
添加样式：

body { position: relative }

6. LESS

6.1. LESS概述

1、什么是 LESS

2、如何使用 LESS

6.2. LESS语法

6.2.1. 注释

6.2.2. 变量

6.2.3. 混合

6.2.4. 带参混合

6.2.5. 嵌套规则

6.2.6. 运算

6.2.7. 函数

6.2.8. 文件导入

6.3. 定制

6.3.1. Boot源码

6.3.2. 使用定制

王春梅联系方式：

wangcm@tedu.cn

QQ:1838367529

CSS面试题答案

Doctype作用是什么？严格模式与混杂模式分别是如何触发这两种模式的，区分它们有何意义？

（1）<!DOCTYPE> 声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

（2）严格模式的排版和JavaScript运作模式是以该浏览器支持的最高标准运行。

（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，称为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span img input select strong（强调的语气）

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素：

鲜为人知的是：

如何理解CSS的盒子模型？

每个HTML元素都是长方形盒子。

（1）盒子模型有两种，IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。

（2）盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。

link和@import的区别是？

（1）link属于XHTML标签，而@import是CSS提供的。

（2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。

（3）import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。

（4）link方式的样式权重高于@import的权重。

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 3新增伪类有哪些？

l id选择器（# myid）

l 类选择器（.myclassname）

l 标签选择器（div、h1、p）

l 相邻选择器（h1 + p）

l 子选择器（ul < li）

l 后代选择器（li a）

l 通配符选择器（ * ）

l 属性选择器（a[rel = "external"]）

l 伪类选择器（a: hover, li: nth - child）

可继承： font-size font-family color, UL LI DL DD DT;

不可继承：border padding margin width height ;

优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准。

优先级为：

!important > id > class > tag

important 比内联优先级高

CSS3新增伪类举例：

l p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。

l p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。

l p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。

l p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。

l p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。

l :enabled、:disabled 控制表单控件的禁用状态。

l :checked 单选框或复选框被选中。

如何居中div，如何居中一个浮动元素？

（1）给div设置一个宽度，然后添加margin:0 auto属性

div{

width:200px;

margin:0 auto;

}

（2）居中一个浮动元素

确定容器的宽高，如宽500、高 300的层，设置层的外边距：

.div {

Width:500px ; height:300px;//高度可以不设

Margin: -150px 0 0 -250px;

position:relative;相对定位

//方便看效果

left:50%;

top:50%;

}

浏览器的内核分别是什么？经常遇到的浏览器的兼容性有哪些？原因、解决方法是什么，常用Hack的技巧有哪些？

（1）IE浏览器的内核Trident、Mozilla的Gecko、Google的WebKit、Opera内核Presto；

（2）经常遇到的浏览器的兼容性：

l png24为的图片在IE6浏览器上出现背景，解决方案是做成PNG8。

l 浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin:0;padding:0;}来统一。

l IE6双边距bug:块属性标签float后，又有横行的margin情况下，在IE 6显示margin比设置的大。

l 浮动ie产生的双倍距离#box{ float:left; width:10px; margin:0 0 0 100px;}这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入_display:inline;将其转化为行内属性。（_这个符号只有IE 6会识别）。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。

接着，再次使用“+”将IE 8和IE 7、IE 6分离开来，这样IE 8已经独立识别。

css

.bb{

/*所有识别*/

.background-color:#00deff\9; /*IE6、7、8识别*/

+background-color:#a200ff; /*IE6、7识别*/

_background-color:#1e0bd1; /*IE6识别*/

}

（3）常用Hack的技巧：

IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。

IE下，even对象有x,y属性，但是没有pageX,pageY属性；Firefox下，event对象有pageX,pageY属性，但是没有x,y属性。解决方法是条件注释，缺点是在IE浏览器下可能会增加额外的HTTP请求数。

Chrome 中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入 CSS属性-webkit-text-size-adjust: none;来解决。

超链接访问过后hover样式就不出现了被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

HTML5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？

HTML5现在已经不是SGML的子集，主要是关于图像、位置、存储、地理定位等功能的增加。新特性有：

l 绘画canvas元素

l 用于媒介回放的 video 和 audio 元素

l 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

l sessionStorage 的数据在浏览器关闭后自动删除

l 语意化更好的内容元素，比如 article、footer、header、nav、section

l 表单控件，calendar、date、time、email、url、search

CSS3实现圆角、，阴影、对文字加特效，增加了更多的CSS选择器，多背景rgba，新的技术有webworker、websockt、Geolocation。

移除的元素包括：

l 纯表现的元素 basefont、big、center、font、 s、strike、tt、u；

l 对可用性产生负面影响的元素 frame、frameset、noframes。

浏览器兼容问题解决方案：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式，当然最好的方式是直接使用成熟的框架：

<!--[if lt IE 9]>

<![endif]-->

你怎么来实现页面设计图，你认为前端应该如何高质量完成工作？

l 首先划分成头部、body、脚部；

l 实现效果图是最基本的工作，精确到2px；

l 与设计师，产品经理的沟通和项目的参与

l 做好的页面结构，页面重构和用户体验

l 处理Hack兼容，写出优美的代码格式

l 针对服务器的优化、拥抱HTML5。

列出display的值，说明它们的作用。position的值里，relative和absolute定位原点是？

display的值：

l block 像块类型元素一样显示。

l none 缺省值。像行内元素类型一样显示。

l inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。

l list-item 像块类型元素一样显示，并添加样式列表标记。

relative和absolute定位原点：

l absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

l relative：生成相对定位的元素，相对于其正常位置进行定位。

页面重构怎么操作？

把“未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点”变成“让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。”的过程就是网站重构

网站为什么要进行重构（网站重构的好处）

a、使页面加载得更快速；

b、降低带宽带来的费用，节约成本；

c、让你在修改设计时更有效率而代价更低；

d、帮助你的整个站点保持视觉的一致性；

e、更利于搜索引擎的检索（符合SEO的规范）；

f、令站点更容易被各种浏览器和用户

编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

语义化的理解？

l HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

l 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；

l 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。

l 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

HTML5的离线储存？

l localStorage 长期存储数据，浏览器关闭后数据不丢失；

l sessionStorage 数据在浏览器关闭后自动删除。

为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法就是：* {padding: 0; margin: 0;} （笔者不建议这样）

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

对BFC规范的理解？

BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

iframe有哪些缺点？

l iframe会阻塞主页面的Onload事件；

l iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过JavaScript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

CSS是怎样定义权重规则的？

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/

div{

}

/*权重为10*/

.class1{

}

/*权重为100*/

#id1{

}

/*权重为100+1=101*/

#id1 div{

}

/*权重为10+1=11*/

.class1 div{

}

/*权重为10+10+1=21*/

.class1 .class2 div{

}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。

如何理解表现与内容相分离？

表现与结构相分离简单的说就是HTML中只有标签元素表现完全是由CSS文件控制的。

如何解决IE6的双边距问题？

解决IE 6双边距问题块级元素就加display：inline；行内元素转块级元素display：inline后面再加display：table。

如何定义高度为1px的容器？

div{

heigh：1px;

width:10px;

background:#000;

overflow:hidden

}

IE 6下这个问题是默认行高造成的，overflow:hidden | zoom:0.08 | line- height:1px这样也可以解决。

如何解决IE 6的3像素问题？

_zoom:1; margin-left: value; _margin-left: value-3px;

Firefox下文本无法撑开容器的高度，如何解决？

清除浮动 .clear{ clear:both; height:0px; overflow:hidden;}

怎么样才能让层显示在Flash之上呢?

解决的办法是给Flash设置透明属性

cursor:hand在FF下不显示小手，如何解决？

cursor; pointer;

在IE中内容会自适应高度，而FF不会自适应高度，怎么办？

在要自适应高度的层中加一个层，样式为

.clear{clear:both;font-size:0px;height:1px}，

这样解决有一个小小的问题，高度会多一个像素。还有一种解决方法，给当前层加上一个伪类。

#test:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

前端页面有哪三层构成，分别是什么？作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer）由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。

你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么？经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

这个笔者不多说了，只是简单说明下，没有标准答案。兼容性测试参考浏览器基准。兼容性问题处理的要点：

（1）DOCTYPE影响CSS处理

（2）盒模型影响CSS处理

JavaScript面试

1、documen.write和 innerHTML的区别

答案：

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

2、浏览器检测通过什么？

答案：

（1） navigator.userAgent

（2）不同浏览器的特性，如addEventListener

3、JavaScript有哪几种数据类型？

答案：

简单，Number，Boolean，String，Null，Undefined

复合，Object，Array，Function

4、截取字符串“abcdefghi”的“fghi”

答案：

var myvalue=”abcdefghi”;

var jiequ=myvalue.substring(myvalue.length-4,myvalue.length);

alert(jiequ);

5、写出下面的运算结果

答案：

alert(typeof(null)); // object
alert(typeof(undefined)); // undefined
alert(typeof(NaN)); // number
alert(NaN==undefined); // false
alert(NaN==NaN); // false
var str="123abc";
alert(typeof(str++)); // number
alert(str);// NaN

6、问执行完毕后 x, y, z 的值分别是多少？

var x = 1, y = z = 0;

function add(n) {

n = n+1;

}

y = add(x);

function add(n) {

n = n + 3;

}

z = add(x);

答案：1、undefined、undefined

7、push()、pop()、shift()、unshift()分别是什么功能?

答案：

/*push 方法

将新元素添加到一个数组中，并返回数组的新长度值。*/

var a=[1,2,3,4];

a.push(5);

/*pop 方法

移除数组中的最后一个元素并返回该元素。*/

var a=[1,2,3,4];

a.pop();

/*shift 方法

移除数组中的第一个元素并返回该元素。*/
var a=[1,2];

alert(a.shift());

/*unshift 方法

将指定的元素插入数组开始位置并返回该数组。*/

8、如何阻止事件的冒泡?

答案：

//阻止冒泡的方法

function stopPP(e)

{

var evt = e|| window.event;

//IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法

evt.stopPropagation ?evt.stopPropagation() : (evt.cancelBubble=true);

}

9、写出程序运行的结果?

for(var i=0, j=0; i<10, j<6; i++, j++){

k = i + j;

}

答案：10

10、编写一个方法求一个字符串的字节长度

答案：

/*假设：

一个英文字符占用一个字节，一个中文字符占用两个字节*/

function getBytes(str){

var len = str.length,

bytes = len,

i = 0;

for(; i<len; i++){

if (str.charCodeAt(i) > 255) bytes++;

}

return bytes;

}

alert(getBytes("玩,as"));

11、JavaScript中如何对一个对象进行深度clone？

答案：

function cloneObject(o) {

if(!o || 'object' !== typeof o) {

return o;

}

var c = 'function' === typeof o.pop ? [] : {};

var p, v;

for(p in o) {

if(o.hasOwnProperty(p)) {

v = o[p];

if(v && 'object' === typeof v) {

c[p] = Ext.ux.clone(v);

}

else {

c[p] = v;

}

return c;

};

12、如何控制alert中的换行？

答案：

\n alert(“p\np”);

13、请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：

var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

答案：

function parseQueryString(url){

var params = {},

arr = url.split("?");

if (arr.length <= 1)

return params;

arr = arr[1].split("&");

for(var i=0, l=arr.length; i<l; i++){

var a = arr[i].split("=");

params[a[0]] = a[1];

}

return params;

}

var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2",

ps = parseQueryString(url);

console.log(ps["key1"]);

14、如何控制网页在网络传输过程中的数据量?

答案：启用GZIP压缩

保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

15、以下代码运行结果

function say() {

// Local variable that ends up within closure

var num = 888;

var sayAlert = function() { alert(num); }

num++;

return sayAlert;

}

var sayAlert = say();

sayAlert()

答案：889

16、请实现ECMAScript 5中的Object.getPrototypeOf() 函数

答案：

function proto(object) {

return !object? null

: '__proto__' in object? object.__proto__

: /* not exposed? */ object.constructor.prototype

}

17、如何实现Array.prototype.forEach？

答案：

if (!Array.prototype.forEach) {

Array.prototype.forEach = function(fn){

for ( var i = 0; i < this.length; i++ ) {

fn( this[i], i, this );

}

};

}

["a", "b", "c"].forEach(function(value, index, array){

assert( value, "Is in position " + index + " out of " + (array.length - 1) );

});

18、如何将arguments转为数组？

答案：

Object.prototype.slice.call(arguments);

19、以下程序运行结果？

var ninja = function myNinja(){

alert(ninja == myNinja);

};

ninja();

myNinja();

答案：true、报错（error - myNinja is not defined.）

20、如何获取光标的水平位置？

答案：

function getX(e){

e = e || window.event;

//先检查非IE浏览器，在检查IE的位置

return e.pageX || e.clentX + document.body.scrollLeft;

}

21、兼容浏览器的获取指定元素（elem）的样式属性（name）的方法

答案：

function getStyle(elem, name){

if(elem.style[name]){//如果属性存在于style[]中，直接取

return elem.style[name];

}

else if(elem.currentStyle){//否则尝试IE的方法

return elem.currentStyle[name];

}//尝试W3C的方式

else if(document.defaultView && document.defaultView.getComputedStyle){

name = name.replace(/([A-Z])/g, "-$1");//W3C中为textAlign样式，转为text-align

name = name.toLowerCase();

var s = document.defaultView.getComputedStyle(elem, "");

return s && s.getPropertyValue(name);

}else{

return null;

}

22、Javascript中实现类似PHP的print_r函数

答案：

function print_r(theObj) {

var retStr = '';

if (typeof theObj == 'object') {

retStr += '<div style="font-family:Tahoma; font-size:7pt;">';

for (var p in theObj) {

if (typeof theObj[p] == 'object') {

retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';

retStr += '<div style="padding-left:25px;">' + print_r(theObj[p]) + '</div>';

} else {

retStr += '<div>['+p+'] => <b>' + theObj[p] + '</b></div>';

}

retStr += '</div>';

}

return retStr;

}

23、以下程序运行结果？

var b = parseInt("01");

alert("b="+b);

var c = parseInt("09/08/2009");

alert("c="+c);

答案：是b=1、c=0。

24、以下程序的运行结果？

var foo = 'hello';

(function() {

var foo = foo || 'world';

console.log(foo);

})();

答案：world

25、

答案：10

26、如何规避javascript多人开发函数重名问题？

答案：

(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀

(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只

要类名不重复就行

27、前端开发有哪些优化问题？

l 减少http请求次数：css spirit,data uri

l JS，CSS源码压缩

l 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

l 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

l 用setTimeout来避免页面失去响应

l 用hash-table来优化查找

l 当需要设置的样式很多时设置className而不是直接操作style

l 少用全局变量

l 缓存DOM节点查找的结果

l 避免使用CSS Expression

l 图片预载

l 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

28、什么是ajax，为什么要使用Ajax（请谈一下你对Ajax的认识）?

答案：AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。

Ajax包含下列技术：

l 基于web标准（standards-based presentation）XHTML+CSS的表示；

l 使用 DOM（Document Object Model）进行动态显示及交互；

l 使用 XML 和 XSLT 进行数据交换及相关操作；

l 使用 XMLHttpRequest 进行异步数据查询、检索；

l 使用 JavaScript 将所有的东西绑定在一起。

为什么要用ajax：Ajax应用程序的优势在于：

l 通过异步模式，提升了用户体验

l 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

l Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

29、AJAX请求总共有多少种CALLBACK

答案：Ajax请求总共有八种Callback

l onSuccess

l onFailure

l onUninitialized

l onLoading

l onLoaded

l onInteractive

l onComplete

l onException

30、请给出异步加载js方案，不少于两种

答案：默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

异步加载方式：

l defer，只支持IE

l async：

l 创建script，插入到DOM中，加载完毕后callBack，见代码：

function loadScript(url, callback){

var script = document.createElement("script")

script.type = "text/javascript";

if (script.readyState){ //IE

script.onreadystatechange = function(){

if (script.readyState == "loaded" ||

script.readyState == "complete"){

script.onreadystatechange = null;

callback();

}

};

} else { //Others: Firefox, Safari, Chrome, and Opera

script.onload = function(){

callback();

};

}

script.src = url;

document.body.appendChild(script);

}

jQuery面试

1．请简要说明jQuery框架的显著特点。

答：jQuery强调的理念是写的少，做的多(write less，do more)。其主要特点有：轻量级、强大的选择器、漂亮的DOM操作封装、可靠的事件处理机制、完善的Ajax处理、出色的浏览器兼容性、链式操作方式、丰富的插件支持、开源产品。

2．eval是做什么的？

答：eval功能是把对应的字符串解析成JS代码并运行；但不安全，非常耗性能。

3．null与undefined的区别？

答：Undefined类型只有一个值，即undefined，当声明的变量还未被初始化时，变量的默认值为undefined。Null类型也只有一个值，即null，null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

4．谈谈对this对象的理解。

答：this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。

5．use strict是什么意思？

答：表示代码标志为“严格模式”，则其中运行的所有代码都必然是严格模式下的。如果在语法检测时发现语法问题，则整个代码块失效，并导致一个语法异常。如果在运行期出现了违反严格模式的代码，则抛出执行异常。

6．简述new操作符的功能。

答：

（1）创建一个空对象，使用this变量引用该对象，同时还继承了该函数的原型

（2）属性和方法被加入到this引用的对象中。

（3）新创建的对象由this所引用，并且最后隐式的返回this。

7．描述typeof关键字的功能。

答：typeof可用来判断一个变量是否为空或是什么类型的变量。typeof一般只能返回如下几个结果：number、boolean、string、function、object、undefined。

8．描述instanceof关键字的功能。

答：instanceof可用来判断一个变量是否为空或是什么类型的变量。如果想判断一个变量是否某个对象的实例建议使用instanceof关键字。

9．简述hasOwnProperty函数的功能。

答：hasOwnProperty函数是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。

10．简述一下isPrototypeOf函数的功能。

答：isPrototypeOf函数是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。

11．谈谈对JSON的了解。

答：JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。其是基于JavaScript的一个子集，具有数据格式简单，易于读写，占用空间小的特点。

12．Ajax是什么？

答：AJAX即“Asynchronous Javascript+XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

13．同步请求和异步请求的区别？

答：

l 同步：提交请求→等待服务器处理→处理完毕返回，这个期间客户端浏览器不能干任何事。

l 异步：请求通过事件触发→服务器处理（这是浏览器仍然可以作其他事情）→处理完毕。

14．jQuery如何解决跨域问题？

答：借助JSONP这个非官方的协议，其允许在服务器端集成script tags返回至客户端，通过callback的形式实现跨域访问JSONP即JSON with Padding。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。

15．异步加载的方式有哪些？

答：

（1）defer，只支持IE；

（2）async；

（3）创建script，插入到DOM；

16．如何编写高性能的jQuery代码？

答：定义jQuery变量的时候添加var关键字；DOM操作请务必记住缓存（cache）；尽量使用链式操作；尽量把一些代码都整合到一起；避免使用全局类型的选择器；尽量使用.on方法，因为其它任何方法都是最终使用.on方法来实现的；尽量使用最新版本的jQuery框架类库。

17．jQuery与jQuery UI有啥区别？

答：

（1）jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

（2）jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。

18．描述基于class的选择器与基于id选择器在性能上的区别。

答：基于class的选择性的性能相对于基于id选择器开销很大，因为其需要遍历所有DOM元素。

19．jQuery链式调用的最大优点是什么？

答：避免频繁操作的DOM，链式调用可以实现先缓存再操作。

20．一句话说明内存泄漏的定义。

答：内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

21．那些操作会造成内存泄漏？

答：

l 给DOM对象添加的属性是一个对象的引用。

l DOM对象与JS对象相互引用。

l 给DOM对象用attachEvent绑定事件。

l 从外到内执行appendChild，这时即使调用removeChild也无法释放。

l 反复重写同一个属性会造成内存大量占用。

22．描述垃圾回收器的功能。

答：垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

23．documen.write和innerHTML的区别？

答：document.write只能重绘整个页面，innerHTML可以重绘页面的一部分。

24．jQuery框架的源码看过吗？能不能简单说一下它的实现原理？

答：jQuery框架通过改变javascript编码方式来创建了全新的编程理念。譬如关于jQuery声明的流程：先查找（创建）jQuery对象，然后调用jQuery对象的方法完成我们需要完成的工作。jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的，这个流程就是jQuery的编码逻辑核心。

25．jQuery中如何将对象转化为json字符串，然后再转化回来？

答：可以通过JSON.stringify方法把一个对象转换成json字符串，再通过JSON.parse方法把一个json字符串解析成对象。

26．描述一下.get()、[]和.eq()方法的区别。

答：eq返回原生jQuery对象，截取某些el元素生成jQuery新对象；get和[]返回的都是原生的DOM对象，原理一致；get和[]区别是get是通过jQuery对象的方法获取，[]是根据jQuery是一个数组对象获取。

27．描述一下context的概念。

答：context就是限定查找的范围，context必须是一个DOM元素，context底层还是用了.find()方法来实现的。

28．描述一下.delegate()和.live()方法的区别。

答：delegate方法指定了委托对象，live方法委托给了jQuery的context，1.9版本以后用on方法代替了。

29．描述一下.attr()和.prop()方法的区别。

答：.attr()方法是操作属性节点，.prop()方法是操作获取到的对应js对象的属性。在遇到要获取或设置checked、selected、readonly和disabled等属性时，用prop方法显然更好。.prop()方法更高效，因为.attr()方法要访问DOM。

30．jQuery中的load方法一般怎么用的？

答：load方法一般在载入远程HTML代码并插入到DOM中的时候用，通常用来从Web服务器上获取静态的数据文件。如果要传递参数的话，可以使用$.get()或$.post()方法。

posted @ 2016-12-29 11:56 acfun的怨念阅读(308) 评论(0) 收藏举报

刷新页面返回顶部