web学习笔记

常用属性............................................................................................ 1

Html基础........................................................................................... 3

常用快捷键................................................................................ 3

认识大前端................................................................................ 4

前端工作就是 : 将设计图通过 Html,CSS,JS等技术生成网页............................................................................................ 4

应用于 : 移动端  PC端................................................... 4

用户体验             : UI设计................................................ 4

学习态度............................................................................ 4

认识网页.................................................................................... 4

网页由文字,图片,按钮,超链接等组成。........................... 4

Web标准............................................................................ 4

浏览器................................................................................ 5

浏览器内核......................................................................... 5

浏览器和服务器的那点事.................................................................................................... 6

Url地址.................................................................................................... 7

认识html.................................................................................... 7

Html 全称 : HyperText Markup Language........................ 7

Html结构标准(html 5 才开始的)...................................... 8

Html标签分类.................................................................... 8

Html标签关系分类............................................................ 8

开发工具............................................................................ 9

设置默认浏览器............................................................... 10

标签.......................................................................................... 10

单标签.............................................................................. 10

双标签.............................................................................. 11

文本标签.......................................................................... 11

图片标签.......................................................................... 12

路径.......................................................................................... 12

相对路径.......................................................................... 12

绝对路径.......................................................................... 13

超链接...................................................................................... 13

锚链接.............................................................................. 13

空链  不知道链接到那个页面的时候,用空链............. 14

压缩文件下载  不推荐使用.................................................................................................. 14

超链接优化写法 <base target="_blank">   让所有的超链接都在新窗口打开................................................................... 14

另存为   ctrl+shift+s............................................................... 15

特殊字符.................................................................................. 15

列表.......................................................................................... 15

无序列表.......................................................................... 15

有序列表.......................................................................... 16

自定义列表....................................................................... 16

音乐标签.................................................................................. 17

滚动.......................................................................................... 17

head里的一些常用东西........................................................... 18

!+tab   html5的标签结构............................................... 18

Charset   编码................................................................. 18

关键字.............................................................................. 18

网页描述.......................................................................... 18

网页重定向....................................................................... 19

链接外部样式表(css)........................................................ 19

设置icon图标.................................................................. 19

表格.......................................................................................... 20

表格的标准结构............................................................... 21

表头和单元格合并........................................................... 22

表格标题、边框颜色、内容垂直对齐............................ 22

表单.......................................................................................... 24

表单的作用是收集信息。................................................ 24

标签语义化.............................................................................. 28

Css基础........................................................................................... 28

Css概念................................................................................... 28

选择器写法....................................................................... 29

选择器...................................................................................... 29

基础选择器....................................................................... 29

复合选择器....................................................................... 31

文本元素.................................................................................. 34

属性.................................................................................. 34

文本属性连写................................................................... 35

文字的表达方式............................................................... 35

样式表书写位置....................................................................... 36

标签分类(显示方式)................................................................ 37

块元素.............................................................................. 37

行内元素.......................................................................... 37

行内块元素(内联元素)..................................................... 37

块元素、行内元素 转换.................................................. 38

css三大特性............................................................................. 39

层叠性.............................................................................. 39

继承性.............................................................................. 39

优先级  默认样式<标签选择器<类选择器<id选择器<行内样式<!important.................................................................... 39

链接伪类.................................................................................. 40

文本修饰.......................................................................... 40

背景属性.................................................................................. 41

background-color     背景颜色..................................... 41

background-image    背景图片...................................... 41

Background-repeat    repeat(默认)  |  no-repeat |   repeat-x   |  repeat-y     背景平铺...................................... 41

Background-position  left  |  right  |  center  |  top  | bottom  背景定位.................................................................... 41

Background-attachment   背景是否滚动   scroll  |  fixed.......................................................................................... 41

背景属性连写................................................................... 41

行高.......................................................................................... 42

行高的单位....................................................................... 42

补充:................................................................................. 43

PX特点............................................................................ 43

EM特点............................................................................ 43

1 盒子模型............................................................................ 44

1.1 边框  border.......................................................... 44

1.2 边框合并   border-collapse:collapse;..................... 45

1.3 获取焦点................................................................. 45

1.4 内边距..................................................................... 46

1.5 外边距..................................................................... 46

1.6 行内元素可以定义左右的外边距,上下会被忽略掉。.......................................................................................... 47

文档流(标准流)................................................................... 47

浮动布局.................................................................................. 47

浮动的作用....................................................................... 48

清除浮动.................................................................................. 48

Overflow.................................................................................. 51

定位.......................................................................................... 51

定位的盒子居中显示............................................................... 52

标签包含规范.......................................................................... 53

规避脱标流.............................................................................. 55

图片和文字垂直居中对齐....................................................... 55

Css可见性................................................................................ 56

css之内容移除(网页优化).................................................. 56

Css精灵图................................................................................ 57

属性选择器.............................................................................. 57

emmet快捷键:....................................................................... 57

html:......................................................................................... 58

生成结构的快捷键:....................................................... 58

生成id名和类名.............................................................. 58

生成同级元素:............................................................... 58

生成子类标签................................................................... 58

带固定数量的标签:.......................................................... 58

ul>li*5+tab........................................................................ 58

带有序号名称................................................................... 58

生成带有内容的标签:................................................... 58

css............................................................................................. 59

前端基本功—javascript................................................................... 59

JS概述..................................................................................... 59

JS作用.............................................................................. 59

浏览器工作原理(了解)..................................................... 60

弱类型脚本语言(解释型语言,解析执行与编译执行)..... 60

解析执行与编译执行....................................................... 60

弱类型脚本语言............................................................... 60

组成(前端标准和JS组成).................................................. 61

前端标准(HTML/CSS/JS)........................................... 61

JS组成.............................................................................. 61

输出语句.................................................................................. 61

引入方式.................................................................................. 62

内嵌式(学习期间用)................................................... 62

外链式(实际开发)....................................................... 62

变量.......................................................................................... 62

命名规则.......................................................................... 62

变量使用.......................................................................... 62

数据类型.................................................................................. 63

数据类型划分................................................................... 63

字面量.............................................................................. 63

简单数据类型介绍........................................................... 63

数据类型转换.......................................................................... 65

任何简单类型转换成String(三种方法)...................... 66

任何简单类型转换成Number.......................................... 66

任何简单类型转换成Boolean.......................................... 67

操作符...................................................................................... 67

操作符种类....................................................................... 67

优先级.............................................................................. 68

&&和||运算....................................................................... 68

流程控制.................................................................................. 69

循序结构.......................................................................... 69

选择结构.......................................................................... 69

循环结构 (js中没有块级作用域,只有在function中有). 70

案例:...................................................................................... 72

数组.......................................................................................... 72

数组的概述....................................................................... 72

数组的定义....................................................................... 73

数组的操作....................................................................... 73

遍历数组(获取并操作数组中的每一个元素)(!!!重点!!!)........................................................................... 74

案例:.............................................................................. 74

调试(打断点)............................................................... 74

函数基础.................................................................................. 75

函数概述.......................................................................... 75

函数的定义....................................................................... 75

参数.................................................................................. 75

返回值.............................................................................. 76

案例.................................................................................. 76

函数名、函数体和函数加载问题(重点记忆)............. 77

作业:.............................................................................. 77

函数定义.......................................................................... 77

变量和作用域(隐式全局变量和变量声明提升)......... 78

小知识.............................................................................. 80

函数高级.................................................................................. 80

匿名函数(了解)........................................................... 80

函数是一种类型(了解)................................................ 81

函数作为参数(了解)................................................... 81

递归(理解)................................................................... 81

对象和面向对象....................................................................... 81

JS中的对象(Object)基于面向对象............................. 81

创建自定义对象............................................................... 82

对象字面量和JSON......................................................... 82

Json组成.......................................................................... 83

for...in...遍历JSON.......................................................... 83

参数和传值问题............................................................... 83

数组高级API........................................................................... 84

学习API的方法............................................................... 84

Array的内置方法............................................................. 84

事件.......................................................................................... 88

概述.................................................................................. 88

事件三要素....................................................................... 88

案例.................................................................................. 90

DOM概述................................................................................ 90

解析过程.......................................................................... 90

DOM   (文档对象模型).................................................. 90

DOM的数据结构(树状)............................................. 92

HTML的组成部分为节点( Node )............................ 92

DOM节点的获得............................................................. 92

DOM 访问关系(节点的获得)..................................... 93

DOM节点操作 (!!!!!重点!!!!!)......... 96

DOM详解(属性操作)......................................................... 97

DOM元素........................................................................ 97

案例.................................................................................. 98

value和innerHTML和innerText和textContent............. 98

DOM详解................................................................................ 98

DOM案例........................................................................ 98

总结.................................................................................. 99

工具类的封装tools.js(了解,尝试).................................. 100

DOM创建元素............................................................... 101

内置对象BOM....................................................................... 101

Date................................................................................. 102

String.............................................................................. 103

Math................................................................................ 105

offset家族.............................................................................. 106

三大家族和一个事件对象.............................................. 106

Offset家族简介.............................................................. 106

offsetLeft和style.left区别............................................. 107

动画和封装............................................................................ 107

动画定义........................................................................ 107

动画的种类..................................................................... 108

动画原理........................................................................ 108

体验匀速动画................................................................. 108

案例........................................................................................ 108

焦点图............................................................................ 108

切换图............................................................................ 109

无缝滚动........................................................................ 109

缓动动画................................................................................ 109

三个函数........................................................................ 109

缓动动画原理................................................................. 109

体验缓动动画................................................................. 110

分析为什么没有到达指定位置...................................... 110

offsetLeft和style.left的值的获取问题.......................... 110

按例:筋斗云................................................................. 110

第二家族scroll....................................................................... 111

Scroll家族组成.............................................................. 111

获取title、body、head、html标签............................... 112

Json回顾........................................................................ 112

Scroll()的封装................................................................ 113

案例................................................................................ 114

小知识.................................................................................... 114

onscroll事件................................................................... 114

屏幕跳转........................................................................ 114

前端基本功—javascript 第八天............................................ 114

今日内容:............................................................................ 114

scroll家族.............................................................................. 115

案例................................................................................ 115

事件对象(event)................................................................ 115

事件对象的获取(event的获取)................................. 115

兼容获取方式有两种:................................................. 116

event内容重要内容........................................................ 116

screenX、pageX和clientX的区别................................ 117

pageY和pageX的兼容写法(低版本不支持,很重要)................................................................................................ 118

新事件(onmousemove).............................................. 118

案例................................................................................ 118

第三大家族client................................................................... 119

主要成员........................................................................ 119

三大家族区别(三大家族总结).................................. 119

client家族特殊用法之:检浏览器宽/高度(可视区域)..... 120

Onresize事件.................................................................. 120

案例:根据浏览器可视区域大小,给定背景色........... 120

事件总结........................................................................ 120

获得屏幕宽高................................................................. 121

冒泡........................................................................................ 121

阻止冒泡........................................................................ 121

addEventListener(参数1,参数2,参数3)................... 121

案例................................................................................ 122

缓动框架................................................................................ 123

封装框架遇到的两个问题.............................................. 123

获取任意类型的CSS样式的属性值............................. 123

开闭原则........................................................................ 123

回调函数........................................................................ 124

案例(缓动框架的应用).............................................. 124

缓动框架存在的问题..................................................... 125

缓动框架案例................................................................. 125

正则表达式(RegExp)........................................................ 126

概述................................................................................ 126

正则表达式的特点是:................................................. 127

正则表达式声明............................................................. 127

test() 方法...................................................................... 128

正则内部类(帮我们写好的工具直接使用)............... 128

正则边界(重点)......................................................... 130

量词(重点)................................................................. 130

案例:............................................................................ 130

replace 函数................................................................... 131

jQuery............................................................................................ 132

jQuery 基础课程—jQuery选择器........................................ 132

为什么要学jQuery?..................................................... 132

jQuery是什么?............................................................. 133

如何使用jQuery?(重点).......................................... 134

jQuery详细解释............................................................. 135

JS跟jQuery的区别是什么?(理解)......................... 140

为什么要学jQuery选择器?......................................... 141

强大的jQuery选择器(重点)..................................... 141

jQuery 基础课程—jQuery-DOM操作.................................. 143

使用jQuery操作DOM.................................................. 143

为什么要使用jQuery操作DOM................................... 143

重点内容........................................................................ 144

样式操作........................................................................ 145

jQuery动画是什么?..................................................... 147

jQuery节点操作............................................................. 153

操作form表单............................................................... 156

尺寸位置操作................................................................. 158

jQuery其他必备知识............................................................. 161

重点内容........................................................................ 161

操作form表单............................................................... 161

尺寸位置操作................................................................. 163

jQuery事件机制............................................................. 165

jQuery补充.................................................................... 170

jQuery插件机制............................................................. 172

H5................................................................................................... 173

1.1 认识HTML5................................................................... 173

1.2 语法规范......................................................................... 174

语义标签................................................................................ 175

常用新语义标签............................................................. 176

兼容处理........................................................................ 176

表单........................................................................................ 177

输入类型  (表单类型,表单元素,表单属性,表单事件.)......................................................................................... 177

表单元素(标签)......................................................... 178

表单属性........................................................................ 179

表单事件........................................................................ 180

案例练习........................................................................ 181

181

多媒体.................................................................................... 182

音频................................................................................ 182

视频................................................................................ 183

DOM扩展.............................................................................. 184

获取元素........................................................................ 184

类名操作........................................................................ 184

自定义属性..................................................................... 185

案例练习 (tab 切换)...................................................... 185

新增API................................................................................. 186

多媒体............................................................................ 186

拖拽................................................................................ 188

历史................................................................................ 188

地理定位........................................................................ 189

Web存储........................................................................ 190

全屏................................................................................ 191

网络状态........................................................................ 192

应用缓存........................................................................ 192

Font Awesome 字体框架............................................... 195

CSS3.............................................................................................. 196

1.3 CSS3的现状.................................................................... 196

1.4 如何对待......................................................................... 197

准备工作................................................................................ 197

统一环境........................................................................ 197

如何使用手册................................................................. 197

基础知识................................................................................ 198

选择器............................................................................ 198

颜色................................................................................ 201

文本 (shadow阴影)....................................................... 202

盒模型............................................................................ 203

边框................................................................................ 204

渐变................................................................................ 210

背景................................................................................ 214

过渡(transition)............................................................... 216

2D转换.......................................................................... 220

1、 3d变换.................................................................... 222

2、透视:...................................................................... 222

3、transform-style:preserve-3d;...................................... 222

4、 backface-visibility:hidden; 背面不可见.................. 223

5、动画:...................................................................... 223

伸缩布局........................................................................ 224

Web字体................................................................................ 227

字体格式........................................................................ 228

字体图标........................................................................ 228

兼容性.................................................................................... 229

高级应用................................................................................ 229

ajax................................................................................................. 231

HTTP服务搭建...................................................................... 231

AMP............................................................................... 231

AMP集成环境............................................................... 231

WAMP安装................................................................... 231

测试访问........................................................................ 232

配置局域网访问............................................................. 233

配置网站根目录............................................................. 234

PHP基础................................................................................ 234

PHP简介........................................................................ 234

PHP常见语法................................................................ 234

PHP中的header............................................................. 239

PHP表单........................................................................ 240

PHP_GET数据获取....................................................... 240

PHP_POST数据获取..................................................... 241

POST&GET错误处理.................................................... 241

PHP文件上传处理     $_FILES对象....................... 242

PHP文件上传处理02_文件保存................................. 242

常见网络传输协议................................................................. 243

HTTP协议............................................................................. 244

监测工具........................................................................ 244

请求/请求报文................................................................ 244

响应/响应报文....................................................................... 246

常见的响应状态..................................................................... 248

PHP设置上传文件大小......................................................... 248

修改php.ini.................................................................... 248

修改内容........................................................................ 248

Ajax的基本概念和使用........................................................ 249

同步&异步..................................................................... 249

异步更新网站........................................................................ 249

网站内容更新:................................................................ 249

Ajax概念............................................................................... 249

XMLHttpRequest.................................................................... 250

XMLHttpRequest_API讲解................................................... 252

1.创建XMLHttpRequest对象(兼容性写法).................. 252

2.发送请求:.................................................................... 253

3.POST请求注意点:...................................................... 253

4.onreadystatechange事件.............................................. 253

4.服务器响应内容.......................................................... 254

Ajax传输xml......................................................................... 254

XML简介....................................................................... 254

XML语法....................................................................... 255

XML解析....................................................................... 256

PHP中设置Header................................................................ 256

Ajax传输json........................................................................ 257

JSON解析...................................................................... 257

JavaScript 中.................................................................. 257

Ajax工具函数封装................................................................ 259

原生Ajax写法回顾........................................................ 259

抽取公共部分................................................................. 260

Jquery中的ajax..................................................................... 261

格式化表单$('form').serialize()....................................... 261

JQueryAjax使用............................................................ 262

模版引擎................................................................................ 265

模版引擎简介................................................................. 265

模版插件原理................................................................. 266

常见的模板插件............................................................. 266

ArtTemplate基本使用.................................................... 266

同源以及跨域........................................................................ 267

同源................................................................................ 267

跨域方案(了解).............................................................. 268

JSONP(了解).................................................................. 268

jQuery 的$.ajax()........................................................... 269

瀑布流.................................................................................... 270

什么是瀑布流?............................................................... 271

瀑布流实现原理............................................................. 272

移动端开发.................................................................................... 272

设备................................................................................ 272

移动web页面的作用..................................................... 272

注意点............................................................................ 273

移动web的注意点......................................................... 273

移动端的浏览器............................................................. 273

电脑上查看移动端界面................................................. 273

常见前端编辑器............................................................. 274

Viewport................................................................................. 274

viewport的概念.............................................................. 274

修改viewport................................................................. 274

可选值............................................................................ 275

移动web样式注意................................................................ 275

点击高亮效果................................................................. 275

盒子模型........................................................................ 276

Input默认样式清除........................................................ 276

最小宽度和最大的宽度................................................. 276

视网膜屏幕..................................................................... 276

左右两张的无限轮播..................................................... 277

touch............................................................................... 277

过度事件........................................................................ 278

图片分辨率问题............................................................. 279

移动端屏幕适配布局方式.............................................. 279

抽取通用样式................................................................. 279

学习布局........................................................................ 279

移动京东站首页js效果................................................. 279

过度结束事件................................................................. 280

移动端特有事件............................................................. 280

常见的封装..................................................................... 280

LESS............................................................................... 280

less只是一个纯文本...................................................... 281

less使用.......................................................................... 281

考拉编译注意点............................................................. 281

less的作用...................................................................... 282

如何让代码写的通用性更强.......................................... 282

响应式............................................................................ 284

微金所............................................................................ 286

响应式布局..................................................................... 286

bootsrap使用.................................................................. 287

标签页导航..................................................................... 288

bootstrap使用................................................................. 289

栅格系统的偏移............................................................. 289

zepto............................................................................... 290

响应式布局..................................................................... 290

bootsrap使用.................................................................. 291

微金所信息区域............................................................. 292

 

 

常用属性

cursor:pointer;//设定鼠标移入的形状为一只伸出食指的手

position: absolute;/*子布局为绝对布局,从而让此控件随着父布局放大或缩小时位置不变*/

 

position: relative;/*使父布局为相对布局*/

right: 10px;/*让控件在右侧*/
margin: 0 auto;/*使内部的div居中*/

text-align: center;/*文本内容居中*/
text-decoration: none;/*去掉a标签的下划线*/

/*隐藏*/
.hide{
   
display: none;
}
/*显示*/
.show{
  
display: block;
}

box.onmouseover = fun1;/*鼠标悬停,即鼠标停留在图片等上方*/
box.onmouseout = fun2;/*鼠标移出,即鼠标离开图片等所在的区域*/

list-style-type: none;/*去掉每个li前面的点*/

background: url("images/bgs.png") no-repeat;/*no-repeat使背景图片不重复*/

input.disabled = true;//禁用输入框

input.disabled = false;//解禁输入框

input.style.border = "1px solid red"//设置输入框的样式

input.style.border = ""//清空输入框的样式

input{

      /*去掉input边框*/

      border:0 none;

      /*去掉被点击后的边框*/

      outline-style: none;

      /*设置边框连写*/

      border:dashed 1px green;

 

     }

      /*获取焦点*/

      input:focus{

        border:dotted 1px red;

        border-width: 3px;

         }

outline: none;/*清除鼠标点击输入框时出现的蓝色边框*/

<!--onfocus是得到焦点,
onblur  是失去焦点-->

<input type="text" οnblur="fn(this)" οnfοcus="fn2(this)">

border: 2px solid #e4e4e4;/*设置外边框* dotted 点线,dashed 虚线,solid 实线/

z-index: 100;/*设置层次,值越大层次越高*/

font-weight: bold;/*设置字体加粗*/

border-radius: 4px;/*设置圆角*/

/*获取窗口内部的宽高*/
var w = window.innerWidth;
var y = window.innerHeight;

 

 

 

 

 

overflow 属性规定当内容溢出元素框时发生的事情

可能的值

描述

visible

默认值。内容不会被修剪,会呈现在元素框之外。

hidden

内容会被修剪,并且其余内容是不可见的。

scroll

内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。

a标签空连方式:

1,href=“#”

2,href=“javascript:;”

3,herf=“javascript:void(0)”

Opacity:0.3;//单独设置透明度

Array.from(数组)//将伪数组转换成真数组

onselectstart=”return false”禁止被选中

 

Html基础 

常用快捷键

Ctrl+c

复制

Ctrl+v

粘贴

Ctrl+x

剪切

Ctrl+a

全选

Ctrl+s

保存文件

Ctrl+z

撤销一步

Windows+d

显示桌面

Windows+e

资源管理器

Windows+r

打开运行窗口

Alt+tab

切换软件窗口               

Ctrl+tab

切换页签

F2

重命名

F5

刷新

认识大前端

前端工作就是 : 将设计图通过 Html,CSS,JS等技术生成网页

应用于 : 移动端  PC端

用户体验     : UI设计

学习态度

养成一种习惯。

认识网页

网页由文字,图片,按钮,超链接等组成。

Web标准

W3c组织(万维网联盟)

 

Html    结构标准    相当于 结构,骨骼,组成

Css     表现标准    相当于给人化妆

Js      行为标准    想当于 行为,功能,动作  灵动

浏览器

◆浏览器是一个上网的客户端(软件)。

 

浏览器内核

渲染引擎

 

浏览器和服务器的那点事

IIS  web服务器     提供网页浏览服务

Url地址

认识html

Html 全称 : HyperText Markup Language

超文本标记语言。

 

超文本

 

标记 < html >

 

语言

 

 

 

Html结构标准(html 5 才开始的)

< ! DOCTYPE html>         声明文档类型

<html>                 根标签

<head>                  头标签

            <title></title>   标题标签

</head>

<body>                主体标签

</body>

</html>

 

Html 与htm是一样的。

 

后缀名能否决定文件格式?

 

不能,只能决定 打开方式

Html标签关系分类

  包含(嵌套关系): <head> <title></title > </head >

  并列关系        :<head></head>  <body></body>

Html标签分类

单标签   <! Doctype html>

 

双标签   <html></html>   <head></head>   <title></title>

开发工具

 

Dw  历史悠久,设计师使用。

Sublime   轻量级    有很多好用的插件。

Webstorm  重量级    项目级别的开发工具,太过智能现在用不到。

 

新建文件、打开文件、打开文件夹

Html:xt+tab

Html结构代码

tab

补全标签代码

Ctrl+shift+d

快速复制一行

Ctrl+shiif+k

快速删除一行

Ctrl+鼠标左键单击

集体输入

Ctrl+h

查找替换

Ctrl+f

查找

Ctrl+/

注释

Ctrl+L

快速选择一行

Ctrl+shift+↑(↓)

快速上移(下移)一行

F11

全屏

 

查看----布局

设置默认浏览器

Chrome浏览器右上角,设置里选择设置默认浏览器。

标签

单标签

◆注释标签    ctrl+/

<!— 内容 -->

 

◆ 换行标签   <br />

 

◆ 水平线标签  <hr />

 

 

双标签  

<p>文本内容</p>

 

特点:上下自动生成空白行。<br />换行不会生成空白行。

 

标题标签

h1-h6  取值到h6

 

 

文本标签

<font>文本内容</font>

 

文本格式化标签

 

 文本加粗标签   <strong></strong>   <b></b>  工作里尽量使用strong

 

 

文本倾斜标签

<em></em>     <i></i>     工作里尽量使用em

 

 

删除线标签

<del></del>     <s></s>   工作里尽量使用del

 

 

下划线标签

<ins></ins>   <u></u>    工作里尽量ins

 

◆注意:之所以工作里使用<strong></strong>  <em></em> <del></del>

<ins></ins>  是因为更有语义化。

图片标签

 

Src    图片的来源   必写属性

Alt    替换文本    图片不显示的时候显示的文字

Title   提示文本    鼠标放到图片上显示的文字

Width  图片宽度

Height  图片高度

◆图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。

路径

相对路径

相对于文件自身出发,就是相对路径。

◆文件和图片(html文档)在同一个目录(文件夹) ,直接写文件名。

 

 

◆图片(html文档)在文件在下一级目录里。文件夹名称+/+图片(html)名称

 

◆图片(html)在文件的上一级目录里,..+/+图片(html)名称

 

◆图片在文件的上一级的其他目录里,../文件夹名称/图片名称

 

★总结:找到下一级目录(文件夹)的图片(文件)用 /

        跳出当前目录使用../

绝对路径

 

超链接

 

href   去往的路径(跳转的页面) 必写属性

title    提示文本   鼠标放到链接上显示的文字

target=”_self”    默认值    在自身页面打开(关闭自身页面,打开链接页面) 

target=”_blank”   打开新页面 (自身页面不关闭,打开一个新的链接页面)

锚链接

  1. 先定义一个锚点

   

  1. 超链接到锚点

  

空链  不知道链接到那个页面的时候,用空链

 

压缩文件下载  不推荐使用

超链接优化写法
<base target="_blank">  
让所有的超链接都在新窗口打开

 

另存为   ctrl+shift+s

特殊字符

 

 

列表

无序列表

<ul>

<li></li>    列表项

<li></li>

<li></li>

</ul>

 

type=”square”      小方块

Type=”disc”       实心小圆圈

Type=”circle”      空心小圆圈

有序列表

<ol>

<li></li>    列表项

<li></li>

<li></li>

<li></li>

<li></li>

</ol>

 

◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I

start=”3”  决定了开始的位置。

自定义列表

<dl>

 <dt></dt>    小标题

  <dd></dd>   解释标题

  <dd></dd>   解释标题

</dl>

 

音乐标签

注意:此标签是h5 特有的,老版本不支持

hidden属性表示是否隐藏播放界面

 

滚动

 

scrolldelay="10" 设置移动速度,数值越小越快 ,默认 90

scrollamount="5" 设置移动距离数值越大移动距离越大

head里的一些常用东西

!+tab   html5的标签结构

Charset   编码

Ascll

Ansi              扩展的ASCII编码

Unicode        日文/韩文

Gbk               中文

Gb2312         中文

Big5              繁体

Utf-8             通用字符集

关键字

 

网页描述

 

网页重定向

 

链接外部样式表(css)

 

设置icon图标

 

 

 

表格

展示数据。 是对网页重构的一个有益补充。

<table>          表格

    <tr>       行

        <td></td> 列

        <td></td>

        <td></td>

    </tr>

</table>

 

◆属性:

Border=”1”   边框:1默认为2px

Width=”500”  宽度

Height=”300” 高

cellspacing=”2”    单元格与单元格的距离 : 0

cellpadding=”2”    内容距边框的距离

align=”left  |  right  |  center” 

如果直接给表格用align=”center”  表格居中

如果给tr或者td使用   ,tr或者td内容居中。

bgcolor=”red”    背景颜色。

bordercolor="green" 边框颜色

表格的标准结构

<table>

    <thead>

        <tr>

             <td></td>

             <td></td>

        </tr>

    </thead>

    <tbody>

        <tr>

             <td></td>

             <td></td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

             <td></td>

             <td></td>

        </tr>

    </tfoot>

</table>

表头和单元格合并

◆  表头  <caption></caption>

colspan=”2”  合并同一行上的单元格

rowspan=”2”  合并同一列上的单元格

 

表格标题、边框颜色、内容垂直对齐

◆表格标题 <th></th>用法和td一样

标题的文字自动加粗水平居中对齐

 

◆边框颜色

 

◆内容垂直对齐方式

 

Valign=”top   |  middle   |  bottom”

 

 

表单

          表单的作用是收集信息。

表单的组成

◆提示信息

 

◆表单控件

 

◆表单域

 

属性:action:处理信息

Method=”get | post”  

Get通过地址栏提供(传输)信息,安全性差。

Post 通过1.php来处理信息,安全性高。

◆文本输入框

 

maxlength="6"    限制输入字符长度

readonly=”readonly”  将输入框设置为只读状态(不能编辑)

disabled="disabled"  输入框未激活状态

name="username"   输入框的名称

value="大前端"     将输入框的内容传给处理文件

◆密码输入框

 

★注意:文本输入框的所有属性对密码输入框都有效。

◆单选框

 

★只有将name的值设置相同的时候,才能实现单选效果。

★checked=”checked” 设置默认选择项。

◆下拉列表

<select>

<option>下拉列表选项</option>

<option>下拉列表选项</option>

</select>

 

属性:

Multiple=”multiple”  将下拉列表设置为多选项

Selected=”selected”  设置默认选中项目

 

<optgroup></optgroup>   对下拉列表进行分组。

Label=””  分组名称。

◆多选框

 

Checked=”checked” 设置默认选中项

◆多行文本框

 

Cols  控制输入字符的长度。

Rows  控制输入的行数

◆ 文件上传控件

 

◆文件提交按钮

 

★:可以实现信息提交功能

◆普通按钮

 

★不能提交信息,配合JS使用。

◆图片按钮

 

★图片按钮可实现信息提交功能

☆提交按钮与图片按钮的区别:唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。

◆重置按钮

 

★将信息重置到默认状态

◆表单信息分组

 

<fieldset></fieldset>    对表单信息分组

<legend></legend>      表单信息分组名称
html5补充表单控件

 

标签语义化

好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。

标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)

 

-标签语义化意义:

       1:网页结构合理

          2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语                           义你的网页内容自然容易被搜索引擎抓取;

          3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)

          4:便于团队开发和维护

 

1:尽可能少的使用无语义的标签div和span;

 

2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

 

3:不要使用纯样式标签,如:b、font、u等,改用css设置。

 

4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);

 

 

Css基础

 

Css概念

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)

Css是用来美化html标签的,相当于页面化妆。

◆样式表书写位置

 

选择器写法

选择器是一个选择谁(标签)的过程。

选择器{属性:值; 属性:值;}

 

 

 

 

属性

解释

width:20px;

height:20px;

background-color:red;

背景颜色

font-size:24px;

文字大小

text-align:left | center| right

内容的水平对齐方式

text-indent:2em;

首行缩进

color:red;

文字颜色

 

选择器

基础选择器

◆标签选择器

标签{属性:值;}

特点:标签选择器定义之后,会将页面所有的元素都执行这个标签样式。

 

◆类选择器(重点)

写法

.自定义类名{属性:值;  属性:值;}

特点: 谁调用,谁生效。

        一个标签可以调用多个类选择器。

       多个标签可以调用同一个类选择器。

  ★类选择器命名规则

   ◎不能用纯数字或者数字开头来定义类名

   ◎不能使用特殊符号或者特殊符号开头(_)来定义类名

   ◎不建议使用汉字来定义类名

   ◎不推荐使用属性(css关键字)或者属性的值来定义类名

关键字:凡是被css语言所定义过的词语就叫做关键字

 

◆ID选择器

写法

#自定义名称{属性:值;}

特点: 一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上,不符合w3c规范,JS调用会出问题。

  一个标签只能调用一个ID选择器。

一个标签可以同时调用类选择器和ID选择器。

 

◆通配符选择器

*{属性:值;}

特点:给所有的标签都使用相同的样式。

★不推荐使用,增加浏览器和服务器负担。

 

◆颜色的显示方式

  ◎直接写颜色的名称

  ◎十六进制显示颜色   0-9  a-f  RGB

#000000; 前2为代表红色,中间2位代表绿色,后边2位代表蓝色。

  ◎rgb

 

  ◎rgba

a代表alpha 不透明度   值 0-1

 

 

复合选择器

概念:两个或者两个以上的基础选择器通过不同的方式连接在一起。

◆交集选择器

标签+类(ID)选择器{属性:值;}

特点:即要满足使用了某个标签,还要满足使用了类(id)选择器。

 

◆后代选择器(重点)

选择器+空格+选择器{属性:值;}

后代选择器首选要满足包含(嵌套)关系。

父集元素在前边,子集元素在后边。

特点:无限制隔代。

      只要能代表标签,标签、类选择器、ID选择器自由组合。

 

◆子代选择器

选择器>选择器{属性:值;}

选中直接下一代元素。

 

◆并集选择器

选择器+,+选择器+,选择器{属性:值;}

 

文本元素

   属性

font-size:16px;  文字大小

font-weight: 700 ; 值从100-900,文字粗细,不推荐使用(font-weight:bold;)

font-family:微软雅黑(Lobster-Regular);  文本的字体

Font-style: normal / italic;      normal 默认值  italic  斜体

line-height: 行高

 

【】【】文本属性连写

font: font-style font-weight  font-size/line-height  font-family;

◆:注意:font:后边写属性的值。一定按照书写顺序。

      文本属性连写文字大小和字体为必写项。

Font:italic 700 16px/40px  微软雅黑;

 

文字的表达方式

◆直接写中文名称。

 

◆写字体的英文名称。

 

◆unicode 编码

 

 

样式表书写位置

◆内嵌式写法

<head>

<style type=”text/css”>

样式表写法

</style>

</head>

◆外链式写法

写在head里,<link rel=”stylesheet” href=”1.css”>

 

◆行内样式表

 

 

◆三种写法特点:

★内嵌式写法,样式只作用于当前文件,没有真正实现结构表现分离。

★外链式写法,作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离。推荐使用

★行内样式表,作用范围仅限于当前标签,范围小,结构表现混在一起。  (不推荐使用)

标签分类(显示方式)

块元素

典型代表,div,h1-h6,p,ul,li

特点: ★独占一行

      ★可以设置宽高

      ★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致。

行内元素

典型代表 span  ,a,  ,strong , em,  del,  ins

特点:★在一行上显示

      ★不能直接设置宽高

      ★元素的宽和高就是内容撑开的宽高。

行内块元素(内联元素)

典型代表  input  img

特点:★在一行上显示

      ★可以设置宽高     

 

 

块元素、行内元素 转换

◆块元素转行内元素

display:inline;

 

◆行内元素转块元素

display:block;

 

◆块和行内元素转行内块元素

display:inline-block;

 

 

css三大特性

层叠性

当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码。和标签调用选择器的顺序没有关系。

 继承性

   继承性发生的前提是包含(嵌套关系)

   ★文字颜色可以继承

   ★文字大小可以继承

   ★字体可以继续

   ★字体粗细可以继承

   ★文字风格可以继承

   ★行高可以继承

   总结:文字的所有属性都可以继承。

◆特殊情况:

h系列不能继承文字大小。

a标签不能继承文字颜色。

优先级
 
默认样式<标签选择器<类选择器<id选择器<行内样式<!important 

         0         1          10     100      1000      1000以上

     

◆优先级特点

★继承的权重为0

★权重会叠加

链接伪类

a:link{属性:值;}  a{属性:值}效果是一样的。

a:link{属性:值;}       链接默认状态  

a:visited{属性:值;}     链接访问之后的状态

a: text-decoration {属性:值;}      鼠标放到链接上显示的状态

a:active{属性:值;}      链接激活的状态

  :focus{属性:值;}     获取焦点

 

文本修饰

text-decoration: none  |   underline   |     line-through

背景属性

background-color     背景颜色

background-image    背景图片

Background-repeat    repeat(默认)  |  no-repeat |   repeat-x   |  repeat-y     背景平铺

Background-position  left  |  right  |  center  |  top  | bottom  背景定位

 

★方位值只写一个的时候,另外一个值默认居中。

 

★写2个方位值的时候,顺序没有要求。

 

★写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向。

Background-attachment   背景是否滚动   scroll  |  fixed

背景属性连写

 

★:连写的时候没有顺序要求,url为必写项。

 

行高

浏览器默认文字大小:16px

行高:是基线与基线之间的距离

行高=文字高度+上下边距

 

一行文字行高和父元素高度一致的时候,垂直居中显示。

行高的单位

行高单位

文字大小

20px

20px

20px

2em

20px

40px

150%  200%

20px

30px   40px

2

20px

40px

 

总结:单位(px)除了像素以外,行高都是与文字大小乘积。

行高单位

父元素文字大小

子元素文字大小

行高

40px

20px

30px

40px

2em

20px

30px

40px

150%

20px

30px

30px

2

20px

30px

60px

总结:不带单位时,行高是和子元素文字大小相乘,em和%的行高是和父元素文字大小相乘。行高以像素为单位,就是定义的行高值。

◆推荐行高使用像素为单位。

补充:

PX特点

-1. IE无法调整那些使用px作为单位的字体大小;

-2. 国外的大部分网站能够调整的原因在于其使用了emrem作为字体单位;

-3. Firefox能够调整pxemrem,但是有大部分的国产浏览器使用IE内核。

EM特点

-1. em的值并不是固定的;

-2. em会继承父级元素的字体大小。

 

em是以字为单位,1em是占一个字符的宽度,大小随着字符的字号而变化。
px是像素,是对所有浏览器都显示为一样大小的。

 

 

      1. 边框  border

border-top-style:  solid   实线

               dotted  点线

               dashed  虚线

border-top-color   边框颜色

border-top-width   边框粗细

 

边框属性的连写 

特点:没有顺序要求,线型为必写项。

 

◆四个边框值相同的写法

 

特点:没有顺序要求,线型为必写项。

      1. 边框合并   border-collapse:collapse;

 

      1. 获取焦点

 

      1. 内边距

Padding-left   |   right    |  top  |  bottom

 

 

◆padding连写

Padding: 20px;   上右下左内边距都是20px

Padding: 20px 30px;   上下20px   左右30px

Padding: 20px  30px  40px;   上内边距为20px  左右内边距为30px   下内边距为40

Padding:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px

内边距撑大盒子的问题

内边距影响盒子的宽度

边框影响盒子的宽度

盒子的宽度=定义的宽度+边框宽度+左右内边距

◆继承的盒子一般不会被撑大

包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。

      1. 外边距

margin-left   | right  |  top  |  bottom

 

◆外边距连写

Margin: 20px;    上下左右外边距20PX

Margin: 20px 30px;   上下20px  左右30px

Margin: 20px  30px  40px;     上20px  左右30px   下  40px

Margin: 20px  30px   40px  50px; 上20px   右30px   下40px  左50px

垂直方向外边距合并

两个盒子垂直一个设置上外边距,一个设置下外边距,取的设置较大的值。

嵌套的盒子外边距塌陷

解决方法:  1  给父盒子设置边框

           2给父盒子   overflow:hidden;               隐藏溢出

bfc   格式化上下文    感兴趣了解

      1. 行内元素可以定义左右的外边距,上下会被忽略掉。

文档流(标准流)

元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行。

浮动布局

float:  left   |   right

特点:

★元素浮动之后不占据原来的位置(脱标)

★浮动的盒子在一行上显示

★行内元素浮动之后转换为行内块元素。(不推荐使用,转行内元素最好使用display: inline-block;)

浮动的作用

◆文本绕图

◆制作导航

◆网页布局

清除浮动

当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误。

◆清除浮动不是不用浮动,清除浮动产生的不利影响。

◆清除浮动的方法

clear: left  |  right  | both

工作里用的最多的是clear:both;

★额外标签法

 在最后一个浮动元素后添加标签,。 

 

★给父集元素使用overflow:hidden;    bfc

  如果有内容出了盒子,不能使用这个方法。

 

★伪元素清除浮动  推荐使用

 

 

CSS初始化

为了考虑到浏览器兼容问题,不同的浏览器对有些标签的默认值是不同的,如果没有CSS初始化会出现浏览器之间的页面差异

腾讯:

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}

a{color:#2d374b;text-decoration:none}

a:hover{color:#cd0200;text-decoration:underline}

em{font-style:normal}

li{list-style:none}

img{border:0;vertical-align:middle}

table{border-collapse:collapse;border-spacing:0}

p{word-wrap:break-word}

 

 

新浪:

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}

body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}

ul,ol{list-style-type:none;}

select,input,img,select{vertical-align:middle;}

a{text-decoration:none;}

a:link{color:#009;}

a:visited{color:#800080;}

a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

淘宝:

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; }

Overflow

 

 

定位

定位方向: left  | right  | top  | bottom

◆position:static;  静态定位。默认值,就是文档流。

 

◆绝对定位

Position:absolute;

特点:

★元素使用绝对定位之后不占据原来的位置(脱标)

★元素使用绝对定位,位置是从浏览器出发。

★嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发。

★嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出发。

★给行内元素使用绝对定位之后,转换为行内块。(不推荐使用,推荐使用display:inline-block;)

◆相对定位

Position: relative;

特点:

★使用相对定位,位置从自身出发。

★还占据原来的位置。

子绝父相(父元素相对定位,子元素绝对定位)

★行内元素使用相对定位不能转行内块

◆固定定位

相对于父级或同级别元素

Position:fixed;

特点:

★固定定位之后,不占据原来的位置(脱标)

★元素使用固定定位之后,位置从浏览器出发。

★元素使用固定定位之后,会转化为行内块(不推荐,推荐使用display:inline-block;)

 

定位的盒子居中显示

★:margin:0 auto;  只能让标准流的盒子居中对齐。

★定位的盒子居中:先左右走父元素盒子的一半50%,在向左走子盒子的一半(margin-left:负值。)

 

 

标签包含规范

◆div可以包含所有的标签。

◆p标签不能包含div h1等标签。

◆h1可以包含p,div等标签。

◆行内元素尽量包含行内元素,行内元素不要包含块元素。

 

规避脱标流

◆尽量使用标准流。

◆标准流解决不了的使用浮动。

◆浮动解决不了的使用定位。

 

图片和文字垂直居中对齐

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;

 

 

Css可见性

overflow:hidden;   溢出隐藏   

visibility:hidden;   隐藏元素    隐藏之后还占据原来的位置。

display:none;      隐藏元素    隐藏之后不占据原来的位置。

Display:block;     元素可见

Display:none  和display:block  常配合js使用。

css之内容移除(网页优化)

◆使用text-indent:-5000em;

 

◆将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow:hidden;将文字隐藏。

 

Css精灵图

属性选择器

 

  emmet快捷键:

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。

html:

生成结构的快捷键:

!+ tab,可以生成html5的结构代码。

生成id名和类名

标签名.类名#id名+tab

没有标签名.类名+tab ==>div

生成同级元素:

标签名+标签名+标签名 “+”tab

生成子类标签

标签名>子标签名>子标签名>子标签名+tab

标签名>子标签名>子标签名>子标签名^^子标签名+tab

 

带固定数量的标签:

          ul>li*5+tab

带有序号名称  

ul>li.abc$*3 + tab

生成带有内容的标签:

ul>li>a{item}*5

css

width:30px==>w30+tab

Height:30px==>h30+tab

Margin:30px==>mg30+tab

Padding:30px==> pd30+tab

Line-height:12px==>lh12px+tab

Background==>bg+tab
 

Js高级

语法:

后代:>

缩写:nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul></nav>

兄弟:+

缩写:div+p+bq

<div></div><p></p><blockquote></blockquote>

上级:^

缩写:div+div>p>span+em^bq

<div></div><div>
    <p><span></span><em></em></p>
    <blockquote></blockquote></div>

缩写:div+div>p>span+em^^bq

<div></div><div>
    <p><span></span><em></em></p></div><blockquote></blockquote>

分组:()

缩写:div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer></div>

缩写:(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl></div><footer>
    <p></p></footer>

乘法:*

缩写:ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li></ul>

自增符号:$

缩写:ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li></ul>

缩写:h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3>

缩写:ul>li.item$$$*5

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li></ul>

缩写:ul>li.item$@-*5

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li></ul>

缩写:ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li></ul>

ID和类属性

缩写:#header

<div id="header"></div>

缩写:.title

<div class="title"></div>

缩写:form#search.wide

<form id="search" class="wide"></form>

缩写:p.class1.class2.class3

<p class="class1 class2 class3"></p>

自定义属性

缩写:p[title="Hello world"]

<p title="Hello world"></p>

缩写:td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

缩写:[a='value1' b="value2"]

<div a="value1" b="value2"></div>

文本:{}

缩写:a{Click me}

<a href="">Click me</a>

缩写:p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

隐式标签

缩写:.class

<div class="class"></div>

缩写:em>.class

<em><span class="class"></span></em>

缩写:ul>.class

<ul>
    <li class="class"></li></ul>

缩写:table>.row>.col

<table>
    <tr class="row">
        <td class="col"></td>
    </tr></table>

HTML

所有未知的缩写都会转换成标签,例如,foo → <foo></foo>

缩写:!

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
</body></html>

缩写:a

<a href=""></a>

缩写:a:link

<a href="http://"></a>

缩写:a:mail

<a href="mailto:"></a>

缩写:abbr

<abbr title=""></abbr>

缩写:acronym

<acronym title=""></acronym>

缩写:base

<base href="" />

缩写:basefont

<basefont />

缩写:br

<br />

缩写:frame

<frame />

缩写:hr

<hr />

缩写:bdo

<bdo dir=""></bdo>

缩写:bdo:r

<bdo dir="rtl"></bdo>

缩写:bdo:l

<bdo dir="ltr"></bdo>

缩写:col

<col />

缩写:link

<link rel="stylesheet" href="" />

缩写:link:css

<link rel="stylesheet" href="style.css" />

缩写:link:print

<link rel="stylesheet" href="print.css" media="print" />

缩写:link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

缩写:link:touch

<link rel="apple-touch-icon" href="favicon.png" />

缩写:link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

缩写:link:atom

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

缩写:meta

<meta />

缩写:meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

缩写:meta:win

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

缩写:meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

缩写:meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7" />

缩写:style

<style></style>

缩写:script

<script></script>

缩写:script:src

<script src=""></script>

缩写:img

<img src="" alt="" />

缩写:iframe

<iframe src="" frameborder="0"></iframe>

缩写:embed

<embed src="" type="" />

缩写:object

<object data="" type=""></object>

缩写:param

<param name="" value="" />

缩写:map

<map name=""></map>

缩写:area

<area shape="" coords="" href="" alt="" />

缩写:area:d

<area shape="default" href="" alt="" />

缩写:area:c

<area shape="circle" coords="" href="" alt="" />

缩写:area:r

<area shape="rect" coords="" href="" alt="" />

缩写:area:p

<area shape="poly" coords="" href="" alt="" />

缩写:form

<form action=""></form>

缩写:form:get

<form action="" method="get"></form>

缩写:form:post

<form action="" method="post"></form>

缩写:label

<label for=""></label>

缩写:input

<input type="text" />

缩写:inp

<input type="text" name="" id="" />

缩写:input:hidden

别名:input[type=hidden name]

<input type="hidden" name="" />

缩写:input:h

别名:input:hidden

<input type="hidden" name="" />

缩写:input:text, input:t

别名:inp

<input type="text" name="" id="" />

缩写:input:search

别名:inp[type=search]

<input type="search" name="" id="" />

缩写:input:email

别名:inp[type=email]

<input type="email" name="" id="" />

缩写:input:url

别名:inp[type=url]

<input type="url" name="" id="" />

缩写:input:password

别名:inp[type=password]

<input type="password" name="" id="" />

缩写:input:p

别名:input:password

<input type="password" name="" id="" />

缩写:input:datetime

别名:inp[type=datetime]

<input type="datetime" name="" id="" />

缩写:input:date

别名:inp[type=date]

<input type="date" name="" id="" />

缩写:input:datetime-local

别名:inp[type=datetime-local]

<input type="datetime-local" name="" id="" />

缩写:input:month

别名:inp[type=month]

<input type="month" name="" id="" />

缩写:input:week

别名:inp[type=week]

<input type="week" name="" id="" />

缩写:input:time

别名:inp[type=time]

<input type="time" name="" id="" />

缩写:input:number

别名:inp[type=number]

<input type="number" name="" id="" />

缩写:input:color

别名:inp[type=color]

<input type="color" name="" id="" />

缩写:input:checkbox

别名:inp[type=checkbox]

<input type="checkbox" name="" id="" />

缩写:input:c

别名:input:checkbox

<input type="checkbox" name="" id="" />

缩写:input:radio

别名:inp[type=radio]

<input type="radio" name="" id="" />

缩写:input:r

别名:input:radio

<input type="radio" name="" id="" />

缩写:input:range

别名:inp[type=range]

<input type="range" name="" id="" />

缩写:input:file

别名:inp[type=file]

<input type="file" name="" id="" />

缩写:input:f

别名:input:file

<input type="file" name="" id="" />

缩写:input:submit

<input type="submit" value="" />

缩写:input:s

别名:input:submit

<input type="submit" value="" />

缩写:input:image

<input type="image" src="" alt="" />

缩写:input:i

别名:input:image

<input type="image" src="" alt="" />

缩写:input:button

<input type="button" value="" />

缩写:input:b

别名:input:button

<input type="button" value="" />

缩写:isindex

<isindex />

缩写:input:reset

别名:input:button[type=reset]

<input type="reset" value="" />

缩写:select

<select name="" id=""></select>

缩写:option

<option value=""></option>

缩写:textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

缩写:menu:context

别名:menu[type=context]>

<menu type="context"></menu>

缩写:menu:c

别名:menu:context

<menu type="context"></menu>

缩写:menu:toolbar

别名:menu[type=toolbar]>

<menu type="toolbar"></menu>

缩写:menu:t

别名:menu:toolbar

<menu type="toolbar"></menu>

缩写:video

<video src=""></video>

缩写:audio

<audio src=""></audio>

缩写:html:xml

<html xmlns="http://www.w3.org/1999/xhtml"></html>

缩写:keygen

<keygen />

缩写:command

<command />

缩写:bq

别名:blockquote

<blockquote></blockquote>

缩写:acr

别名:acronym

<acronym title=""></acronym>

缩写:fig

别名:figure

<figure></figure>

缩写:figc

别名:figcaption

<figcaption></figcaption>

缩写:ifr

别名:iframe

<iframe src="" frameborder="0"></iframe>

缩写:emb

别名:embed

<embed src="" type="" />

缩写:obj

别名:object

<object data="" type=""></object>

缩写:src

别名:source

<source></source>

缩写:cap

别名:caption

<caption></caption>

缩写:colg

别名:colgroup

<colgroup></colgroup>

缩写:fst, fset

别名:fieldset

<fieldset></fieldset>

缩写:btn

别名:button

<button></button>

缩写:btn:b

别名:button[type=button]

<button type="button"></button>

缩写:btn:r

别名:button[type=reset]

<button type="reset"></button>

缩写:btn:s

别名:button[type=submit]

<button type="submit"></button>

 

异常处理

常见的异常分类

  • 运行环境的多样性导致的异常(浏览器)
  • 语法错误,代码错误

异常最大的特征,就是一旦代码出现异常,后面的代码就不会再执行

异常捕获

捕获异常,使用try-catch语句

try{
    //这里写可能出现异常的代码
}catch(e){
    //这里的e就是捕获的异常对象
    //可以在这里写,出现异常后的处理代码
}

异常捕获语句执行的过程为:

  1. 代码正常运行, 如果在try中出现了错误, try 里面出现错误的语句后面的代码都不再执行, 直接跳转到 catch
  2. catch中处理错误信息
  3. 然后继续执行后面的代码
  4. 如果 try 中没有出现错误, 那么不走 catch 直接执行后面的代码

通过try-catch语句进行异常捕获之后,代码将会继续执行,而不会中断。

注意:

  • 语法错误异常用try-catch语句无法捕获,因为在预解析阶段,语法错误会直接检测出来,而不会等到运行的时候才报错。
  • try-catch在一般日常开发中基本用不到,但是如果要写框架什么的,用的会非常多。因为这个会让框架变得健壮

抛出异常

如何手动的抛出异常呢?

案例:自己写的一个函数,需要一个参数,如果用户不传参数,此时想直接给用户抛出异常,就需要了解如何抛出异常。

抛出异常使用throw关键字,语法如下:

throw 异常对象;

异常对象一般是用new Error("异常消息"), 也可以使用任意对象

function test(para){
    if(para == undefined){
        throw new Error("请传递参数");
        //这里也可以使用自定义的对象
        throw {"id":1, msg:"参数未传递"};
    }
}
 
try{
    test();
}catch(e){
    console.log(e);
}

异常的传递机制

function f1 () {
    f2(); // f1 称为调用者, 或主调函数, f2 称为被调用者, 或被调函数
}
 
function f2 () {
    f3();
}
 
function f3() {
    throw new Error( 'error' );
}
f1();

当在被调函数内发生异常的时候,异常会一级一级往上抛出。

异常捕获语句的完整模式

异常捕获语句的完整模式为try-catch-finally

try {
    //可能出现错误的代码
} catch ( e ) {
    //如果出现错误就执行
} finally {
    //结束 try 这个代码块之前执行, 即最后执行
}

finally中的代码,不管有没有发生异常,都会执行。一般用在后端语言中,用来释放资源,JavaScript中很少会用到

 

面向对象

面向对象的基本概念

1.什么是面向对象编程?

2.面向过程和面向对象的对比

Example 1:洗衣服

面向过程的思维方式:
    step 1:收拾脏衣服
    step 2:打开洗衣机盖
    step 3:将脏衣服放进去
    step 4:设定洗衣程序
    step 5:开始洗衣服
    step 6:打开洗衣机盖子
    step 7:晒衣服
 
面向对象的思维方式:
    洗衣机需要什么对象?
    女朋友    
    洗衣机

在面向对象的思维方式中:我们只关心要完成事情需要的对象。

总结:面向对象是一种解决问题的思路,一种编程思想

对象是什么呢?

万物皆对象

JavaScript中的对象是什么?

JavaScript中,所谓的对象,就是键值对的集合。

编写代码的时候的原则:DRY

Don’t repeat yourself

属性和方法是什么?

比如要描述一个人,这个人有name,age,gender,体现在代码中:

{ name:"张三", age:18, gender:"Male" }

比如要做一个学生管理系统,那学生就是要设计的对象,学生拥有name,age,gender,address,phone,体现在代码中:

{ name:"刘亦菲", age:18, gender:"female", address:"上海", phone:"110" }

3.总结

  • 面向过程关注的实现功能的步骤,是如何把功能拆解后一步步的实现
  • 面向对象则是关注的实现功能的一系列的对象

面向对象编程举例

设置页面中的divp的边框为1px solid red

传统的处理办法

// 任务需求:
// 1> 获取div标签
var divs = document.getElementsByTagName( 'div' );
// 2> 遍历获取到的div标签
for(var i = 0; i < divs.length; i++) {
    //3> 获取到每一个div元素,设置div的样式
    divs[i].style.border = "1px dotted black";
}
 
// 4> 获取p标签
var ps = document.getElementsByTagName("p");
// 5> 遍历获取到的p标签
for(var j = 0; j < ps.length; j++) { 
    // 获取到每一个div元素 设置p标签的样式
    ps[j].style.border = "1px dotted black"; 
}

使用函数进行封装优化

// 通过标签名字来获取页面中的元素 
function tag(tagName) { 
    // var dvs = document.getElementsByTagName(tagName); 
    // return dvs; 
    return document.getElementsByTagName(tagName); 
}
 
// 封装一个设置样式的函数 
function setStyle(arr) { 
    for(var i = 0; i < arr.length; i++) { 
        // 获取到每一个div元素 
        arr[i].style.border = "1px solid #abc"; 
    } 
}
var dvs = tag("div");
var ps = tag("p");
setStyle(dvs); 
setStyle(ps);

使用面向对象的方式

// 更好的做法:是将功能相近的代码放到一起 
var tools = { 
    getEle: { 
        tag: function (tagName) { 
            return document.getElementsByTagName(tagName); 
        }, 
        id: function (idName) { 
            return document.getElementById(idName); 
        } 
    },    
    setCss: { 
        setStyle: function (arr) { 
            for(var i = 0; i < arr.length; i++) { 
                arr[i].style.border = "1px solid #abc"; 
            } 
        }, 
        css: function() {}, 
        addClass: function() {}, 
        removeClass: function() {} 
        // ... 
    } 
    // 属性操作模块 
    // 动画模块 
    // 事件模块 
    // ... 
};
 
var divs = tools.getEle.tag();
tools.setCss.setStyle(divs);

构造函数的作用

function Person(name, age){
    this.name = name;
    this.age = age;
}
//断点调试,进行类型查看
var p1 = new Person();
var p2 = new Object();
var p3 = new Date();
var p4 = new RegExp();
var p5 = {};

1.构造函数是干什么用的?

JavaScript中,构造函数是给对象添加属性,初始化属性用的。

2. 对象的创建过程

var p = new Person();

以上面这个p对象创建为例:

  1. 首先使用new关键字创建对象,类似于使用{},这个时候创建出来的对象是一个"没有任何成员"的对象。这里需要注意两点:
    • 使用new关键字创建的对象,对象的类型就是创建这个对象使用的构造函数的函数名
    • 使用{}创建对象,对象的类型一定是Object,相当于使用了new Object()
  2. 使用构造函数为其初始化成员
    • 在构造函数调用开始的时候,有一个赋值操作,也就是让this = 刚创建出来的对象
    • 在构造函数中,this就代表刚创建出来的对象
  3. 在构造函数中,利用对象的动态特性,为对象添加成员

面向对象的特性

JavaScript面向对象的特性

1. 封装性

对象是将数据与功能组合到一起, 即封装

  1. js 对象就是 键值对的集合
    • 键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性
    • 如果键值是函数, 那么就称为方法
  2. 对象就是将属性与方法封装起来
  3. 方法是将过程封装起来

2. 继承性

所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西

2.1. 传统继承基于模板

子类可以使用从父类继承的属性和方法。

class Person {
 string name;
 int age;
}
 
class Student : Person {
}
var stu = new Student();
stu.name

即:让某个类型的对象获得另一个类型的对象的属性的方法

2.2. js 继承基于对象

JavaScript中,继承就是当前对象可以使用其他对象的方法和属性。

js继承实现举例:混入(mix

function mix ( o1, o2 ) {
    for ( var k in o2 ) {
        o1[ k ] = o2[ k ];
    }
}

3. 多态性(基于强类型)只做了解

把不同的子类对象都当作父类来看,可以屏蔽不同子类对象之间的差异,写出通用的代码,做出通用的编程,以适应需求的不断变化。

动物 animal = new 子类(); // 子类:麻雀、狗、猫、猪、狐狸...
动物 animal = new ();
animal.();

 

原型

传统构造函数存在的问题

1. 发现问题

现有构造函数如下:

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHi = function(){
        console.log("你好");
    }
}

调用该构造函数创建对象,并对比创建出来的对象的sayHi方法:

 
var p = new Person("张三", 18);
var p1 = new Person("李四", 19);
console.log(p.sayHi == p1.sayHi); //输出结果为false

由于每个对象都是由new Person创建出来的,因此每创建一个对象,函数sayHi都会被重新创建一次,这个时候,每个对象都拥有一个独立的,但是功能完全相同的方法。

 

功能相同的函数,完全没有必要再内存中存在这么多份。所以就造成了资源浪费。

 

 

2. 解决问题

这里最好的办法就是将函数体放在构造函数之外. 在构造函数中只需要引用该函数即可。

function sayHello(){
    console.log("你好");
}
 
function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHi = sayHello;
}
 
//调用该构造函数创建对象,并对比创建出来的对象的sayHi方法
var p = new Person("张三", 18);
var p1 = new Person("李四", 19);
console.log(p.sayHi == p1.sayHi); //输出结果为true
    function Person(name, age){

        this.name = name;

        this.age = age;

//        this.sayHi = function(){

//            console.log("你好");

//        }

        this.sayHi=sayHi;

    }

//    调用该构造函数创建对象,并对比创建出来的对象的sayHi方法:

function sayHi() {

    console.log(this.sayHi);

}

    var p = new Person("张三", 18);

    var p1 = new Person("李四", 19);

    console.log(p.sayHi === p1.sayHi); //输出结果为true
 

这样写依然存在问题:

  • 全局变量增多,会增加引入框架命名冲突的风险
  • 代码结构混乱,会变得难以维护

使用原型解决构造函数问题

1. 关键点

  • 每一个函数在定义的时候,都会有跟它关联的一个对象被创建出来
  • 每一个由构造函数创建出来的对象,都会默认的和构造函数的神秘对象关联
  • 当使用一个方法进行属性或者方法访问的时候,会先在当前对象内查找该属性和方法
  • 如果当前对象内未找到,就回去跟它关联的神秘对象内进行查找
function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHi = function(){
        console.log("Hello!");
    };
}
 
 
var p = new Person("张三", 18);
p.sayHi(); //当前对象内有这个方法,所以不会去神秘对象内进行查找
var p1 = new Person("李四", 19);
p1.sayHello(); //当前对象没没有找到这个方法,所以去神秘对象内进行查找

问题来了,如何访问到这个神秘对象呢?

 
//可以通过 构造函数.prototype 访问这个神秘对象
console.log(Person.prototype);

当尝试给这个对象新增一个方法之后:

Person.prototype.sayHello = function(){
    console.log("我是神秘对象中的方法");
};

使用p,p1都可以访问这个方法:

p.sayHello();
p1.sayHello();

总结:

所有对象共享神秘对象(构造函数.prototype)内的属性和方法。

2. 解决方案

既然所有对象共享神秘对象(构造函数.prototype)内的属性和方法。我们只需要将需要共享的东西,也就是重复占用内存的东西,全部都放到 神秘对象(构造函数.prototype)中,那么所有对象就都可以使用,并且内存里面也只有一份了。

改造构造函数

function Person(name, age){
    this.name = name;
    this.age = age;
}
 
Person.prototype.sayHi = function(){
    console.log("你好");
};
 
//测试
var p = new Person("张三", 18);
var p1 = new Person("李四", 19);
 
console.log(p.sayHi == p1.sayHi); //输出true

3.常见的错误

3.1. 将属性写在神秘对象(构造函数.prototype)内

function Car(name){
     this.name = name;
}
 
function Person() {}
 
Person.prototype.name = '张三'; //基本类型的属性影响不大
 
Person.prototype.car = new Car("法拉利"); //引用类型的属性,会被所有的对象共享
 
var p = new Person();

3.2. 赋值的错误

 
function Person() {}
 
Person.prototype.name = '张三';
 
var p1 = new Person();
 
var p2 = new Person();
 
p1.name = '李四';
 
console.log( p1.name );
 
console.log( p2.name );
 
// 如果是访问数据, 当前对象中如果没有该数据就到构造函数的原型属性中去找
 
// 如果是写数据, 当对象中有该数据的时候, 就是修改值; 如果对象没有该数据, 那么就添加值

原型相关的概念

1. 神秘对象称与构造函数

  • 神秘对象就是构造函数的 "原型属性"
  • 简称原型 (构造函数的原型)

2. 神秘对象与构造函数所创建出来的对象

  • 神秘对象针对构造函数创建出来的对象称为 "原型对象"
  • 简称原型 (对象的原型)

 

原型继承

 

    • 原型中的成员, 可以直接被实例对象所使用
    • 实例对象直接 "含有" 原型中的成员
    • 因此实例对象 继承自 原型
    • 这样的继承就是 "原型继承"

原型的使用

1. 使用对象的动态特性

function Person () { }
Person.prototype.func = function () {
 console.log( 'something' );
};
var p = new Person();
p.func();

2. 直接替换原型对象

 
function Person () { };
Person.prototype = {
    func: function () {
        console.log( '22222' );
    }
};
var p = new Person();
p.func();

3. 直接替换原型会出现的问题

 
function Person () { }
 
Person.prototype.func = function () {
    console.log( 'something' );
};
 
var p = new Person();
 
Person.prototype.func = function () {
    console.log( 'something' );
};
 
var p1 = new Person();
 
p.func();
p1.func();

替换原型之后,在替换前创建出来的对象和替换后创建出来的对象的原型对象不一致

对象的__proto__属性

1、标识符命名规则

  • 区分大小写,Namename是两个不同的变量
  • 标识符可以以下划线_,美元符$或者字母开头,但是不能是数字
  • 标识符可以由下划线_,美元符$,字母,数字组成

2.神秘对象的访问

构造函数的prototype属性

之前我们访问神秘对象的时候,使用的是原型属性prototype

function Person(){}
 
//通过构造函数的原型属性prototype可以直接访问原型
 
Person.prototype;

在之前是无法通过构造函数创建出来的对象访问原型的

 
function Person(){}
 
var p = new Person();
 
//以前不能直接通过p来访问神秘对象

实例对象的__proto__属性

__proto__属性最早是火狐浏览器引入的,用以通过实例对象来访问原型,这个属性在早期是非标准的属性

有了__proto__属性,就可以通过构造函数创建出来的对象直接访问神秘对象

 
function Person(){}
 
var p = new Person();
 
//实例对象的__proto__属性可以方便的访问到原型对象
 
p.__proto__;
 
//既然使用构造函数的`prototype`和实例对象的`__proto__`属性
//都可以访问原型对象
//就有如下结论
p.__proto__ === Person.prototype;

3.__proto__属性的用途

  • 可以用来访问原型
  • 在实际开发中除非有特殊的需求,不要轻易的使用实例对象的__proto__属性去修改原型的成员,
  • 在调试过程中,可以轻易的查看原型的成员

tips:

早期如何通过实例对象访问原型?

可以使用实例对象访问构造函数属性constuctor

var p = new Person();
p.constructor.prototype;

4.给实例继承自原型的属性赋值需要注意的问题

function Person(){};
Person.prototype.name = "周华健";
var o1 = new Person();
var o2 = new Person();
o1.name = "李宗盛"; //这里修改的不是原型对象的name属性,而是给o1自己新增了一个name属性,进行了赋值
 
//我们可以对比一下o1和o2的name值
console.log(o1.name , o2.name);

继承的实现方式

通过继承来让dog对象可以使用animal对象的属性和方法,那怎么实现继承呢?

1. 最简单的继承实现

直接遍历父对象的属性,将所有的属性加到当前对象上

var animal = {
    name:"Animal",
    sex:"male",
    age:5,
    bark:function(){
        console.log("Animal bark");
    }
};
 
var dog = {};
for (var k in animal){
    dog[k]= animal[k];
}

2. 原型继承

每一个构造函数都有prototype原型属性,通过构造函数创建出来的对象都继承自该原型属性。所以可以通过更改构造函数的原型属性来实现继承。

function Dog(){
    this.type = "yellow Dog";
}
 
function extend(obj1, obj2){
    for (var k in obj2){
        obj1[k] = obj2[k];    
    }
};
 
//使用混入的方式,将属性和方法添加到构造函数的原型属性上,构造函数所创建出来的实例就都有了这些属性和方法。
extend(Dog.prototype, {
    name:"",
    age:"",
    sex:"",
    bark:function(){}
 
})
 
//使用面向对象的思想把extend方法重新封装
//extend是扩展的意思,谁要扩展就主动调用extend这个方法
//所以extend应该是对象的方法,那现在我们要扩展的是构造函数的原型对象
//所以给构造函数的原型对象添加一个extend方法
 
//如下:
 
Dog.prototype.extend = function(obj){
    for (var k in obj){
        this[k]=obj[k];
    }
}
 
//调用方式就变成了下面这种形式
 
Dog.prototype.extend({
    name:"",
    age:"",
    sex:"",
    bark:function(){}
});

属性搜索原则

访问一个对象的成员的时候,首先是在实例中找,没有找到, 就去原型中找, 但是原型中没有怎么办?

原型链

每一个对象都有原型属性,那么对象的原型属性也会有原型属性,所以这样就形成了一个链式结构,我们称之为原型链。

属性搜索原则

所谓的属性搜索原则,也就是属性的查找顺序,在访问对象的成员的时候,会遵循如下的原则:

  1. 首先在当前对象中查找,如果找到,停止查找,直接使用,如果没有找到,继续下一步
  2. 在该对象的原型中查找,如果找到,停止查找,直接使用,如果没有找到,继续下一步
  3. 在该对象的原型的原型中查找,如果找到,停止查找,直接使用,如果没有找到,继续下一步。
  4. 继续往上查找,直到查找到Object.prototype还没有, 那么是属性就返回 undefied,是方法,就报错xxx is not a function

原型链结构

凡是对象就有原型, 原型又是对象, 因此凡是给定义一个对象, 那么就可以找到他的原型, 原型还有原型. 那么如此下去, 就构成一个对象的序列. 称该结构为原型链.

使用构造函数创建出对象, 并且没有利用赋值的方式修改原型, 就说该对象保留默认的原型链.

默认原型链结构是什么样子呢?

function Person() {
}
 
var p = new Person();
// p 具有默认的原型链

默认的原型链结构就是:

当前对象 -> 构造函数.prototype -> Object.prototype -> null

在实现继承的时候, 有时会利用替换原型链结构的方式实现原型继承, 那么原型链结构就会发生改变

 
function ToolsCollection () {
}
ToolsCollection.prototype = [];
var arr = new ToolsCollection();
// arr -> [] -> Array.prototype -> Object.prototype -> null
// var arr = new Array();

原型式继承

观察:DOM对象的原型链

原型式继承就是利用修改原型链的结构( 增加一个节点, 删除一个节点, 修改节点中的成员 ), 来使得实例对象可以使用整条链中的所有成员.

绘制原型链结构

注意:函数也有__proto__属性,暂时不考虑这个!

观察如下代码,绘制相应的原型链结构图:

function Person(){};
var p = new Person();

注意

js , 所有的对象字面量在解析以后, 就是一个具体的对象了. 那么可以理解为 调用的 对应的构造方法.

  • 例如在代码中写上 {}, 就相当于new Object()
  • 例如代码中有 [], 就相当于new Array()
  • 例如代码中有 /./, 就相当于new RegExp( '.' )

注意: 在底层理论执行的过程中, 是否有调用构造函数, 不一定. 和浏览器的版本有关.

对象相关的其他知识

Object.prototype成员介绍

Object.prototype常用成员

成员

描述

Object.prototype.__proto__

指向当对象被实例化的时候,用作原型的对象。

Object.prototype.hasOwnProperty()

返回一个布尔值 ,表示某个对象是否含有指定的属性,而且此属性非原型链继承的。

Object.prototype.isPrototypeOf()

返回一个布尔值,表示指定的对象是否在本对象的原型链中。

 

 

Object.prototype.toString()

返回对象的字符串表示。

Object.prototype.valueOf()

返回指定对象的原始值。

函数的构造函数Function

js 使用Function可以实例化函数对象。也就是说在 js 中函数与普通对象一样, 也是一个对象类型. 函数是 js 中的一等公民.

  1. 函数是对象, 就可以使用对象的动态特性
  2. 函数是对象, 就有构造函数创建函数
  3. 函数是函数, 可以创建其他对象
  4. 函数是唯一可以限定变量作用域的结构

要解决的问题

  1. Function 如何使用
  2. Function 与函数的关系
  3. 函数的原型链结构

Function 的使用

语法:

//Function函数所有的参数全都是字符串
//Function函数的作用就是将所有的参数组合起来,变成一个函数
//1、如果只传一个参数,那么这个函数必然是函数体
//2、如果传多个参数,那么最后一个参数表示函数体,前面的参数代表将要创建的函数的参数
//3、如果不传参数,表示创建一个空函数
new Function(arg1, arg2, arg3, ..., argN, body);

创建一个打印一句话的函数

//传统的方式
function foo(){
    console.log("你好");
}
 
//使用Function
var func = new Function("console.log('你好');");

这里两种方式创建出来的函数功能是一样的。

创建一个空函数

//传统的方式
function foo(){}
 
//Function
var func = new Function();

创建一个有参数的函数

//传统的方式
function foo(num){
    console.log(num);
}
 
//Function
 
var func = new Function(){"num", "console.log(num);"};

解决代码太长的问题

利用+连接字符串

 
var func = new Function( 'a', 'b', 'c',
 
 'var res = a > b ? a : b;' +
 
 'res = res > c ? res : c;' +
 
 'return res;' );

 

利用字符串特性

 
function foo ( a, b, c ) {
    var res = a > b ? a : b;
    res = res > c ? res : c;
    return res;
}
var func = new Function( 'a', 'b', 'c', 'return foo( a, b, c );');
  1. ES6 语法(很少有浏览器实现) 使用键盘左上角的`表示可换行字符串的界定符,之前我们用的是单引号或者双引号来表示一个字符串字面量,在ES6中可以用反引号来表示该字符串可换行。
  2. (最终)利用 DOM 的特性完成该方法
<div id="code" style="display:none">
var res = a > b ? a : b;
res = res > c ? res : c;
return res;
</div>
 
<script>
 
var txt = document.getElementbyId("code).innerHtml + ' ';
 
var func = new Function('a', 'b', 'c', txt);
 
</script>

静态成员与实例成员的概念

静态成员和实例成员这两个概念其实也是从面相对象的编程语言中引入的,对应到JavaScript中的理解为:

静态成员

静态成员是指静态属性静态方法,所谓静态,就是由构造函数提供的。

实例成员

实例成员是值实例属性实例方法,所谓实例,就是由构造函数创建出来的对象。

举例说明:

 
function Person(){
    this.name = "zs",
    this.sayHello = function(){
        console.log("Hello World");
    }
}
 
//下面这个sayHi方法就是构造函数自己的方法,也就是静态方法
Person.sayHi = function(){
    console.log("I'm a Person");
}
 
//原型属性属于构造函数,所以原型属性是静态属性
Person.prototype = {};
var p = new Person();
 
//这里的name是构造函数创建出来的实例对象的属性,所以是实例属性
p.name = "李四";
 
//这里的sayHello也是构造函数创建出来的实例对象的方法,所以是实例方法
p.sayHello();

提示:

一般工具型方法都有静态成员提供, 一般与实例对象有关的方法由实例成员表示.

工具方法:比如jQuery.Ajax()jQuery.trim()jQuery.Each()

arguments对象

在每一个函数调用的过程中, 函数代码体内有一个默认的对象arguments, 它存储着实际传入的所有参数。

arguments是一个伪数组对象. 它表示在函数调用的过程中传入的所有参数的集合。在函数调用过程中不规定参数的个数与类型, 可以使得函数调用变得非常灵活性。

JavaScript中的函数并没有规定必须如何传参:

  1. 定义函数的时候不写参数, 一样可以调用时传递参数
  2. 定义的时候写了参数, 调用的时候可以不传参
  3. 定义的时候写了一个参数, 调用的时候可以随意的传递多个而参数

在代码设计中, 如果需要函数带有任意个参数的时候, 一般就不带任何参数, 所有的参数利用arguments对象来获取.

 

作用域

,表示的是一个范围,作用域,就是作用范围。

作用域说明的是一个变量可以在什么地方被使用,什么地方不能被使用。

块级作用域

JavaScript中没有块级作用域

{
    var num = 123;
    {
        console.log( num );
    }
}
console.log( num );

上面这段代码在JavaScript中是不会报错的,但是在其他的编程语言中(C#CJAVA)会报错。

这是因为,在JavaScript中没有块级作用域,使用{}标记出来的代码块中声明的变量num,是可以被{}外面访问到的。

但是在其他的编程语言中,有块级作用域,那么{}中声明的变量num,是不能在代码块外部访问的,所以报错。

词法作用域

什么是词法作用域?

词法( 代码 )作用域, 就是代码在编写过程中体现出来的作用范围. 代码一旦写好, 不用执行, 作用范围就已经确定好了. 这个就是所谓词法作用域.

js 中词法作用域规则:

  • 函数允许访问函数外的数据.
  • 整个代码结构中只有函数可以限定作用域.
  • 作用域规则首先使用提升规则分析
  • 如果当前作用规则中有名字了, 就不考虑外面的名字

练习:

var num = 123;
function foo() {
    console.log( num );
}foo();

2.

if ( false ) {
    var num = 123;
} 
console.log( num ); // undefiend

3.

var num = 123;
function foo() {
    var num = 456;
    function func() {
        console.log( num );
    }
    func();
}
foo();

4.

var num1 = 123;
function foo1() {
    var num1 = 456;
    function foo2() {
        num1 = 789;
        function foo3 () {
            console.log( num1 );
        }
        foo3();
    }
    foo2();
}
foo1();
console.log( num1 );

面试题

var num = 123;
function func1(){
    console.log(num);
}
function func2(){
    var num = 456;
    func1();
}

 

 

JavaScript是解释型的语言,但是他并不是真的在运行的时候逐句的往下解析执行。

我们来看下面这个例子:

func();
 
function func(){
     alert("Funciton has been called");
}

在上面这段代码中,函数func的调用是在其声明之前,如果说JavaScript代码真的是逐句的解析执行,那么在第一句调用的时候就会出错,然而事实并非如此,上面的代码可以正常执行,并且alert出来Function has been called

所以,可以得出结论,JavaScript并非仅在运行时简简单单的逐句解析执行!

JavaScript 预解析

JavaScript引擎在对JavaScript代码进行解释执行之前,会对JavaScript代码进行预解析,在预解析阶段,会将以关键字varfunction开头的语句块提前进行处理。

关键问题是怎么处理呢?

当变量和函数的声明处在作用域比较靠后的位置的时候,变量和函数的声明会被提升到作用域的开头。

重新来看上面的那段代码

func();
function func(){
     alert("Funciton has been called");
}

由于JavaScript的预解析机制,上面的代码就等效于:

function func(){
    alert("Funciton has been called");
}
func();

看完函数声明的提升,再来看一个变量声明提升的例子:

alert(a);
var a = 1;

由于JavaScript的预解析机制,上面这段代码,alert出来的值是undefined,如果没有预解析,代码应该会直接报错a is not defined,而不是输出值。

Wait a minute, 不是说要提前的吗?那不是应该alert出来1,为什么是undefined?

那么在这里有必要说一下声明定义初始化的区别。其实这几个概念是C系语言的人应该都比较了解的。

 

行为

说明

声明

告诉编译器/解析器有这个变量存在,这个行为是不分配内存空间的,JavaScript中,声明一个变量的操作为:var a;

定义

为变量分配内存空间,在C语言中,一般声明就包含了定义,比如:int a;,但是在JavaScript中,var a;这种形式就只是声明了。

初始化

在定义变量之后,系统为变量分配的空间内存储的值是不确定的,所以需要对这个空间进行初始化,以确保程序的安全性和确定性

赋值

赋值就是变量在分配空间之后的某个时间里,对变量的值进行的刷新操作(修改存储空间内的数据)

 

所以我们说的提升,是声明的提升。

那么再回过头看,上面的代码就等效于:

var a; //这里是声明
alert(a);//变量声明之后并未有初始化和赋值操作,所以这里是 undefined
a = 1;

复杂点的情况分析

通过上一小节的内容,我们对变量、函数声明提升已经有了一个最基本的理解。那么接下来,我们就来分析一些略复杂的情况。

函数同名

观察下面这段代码:

func1();
function func1(){
     console.log('This is func1');
}
 
func1();
function func1(){
     console.log('This is last func1');
}

输出结果为:

This is last func1
This is last func1

原因分析:由于预解析机制,func1的声明会被提升,提升之后的代码为:

function func1(){
     console.log('This is func1');
}
 
function func1(){
     console.log('This is last func1');
}
 
func1();
func1();

同名的函数,后面的会覆盖前面的,所以两次输出结果都是This is last func1

变量和函数同名

alert(foo);
function foo(){}
var foo = 2;

当出现变量声明和函数同名的时候,只会对函数声明进行提升,变量会被忽略。所以上面的代码的输出结果为

function foo(){}

我们还是来吧预解析之后的代码展现出来:

function foo(){};
alert(foo);
foo = 2;

再来看一种

var num = 1;
function num () {
     alert( num );
}
num();

代码执行结果为:

Uncaught TypeError: num is not a function

 

 

直接上预解析后的代码:

function num(){
     alert(num);
}
 
num = 1;
num();

预解析是分作用域的

声明提升并不是将所有的声明都提升到window对象下面,提升原则是提升到变量运行的环境(作用域)中去。

function showMsg()
{
    var msg = 'This is message';
}
alert(msg); // msg未定义

还是直接把预解析之后的代码写出来:

function showMsg()
{
    var msg;
    msg = 'This is message';
}
alert(msg); // msg未定义

预解析是分段的

分段,其实就分script标签的

<script>
func(); // 输出 AA2;
function func(){
    console.log('AA1');
}
function func(){
    console.log('AA2');
}
</script>
 
<script>
function func(){
    console.log('AA3');
}
</script>

第一个script标签中的两个func进行了提升,第二个func覆盖了第一个func,但是第二个script标签中的func并没有覆盖上面的第二个func。所以说预解析是分段的。

tip:但是要注意,分段只是单纯的针对函数,变量并不会分段预解析。*****

函数表达式并不会被提升

func();
var func = function(){
    alert("我被提升了");
};

这里会直接报错,func is not a function,原因就是函数表达式,并不会被提升。只是简单地当做变量声明进行了处理,如下:

var func;
func();
func = function(){
    alert("我被提升了");
}

条件式函数声明

console.log(typeof func);
if(true){
    function(){
        return 1;
    }
}
console.log(typeof func);

上面这段代码,就是所谓的条件式函数声明,这段代码在Gecko引擎中打印"undefined"

Gecko加入了ECMAScript以外的一个feature:条件式函数声明。

Conditionally created functions Functions can be conditionally declared, that is, a function declaration can be nested within an if statement.

Note: Although this kind of function looks like a function declaration, it is actually an expression (or statement), since it is nested within another statement. See differences between function declarations and function expressions.

Note中的文字说明,条件式函数声明的处理和函数表达式的处理方式一样,所以条件式函数声明没有声明提升的特性。

作用域链

什么是作用域链

只有函数可以制造作用域结构, 那么只要是代码,就至少有一个作用域, 即全局作用域。

凡是代码中有函数,那么这个函数就构成另一个作用域。如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来,可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

例如:

    //f1--->全局
    function f1(){
        //f2--->f1--->全局
        function f2(){
            //f3---->f2--->f1--->全局
            function f3(){
            }
            //f4--->f2--->f1---->全局
            function f4(){
            }
        }
        //f5--->f1---->全局
        function f5(){
        }
    }

 

绘制作用域链的步骤:

  1. 看整个全局是一条链, 即顶级链, 记为 0 级链
  2. 看全局作用域中, 有什么成员声明, 就以方格的形式绘制到 0 级练上
  3. 再找函数, 只有函数可以限制作用域, 因此从函数中引入新链, 标记为 1 级链
  4. 然后在每一个 1 级链中再次往复刚才的行为

变量的访问规则

  • 首先看变量在第几条链上, 在该链上看是否有变量的定义与赋值, 如果有直接使用
  • 如果没有到上一级链上找( n - 1 级链 ), 如果有直接用, 停止继续查找.
  • 如果还没有再次往上刚找... 直到全局链( 0 ), 还没有就是 is not defined
  • 注意,同级的链不可混合查找

如何分析代码

  1. 在分析代码的时候切记从代码的运行进度上来分析, 如果代码给变量赋值了, 一定要标记到图中
  2. 如果代码比较复杂, 可以在图中描述代码的内容, 有事甚至需要将原型图与作用域图合并分析

补充

声明变量使用`var`, 如果不使用`var`声明的变量就是全局变量( 禁用 )

因为在任何代码结构中都可以使用该语法. 那么再代码维护的时候会有问题. 所以除非特殊原因不要这么用.

下面的代码的错误

function foo () {
    var i1 = 1 // 局部
    i2 = 2, // 全局
    i3 = 3; // 全局
}

闭包

闭包的概念

闭包从字面意思理解就是闭合, 包起来.

简单的来说闭包就是,一个具有封闭的对外不公开的, 包裹结构, 或空间.

JavaScript中函数可以构成闭包. 一般函数是一个代码结构的封闭结构, 即包裹的特性, 同时根据作用域规则, 只允许函数访问外部的数据, 外部无法访问函数内部的数据, 即封闭的对外不公开的特性. 因此说函数可以构成闭包.

闭包要解决什么问题?

  1. 闭包内的数据不允许外界访问
  2. 要解决的问题就是间接访问该数据

函数就可以构成闭包, 要解决的问题就是访问到函数内部的数据

我们观察下面的函数foo,在foo内部有一个变量num,能否在函数外部访问到这个变量num呢?

function foo () {
    var num = 123;
    return num;
}
 
var res = foo();
console.log( res ); // => 123

分析:

在上面的代码中,确实可以访问到num这个函数内部的变量。但是能不能多次访问呢?

不能,因为每次访问都得重新调用一次foo函数,每次调用都会重新创建一个num = 123,然后返回。

解决思路

函数内的数据不能直接在函数外被访问,是因为作用域的关系,上级作用域不能直接访问下级作用域中的数据。

但是如果反过来,下级作用域可以直接访问上级作用域中的数据。那么如果在函数foo内定义一个函数,那么在这个内部函数中是可以直接访问foo中的num的。

function foo() {
    var num = Math.random();    
    function func() {
        return num;    
    }
    return func;
}
 
var f = foo();
// f可以直接访问num,而且多次访问,访问的也是同一个,并不会返回新的num
var res1 = f();
var res2 = f();

如何获得超过一个数据

函数的返回值只能有一个,那按照上面的方法,我们只能对函数内部的一个数据进行操作。怎么操作函数内的多个数据呢?

可以使用对象,代码如下:

function foo () {
    var num1 = Math.random();
    var num2 = Math.random();
    //可以将多个函数包含在一个对象内进行返回,这样就能在函数外部操作当前函数内的多个变量
    return {
        num1: function () {
            return num1;
        },
        num2: function () {
            return num2;
        }
    }
}

如何完成读取一个数据和修改这个数据

使用内部的函数进行操作。

function foo() {
    var num = Math.random();
    //分别定义getset函数,使用对象进行返回
    return {
        //get_num负责获取数据
        get_num: function() {    
            return num;
        },
        //set_num负责设置数据
        set_num: function(value) {
            num = value;
        }
    }
}

闭包的基本结构

一般闭包要解决的的问题就是要想办法间接的获得函数内数据的使用权. 那么我们的可以总结出一个基本的使用模型.

  1. 写一个函数, 函数内定义一个新函数, 返回新函数, 用新函数获得函数内的数据
  2. 写一个函数, 函数内定义一个对象, 对象中绑定多个函数, 返回对象, 利用对象的方法访问函数内的数据

函数模式

特征:就是一个简单的函数调用,函数名前面没有任何的引导内容

function foo(){}
var func = function(){}
foo();
func();
(function(){})();

this在函数模式中的含义: this在函数中表示全局对象,在浏览器中是window对象

方法模式

特征: 方法一定是依附于一个对象, 将函数赋值给对象的一个属性, 那么就成为了方法.

function f() {
    this.method = function () {};
}
 
var o = {
    method: function () {}
}

this在方法模式调用中的含义:表示函数所依附的这个对象

构造器调用模式

由于构造函数只是给 this 添加成员. 没有做其他事情. 而方法也可以完成这个操作, this 而言, 构造函数与方法没有本质区别.

特征:使用 new 关键字, 来引导构造函数.

function Person(){
    this.name = "zhangsan";
    this.age = 19;
    this.sayHello = function(){
    };
}
var p = new Person();

构造函数中this与方法中一样, 表示对象, 但是构造函数中的对象是刚刚创建出来的对象

关于构造函数中return关键字的补充说明

  • 构造函数中不需要return, 就会默认的return this
  • 如果手动的添加return, 就相当于 return this
  • 如果手动的添加return 基本类型; 无效, 还是保留原来 返回this
  • 如果手动添加return null; return undefiend, 无效
  • 如果手动添加return 对象类型; 那么原来创建的this就会被丢掉, 返回的是 return后面的对象

创建对象的模式

工厂方法

// 工厂就是用来生产的, 因此如果函数创建对象并返回, 就称该函数为工厂函数
function createPerson( name, age, gender ) {
    var o = {};
    o.name = name;
    o.age = age;
    o.gender = gender;
    return o;
}
// document.createElement()

构造方法

function Person(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}
 
var p = new Person("zhangsan", 19, "");

寄生式创建对象

 
function Person(name, age, gender){
    var o = {};
    o.name = name;
    o.age = age;
    o.gender = gender;
    return o;
}
 
var p = new Person("Jack", 18, "male");

混合式创建

混合式继承就是将所有的属性放在构造方法里面,然后将所有的方法放在原型里面,使用构造方法和原型配合起来创建对象。(模仿着前面的,自己试一试)

上下文调用模式

上下文(Context),就是函数调用所处的环境。

上下文调用,也就是自定义设置this的含义。

在其他三种调用模式中,函数在调用的时候,this的值都是指定好了的,我们没办法自己进行设置,如果尝试去给this赋值,会报错。

 

上下文调用的语法

 
//第一种, apply
 
函数名.apply(对象, [参数]);
 
//第二种, call
 
函数名.call(对象, 参数);
 
//上面两种方式的功能一模一样,只是在传递参数的时候有差异。

功能描述:

  1. 语法中的函数名表示的就是函数本身,使用函数调用模式的时候,this默认是全局对象
  2. 语法中的函数名也可以是方法(:obj.method),在使用方法模式调用的时候,this默认是指当前对象
  3. 在使用applycall的时候,默认的this都会失效,this的值由applycall的第一个参数决定

补充说明

  1. 如果函数或方法中没有this的操作, 那么无论什么调用其实都一样.
  2. 如果是函数调用foo(), 那么有点像foo.apply( window ).
  3. 如果是方法调用o.method(), 那么有点像o.method.apply( o ).

参数问题

callapply在没有后面的参数的情况下(函数无参数, 方法无参数) 是完全一样的.

如下:

function foo() {
     console.log( this );
}
 
foo.apply( obj );
foo.call( obj );

第一个参数的使用规则:

  1. 如果传入的是一个对象, 那么就相当于设置该函数中的 this 为参数
  2. 如果不传入参数, 或传入 null. undefiend , 那么相当于 this 默认为 window
foo();
foo.apply();
foo.apply( null );
foo.call( undefined );
 
 
  1. 如果传入的是基本类型, 那么 this 就是基本类型对应的包装类型的引用
    • number -> Number
    • boolean -> Boolean
    • string -> String

第二个参数的使用规则

在使用上下文调用的时候, 原函数可能会带有参数, 那么这个参数在上下文调用中使用第二个( n )参数来表示

function foo( num ) {
     console.log( num );
}
 
foo.apply( null, [ 123 ] );
// 等价于
foo( 123 );

上下文调用模式的应用

上下文调用只是能修改this, 但是使用的最多的地方是函数借用.

1. 将伪数组转换为数组

传统的做法:

var a = {};
a[ 0 ] = 'a';
a[ 1 ] = 'b';
a.length = 2;
 
// 使用数组自带的方法 concat
// 如果参数中有数组会把参数数组展开
// 语法: arr.concat( 1, 2, 3, [ 4, [ 5 ] ] );
// 特点:不修改原数组
var arr = [];
var newArr = arr.concat( a );

由于a是伪数组, 只是长得像数组. 所以上面的代码不能成功,不能使用concat方法。

但是apply方法有一个特性, 可以将数组或伪数组作为参数。(IE8不支持伪数组操作)

foo.apply( obj, 伪数组 ); // IE8 不支持

利用apply方法,可以写出以下

//将伪数组 a 作为 apply 的第二个参数
var newArr = Array.prototype.concat.apply( [], a )

处理数组转换, 实际上就是将元素一个一个的取出来构成一个新数组, 凡是涉及到该操作的方法理论上都可以。

push方法

//用法:
arr.push( 1 ); //将这个元素加到数组中, 并返回所加元素的个数
arr.push( 1, 2, 3 ); //将这三个元素依次加到数组中, 返回所加个数
 
var a = { length: 0 }; // 伪数组
a[ a.length++ ] = 'abc'; // a[ 0 ] = 'abc'; a.length++;
a[ a.length++ ] = 'def';
 
// 使用一个空数组, 将元素一个个放到数组中即可
var arr = [];
arr.push( a ); // 此时不会将元素展开, 而是将这个伪数组作为一个元素加到数组中
// 再次利用 apply 可以展开伪数组的特征
arr.push.apply( arr, a );
// 利用 apply 可以展开伪数组的特性, 这里就相当于 arr.push( a[0], a[1] )

2. 求数组中的最大值

传统的做法

var max = arr[ 0 ];
for ( var i = 1; i < arr.length; i++ ) {
    if ( arr[ i ] > max ) {
        ...
    }
}

js 中的Math对象中提供了很多数学函数Math.max( 1,2,3 )

还是利用 apply 可以展开数组的特性

var arr = [ 123456,12345,1234,345345,234,5 ];
Math.max.apply( null, arr );

3.借用构造函数继承

function Person ( name, age, gender ) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}
// 需要提供一个 Student 的构造函数创建学生对象
// 学生也应该有 name, age, gender, 同时还需要有 course 课程
function Student ( name, age, gender, course ) {
    Person.call( this, name, age, gender );
    this.course = course;
}

 

资料

资料一:

1、解释型语言与编译型语言的区别翻译时间的不同。。

编译型语言在程序执行之前,有一个单独的编译过程,将程序翻译成机器语言,以后执行这个程序的时候,就不用再进行翻译了。

解释型语言,是在运行的时候将程序翻译成机器语言,所以运行速度相对于编译型语言要慢。

C/C++ 等都是编译型语言,而JavaC#等都是解释型语言。

虽然Java程序在运行之前也有一个编译过程,但是并不是将程序编译成机器语言,而是将它编译成字JAVASCRIPT节码(可以理解为一个中间语言)。
在运行的时候,由JVM将字节码再翻译成机器语言。
注:脚本语言一般都有相应的脚本引擎来解释执行。 他们一般需要解释器才能运行。,ASP,PHP,PERL,Nuva都是脚本语言。C/C++编译、链接后,可形成独立执行的exe文件。

2.脚本语言是一种解释性的语言,例如vbscript,javascript,installshield script,ActionScript等等,它不象c\c++等可以编译成二进制代码,以可执行文件的形式存在.

脚本语言不需要编译,可以直接用,由解释器来负责解释。 

3.
脚本语言一般都是以文本形式存在,类似于一种命令

 

资料二:

1)什么是脚本语言?
2)为什么叫做脚本语言,而不叫做其它的名字?请您介绍一下脚本语言这个名字的来历?具有什么特征的语言被称为脚本语言?

在网上查了查,没查着。脚本语言英文应该是script language吧。script在金山词霸中的解释有:A copy of a text used by a director or performer.也就是按照script进行导演或演出。用在计算机上可能就变成了:可以执行的文本。因为我知道的所有脚本文件都是文本文件格式的,而且可以执行,从这个意义上与script的含义很接近。更关键的是脚本语言是从英文翻译过来的,因为外国人这么叫,所以我们也这么翻译的吧。历史我不知道。
我个人认为:源程序是文本格式,可以被解释执行的语言可以算作脚本语言。如:python,perl,php,shell,awk等等,许多。不过,有一些脚本语言已经发生了变化,如python,perl已经可以编译成中间代码然后执行,这样的脚本语言已经可以被称为编译型脚本语言。

BTW:脚本语言与解释语言我认为还是有区别的。解释语言是说解释执行的语言,但执行的代码并不一定是文本格式的。脚本语言的程序是文本文件,并且是解释执行的。但这两种区别也有些模糊。反正有点区别,不过你认为差不多也行,好象现在并不太细分脚本语言与解释语言。

 

资料三:

    脚本与解释有时是很模糊,其实没有必要搞得这么清楚了,当然如果你有兴趣去搞。在这里我们可以干脆将脚本与解释混为一谈。解释是第一位的,至于是不是文本格式,是否会编译成字节码倒是次要的。不这,我所接触的脚本语言(我认为是)只需要有文本格式就可以运行。象Python有中间代码,不过这一过程完全是自动的,你不用去管它。因此从最基本的运行条件来说,我认为脚本语言似乎文件格式要求是文本的。象java,其实是有一个虚拟机在运行,它也是解释执行的,那它算不算脚本语言呢,我想应该不算吧。因为,它的运行是先编译成字节码,再去运行。如果编译过程全自动了,算吗?这许就可以算了吧。

不过,我们完全可以不去关心这些个案,只考虑通常的情况就行了。因此,我个人认为:脚本语言:一、解释执行 二、执行文件为文本即可

 

资料四:

抽象的级别:这是最重要也是最明显示的不同。脚本语言对程序员提供了更高级的抽象。这一点明显表现在:在这种语言自身中,存在有高级的数据结构,如列表和字典结构,和对这种结构简单方便的嵌套和操作。这样可以创建非常成功的程序。    
    
 
  类型定义:系统语言通常是强类型和静态类型定义。这就意味着所有变量的类型要在程序中指定,在编译时检查。相反地,脚本语言是最松散的类型定义,完全没有类型声明,并且在运行时进行动态类型检查。    
    
 
  执行:系统语言的特点是编译的。程序被编译成可执行的二进制。另一方面,脚本语言的特点是解释,也就是,指令被立即执行,不存在一个编译的中间状态。这就意味着脚本语言是交互式的(你可以在提示符下敲入命令,并且看到结果),这是另一个巨大的胜利。这样完全将编译过程从编辑-编译-运行循环中去掉了。    
    
 
  速度:以上三点是脚本语言一方面在速度与效率,   一方面在易用性与表示式的强大性之间进行折衷的典型例子。这就使得脚本语言的执行速度比系统语言慢一个数量级。这就是对脚本语言诽谤最多的方面。性能的降低不是真正的问题,因为思想是用脚本语言来组合组件,这些组件是用象C   这样的快速系统语言来编写的。所以所有需要运行快速的东西将因为是用快速的语言实现的而运行得快速。脚本语言只用于将东西绑在一起,并且这些通常不是性能的瓶颈(   或如果是,你需要重新检查你的设计)

 

网格

  1. function  drawGrid(stepX, stepY, lineWidth, color){  
  2.      context.save();  
  3.      context.lineWidth = lineWidth;  
  4.      context.strokeStyle = color;  
  5.      for(var i = stepY; i < context.canvas.height; i += stepY){  
  6.          context.beginPath();  
  7.          context.moveTo(0, i);  
  8.          context.lineTo(context.canvas.width, i);  
  9.          context.stroke();  
  10.      }  
  11.   
  12.   
  13.      for(var i = stepX; i < context.canvas.width; i += stepX){  
  14.          context.beginPath();  
  15.          context.moveTo(i, 0);  
  16.          context.lineTo(i, context.canvas.height);  
  17.          context.stroke();  
  18.      }  
  19.   
  20.   
  21.      context.restore();  
  22.  } 

 

 

 

 

  1. function  drawGrid(stepX, stepY, lineWidth, color){  
  2.      context.save();  
  3.      context.lineWidth = lineWidth;  
  4.      context.strokeStyle = color;  
  5.      for(var i = stepY + 0.5; i < context.canvas.height; i += stepY){  
  6.          context.beginPath();  
  7.          context.moveTo(0, i);  
  8.          context.lineTo(context.canvas.width, i);  
  9.          context.stroke();  
  10.      }  
  11.   
  12.   
  13.      for(var i = stepX + 0.5; i < context.canvas.width; i += stepX){  
  14.          context.beginPath();  
  15.          context.moveTo(i, 0);  
  16.          context.lineTo(i, context.canvas.height);  
  17.          context.stroke();  
  18.      }  
  19.   
  20.   
  21.      context.restore();  
  22.  }  

 

 

 

  1. function  drawGrid(stepX, stepY, lineWidth, color){  
  2.      context.save();  
  3.      context.lineWidth = lineWidth;  
  4.      context.strokeStyle = color;  
  5.      for(var i = stepY + 0.5; i < context.canvas.height; i += stepY){  
  6.          context.beginPath();  
  7.          context.moveTo(0, i);  
  8.          context.lineTo(context.canvas.width, i);  
  9.          context.stroke();  
  10.      }  
  11.   
  12.   
  13.      for(var i = stepX + 0.5; i < context.canvas.width; i += stepX){  
  14.          context.beginPath();  
  15.          context.moveTo(i, 0);  
  16.          context.lineTo(i, context.canvas.height);  
  17.          context.stroke();  
  18.      }  
  19.   
  20.   
  21.      context.restore();  
  22.  }  

 

Canvas

1. 基本篇

1.1. 什么是 Canvas

canvas HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.

canvas  ['kænvəs]   ['kænvəs]   帆布 画布

1.1.1. canvas 的基本用法

基本语法

    <canvas></canvas>
  1. 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width height 设置该区域的尺寸.
  2. 默认 canvas 的宽高为 300 150.
  3. 不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
  4. 如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.
  5. canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.
  6. canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api.

canvas 的使用领域

canvas 的使用领域很多:

  1. 游戏
  2. 可视化数据(重点)
  3. banner 广告
  4. 多媒体
  5. 未来
    • 模拟仿真
    • 远程操作
    • 图形编辑

1.1.2. 我们的课程目标

  1. 不是为了做游戏
  2. 学会使用基本的 canvas api, 使用 canvas 可以完成简单的绘图
  3. 实现数据的可视化

1.2. 基本绘图

1.2.1. 基本绘图方法

绘图步骤

  1. 获得 canvas 对象.
  2. 调用 getContext 方法, 提供字符串参数 '2d'.
  3. 该方法返回 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
  4. 使用 CanvasRenderingContext2D 对象提供的方法进行绘图.
  5. 基本绘图命令
    • 设置开始绘图的位置context.moveTo( x, y ).
    • 设置直线到的位置context.lineTo( x, y ).
    • 描边绘制context.stroke().
    • 填充绘制context.fill().
    • 闭合路径context.closePath().

01-绘制基本线

    var canvas = document.createElement( 'canvas' );
    canvas.width = 500;
    canvas.height = 400;
    canvas.style.border = '1px dashed red';
    document.body.appendChild( canvas );
    // 获得 CanvasRenderingContext2D 对象
    var context = canvas.getContext( '2d' );
    // 设置 起点
    context.moveTo( 0, 0 );
    // 绘制直线
    context.lineTo( 500, 400 );
    // 设置 起点
    context.moveTo( 0, 400 );
    // 绘制直线
    context.lineTo( 500, 0 );
    // 描边显示效果
    context.stroke();

演示运行结果

 

1.2.1.1. 计算机直角坐标系

 

1.2.1.2. 代码分析

  1. 需要绘图就需要有 canvas 标签, 该标签用于展示图像.
  2. canvas 的宽高不要使用 CSS 来设置, 会有拉伸的问题. 应该直接使用属性设置.
  3. 但是 canvas 只是展示图像的标签, 它没有绘图的能力. 需要使用 canvas 的上下文工具来实现绘图.
  4. 使用 canvas.getContext( '2d' ) 可以获得绘图工具, 该工具是 CanvasRenderingContext2D 类型的对象.
  5. 需要绘图, 首选设置绘图的起点.
    • 使用 canvas 绘图, 需要主要的是他主张先描点, 再连线绘制效果.
    • 因此需要首先设置起点, 然后在起点的基础上描述其他需要的点.
    • 使用 CanvasRenderingContext2D.moveTo( x, y ) 方法设置起点.
      • 其中 x, y 表示的是在坐标系中的位置.
  6. 使用 CanvasRenderingContext2D.lineTo( x, y ) 来描述绘制直线的下一个点. 依次类推可以描述多个点.
  7. 描点结束后, 需要使用 CanvasRenderingContext2D.stroke() 方法来连线. 开可以显示出效果.

1.2.1.3. getContext 方法

语法Canvas.getContext( typeStr )

描述:

  1. 该方法用于绘制上下文工具.
  2. 如果是绘制平面图形使用 '2d' 作为参数, 如果绘制立体图形使用 'webgl'.
  3. 使用 '2d' 返回 CanvasRenderingContext2D 类型的对象.
  4. 使用 'webgl' 返回 WebGLRenderingContext 类型的对象.

1.2.1.4. moveTo 方法

语法CanvasRenderingContext2D.moveTo( x, y )

描述:

  1. 该方法用于设置绘制起点.
  2. 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

1.2.1.5. lineTo 方法

语法CanvasRenderingContext2D.lineTo( x, y )

描述:

  1. 该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
  2. 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

1.2.1.6. stroke 方法

语法CanvasRenderingContext2D.stroke()

描述: 该方法用于连线, 将描述的所有点按照指定顺序连接起来.

1.2.1.7. 结论

  1. 绘图先要获得上下文, 即绘图工具
  2. 绘图需要设置开始的坐标
  3. 绘图是先描点, 然后一个一个依次连线
  4. 依次绘图只能绘制单一样式( 色彩等 )

1.2.2. 直线图形

分别绘制下面的案例:

 

  1. 绘制直线计算坐标.
  2. 描边调用 CanvasRenderingContext2D.stroke() 方法.
  3. 填充使用 CanvasRenderingContext2D.fill() 方法.

1.2.2.1. fill 方法

语法CanvasRenderingContext2D.fill()

描述: 该方法会按照描绘的点的路径来填充图形. 默认是黑色.

1.2.3. 非零环绕原则

绘制下面的图

 

填充满足非零环绕数原则

<!--非零环绕原则

1.顺时针划线记为 1

2.逆时针划线记为 -1

3.从内部区域某个点往外延伸,经过几条线,就求几条线的和

4.若和为非零,则该点所在区域被填充(变色),若和为0,则该点之外的区域填充(变色)

-->

 

说明:

  1.  canvas 中使用各种方法描点实际上描述的是一个称为路径( path )的东西.
  2.  canvas 绘图中, 所有描述的东西都是路径, 只有最后填充或描边的时候才会显示出效果.
  3. 每一个路径都是一个状态.

练习: 绘制下面图形

 

<script>

    var oCan = document.getElementsByTagName("canvas")[0];

    var otx = oCan.getContext("2d");

    otx.moveTo(100,100);

    otx.lineTo(100,300);

    otx.lineTo(300,300);

    otx.lineTo(300,100);

    otx.closePath();



    otx.moveTo(200,150);

    otx.lineTo(260,200);

    otx.lineTo(240,200);

    otx.lineTo(240,250);

    otx.lineTo(160,250);

    otx.lineTo(160,200);

    otx.lineTo(160,200);

    otx.lineTo(140,200);

    otx.closePath();

    otx.fill();

</script>

 

1.2.4. 闭合路径

1.2.4.1. closePath 方法

语法CanvasRenderingContext2D.closePath()

描述: 使用该方法可以将最后一个描点与最开始的描点自动连接起来.

案例

    ...
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 300, 100 );
    ctx.lineTo( 300, 200 );
    ctx.closePath();
    ctx.stroke();

 

练习: 使用 closePath 改写非零环绕的案例.

1.2.5. 路径的概念

  1. 路径就是一次绘图
    • 类比使用油漆刷墙面
    • 首先打底色, 绝对不会一次性使用多个色彩
    • 一定是先画完某一个色彩再考虑另一个色彩
    • 除非需要自己创作才会考虑墙面绘画
  2. 路径就好比一桶油漆和一把刷子, 一次性描点绘制. 如果重新更换油漆, 那么是绘制另一个区域.
  3. 如果需要开启新的绘制, 那么使用 CanvasRenderingContext2D.beginPath() 方法.

示例

在一个区域内绘制描边的图形和填充的图形

 

1.2.6. 线型相关属性

设置描边与填充不一定只能使用黑色的细线. 可以利用一些属性设置其效果

  1. CanvasRenderingContext2D.lineWidth 设置线宽.
  2. CanvasRenderingContext2D.lineCap 设置线末端类型.
  3. CanvasRenderingContext2D.lineJoin 设置相交线的拐点.
  4. CanvasRenderingContext2D.getLineDash() 获得线段样式数组.
  5. CanvasRenderingContext2D.setLineDash() 设置线段样式.
  6. CanvasRenderingContext2D.lineDashOffset 绘制线段偏移量.

1.2.6.1. 设置线宽

语法CanvasRenderingContext2D.lineWidth = number

描述: 设置线宽.

案例

    ...
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();
 
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.moveTo( 100, 250 );
    ctx.lineTo( 300, 250 );
    ctx.stroke();

展示效果

1.2.6.2. 设置线末端类型

语法CanvasRenderingContext2D.lineCap = value

描述:

  1. 设置线型末端的样式, 可取值为: 'butt'( 默认 ), 'round', 'square'.
  2. 'butt' 表示两端使用方形结束.
  3. 'round' 表示两端使用圆角结束.
  4. 'square' 表示突出的平角结束.
  5. 最后两个是在原长度的基础上添加半个圆或半个正方形

案例

    ...
    ctx.lineWidth = 10;
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();
 
    ctx.beginPath();
    ctx.lineCap =  'round';
    ctx.moveTo( 100, 130 );
    ctx.lineTo( 300, 130 );
    ctx.stroke();
 
    ctx.beginPath();
    ctx.lineCap =  'square';
    ctx.moveTo( 100, 160 );
    ctx.lineTo( 300, 160 );
    ctx.stroke();

展示效果

1.2.6.3. 设置相交线的拐点

语法CanvasRenderingContext2D.lineJoin = value

描述:

  1. 设置两条直线的拐点描述方式. 可以取值 'round', 'bevel', 'miter'(默认)
  2. 'round' 使用圆角连接.
  3. 'bevel' 使用平切连接.
  4. 'miter' 使用直角转.

案例

    ...
    ctx.lineWidth = 10;
    ctx.lineJoin = 'round';
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 200, 200 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();
 
    ctx.beginPath();
    ctx.lineJoin = 'bevel';
    ctx.moveTo( 100, 150 );
    ctx.lineTo( 200, 250 );
    ctx.lineTo( 300, 150 );
    ctx.stroke();
 
    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.moveTo( 100, 200 );
    ctx.lineTo( 200, 300 );
    ctx.lineTo( 300, 200 );
    ctx.stroke();

展示效果

1.2.6.4. 虚线

语法:

  1. CanvasRenderingContext2D.lineDashOffset = number
  2. CanvasRenderingContext2D.getLineDash()
  3. CanvasRenderingContext2D.setLineDash()

描述:

  1. lineDashOffset 用于设置开始绘制虚线的偏移量. 数字的正负表示左右偏移.
  2. getLineDash() setLineDash() 方法使用数组描述实线与虚线的长度.

演示

    ...
    ctx.moveTo( 100, 90 );
    ctx.lineTo( 100, 110 );
    ctx.moveTo( 300, 90 );
    ctx.lineTo( 300, 110 );
 
    ctx.moveTo( 100, 140 );
    ctx.lineTo( 100, 160 );
    ctx.moveTo( 300, 140 );
    ctx.lineTo( 300, 160 );
 
    ctx.moveTo( 100, 190 );
    ctx.lineTo( 100, 210 );
    ctx.moveTo( 300, 190 );
    ctx.lineTo( 300, 210 );
    ctx.stroke();
 
    ctx.beginPath();
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();
 
    ctx.beginPath();
    ctx.setLineDash( [ 5, 5 ] );//可以写多个值
    ctx.moveTo( 100, 150 );
    ctx.lineTo( 300, 150 );
    ctx.stroke();
 
    ctx.beginPath();
    ctx.lineDashOffset = -2;//偏移量,正数往左偏,负数往右偏
    ctx.moveTo( 100, 200 );
    ctx.lineTo( 300, 200 );
    ctx.stroke();

展示效果

1.2.6.5. 填充与描边样式

语法:

  1. CanvasRenderingContext2D.strokeStyle = value
  2. CanvasRenderingContext2D.fillStyle = value

描述:

  1. strokeStyle 可以设置描边颜色, CSS 的语法一样
  2. fillStyle 设置填充颜色, CSS 语法一样
  3. 这两个属性还可以设置渐变对象.

案例

    for (var i=0;i<6;i++){
        for (var j=0;j<6;j++){
            ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + 
                            Math.floor(255-42.5*j) + ')';
            ctx.beginPath();
            ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
            ctx.stroke();
        }
    }

展示效果

1.3. 实例练习

1.3.1. 绘制坐标网格

绘制下面的效果

 

1.3.2. 绘制坐标系

绘制下面的效果

 

1.3.3. 绘制坐标点

绘制下面的效果

 

1.3.4. 绘制折线图

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        canvas{

            border: 1px solid red;

        }

    </style>

</head>

<body>

<canvas width="500" height="400">该浏览器版本较低</canvas>

<script>

    var oCan = document.getElementsByTagName("canvas")[0];

    var otx = oCan.getContext("2d");

    //画坐标轴

    //坐标轴距边界的位置

    var padding = {

        left:20+0.5,

        right:20+0.5,

        top:20+0.5,

        bottom:20+0.5

    };

    //箭头大小

    var arrow = {

        h:20,

        w:16

    };

    //x轴顶点坐标

    var xVertex = {

        x:oCan.width-padding.right,

        y:oCan.height-padding.bottom

    };

    //y轴顶点坐标

    var yVertex = {

        x:padding.left,

        y:padding.top

    };

    //原点坐标

    var origin = {

        x:padding.left,

        y:oCan.height - padding.bottom

    };

    //画两个轴

    otx.beginPath();

    otx.moveTo(xVertex.x,xVertex.y);

    otx.lineTo(origin.x,origin.y);

    otx.lineTo(yVertex.x,yVertex.y);

    otx.stroke();

    //画x轴箭头

    otx.beginPath();

    otx.moveTo(xVertex.x,xVertex.y);

    otx.lineTo(xVertex.x-arrow.h,xVertex.y - arrow.w/2);

    otx.moveTo(xVertex.x,xVertex.y);

    otx.lineTo(xVertex.x - arrow.h,xVertex.y + arrow.w/2);

    otx.stroke();

    //画y轴箭头

    otx.beginPath();

    otx.moveTo(yVertex.x,yVertex.y);

    otx.lineTo(yVertex.x-arrow.w/2,yVertex.y + arrow.h);

    otx.moveTo(yVertex.x,yVertex.y);

    otx.lineTo(yVertex.x + arrow.w/2,yVertex.y + arrow.h);

    otx.stroke();

    //画矩形点

    otx.beginPath();

    otx.fillRect(origin.x + 100,origin.y - 100, 3 , 3);

    /*  //第二种美观的箭头x轴

     otx.beginPath();

     otx.moveTo(xVertex.x,xVertex.y);

     otx.lineTo(xVertex.x-arrow.h,xVertex.y - arrow.w/2);

     otx.lineTo(xVertex.x-arrow.h/2,xVertex.y);

     otx.lineTo(xVertex.x - arrow.h,xVertex.y + arrow.w/2);

     otx.closePath();

     otx.fill();

     //第二种美观的箭头y轴

     otx.beginPath();

     otx.moveTo(yVertex.x,yVertex.y);

     otx.lineTo(yVertex.x-arrow.w/2,yVertex.y + arrow.h);

     otx.lineTo(yVertex.x,yVertex.y + arrow.h/2);

     otx.lineTo(yVertex.x + arrow.w/2,yVertex.y + arrow.h);

     otx.closePath();

     otx.fill();*/



    //画矩形点

    //一堆点

    points = [[20,20] ,[50,60],[100,150],[200,260],[300,60],[350,20],[380,160]];

    otx.beginPath();

    points.forEach(function (val, i) {

        otx.fillRect(origin.x + val[0]-2, origin.y - val[1]-2,4,4);

    });

    //连线

    otx.moveTo(origin.x,origin.y);

    points.forEach(function (val,i) {

        otx.lineTo(origin.x+val[0],origin.y - val[1]);

    })

    otx.stroke();

</script>

</body>

</html>

 

2. 中级篇

2.1. 绘制形状

绘制图形不仅仅是利用线条来实现绘图, 还可以有快捷的绘制图形的办法

  1. 绘制矩形
  2. 绘制圆弧

2.1.1. 绘制矩形

绘制矩形的方法

  1. CanvasRenderingContext2D.strokeRect
  2. CanvasRenderingContext2D.fillRect
  3. CanvasRenderingContext2D.rect

注意rect 方法就是矩形路径, 还需要使用 fill  stroke 才可以看到效果. 因此一般使用 strokeRect  fillRect 直接可以看到结果.

清除矩形区域

  1. CanvasRenderingContext2D.clearRect

2.1.1.1. 绘制矩形框

语法CanvasRenderingContext2D.strokeRect( x, y, width. height )

描述:

  1. 用来绘制一个矩形. 比起直接使用 moveTo  lineTo 方法要简单许多.
  2. 该方法的前两个参数表示绘制矩形的左上角的坐标. 后两个参数表示这个矩形的宽高.
  3. 使用该方法不需要使用 moveTo 方法设置起始点, 也不需要调用 stroke 等绘画方法.
  4. 绘制的矩形支持 strokeStyle 设置颜色样式.

案例

    ...
    ctx.strokeStyle = 'red';
    ctx.strokeRect( 100, 100, 200, 100 );

展示效果

2.1.1.2. 绘制填充矩形

语法CanvasRenderingContext2D.fillRect( x, y, width. height )

描述:

  1. 用来绘制一个矩形. 比起直接使用 moveTo  lineTo 方法要简单许多.
  2. 该方法的前两个参数表示绘制矩形的左上角的坐标. 后两个参数表示这个矩形的宽高.
  3. 使用该方法不需要使用 moveTo 方法设置起始点, 也不需要调用 stroke 等绘画方法.
  4. 绘制的矩形支持 fillStyle 设置颜色样式.

案例

    ...
    ctx.fillStyle = 'green';
    ctx.fillRect( 100, 100, 200, 100 );

展示效果

2.1.1.3. 清除矩形区域

语法CanvasRenderingContext2D.clearRect( x, y, width, height )

描述:

  1. 用于清除画布中的矩形区域的内容.
  2. 参数 x, y 表示矩形区域左上角的坐标, width height 表示矩形区域的宽高.

案例

    ...
    ctx.fillRect( 100, 100, 200, 100 );
    ctx.clearRect( 110, 110, 50, 50 );

展示效果

2.1.1.4. 案例

利用绘制图形与清除矩形区域, 可以实现简单的动画. 例如代码:

    ...
    var x = 10, y = 10, oldx = 10, oldy = 10;
    var width = 100, height = 50;     
    var intervalId = setInterval(function () {
        ctx.clearRect( oldx - 1, oldy - 1, width + 2, height + 2 );
 
        ctx.strokeRect( x, y, width, height );
 
        oldx = x;
        oldy = y;
 
        x += 4;
        y += 2;
 
        if ( oldy >= 200 ) {
            // clearInterval( intervalId );
            x = 10, y = 10;
        }
    }, 20);

简单效果

有时为了简单常常将整个画布都清除, 这样就不用每次计算清除的问题.

    ctx.clearRect( 0, 0, cas.width, cas.height );
    // 也可以设置画布宽度, 这样就会自动清除
    cas.width = cas.width;

2.1.2. 绘制圆弧

绘制圆弧的方法有

  1. CanvasRenderingContext2D.arc()
  2. CanvasRenderingContext2D.arcTo()

2.1.2.1. 绘制圆弧

语法CanvasRenderingContext2D.arc( x, y, radius. startAngle. endAngle, anticlockwise )

描述:

  1. 该方法用于绘制一段弧, 配合开始点的位置  stroke 方法或 fill 方法可以绘制扇形.
  2. 方法中的前两个参数 x, y 表示绘制圆弧的圆心坐标.
  3. 参数 radius 表示圆弧半径, 单位为弧度.
  4. 参数 startAngle endAngle 表示开始到结束的角度. 角度以水平向右为 0 弧度, 顺时针为正方向.
  5. 参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选.
  6.  startAngle. endAngle相同时,会画成一条线
otx.beginPath();

otx.moveTo(200,200);

otx.arc(200,200,50,4, 4);

otx.stroke();

 

案例

    //  200, 200 的地方绘制一段半径为 100 的圆弧, 圆心角为 - PI / 2  PI / 4
    ...
    ctx.arc( 200, 200, 100, -Math.PI/2, Math.PI/4 );
    ctx.stroke();
 
    // 为了方便看清楚结构, 绘制坐标轴
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo( 50, 200 );
    ctx.lineTo( 350, 200 );
 
    ctx.moveTo( 200, 50 );
    ctx.lineTo( 200, 350 );
 
    ctx.moveTo( 200, 200 );
    ctx.lineTo( 300, 300 );
 
    ctx.stroke();

展示效果

2.1.2.1.1. 注意事项

  1. 使用 arc 绘图的时候, 如果没有设置 moveTo 那么会从开始的绘弧的地方作为起始点. 如果设置了 moveTo, 那么会连线该点与圆弧的起点.
  2. 如果使用 stroke 方法, 那么会从开始连线到圆弧的起始位置. 如果是 fill 方法, 会自动闭合路径填充.

2.1.2.2. 绘制扇形

绘制扇形的重点是需要设置起始位置为圆心点, 然后闭合路径即可

    ...
    ctx.strokeStyle = 'red';
    ctx.fillStyle = 'pink';
 
    ctx.moveTo( 100, 200 );
    ctx.arc( 100, 200, 100, -Math.PI/3, Math.PI/3 );
    ctx.closePath();
    ctx.stroke();
 
    ctx.beginPath();
    ctx.moveTo( 300, 200 );
    ctx.arc( 300, 200, 100, -Math.PI/3, Math.PI/3 );
    ctx.closePath();
    ctx.fill();

展示效果

2.1.2.3. 绘制扇形动画

绘制扇形动画, 就是每隔几毫秒( 20 毫秒)擦除以前绘制的内容, 然后在以前绘制的基础上比以前多绘制一点东西. 这里多绘制的内容就是由角度决定. 比如一开始角度从 -Math.PI / 2 开始绘制. 那么每次角度都 +0.1, 直到 绘制到 Math.PI * 3 / 2 为止.

    ...
    ctx.fillStyle = 'green';
    var startAngle = -Math.PI / 2,
        angle = startAngle,
        x = 200, y = 200,
        r = 100;
    var intervalId = setInterval(function () {
        // 清除之前绘制的内容
        ctx.clearRect( 0, 0, cas.width, cas.height );
        // 角度增量
        angle += 0.1;
        // 判断是否停止计时器
        if ( angle >= Math.PI * 3 / 2 ) {
            clearInterval( intervalId);
            angle = Math.PI * 3 / 2; 
            console.log( '绘制完成' );
        }
        // 绘制
        ctx.moveTo( x, y );
        ctx.arc( x, y, r, startAngle, angle );
        ctx.fill();
    }, 20);

展示效果

2.1.2.4. 绘制饼形图

绘制饼形图最大的特点是角度是叠加的. 开始从 -Math.PI/2 开始绘制, 达到执行角 x , 下一个区域从 x 开始绘制, 然后有到一个角 y 停下来. 如此反复到 Math.PI * 3 / 2 结束.

本节看两个案例, 一个固定等分, 一个由数据源来定义角度.

2.1.2.4.1. 三等分饼形图

绘制一个三等分的饼形图, 颜色使用 , 绿, .

    var x = 200, y = 200,
        r = 100,
        step = Math.PI * 2 / 3,     // 120 度一个区域
        start = -Math.PI / 2,       // 起始角度
        colors = [ 'red', 'green', 'blue' ];
 
    for ( var i = 0; i < 3; i++ ) {
        ctx.beginPath();
        ctx.moveTo( x, y );
        ctx.fillStyle = colors[ i ];
        ctx.arc( x, y, r, start, start+=step );
        ctx.fill();
    }

展示效果

2.1.2.4.2. 根据数据定义角度

根据数据源定义角度, 就是将所有的数据求和, 按照总和为 2 * Math.PI 的结论计算出每一个数据部分的弧度值. 同时颜色可以提前定义好.

Konva 库中分离出来的颜色

    var colors = 
        ( "aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue," +
        "blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk," +
        "crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta," +
        "darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray," +
        "darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick," +
        "floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey," +
        "honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon," + 
        "lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink," +
        "lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow," +
        "lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple," +
        "mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue," +
        "mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid," +
        "palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue," +
        "purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna," +
        "silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,transparent," +
        "tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen" ).split( ',' );

如果得到数据

    var data = [ 123, 156, 47, 100, 80 ];

那么计算各个部分的比例时, 可以构造一个存储分量值与弧度的对象数组.

    var sum = 0;
    for ( var i = 0; i < data.length; i++ ) {
        sum += data[ i ];
    }
    // 得到总数后, 分量比就有了
    var odata = data.map(function ( v, i ) {
        return { value: v, radius: v * 2 * Math.PI / sum };
    });

最后根据数据开始绘图

    // 开始绘图
    var start = -Math.PI / 2,
        x = 200, y = 200,
        r = 100;
 
    for ( var i = 0; i < odata.length; i++ ) {
        ctx.beginPath();
        ctx.fillStyle = colors[ i + 10 ];
        ctx.moveTo( x, y );
        ctx.arc( x, y, r, start, start+=odata[ i ][ 'radius' ] );
        ctx.fill();
    }

展示效果

2.1.2.5. 绘制相切弧

语法CanvasRenderingContext2D.arcTo( x1, y1, x2, y2, radius )

描述:

  1. 该方法用于绘制圆弧
  2. 绘制的规则是当前位置与第一个参考点连线, 绘制的弧与该直线相切.
  3. 同时连接两个参考点, 圆弧根据半径与该连线相切

例如有一个起始点 ( 100, 100 ), 那么绘制其点. 颜色设置为红色.

    ctx.fillStyle = 'red';
    ctx.fillRect( 100 - 4, 100 - 4, 8, 8 );

然后两个参考点分别为 ( 100, 300 )  ( 300, 300 ), 绘制出该点

    ctx.fillRect( 100 - 4, 300 - 4, 8, 8 );
    ctx.fillRect( 300 - 4, 300 - 4, 8, 8 );

连接两个参考点

    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo( 100, 300 );
    ctx.lineTo( 300, 300 );
    ctx.stroke();

调用 arcTo 方法绘制圆弧. 记得将起始点设置为 ( 100, 100 )

    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.moveTo( 100, 100 );
 
    ctx.arcTo( 100, 300, 300, 300, 100 );
    ctx.stroke();

注意: 使用该方法可以使用圆弧连接两条直线, 而不用计算复杂的起始角度与结束角度. 因此用于绘制圆角矩形等案例较多.

2.1.2.6. 绘制圆角矩形

封装一个函数, 用于绘制圆角矩形.

  1. 参考 rect 方法, 需要坐标参数 x, y.
  2. 由于设置圆角, 因此需要设置圆角半径 cornerRadius.
  3. 还需要提供宽高.

首先绘制一个矩形边框. 但是需要考虑圆角, 虽然从 x, y 开始绘制, 但是中间要空出 半径的距离.

    var x = 100, y = 100, width = 300, height = 100,
        cornerRadius = 10;
    ctx.strokeStyle = 'red';
 
    ctx.moveTo( x + cornerRadius, y );
    ctx.lineTo( x + width - cornerRadius, y );
 
    ctx.moveTo( x + width, y + cornerRadius );
    ctx.lineTo( x + width, y + height - cornerRadius );
 
    ctx.moveTo( x + width - cornerRadius, y + height );
    ctx.lineTo( x + cornerRadius, y + height );
 
    ctx.moveTo( x, y + height - cornerRadius );
    ctx.lineTo( x, y + cornerRadius );
 
    ctx.stroke();

然后再分别绘制四个角, 设置当前位置与参考点的位置. 设置当前位置为一个线端点, 然后参考点依次就是 矩形顶点 另一个线段的端点.

    ctx.moveTo( x + cornerRadius, y );
    ctx.arcTo( x, y, x, y + cornerRadius, cornerRadius );

同理绘制另外三个圆角

    ctx.moveTo( x + width - cornerRadius, y );
    ctx.arcTo( x + width, y, x + width, y + cornerRadius, cornerRadius );
 
    ctx.moveTo( x + width, y + height - cornerRadius );
    ctx.arcTo( x + width, y + height, x + width - cornerRadius, y + height, cornerRadius );
 
    ctx.moveTo( x + cornerRadius, y + height );
    ctx.arcTo( x, y + height, x, y + height - cornerRadius, cornerRadius );

封装成方法就可以绘制更多圆角矩形了. 封装中注意 beginPath()  save()  restore()

    function cRect ( x, y, width, height, cornerRadius, color ) {
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = color || 'red';
 
        ctx.moveTo( x + cornerRadius, y );
        ctx.lineTo( x + width - cornerRadius, y );
 
        ctx.moveTo( x + width, y + cornerRadius );
        ctx.lineTo( x + width, y + height - cornerRadius );
 
        ctx.moveTo( x + width - cornerRadius, y + height );
        ctx.lineTo( x + cornerRadius, y + height );
 
        ctx.moveTo( x, y + height - cornerRadius );
        ctx.lineTo( x, y + cornerRadius );
 
 
        // 开始绘制四个圆角
        ctx.moveTo( x + cornerRadius, y );
        ctx.arcTo( x, y, x, y + cornerRadius, cornerRadius );
 
        ctx.moveTo( x + width - cornerRadius, y );
        ctx.arcTo( x + width, y, x + width, y + cornerRadius, cornerRadius );
 
        ctx.moveTo( x + width, y + height - cornerRadius );
        ctx.arcTo( x + width, y + height, x + width - cornerRadius, y + height, cornerRadius );
 
        ctx.moveTo( x + cornerRadius, y + height );
        ctx.arcTo( x, y + height, x, y + height - cornerRadius, cornerRadius );
 
        ctx.stroke();
        ctx.restore();
    }

调用代码

    cRect( 50, 50, 100, 50, 5 );
    cRect( 100, 120, 100, 80, 8, 'blue' );
    cRect( 300, 100, 200, 100, 10, 'green' );

2.2. 绘制文本

绘制文本的方法

  1. CanvasRenderingContext2D.fillText()
  2. CanvasRenderingContext2D.strokeText()
  3. CanvasRenderingContext2D.measureText()

文本样式

  1. CanvasRenderingContext2D.font
  2. CanvasRenderingContext2D.textAlign
  3. CanvasRenderingContext2D.textBaseline

2.2.1. 绘制文字

语法:

  1. CanvasRenderingContext2D.strokeText( text, x, y[, maxWidth] )
  2. CanvasRenderingContext2D.fillText( text, x, y[, maxWidth] )

描述:

  1. 这两个方法的功能都是在给定的 x, y 坐标下绘制文本内容.
  2. stroke 绘制描边文字, 文字内空心. fill 绘制填充文字, 即实心文字.
  3. 最后一个参数可选, 用于限制文字的总宽. 特殊条件下, 系统会自动调整文字宽度与大小以适应该参数限制.

案例

    ctx.strokeRect( 100, 100, 200, 50 );
    ctx.strokeText( 'Hello JK', 100, 100 );
 
    ctx.strokeRect( 100, 200, 200, 50 );
    ctx.fillText( 'Hello JK', 100, 200 );

注意: 第一个文字由于中间空心, 所以文字相当于双线显示. 就显得较粗.

根据绘制的矩形块可以发现文字几乎使用该点作为文字基线参考.

2.2.2. 计算文本尺寸

语法CanvasRenderingContext2D.measureText()

描述:

  1. 该方法返回一个文本尺寸对象, TextMetrics 对象.
  2. TextMetrics 对象属性很多, 常用的 width 属性可以获取文字的宽度.

2.2.3. 设置文字属性

2.2.3.1. 设置文字字体

语法CanvasRenderingContext2D.font = value

描述:

  1. 该属性用于设置绘制字体的各种信息, CSS 语法一致, 设置字体形状, 样式, 字号粗细等.
  2. 其顺序可以是: style | variant | weight | size/line-height | family.
  3. 默认值为 10px sans-serif

修改字号后查看 strokeText fillText 的区别

    ...
    ctx.font = '50px 黑体';
    ctx.strokeRect( 100, 100, 200, 50 );
    ctx.strokeText( 'Hello JK', 100, 100 );
 
    ctx.strokeRect( 100, 200, 200, 50 );
    ctx.fillText( 'Hello JK', 100, 200 );

2.2.3.2. 设置字体水平对齐方式

语法CanvasRenderingContext2D.textAlign = value

描述:

  1. 该属性用于设置文字的水平对齐方式. 设置文字居中, 靠左右对齐等.
  2. 该属性可以设置的值有: start( 默认 ), end, left, right, center.

start 表示根据参考基准点的垂直直线左靠对齐

    ...
    ctx.moveTo( 150, 100 );
    ctx.lineTo( 150, 200 );
    ctx.moveTo( 100, 150 );
    ctx.lineTo( 200, 150 );
    ctx.strokeStyle = 'red';
    ctx.stroke();
 
    ctx.font = '30px 黑体';
    ctx.textAlign = 'start'; // 默认
    ctx.fillText( '测试文字', 150, 150 );

end 表示根据参考基准点的垂直直线右靠对齐

    ...
    ctx.font = '30px 黑体';
    ctx.textAlign = 'end';
    ctx.fillText( '测试文字', 150, 150 );

left right 就是左对齐与右对齐的意思

    ...
    ctx.font = '30px 黑体';
    ctx.textAlign = 'left';
    ctx.fillText( 'left', 150, 150 );
    ctx.textAlign = 'right'
    ctx.fillText( 'right', 150, 150 );

最后 center 就是居中的含义.

    ctx.font = '50px 黑体'
    ctx.textAlign = 'center';
    ctx.fillText( '00000', 150, 150 );

2.2.3.3. 设置字体垂直对齐方式

语法CanvasRenderingContext2D.textBaseline = value

描述:

  1. 该方法设置文字在垂直方向上的对齐方式.
  2. 该属性可以取值: top, middle, bottom, hanging, alphabetic, ideographic
  3. 基于参考点的直线, 其中 top, middle, buttom 分别表示靠上, 居中, 靠下对齐.
  4. alphabetic 表示字母基线, 类似于英文字母的对齐方式. 例如 a, g, f 等字母.
  5. ideographic 表意对齐. 使用字母对齐中超出的字母为参考. 即比字母基线略靠下.
  6. 所有的对齐方式是根据文字特点相关的. 对于中文主要使用的还是 top, bottom middle.

top, middle, bottom 使用的较多

    ...
    // ------------------
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();
 
    ctx.font = '30px 黑体';
 
    ctx.textBaseline = 'top';
    ctx.fillText( 'abfghijklpqrty', 150, 80 );
 
    // ------------------
    ctx.translate( 0, 100 );
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();
 
    ctx.font = '30px 黑体';
 
    ctx.textBaseline = 'bottom';
    ctx.fillText( 'abfghijklpqrty', 150, 80 );
 
    // ------------------
    ctx.translate( 0, 100 );
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();
 
    ctx.font = '30px 黑体';
 
    ctx.textBaseline = 'middle';
    ctx.fillText( 'abfghijklpqrty', 150, 80 );

alphabetic 表示字母参考线, ideographic 会比它低一点, hanging 表示悬挂.

    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();
 
    ctx.font = '30px 黑体';
 
    ctx.textBaseline = 'alphabetic';
    ctx.fillText( 'abfghijklpqrty', 150, 80 ); 
 
    // -------------------------------------------------
 
    ctx.translate( 0, 100 );
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();
 
    ctx.font = '30px 黑体';
 
    ctx.textBaseline = 'ideographic';
    ctx.fillText( 'abfghijklpqrty', 150, 80 ); 
 
    // -------------------------------------------------
 
    ctx.translate( 0, 100 );
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();
 
    ctx.font = '30px 黑体';
 
    ctx.textBaseline = 'hanging';
    ctx.fillText( 'abfghijklpqrty', 150, 80 );

实际上大多数参考方式只有在特定语言中有作用, 而且与字体也有相对复杂的关系.

2.3. 绘制图片

绘制图像虽然只有一个 drawImage 函数, 但是该函数有多重参数形式.

  1. CanvasRenderingContext2D.drawImage( img, dx, dy ).
  2. CanvasRenderingContext2D.drawImage( img, dx, dy, dWidth, dHeight ).
  3. CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight ).

2.3.1. 绘制简单图像

语法CanvasRenderingContext2D.drawImage( img, dx, dy )

描述:

  1. 使用三个参数, 允许在画布上的 任意位置 绘制图片.
  2. 参数 img 是指图片对象. 可以是 img 标签, 或者是 video 标签, 已经另一个 canvas .
  3. 需要注意的是如果直接添加 img 对象是不可以的, 需要等待其加载.

准备一张网络图片, 绘制, 便于查看其加载过程.

    // 随便从百度中搜索 '美女头像', 记录一个链接地址
    var url = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3289155966,3850025949&fm=116&gp=0.jpg';
    // 创建 img 对象
    var img = new Image(); // 就是 img 标签
    // 设置 src 属性为 图片
    img.src = url;
 
    // 绘图
    ctx.drawImage( img, 100, 100 );

此时没有任何结果, 打开调试工具查看 Net Work

因为加载图片需要时间, 因此将绘制的方法放在 onload 事件中.

    // 随便从百度中搜索 '美女头像', 记录一个链接地址
    var url = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3289155966,3850025949&fm=116&gp=0.jpg';
    // 创建 img 对象
    var img = new Image(); // 就是 img 标签
    // 设置 src 属性为 图片
    img.src = url;
 
    // 绘图
    img.onload = function () {
        ctx.drawImage( img, 100, 100 );
    };

注意: 这里使用 new Image()  document.createElement( 'img' ) 是一样的.

2.3.2. 在指定区域内绘制图像

当图片比较大的时候, 如果使用这样的方式绘图, 那么图片可能会完全覆盖画布.

 

因此, 需要将其控制在一个矩形区域内绘制.

语法CanvasRenderingContext2D.drawImage( img, dx, dy, dWidth, dHeight )

描述:

  1. 参数 dWidth, dHeight 表示绘制的矩形区域. 绘制的 dx, dy 坐标决定了开始.
  2. 该方法绘制的图像会在指定范围内被压缩显示.

将上面的图绘制在 100 * 100 的范围内.

    ...
    ctx.drawImage( img, 100, 100, 100, 100 );

如果希望正常显示, 需要固定一个宽度或者高度, 然后根据比例计算出另一个值. 这里假定高度是 100. 计算宽度后绘图.

    ...
    var heigth = 100, width;
    img.onload = function () {
        width = img.width * height / img.height;
        ctx.drawImage( img, 100, 100, width, height );
    };

2.3.3. 绘制任意图像

类似于 CSS 中处理按钮等小图标的技巧, 将很多的效果图集中在一张 png 格式的背景透明的图片中, 这样可以提高效率也便于维护. 那么 drawImage 同样支持该方式绘图. 在画布中的指定位子与指定区域内, 绘制图片中的某个矩形区.

语法CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )

描述: 这里的带有 s 前缀的参数就是指图源的矩形区域.

例如将图片的 ( 100, 100, 300, 200 ) 处的内容绘制到页面的 ( 100, 100, 300, 200 ) 的位置.

    '''
    ctx.drawImage( img, 100, 100, 300, 200,  100, 100, 300, 200 );

2.4. 绘制动画

有了图片部分绘制的功能, 我们就可以尝试绘制动画了.

开始的时候绘制第一行的第一张图. 计算它的坐标与宽高

    var img = new Image();
    img.src = './imgs士兵(1).png'
    img.onload = function () {
        var width = img.width / 4;
        var height = img.heigth / 4;
        // 第一张图的顶点是 0, 0, 宽高是 width, height
    };

那么第一行的第二张图就是 ( 0, width, width, height ), 第三张就是 ( 0, width * 2, width, height ). 因此第一行的第 i 张图就是

    var x = 0;
    var y = width * ( i - 1 );

同理得到,  j 列的 x 坐标是 height * ( j - 1 )

绘制第一张图

    ...
    var img = new Image();
    img.src = './imgs/士兵(1).png'
    img.onload = function () {
        var width = img.width / 4;
        var height = img.height / 4;
 
        ctx.drawImage( img, 0, 0, width, height, 100, 100, width, height ); 
    };

现在要求, 每隔 200 毫秒就切换一张图片, 现在只考虑第一行的图片.

    ...
    var img = new Image();
    img.src = './imgs/士兵(1).png'
    img.onload = function () {
        var width = img.width / 4;
        var height = img.height / 4;
 
        var i = 0;
        setInterval(function () {
            ctx.clearRect( 0, 0, cas.width, cas.height );
            ctx.drawImage( img, width * (i++ % 4), 0, width, height, 100, 100, width, height );
        }, 200 );
    };

扩展一下, 把四行都画出来

3. 高级篇

3.1. 变换

Canvas 绘图中支持矩阵变换功能. 其中涉及的常用方法有

  1. CanvasRenderingContext2D.transform()
  2. CanvasRenderingContext2D.scale()
  3. CanvasRenderingContext2D.translate()
  4. CanvasRenderingContext2D.rotate()
  5. CanvasRenderingContext2D.setTransForm()

还有一些方法, 暂时没有普及与确定. 因此这里的几个方法才是最常用的方法.

3.1.1. 什么是变换

计算机图形学是建立在解析几何基础之上的. 也就是说所有绘制的图形都是基于坐标进行计算得到的. 那么利用坐标系位置的调整, 同样的坐标可以得到不同的效果. 例如有一个点 A ( 10, 10 ). 可以在坐标系中绘制出该点.

如果调整坐标系. 比如将坐标系向右移动 10 个单位,

此时同样是 A , 坐标就变成了 ( 0, 10 ). 然后再把坐标系向上移动 10 个单位,

那么针对新坐标系, 这个点的坐标就是 ( 0, 0 ). 这个就是坐标变换. 通过移动坐标的位置, 对坐标进行旋转, 以及对坐标轴数据的缩放, 从而使得原有点的坐标发生变化, 或利用原有的坐标点绘制新的效果.

坐标变换有一套完整的数学公式. 利用矩阵可以很容易的表示坐标的所有变换.

这里的 a, b, c, d, e, f 就刚好是 transform 函数的 参数.

  1. 其中 a 有时又标记为 m11. 它表示水平缩放.
  2. 其中 b 有时又标记为 m12. 它表示水平倾斜.
  3. 其中 c 有时又标记为 m21. 它表示垂直倾斜.
  4. 其中 d 有时又标记为 m22. 它表示垂直缩放.
  5. 其中 e 有时又标记为 dx. 它表示水平移动.
  6. 其中 f 有时又标记为 dy. 它表示垂直移动.

演示

    ...
    ctx.transform( 1, 0, 0, 1, 0, 0 );
    ctx.fillRect( 0, 0, 100, 100 );

这里矩阵变换会比较复杂, 因此在使用中一般使用简单的, 平移, 旋转 缩放 的简单 api.

3.1.2. 平移变换

平移变换就是将原有坐标轴进行平行移动, 那么坐标轴移动后就可以使用新坐标来绘制图形了.

语法CanvasRenderingContext2D.translate( x, y )

描述:

  1. 该方法将坐标进行平移.
  2. x 表示水平移动, 正数向右, 负数向左.
  3. y 表示垂直移动, 正数向下, 负数向上.
  4. 变换可以重复调用, 变换是可以累加的.

使用该变换, 常常用于绘制不同位置, 但是形状重复的图形.

注意: 变换也会被 "继承", 开启新路径后依旧保留原先变换.

3.1.3. 旋转变换

语法CanvasRenderingContext2D.rotate( radian )

描述:

  1. 该方法将坐标轴进行旋转变换.
  2. 参数是弧度, 表示旋转的方式. 正数表示顺时针旋转, 负数表示逆时针旋转.

该变换常常用于实现旋转动画等.

3.1.4. 缩放变换

语法CanvasRenderingContext2D.scale( x, y )

描述:

  1. 该方法实现水平与垂直的缩放.
  2. 参数 x 控制水平缩放倍率. 传参 1 表示不作缩放, 传入大于 1 的数字表示扩大.
  3. 参数 y 控制垂直缩放倍率. 传参 1 表示不作缩放, 传入大于 1 的数字表示扩大.

该变换常常用于放大与缩小, 以及反转的效果.

3.2. 环境

前面提到 Canvas 是含有状态的, 也就是说需要修改颜色, 直线样式, 绘图方式等效果时需要开启一个新的状态. 但是有时在绘制过程中需要修改状态, 同时绘制完当前状态后又需要回到之前的状态中继续绘制另外的形状. 那么只有再将修改过的样式载更改回来. 如果在该状态中修改的属性较多, 那么每次在回到之前状态时就有很多的代码.

Canvas 中引入了状态的保持机制. 使用 CanvasRenderingContext2D.save() 方法可以保存当前状态. 如果需要恢复到已经保存的状态, 只需要调用 CanvasRenderingContext2D.restore() 方法即可.

状态保持的机制是基于状态栈实现的. 也就是说 save 一次就存储一个状态. restore 一次就将刚刚存入的恢复. 如果 save 两次, 就需要 restore 两次, 才可以恢复到最先的状态.

一般在封装绘图的时候都会采用开始绘制之前, save 一次, 然后 开启一个新路径, 然后绘制结束后 restore, 然后再开启一个新路径. 这样保持当前状态不会对其他绘图代码构成影响.

3.3. 优化

canvas 在绘制图片的时候, drawImage 方法还支持将一个 canvas 绘制到另一个 canvas . 因此使用该功能, 可以在内存中完成复杂的绘图, 将绘制好的半成品再绘制到 canvas 中合成需要的效果.

3.4. 画布保存

画布在绘制后实际上就是一张图片, 可以直接右键另存为. 同时也支持使用 js 代码将其保存为 base64 编码的字符串.

语法Canvas.ToDataURL( type, encoderOptions )

描述:

  1. 该方法可以将画布转换成 base64 格式的数据
  2. type 表示输出类型. 例如: image/png image/jpeg
  3. encoderOptions 表示图片输出质量, 其取值在 0 1 之间. 如果是 1, 表示无损压缩, 必须使用 image/jpeg image/webp 才起作用
    ...
    <img id="img"/>
    ...
    var img = document.getElementById( 'img' );
 
    var cas = document.createElement( 'canvas' );
    cas.width = 100, cas.height = 100;
    var ctx = cas.getContext( '2d' );
    ctx.fillStyle = 'pink';
    ctx.fillRect( 0, 0, 100, 100 );
 
    var data = cas.toDataURL( 'image/png', 1 );
 
    img.src = data;

3.5. 渐变和图案

绘制图像有两个主要方法, 一个是描边, 一个是填充. 前面介绍过要设置其样式, 可以使用 strokeStyle  fillStyle 属性, 只需要给它们提供颜色就可以了. 但是不仅仅是颜色, 它还支持渐变和重复.

相关方法

  1. CanvasRenderingContext2D.createLinearGradient()
  2. CanvasRenderingContext2D.createRadialGradient()
  3. CanvasRenderingContext2D.createPattern()

3.5.1. 线性渐变

语法CanvasRenderingContext2D.createLinearGradient( x0, y0, x1, y1 )

描述:

  1. 该方法返回一个 CanvasGradient 对象. 用于描述渐变的方式.
  2. 该方法有两个参数, 用于表示线型渐变的方向与位置.
  3. 使用的时候, 首先创建一个 CanvasGradient 对象, 然后利用 addColorStop 方法添加颜色区间.
    1. 方法语法CanvasGradient.addColorStop( rate, color ).
    2. 该方法用于设置在某个比例位置的颜色是什么. rate 的取值是 0 1 之间.
    3. 可以添加多个渐变点.
  4. 然后将该对象赋值给 *Style 属性即可.

案例

    ...
    var canvasGradient = ctx.createLinearGradient( 0, 25, 200, 25 );
    canvasGradient.addColorStop( 0, 'blue' );
    canvasGradient.addColorStop( 1, 'red' );
    ctx.fillStyle = canvasGradient;
 
    ctx.fillRect( 0, 100, 200, 50 );

注意: 渐变点的坐标是基于坐标轴来计算的.

3.5.2. 放射渐变

语法CanvasRenderingContext2D.createRadialGradient( x0, y0, r0, x1, y1, r1 )

描述:

  1. 该方法实现放射渐变, 渐变的是在两个圆之间. 一般会使用两个内含关系的圆.
  2. 前三个参数分别表示其中一个圆的圆心的坐标, 以及半径.
  3. 后三个参数分别表示另一个圆的圆心的坐标, 以及半径.
  4. 绘制渐变效果用法与线性渐变一样.

案例

    var x = cas.width / 2, y = cas.height / 2, r = 100;
    var g = ctx.createRadialGradient( x + r * 2 / 3, y - r * 2 / 3, 0, x + r / 3, y - r / 3, r * 4 / 3 );
    g.addColorStop( 0, '#fff' );
    g.addColorStop( 1, '#f00' );
    ctx.fillStyle = g;
    ctx.arc( x, y, r, 0, 2 * Math.PI );
    ctx.fill();

3.5.3. 重复填充

语法CanvasRenderingContext2D.createPattern( img, repetition )

描述:

  1. 该方法表示使用图片来填充的设置方法. 需要两个参数, 一个是图片, 一个是重复的方式.
  2. 图片允许是 img 标签, 图片, canvas 等对象
  3. 可选择的重复方式与 CSS 一致. : repeat, repeat-x, repeat-y, no-repeat.
  4. 如果是 空或"", 但不是 undefined, 默认就是 repeat.

案例

    var img = new Image();
    img.src = 'imgs/04d91106ecb1ec84b6708cd9796fc772.jpg';
    img.onload = function () {
        var p = ctx.createPattern( img, 'repeat' );
        ctx.fillStyle = p;
        ctx.fillRect( 50, 50, 550, 350 );
    };

3.6. 阴影

Canvas 中还可以给绘制的内容设置阴影. 但是一般不这么用, 因为性能不高.

相关属性:

  1. CanvasRenderingContext2D.shadowBlur 属性表示模糊程度.
  2. CanvasRenderingContext2D.shadowColor 属性表示模糊颜色.
  3. CanvasRenderingContext2D.shadowOffsetX 属性表示模糊位置 x 坐标偏移.
  4. CanvasRenderingContext2D.shadowOffsetY 属性表示模糊位置 y 坐标偏移.

 

 

 

 

javascript

 JS概述

JS作用

  1. 验证表单(以前的网速慢)
  2. 页面特效(PC端的网页效果)
  3. 移动端(移动web和app)
  4. 异步和服务器交互(AJAX)
  5. 服务端开发(nodejs)

 

浏览器工作原理(了解)

 

 

弱类型脚本语言(解释型语言,解析执行与编译执行)

解析执行与编译执行

编译执行:把代码编译成CPU认识的语言(文件),然后整体的执行。

解析执行:一行一行解析,解析一行执行一行。

弱类型脚本语言

脚本语言是:弥补编译语言的不足而存在的,作为补充语言,不用编译。

弱类型语言:简单理解定义一个变量,可以有多种数据类型。(var temp)

组成(前端标准和JS组成)

前端标准(HTML/CSS/JS

JavaScript、HTML、CSS各自的作用

HTML                                        提供网页上显示的内容(结构)

CSS                                            美化网页(表现)

JavaScript(JS)                       控制网页行为(行为)

设计原则:

结构、样式、行为 --- 分离!

 

JS组成

JS  =  ECMAScript  +  DOM  +  BOM + 高级

 

ECMAScript(前身为欧洲计算机制造商协会)

JavaScript的语法规范

DOM(Document Object Model 的简称)

JavaScript操作网页上元素的API

BOM(Browser Object Model 的简称)

JavaScript操作浏览器部分功能的API

输出语句

  • console.log(“内容”)在控制台打印输出内容
  • alert(“内容”)弹窗显示内容
  • document.write(“内容”)在页面书写内容

引入方式

内嵌式(学习期间用)

外链式(实际开发)

注释问题:单行,多行,方法注释等..... 快捷键:ctrl+/ 和ctrl+shift+/

 

 变量

命名规则

驼峰命名规则:getElementById/matherAndFather/aaaOrBbbAndCcc

遵从规则:

1.变量命名必须以字母或是下标符号_”或者”$为开头。

2.变量名长度不能超过255个字符。

3.变量名中不允许使用空格,首个字不能为数字

4.不用使用脚本语言中保留的关键字及保留符号作为变量名。

5.变量名区分大小写。(javascript是区分大小写的语言)

6.汉语可以作为变量名。但是不建议使用!!!(low)

变量使用

定义赋值和定义后在赋值

var  age = 19;         

var age ;     age = 19

不建议使用:var age = “张三”;         age = 19;    跨类型。

案例:交换变量

非数值型和数值型。

需求:定义一个中间值,交换两个变量

需求:交换两个变量(数值型)而且不能用中间值。(求和)

 数据类型

数据类型划分

使用关键字typeof:查看方法:  typeof  name   或者   typeof(name)

简单数据类型(值类型)

四种: 字符串        数字          布尔          未定义         

  String    Number   Boolean undefined    null

复杂数据类型(引用类型)

Object、function、Array、Date、RegExp、Error.......

字面量

固定的值,让你从“字面上”理解其含义。

数值字面量

var age = 18;  // 数值字面量,18为字面值

简单数据类型介绍

Number

  1. 进制

  进制包括2进制、8进制(011)、10进制、16进制(0xA)等....

  1. 浮点数

因为精度丢失问题,所以不判断计算后的两个浮点数是否相等。

  1. 数值范围

       由于内存的限制,ECMAScript 并不能保存世界上所有的数值

最小值:Number.MIN_VALUE,这个值为: 5e-324

最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308

无穷大:Infinity

无穷小:-Infinity

  1. NaN

               a) NaN 非数值(Not a Number的简写)

console.log(“abc”/18);  //结果是NaN

Undefined和任何数值计算为NaN;

NaN 与任何值都不相等,包括 NaN 本身

b) isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true

isNaN译为是否符合一个标准,什么标准呢?不是一个数字的标      准,如果符合了那么就不是一个数字,不符合就是一个数字)

isNaN(NaN);// true

isNaN(“blue”); // true

isNaN(123); // false

String

  1. 字面量定义方式

用引号时,可单可双,唯独不可一单一双。可用.length看有几个字符。

var name = "zhangsan";

var name = 'zhangsan';

var name = 'zhangsan"; //错误,单引号和双引号要成对出现

  1. 转译

总结:无法输出的字符,先输出\,在输出字符。

  1. 字符串不可变

       在内存中不会立刻消失,只能二次赋值,原有的字符在一定时间    内被    垃圾回收器回收。

  1. 字符串拼接

如果两个变量都是字符串,无论是否包含数字,只要是拼接,那么在前一个后面添加后一个字符串。(+与-情况不同,详情参考数据转换)

Booblean

  1. Boolean类型有两个字面量:true和false,区分大小写。(大写不对)

虽然Boolean 类型的字面值只有两个,但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值

  1. true

true、除0数字、“something”、Object(任何对象)为true

  1. false

false0 、“”、undefined nullfalse

4.if判断时会把()内的值强行转换成boolean类型进行判断。

undefined和null

null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。但是null ===undefined的结果(false)。不过相似归相似,还是有区别的,就是和数字运算时,10 + null结果为:10;10 + undefined结果为:NaN。

任何数据类型和undefined运算都是NaN;

任何值和null运算,null可看做0运算。

 数据类型转换

  • 转换成字符串类型
  • 转换成数值类型
  • 转换成布尔类型

任何简单类型转换成String(三种方法)

变量+“”   或者     变量+“abc”

String(变量)

变量.toSting() 注意:undefined和null不可以

null和undefined无toString方法。

任何简单类型转换成Number

此转换容易产生NaN,一旦被转换的变量中含有非数字字符,都容易出现NaN

变量 -*/ 一个数字(有非数字字符会出现NaN)

例:var  num1  = “11”- 0;  var num2 =“11”* 1;var num =“11”/1;

JS底层做了一个强制类型转换,把字符串转换成了Number进行运算。

Number(变量)(有非数字字符会出现NaN)

var num1 = Number(“18”);        把字符变成了数字。

var num2 = Number(“18.99”);   结果为18.99数字型。(有小数也转换)

parseInt()和parseFloat()(译为取整和取浮点数)

空字符串parseInt()parseFloat()返回NaNNumber("")返回0

parseInt(变量):如果变量中收割字符为字母则结果为NaN。

否则取出现首个非数字前的整数。

123 = parseInt(“123.123aaaa”);

 

parseFloat(变量):如果变量中收割字符为字母则结果为NaN。

否则取出现首个非数字前的浮点数。(没有小数取整)

123.123 = parseFloat(“123.123aaaa”);

提别提示

Boolean类型中:true数值为1;false为0;

null的数值类型为0;

undefined无数值类型或者为NaN;

任何简单类型转换成Boolean

任何数据类型都可以转换成boolean类型,所以和以往两个转换不同

Boolean(变量)        

var bool = Boolean(“1111”);                 bool为true;

!!变量

第一个逻辑非操作会基于无论什么操作数返回一个与之相反的布尔值

第二个逻辑非操作则对该布尔值求反

于是就得到了这个值真正对应的布尔值

 操作符

主要研究操作符的种类以及优先级。

案例学习。

操作符种类

  • 算数运算符(+*/...
    1. 一元运算符:正号、负号、++、--、平方等一个变量就能运算
    2. 二元运算符:+-*/%等两个变量才能运算
    3. 三元运算符: 值1?值2:值3;
  • 逻辑运算符(&& || ! )(与或非)
  • 比较运算符(<>==>=...
  • 赋值运算符(=+=-=*=/=%=

优先级

1 ()

2 !、-(负数)、++、-- (正数省略+)(一元运算)

3 *、/、%

4 +、- (加,减)(二元运算)

5 <、<=、<、>= (一级逻辑运算)

6 ==、!=、===、!==、 (二级逻辑运算)

7 && (三级逻辑运算)

8 ||

9  ? : (三元运算)

10 =、+=、-=、*=、/=、%= (赋值运算)

 

案例:

1.(false || true)  &&  !(false && true);

2.var bool = ((4 >= 6) || ("人" != "阿凡达")) && !(((12 * 2) == 144) && true);

3.      var a = 1;

      var b = 2;

      a++;

var num = ++a + (a++) + a + (++b) + b++;

console.log(num);

4. var a = 1+1&&3;

var b = 0 && 1+1;

var c = 1 ||  2 && 3-1;

&&和||运算

&&链接两个boolean类型,有一个是false结果就是false。

链接值不是布尔类型时,按照成布尔类型计算,结果本身不变。(非布尔)

例子:    1 = 2&&1;     0 = 0 && 1;   都是true取后面,都是false取前面。

||链接两个boolean类型,有一个是true结果就是true。

链接值不是布尔类型时,按照成布尔类型计算,结果本身不变。(非布尔)

例子:    2= 2||1;     1 = 0 || 1;   都是tru  e取前面,都是false取后面。

 

 流程控制

  • 顺序结构(程序正常执行流程从上往下,从左往右)(不用研究)

赋值运算时为从右往左执行,且左侧为属性或变量,不取值!!!

  • 选择结构
    1. If语句
    2. Switch语句
  • 循环结构
    1. for循环
    2. while循环
    3. do...while循环

循序结构

程序正常执行顺序不必过多研究,特殊需求,后续特殊讲解。

选择结构

共有两种,if语句和switch语句。If常用,switch为特殊情况使用,判断条件出现的情况特别多的时候用switch,其他时候if语句比较方便。

If语句

  • If语句用法有三种
  1. if(条件1){程序1}
  2. if(条件1){程序1}else{程序2}
  3. if(条件1){程序1}else if(条件2){程序2}...else{程序n}

 

案例:

输入名人,弹出他所参演的电视剧!如果没有这个人,那么弹框警示!

  • 三目运算(也叫三元运算)(目或者元代表几个表达式)

三目运算可以替代部分if...else...功能,运算简单,使用方便,代码清晰。

表达式1值1值2

Switch语句

switch (值1) {

    case value1:

        程序1;

        break; // break 关键字会导致代码执行流跳出 switch 语句

    case value2:

        程序2;

        break;

    default:

        程序3;

}

注意:

break可以省略,如果省略,代码会继续执行下一个case

switch 语句在比较值时使用的是全等操作符,因此不会发生类型转换

(例如,字符串 "10" 不等于数值 10)。

switch案例:

1.判断当天是星期几

2.把百分制转换成优良中可差

循环结构 (js中没有块级作用域,只有在function中有)

共3种,for/while/do...while;可根据需求选择使用;

  1. 遍历数组首选for循环,简单循环使用for。
  2. 而while循环强调,不记循环次数(不知道循环多少次),首选while。
  3. 最后do...while循环强调,无论怎样,至少执行一次是,使用do...while。

for循环

  1. 执行流程

for (变量;条件1;条件2){ 执行程序 }

执行过程:变量->条件1->执行程序->条件2->条件1->执行程序.....

直到条件1不成立,跳出循环。

  1. 三个表达式均为可选,但是必须写分号!!!

for(;;){程序}       死循环;

  1. 案例1

       6个简单案例,用来体验for循环如何使用。(利息和数列提升思维)

1 打印1到100

2 打印1到100的和

3 求1-100之间所有数的和、平均值

4 求1-100之间所有偶数的和、所有奇数的和

5 本金10000元存入银行,年利率是千分之三,每过1年,将本金和利息相加作为新的本金。计算5年后,获得的本金是多少?

6 有个人想知道,一年之内一对兔子能繁殖多少对?于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子,而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象,那么,一对兔子一年内(12个月)能繁殖成多少对?

  1. 案例2

九九乘法表

打印宽9,长9的正方形。

打印直角/等边三角形(外循环控制行,内循环控制列,试着以上几种的打印倒三角)

 

  1. break和continue

break     :  立刻跳出循环,不在执行该循环中的任何程序;

continue  :  跳出本次循环,进入下一次循环中继续执行程序;

案例:

    1.计算出1到100之间所有不能被7整除的整数之和(用continue)

    2.求1到100之间所有不能被3整除的整数的第一个大于2000的和

3.求200-300之间所有的奇数的和,定义i=1开始

4.求200-300之间第一个能被7整数的数

while循环

语法规则:

var i = 0;

while(i<10){

程序1;i++

};            

可以使用死循环和break连用。

While(true)(程序1; if(条件1){break;})

do...while循环(一定会执行一次do中的程序)

var i = 0;

do{

程序1;

i++;

}while(1<10);

案例:

  • 三种循环求和(1-100);
  • 弹窗提示你爱我吗?选否就一直问。

 数组

数组的概述

为什么学习数组

之前学习的数据类型,只能存储一个值。(字符串为一个值)

我们想存储多个值的时候可以使用数组。(字符串不方便)

比如:存储班级中所有学生的姓名。([“张三”,“李四”,“王五”])

数组是什么

     数组是一种数据类型。(把很多数据装入一个盒子中,用的时候在取出来)

字面量为[1,2,3]。可以理解为:西瓜皮[],西瓜肉123,西瓜子(,)

数组的定义

字面量定义

var  arr  =  [1,2,3];

对象定义(数组的构造函数)

var  arr  =  new Array(参数);

参数位置一个数值时为数组长度,多个数值时为数组中的元素。

数组的操作

求数组的长度

数组的长度 =  数组名.length;

可以通过修改数组的长度来改变数组中元素的个数,如果改小了,数组从后面删除元素。(伪数组的长度可以修改,但是不能修改里面的元素)

获取数组中的元素

数组中的指定元素 = 数组名[索引值];

数组的索引代表的是数组中的元素在数组中的位置,从0开始。

如果获取数组中元素是,数组名[索引值],数组中没有这个索引(元素没那么多),系统不报错,而是给定值为undefined;

遍历数组(获取并操作数组中的每一个元素)(!!!重点!!!)

var arr = [1,2,3];

for(var i = 0;i<arr.length;i++){

    arr[i]  //如此操作数组中的每一个元素

}

 

案例:

  • 把1-10之间所有的奇数,放到数组中
  • 1-10之间能被3整数的数字,存到数组中
  • 求一组数中的所有数的和和平均值
  • 求一组数中的最大值和最小值,以及所在位置
  • 将字符串数组用|或其他符号分割
  • 将数组中值为0的去掉,不为0的存入一个新数组
  • 翻转数组
  • 冒泡排序,从小到大(也可以倒序)

提示:

    1.双重for循环。

    2.指定轮数和次数

3.判断是否符合标准。如果符合标准交换位置。从小到大排列顺序,如果前面的比后面的大,那么交换位置。

调试(打断点)

  • 过去的调试(锻炼逻辑能力)

alert(变量);     console.log(变量);

  • 设置断点(项目太大,使用断点方便,清晰)

 

 

 

函数基础

函数概述

什么是函数

函数就是可以重复执行的代码块。

为什么要用函数

因为一部分代码使用次数可能会很多,所以封装起来,需要的时候调用就可以了。

案例:求和;(总是求和)

函数的定义

关键字function。

function 函数名 (参数)  {

 程序  

}

参数

参与运算的变量。

为什么要设置参数?为了增强函数的功能性,和程序员的交互性,和函数的可拓展性。所以我们增加了参数这个概念。

形参

形式上参与运算的变量,无实际值,为实参占位置,就像一个躯壳一样。(可以理解为函数的内部变量外部无法访问)

实参

实际参与运算的变量的值。形参为他占位置,真实参与运算的变量的值。

 

注意js中没有方法重载的用法,有一个方法名对应一个方法体,就近原则

返回值

有return函数就有值;没有return函数就没值;

函数程序运行后的结果外部需要使用的时候,我们不能直接给与,需要通过return返回。

总结:函数内部,return后面的值就是返回值;

作用:函数执行后剩下结果就是返回值。

函数执行完毕,会不会留下点儿什么,取决于有没有返回值

          var  temp   =    函数名()   =  (功能)+ 该函数的返回值;

注意

1. 如果函数没有显示的使用 return语句 ,那么函数有默认的返回值:undefined

2. 如果函数使用 return语句,那么在return后面的值,就成了函数的返回值

3. 如果函数使用 return语句,但是return后面没有任何值,那么函数的返回值 也是:undefined

4. 函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退 出,也就是说return后面的所有其他代码都不会再执行。

案例

1、求圆的周长和面积

2、求2个数中的最大值,求3个数中的最大值

3、求一组数中的最大值和最小值

4、翻转数组,返回一个新数组

5、对数组排序,从小到大

6、求阶乘

7、求1!+2!+3!+....+n! (求阶乘的和 )

8、判断一个数是否是素数

函数名、函数体和函数加载问题(重点记忆)

1、函数名是什么

函数名 == 整个函数。

function fn(){alert(1)};

console.log(fn) == console.log(function fn(){alert(1)});

2、函数加载问题

JS加载的时候,只加载函数名,不加载函数体。所以如果想使用内部的成员变量,需要调用函数。

 

作业:

1、求斐波那契数列Fibonacci中的第n个数是多少?     

1 1 2 3 5 8 13 21...

  1. 输入某年某月某日,判断这一天是这一年的第几天?(闰年)

(四年一闰,百年不闰,四百年在闰)

函数定义

函数声明(自定义声明)

  function f(a,b) {

        return a + b; }

  console.log(f(5,6));

函数表达式

    var myFun = function (a,b){

        return a + b;

    }

console.log(myFun(6,7));

1.8.3 通过创建对象声明函数

var f = new Function("console.log(789)");

f();

变量和作用域(隐式全局变量和变量声明提升)

变量和作用域(函数中的变量需要函数执行后才能使用)

  • 全局变量(成员变量)

哪里都可以访问到的变量。

(进入script立即定义的变量和没有var的变量)

  • 局部变量

函数内部的变量,只有函数内部可以访问到。

(函数内部用var定义的变量和形参)

隐式全局变量

隐式全局变量就是隐藏的全局变量不好被发现。

function  fn(){

var  a  =  b  =  c  =  1;   // b和c就是隐式全局变量

}

注意:

function  fn(){

var  a  =  b  =  c  =  1;   // b和c就是隐式全局变量(等号)

var  a = 1;  b = 2;  c = 3;     // b和c就是隐式全局变量(分号)

var  a = 1 ,  b = 2 ,  c = 3;    // b和c就不是隐式全局变量(逗号)

}

变量声明提升(出现原因:预解析)

函数中,定义变量在使用变量之后

只提升变量名,不提升变量值,容易出现undefined。计算后形成NaN。

function fn(){

// var aaa;

console.log(aaa);

var aaa = 1;

}

//提前看一眼  这个习惯叫什么呢?  预解析!

//变量声明提升:在预解析的时候,成员变量和函数,被提升到最高位置,方便其他程序访问。

//变量声明提升特点:成员变量只提升变量名,不提升变量值。但是,函数是所有内容全部提升。(function直接定义的)

//函数范围内照样会出现变量声明提升

//什么情况容易出现变量声明提升:使用变量在定义变量之前。

面试题:

1、-----------------------------------

var num = 10;

fun();

function fun(){

console.log(num);

var num = 20;

}

2、-----------------------------------

var a = 18;

f1();

function f1(){

var b=9;

console.log(a);

console.log(b);

 var a = '123';

}

3、-----------------------------------

            f2();

    console.log(cc);

    console.log(bb);

    console.log(aa);

    function f2(){

        var aa = bb = cc = 9;

        console.log(aa);

        console.log(bb);

        console.log(cc);

    }

小知识

函数不调用不执行

函数名就等于(整个函数)

加载函数的时候,只加载函数名,不加载函数体

参数相当于局部变量

就近原则使用变量

两个平级的函数中的变量不会相互影响(可以使用同样的形参名)

 

 

 函数高级

匿名函数(了解)

定义:匿名函数就是没有名字的函数。

作用:

  1. 不需要定义函数名的时候。
  2. 书写起来更简便。

匿名函数的调用有三种方法:

  • 直接调用或自调用。(function(){alert(1)})()
  • 事件绑定。
  • 定时器。

函数是一种类型(了解)

函数作为参数(了解)

执行函数就等于:函数名+();   整个函数+();

递归(理解)

递归:就是函数自己调用自己。(懂得)

必须有跳出条件。

 

练习:

用递归求1+100和。

 

对象和面向对象

JS中的对象(Object)基于面向对象

什么是对象

创建空白对象

var  obj  =  new  Object();

    自定义属性

          Obj.属性名= 值;

    自定义方法(行为)

          Obj.方法名 = function (){

                方法体;

}

构造函数(就是为了创建对象实例)

  • 可以创建对象实例的函数。
  • 区别与普通函数,首字母大写。

    function Student(name){ //创建一个构造函数

       this.name = name; //构造函数中的对象指的是this。

        this.sayHi = function () {

            console.log(this.name+"说:大家好!");

        }

    }

创建自定义对象

This

  • this只出现在函数中。
  • 谁调用函数,this就指的是谁。
  • new People();   People中的this代指被创建的对象实例。

new

1.开辟内存空间,存储新创建的对象( new Object() )

          2.把this设置为当前对象

          3.执行内部代码,设置对象属性和方法

          4.返回新创建的对象

十进制的值 = 位值*进制(位数-1) +位值*进制(位数-1) +位值*进制(位数-1)............

 

对象字面量和JSON

对象的字面量就是一个{};而里面的属性和方法是以:键值对形式对应表现的。

(键值对)

//数组: var arr = [];

var obj = {aaa: 111};      var json = {“aaa”:111};

var obj = {  sayHi: function () {

        console.log(1);

    }

} 也是可以调用的

对象和数组也可以作为其他对象的属性(不深究)

对象字面量定义方法和json很像,只有一点不同,json的key要求必须加“”;

Json组成

JSON : JS中一种对象的表现形式

var json = {“aaa”: 1,“bbb”: 2,“ccc”: 3,“ddd”: 4}

Json由{}和key:value以及逗号组成,三部分。(只有一个键值对key:value时,可以没有逗号)

对象本身没有length,所以不能用for循环遍历

for...in...遍历JSON

Var json = {“aaa”: 1,“bbb”: 2,“ccc”: 3,“ddd”: 4}

for(var key in json){

//key代表aaa,bbb.....等

//json[key]代表1,2,3....等

 

// json. key代表json这个对象的key属性的值,并不是key对应的变量值的属性。

        console.log(json. key);

// json [key],代表的是json这个对象中key这个变量值对应的属性值。//        console.log(json [key]);

 

练习: 制作一个json,然后遍历

参数和传值问题

  • 简单类型数据做参数,函数内部对参数的修改不应影响外部变量

简单类型传数值。

  • 复杂类型数据做参数,函数内部对参数的修改会应影响外部变量

      复杂类型传地址。

 

 

JS中是没有类这个概念的,在新标准中,出现了类的概念,JS中是不能用函数创建对象的,强类型语言中需要用类.

 

内置对象:js本身已经帮我们写好的对象。我们创建出来以后直接是使用就可以。不需要定义了

内置对象例如:Date,Array , Math , RegExp , Error , String...

学习内置对象,主要学习API,H5的方法,后期学到H5在说。

 数组高级API

学习API的方法

侧重点(四点)

调用者:谁调用的。                            参数:有无,几个。     

返回值:有无,什么类型。                功能:干什么用的。

自学方法

  • 离线
    1. 离线文档
  • 在线
    1. W3C    (前端标准W3CSchool)
    2. MDN  (开发者网站)https://developer.mozilla.org/zh-CN/
    3. 百度/谷歌/搜狗。。。

Array的内置方法

数组 ,JS中的一个内置对象

判断数组和转换数组。

Instanceof:  是一个关键字。   判断A是否是B类型。

布尔类型值 = A Instanceof B ;

Array.isArray()   //HTML5中新增    判断是不是数组

布尔类型值 = Array.isArray(变量) ;

调用者:Array         参数:变量(被检测值)       返回值:布尔类型

toString()      //把数组转换成字符串,每一项用,分割

字符串  =  数组.toString();

valueOf()      //返回数组对象本身

数组本身 = 数组.valueOf();

Join               //根据每个字符把数组元素连起来变成字符串

字符串  =  数组.join(变量);

变量可以有可以没有。不写默认用逗号分隔,无缝连接用空字符串。

数组增删和换位置(原数组讲被修改)

push()  //在数组最后面插入项,返回数组的长度

数组1改后的长度  =  数组1.push(元素1);

pop()    //取出数组中的最后一项,返回最后一项

被删除的元素  =  数组1.pop();

unshift()   //在数组最前面插入项,返回数组的长度

数组1改后的长度  =  数组1.unshift(元素1);

shift()        //取出数组中的第一个元素,返回最后一项

被删除的元素  =  数组1.shift();

reverse()  //翻转数组(原数组讲呗反转,返回值也是被反转后的数组)

反转后的数组  =  数组1.reverse();

 

sort();    //给数组排序,返回排序后的数组。如何排序看参数。

从小到大排序后的数组  =  数组1.sort(function(a,b){

                                  return a-b;

});

无参:按照数组元素的首字符对应的Unicode编码值从小到大排列数组元素。

带参:必须为函数(回调函数--callback)。函数中带有两个参数,代表数组中的          前后元素。如果计算后(a-b),返回值为负数,a排b前面。等于0不动。      返回值为正数,a排b后面。

了解方法

concat()  //把参数拼接到当前数组

新数组 = 数组1.concat(数组2);

slice() //从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始

新数组 = 数组1.slice(索引1,索引2);

splice()//删除或替换当前数组的某些项目,参数start,deleteCount,options(要替换的项目)

新数组 = 数组1.splice(起始索引,结束索引,替换内容);

indexOf()、lastIndexOf()   //如果没找到返回-1

索引值 = 数组.indexOf/lastIndexOf(数组中的元素);

 

迭代方法 不会修改原数组

every()、filter()、forEach()、map()、some()

数组/boolean/无 = 数组.every/filter/forEach/map/some(

                            function(element,index,arr){

                                           程序和返回值;                      

   }

);

//对数组中每一项运行以下函数,如果都返回trueevery返回true,如果有一项返回false,则停止遍历 every返回false;不写默认返回false

array.every(function(item,index,arr) {

})

//对数组中每一项运行以下函数,该函数返回结果是true的项组成的新数组
var arr = array.filter(function(item,index,arr) {
});
console.log(arr); 

//遍历数组
array.forEach(function(item,index,arr){
});

//对数组中每一项运行以下函数,返回该函数的结果组成的新数组
var arr = array.map(function(item,index,arr) {
    return "\"" + item + "\"";
})

//对数组中每一项运行以下函数,如果该函数对某一项返回true,则some返回true
var b =  array.some(function(item,index,arr) {
    if (item == "ww") {
        return true;
    }
    return false;
});

 

 

 

清空数组

var array = [1,2,3,4,5,6];

array.splice(0,array.length); //删除数组中所有项目

array.length = 0; //length属性可以赋值,其它语言中length是只读

array = [];  //推荐

练习

1.将一个字符串数组输出为|分割的形式,比如“刘备|张飞|关羽”。使用两种方式实现

2.将一个字符串数组的元素的顺序进行反转。["a","b","c","d"] ["d","c","b","a"]。使用两种种方式实现。提示:第i个和第length-i-1个进行交换

3.找到数组中每个字母出现的次数["c","a","z","a","a"]

4.工资的数组[1500,1200,2000,2100,1800],把工资超过2000的删除

 

事件

概述

JS是以事件驱动为核心的一门语言。

事件三要素

事件源、事件、事件驱动程序。

三句话:获取事件源、绑定事件、书写事件驱动程序。

获取事件源:document.getElementById(“box”);

绑定事件:  box.onclick = function(){ 程序 };

书写事件驱动程序:以后要学习的关于DOM的操作。

 

体验事件: 点击盒子,弹出对话框alert(1)。

    1.事件源(引发后续事件的标签)

2.事件(js已经定义好,直接使用)

3.事件驱动程序(对样式和html的操作)(DOM操作)

cursor:pointer设定鼠标的形状为一只伸出食指的手,这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式 , 另外可以选择其他鼠标指针样式,常用的有default 箭头,crosshair 十字,progress 箭头和沙漏等等.

 

 

需要掌握的 获取事件源的三种方式:

                 var div = document.getElementById("box");

    var arr1 = document.getElementsByTagName("div");

var arr2 = document.getElementsByClassName("leiming");

绑定事件的方法:

1.匿名绑定

2.用函数名绑定

3.行内绑定

可以操作标签的属性和样式:

      div.className = "aaa";

      div.style.width = "200px";

      div.style.height = "200px";

             div.style.backgroundColor = "red";

需求:点击盒子,改变盒子的宽高颜色等样式,并弹出对话框alert(1)

事件有哪些

 

案例

  1. 京东广告栏(类)
  2. 京东狗(src)(this)
  3. 手机京东(前两个结合)

 DOM概述

解析过程

HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的 是该元素的属性。

DOM   (文档对象模型)

document是文档对象模型的一部分。

DOM是一个复合的数据类型。

 

DOM的数据结构(树状)

 

HTML的组成部分为节点( Node

HTML当中一切都是节点……

由结构图中我们可以看到,整个文档就是一个文档节点。

每一个HMTL标签都是一个元素节点(标签)。

标签中的文字则是文字节点。(文本)

标签的属性是属性节点。(属性)

DOM节点的获得

操作节点,必须首先找到该元素。有三种方法来做这件事:

通过 id 找到 HTML 元素

document.getElementById("demo");

通过标签名找到 HTML 元素

document.getElementsByTagName("div");

通过类名找到 HTML 元素

document.getElementsByClassName("a");

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

标签=document.getElementById("demo"); 通过ID获得标签

他的返回值是一个标签,可以直接使用。获得属性值,设置属性。

标签数组= document.getElementsByTagName("div"); 通过标签名获得标签数组

标签数组= document.getElementsByClassName("a");通过类名获得标签数组

他们两个的返回值是标签数组,习惯性是遍历之后再使用。

特殊情况:数组中的值只有1个。     

       document.getElementsByTagName("div")[0];取数组中第一个元素

             document.getElementsByClassName("a")[0];取数组中第一个元素

DOM 访问关系(节点的获得)

节点的访问关系,是以属性的方式存在的。

DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。

父节点  ( parentNode )  

调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

案例:

  1. 通过子盒子设置父盒子的背景色。
  2. 关闭二维码

兄弟节点

Sibling就是兄弟的意思。

Next:下一个的意思。

Previous:前一个的意思。

nextSibling:调用者是节点。IE678中指下一个元素节点(标签)。在火狐谷歌IE9+以后都指的是下一个节点(包括空文档和换行节点)。

nextElementSibling:在火狐谷歌IE9都指的是下一个元素节点。

总结:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling

下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling

 

previousSibling:调用者是节点。IE678中指前一个元素节点(标签)。在火狐谷歌IE9+以后都指的是前一个节点(包括空文档和换行节点)。

previousElementSibling:在火狐谷歌IE9都指的是前一个元素节点。

总结:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling

上一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling

单个子节点

firstChild:调用者是父节点。IE678中指第一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是第一个节点(包括空文档和换行节点)。

firstElementChild:在火狐谷歌IE9都指的第一个元素节点。

第一个子节点=父节点.firstElementChild || 父节点.firstChild

lastChild:调用者是父节点。IE678中指最后一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是最后一个节点(包括空文档和换行节点)。

lastElementChild:在火狐谷歌IE9都指的最后一个元素节点。

第一个子节点=父节点.lastElementChild|| 父节点.lastChild

所有子节点

childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点   (他还是W3C的亲儿子

火狐 谷歌等高本版会把换行也看做是子节点

nodeType==1时才是元素节点(标签)

      nodeType  ==  1  表示的是元素节点   记住   元素就是标签

      nodeType  ==  2  表示是属性节点   了解

      nodeType  ==  3  是文本节点   了解

子节点数组 = 父节点.childNodes;   获取所有节点。

children:非标准属性,它返回指定元素的子元素集合。

但它只返回HTML节点,甚至不返回文本节点,虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。

children在IE6/7/8中包含注释节点

在IE678中,注释节点不要写在里面。

子节点数组 = 父节点.children;   用的最多。

知识补充

节点自己.parentNode.children[index];随意得到兄弟节点。

 

作为了解内容:

function siblings(elm) {

             var a = [];

             var p = elm.parentNode.children;

             for(var i =0,pl= p.length;i<pl;i++) {

                    if(p[i] !== elm)

a.push(p[i]);

             }

             return a;

}

定义一个函数。必须传递自己。定义一个数组,获得自己的父亲,在获得自己父亲的所有儿子(包括自己)。遍历所有的儿子,只要不是自己就放进数组中。

要明白两个属性(!!!重点!!!)

parentNode     children  这两个属性。

DOM节点操作 (!!!!!重点!!!!!)

节点的访问关系都是属性。节点的操作都是函数或者方法

创建节点

使用方法是这样的document.createElement();

新的标签(节点) = document.createElement(“标签名”);

插入节点(使用节点)

使用方法: 父节点.appendChild();

父节点.appendChild(新节点); 父节点的最后插入一个新节点

 

使用方法:父节点.insertBefore(要插入的节点,参考节点);

父节点.insertBefore(新节点,参考节点)在参考节点前插入;

如果参考节点为null,那么他将在节点最后插入一个节点。

删除节点  

用法:用父节点删除子节点。

父节点.removeChild(子节点);必须指定要删除的子节点

节点自己删除自己:

不知道父级的情况下,可以这么写:node.parentNode.removeChild(node)

复制节点 (    oldNode.cloneNode(true)  )

想要复制的节点调用这个函数cloneNode(),得到一个新节点。 方法内部可以传参,如果是true,深层复制,如果是false,只复制节点本身。

新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点

用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)

节点属性(节点.属性)

两种方法:

<img src="image/jd1.png" class="box" title="图片" alt="京东狗" id="aaa"/>

1.

属性节点获取          节点.属性 = 值;

2.

获取:getAttribute(名称)

设置:setAttribute(名称, 值)

删除:removeAttribute(名称)

注意:IE6、7不支持。

调用者:节点。   有参数。   没有返回值。

每一个方法意义不同。

 DOM详解(属性操作

DOM元素

DOM就是html文档的模型抽象。数据以树的形式在内存中排列。

节点就是DOM的组成。是一个对象,有属性和方法。获取方式有很多种。

节点分为元素节点(标签),文本节点,属性节点。

区分方法:nodeType: 1是标签,2是属性,3是文本

 

案例

href=”#” è href=”javascript:;”

1.切换图片(a连接+图片)

2.显示和隐藏盒子

3.美女相册(placehold.it网站,获取 xxx * xxx 大小的图片)

value和innerHTML和innerText和textContent

    1.老版本的火狐不支持innerText,支持textContent

    2.p不能嵌套p。h1不能嵌套h1。a连接内部不能嵌套a连接

DOM详解

DOM案例

表单元素的常用属性:type,value.checked,selected,disabled

  1. 显示二维码(复习)

需求:鼠标放到a链接上,显示二维码 , 鼠标移开a链接,隐藏二维码

  1. 禁用文本框
  2. 获取/失去焦点输入事件。
  3. 用户注册高亮显示
  4. select选鲤鱼。  
  5. 为文本框赋值/取值并打印
  6. 全选反选

 

菜单练习, 属性获取修改和删除(属性绑定)

属性绑定的两种方式不能交换使用,赋值和获取值必须使用用一种方法。

元素节点.属性(元素节点[属性]):绑定的属性值不会出现在标签上。

get/set/removeAttribut: 绑定的属性值会出现在标签上。

 

 

1.teb栏。(排他思想)(简单写法和兼容写法)

            1.点亮盒子。

(第三种体验双重for循环,第一种打印三角形,第二种冒泡排序)

            2.弹出索引值。

            3.属性绑定。

            4.两个for循环变一个

2.自定义属性(兼容写法)

            1.直接绑定属性:不会再标签中显示(没有的属性);

            2.标签中的自定义属性,不能box.aaa获取

(火狐谷歌IE9+)(IE678可以获取)

            3.get/setAttribute();可以

之前之后的所有兄弟节点(封装,菜单案例)

节点关系。(父节点、兄弟节点、子节点、所有子节点)

    1.子节点。(京东头)

    2.nodeType/nodeName/nodeValue:   

元素/属性/文本    (123) / 标签:属性名:#text / null:属性值:内容

 document.getElementById("box");//元素节点

 ele.getAttributeNode("id");//属性节点

 ele.firstChild;//文本节点

    3.childNodes实现隔行变色,使用childNodes

    4.父节点/所有子节点/兄弟节点

总结

   //父节点

   div.parentNode;

 

   //访问兄弟节点

   div.previousSibling;

   div.previousElementSibling;

   div.nextSibling;

   div.nextElementSibling;

 

   //访问单个子节点

   div.firstChild;

   div.firstElementChild;

   div.lastChild;

   div.lastElementChild;

 

 

 

   //获取所有子节点

   div.childNodes;

   div.children;

 

   //获取指定的兄弟节点

   div.parentNode.children[index];

 

   //获取所有的兄弟节点(返回值是一个数组)

   function fn(ele){

       //定义一个新数组,装所有的兄弟元素,将来返回

       var newArr = [];

       var arr = ele.parentNode.children;

       for(var i=0;i<arr.length;i++){

           //判断,如果不是传递过来的元素本身,那么添加到新数组中。

           if(arr[i]!==ele){

               newArr.push(arr[i]);

//                newArr[newArr.length] = arr[i];

           }

       }

       return newArr;

   }

 

工具类的封装tools.js(了解,尝试)

案例: 菜单练习(利用封装方法)

        高级隔行变色

百度换肤

DOM创建元素

第一种创建方式:document.write();

第二种:直接利用元素的innerHTML方法。(innerText方法不识别标签)

第三种:利用dom的api创建元素

                document.createElement(“节点”);创建元素

append Child(新节点);插入子元素

insertBefore(新节点,参照节点);在指定元素前插入

removeChild();删除子元素

replaceChild(新节点,旧节点);替换子元素

cloneNode(true)克隆元素,深层复制

      创建,添加,删除,替换

      案例: 半透明的遮蔽层

 

内置对象BOM

Window对象 Browser(浏览器)OM

window是bom的顶级对象。通常情况下,可以省略

alert(2); prompt();confirm();

成员变量也是window的一个属性而已

alert(window.aaa);

alert(aaa === window.aaa);

自定义函数也是window的一个方法

console.log(window.fn);

 

新窗口 = window.open(地址,target属性或窗口名称,新窗口的参数,属性名:属性值,…..);

window.open("http://www.baidu.com","_blank");

location.href = "http://www.baidu.com";打开新窗口(页签)

window.close();关闭本页面

新窗口.moveTo(500,500);

新窗口的参数:

        featurse:属性控制字符串,在此控制窗口的各种属性,属性之间以逗号隔开。

        fullscreen= { yes/no/1/0 } 是否全屏,默认no

        channelmode= { yes/no/1/0 } 是否显示频道栏,默认no

        toolbar= { yes/no/1/0 } 是否显示工具条,默认no

        location= { yes/no/1/0 } 是否显示地址栏,默认no

        directories = { yes/no/1/0 } 是否显示转向按钮,默认no

        status= { yes/no/1/0 } 是否显示窗口状态条,默认no

        menubar= { yes/no/1/0 } 是否显示菜单,默认no

        scrollbars= { yes/no/1/0 } 是否显示滚动条,默认yes

        resizable= { yes/no/1/0 } 是否窗口可调整大小,默认no

        width=number 窗口宽度(像素单位)最小100px

        height=number 窗口高度(像素单位)

        top=number 窗口离屏幕顶部距离(像素单位)仅IE

        left=number 窗口离屏幕左边距离(像素单位)

回退

history.go(-1);     history.back();

setInterval(执行谁,多长时间执行一次)

循环定时器;周而复始的执行(循环执行)

setTimeout(执行谁,多长时间执行一次)

炸弹定时器;用完以后立刻报废(只执行一次)

clearInterval(timer);   停止定时器

练习:

            5秒关闭广告

            关闭广告栏(逐渐消失)

Date

创建时间对象

new Date();

new Date("2016/09/06  00:00:00");

new Date(2016, 1, 27);

new Date('Wed Jan 27 2016 12:00:00 GMT+0800 (中国标准时间)');

后两种兼容性不好,不推荐使用

date.getDate()         获取日 1-31

date.getDay ()         获取星期 0-6(0代表周日)

date.getMonth ()       获取月 0-11(1月从0开始)

date.getFullYear ()       获取完整年份(浏览器都支持)

date.getHours ()        获取小时 0-23

date.getMinutes ()         获取分钟 0-59

date.getSeconds ()        获取秒  0-59

date.getMilliseconds ()      获取毫秒 (1s = 1000ms)

date.getTime ()              返回累计毫秒数(从1970/1/1午夜)

 

获取当前时间距离1970/01/01的毫秒值的方式

Date.now();

+new Date();

new Date().getTime();

new Date().valueOf();

案例:模拟日历、倒计时

String

给索引查字符(charAt/charCodeAt)

1 charAt,获取相应位置字符(参数: 字符位置)

注释:字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串。

2 charCodeAt获取相应位置字符编码(参数: 字符位置)

charAt()方法和charCodeAt()方法用于选取字符串中某一位置上的单个字符

区别:charCodeAt()方法,它并不返回指定位置上的字符本身,而是返回该字符在Unicode字符集中的编码值。如果该位置没有字符,返回值为NaN.

字符/字符编码 = Str.charAt/charCodeAt(索引值);

 

需求:求一个字符串占有几个字符位。(I love my country!我你爱中国!)

给字符查索引(indexOf/lastIndexOf

1 indexOf,从前向后索引字符串位置(参数: 索引字符串)

从前面寻找第一个符合元素的位置

2 lastIndexOf,从后向前索引字符串位置(参数:索引字符串)

从后面寻找第一个符合元素的位置

找不到则返回 -1

索引值 = str.indexOf/lastIndexOf(想要查询的字符);

url 编码和解码(了解)

URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码,以便发送给浏览器。有效的URI中不能包含某些字符,例如空格。而这URI编码方法就可以对URI进行编码,它们用特殊的UTF-8编码替换所有无效的字符,从而让浏览器能够接受和理解。

encodeURIComponent(url) 函数可把字符串作为 URI 组件进行编码

decodeURIComponent(encode) 函数可把字符串作为 URI 组件进行解码

字符串的链接

新字符串 = str1.concat(str2); 链接两个字符串

字符串的截取

1. slice,截取字符串(参数:1,截取位置【必须】,2终结点)

   字符串 = str.slice(索引1,索引2); 两个参数都是索引值。

(1).(2,5)  正常包左不包右。

(2). ( 2 )      从指定的索引位置剪到最后。

(3).(-3)   从倒数第几个剪到最后.

(4).(5,2)  前面的大,后面的小,空。

 

2. substr,截取字符串(参数:1,截取位置【必须】,2截取长度)

   字符串 = str.substr(参数1,参数2); 1索引值,2长度。

          第一个参数为从索引位置取值,第二个参数返回字符长度。

(1).(2,4)    从索引值为2的字符开始,截取4个字符。

(2).(1)     一个值,从指定位置到最后。

(3).(-3)    从倒数第几个剪到最后.

(4). 不包括前大后小的情况。

3. substring 同slice

字符串 = str.substring(参数1,参数2); 两个参数都是索引值。

  不同1:参数智能调转位置。

  不同2:参数负值,将全部获取字符串。

   (1).(2,5)    正常包左不包右。

    (2).   ( 2 )      从指定的索引位置剪到最后。

    (3).  (-3)    获取全部字符串.

    (4).  (5,2)   前面的大,后面的小,不是空。(倒着找)

特殊方法简介

trim()     //只能去除字符串前后的空白

replace()  //替换   str.replace(/aaa/gi,“bbb”);

    g 全局替换   i保证大小写一致,一起被识别替换

split(“ | ”)    //字符串变数组

toLowerCase(); toUpperCase();  // 转换大小写

 

案例 :

截取字符串"我爱你中国,我亲爱的中国的母亲",中的"中国,我亲爱的";

"abcoefoxyozzopp"查找字符串中所有o出现的位置

Math

Math.abs();       取绝对值

Math.floor();      向下取整

Math.ceil();       向上取整

Math.round();     四舍五入取整

Math.random();   随机数0-1

offset家族

三大家族和一个事件对象

三大家族(offset/scroll/client),其实就是DOM的一些属性

事件对象/event   (事件被触动时,鼠标和键盘的状态)(通过属性控制)

Offset家族简介

offset这个单词本身是 -- 偏移,补偿,位移的意思。

js中有一套方便的获取元素尺寸的办法就是offset家族;

offsetWidthoffsetHight 以及offsetLeftoffsetTop以及offsetParent

共同组成了offset家族。

offsetWidth和offsetHight (检测盒子自身宽高+padding+border)

这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。

offset宽/高  =  盒子自身的宽/高 + padding +border;

offsetWidth = width+padding+border;

offsetHeight = Height+padding+border;

offsetLeft和offsetTop  (检测距离父盒子有定位的左/上面的距离)

返回距离上级盒子带有定位)左边的位置

如果父级都没有定位则以body为准

offsetLeft 从父亲的padding 开始算,父亲的border 不算。

在父盒子有定位的情况下,offsetLeft == style.left(去掉px并在行内赋值)

offsetParent   (检测父系盒子中带有定位的父盒子节点

1、返回该对象的父级 (带有定位)

          如果当前元素的父级元素没有进行CSS定位  (position为absolute或                  relative,fixed),    offsetParentbody

2、如果当前元素的父级元素中有CSS定位        (position为absolute或                       relative,fixed),    offsetParent取最近的那个父级元素。

 

offsetLeft和style.left区别

  • 最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。 如果父系盒子中都没有定位,以body为准。
  • offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
  • offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)
  • 如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。style.left只能获取行内式,如果没有返回“”

 

style.left在=的左边和右边还不一样。(左边的时候是属性,右边的时候是值)

 

 

 

 

 

 

 

 

 动画和封装

动画定义

运动的图片。(让图片或者图画动起来)

动画的种类

闪现(基本不用)

匀速(今天重点)

动画原理: 盒子未来的位置 = 盒子现在的位置 + 步长;

缓动(以后重点)

动画原理

盒子的位置 = 盒子本身所在的位置+步长。

体验匀速动画

style.left赋值,用offsetLeft获取值。

style.left获取值不方便,获取行内式,如果没有事“”;容易出现NaN;

offsetLeft获取值特别方便,而且是现成number方便计算。因为他是只读的不能赋值。

 

 

练习:动画封装

BUG1:点击多次以后,越来越快。(定时器重复创建导致的)

BUG2:无法返回。 原因就是步长不能为恒定值。(原因就是不长不能为恒定值,返回要为负数)

BUG3:二次点击不停止问题。(当满足 === 条件时再次点击,就再也不会满足了,最后一步直接赋值到目标位置(闪现))

 案例

焦点图

难点1:先点亮盒子,然后移动图片。

 2:移动图片的目标位置都是负值。

(负的图片的个数乘以图片的宽,到0之间)(负数)

    3:获取盒子的索引值,我们才能知道,ul向右移动几张图片。

切换图

难点:1.为什么移动的图片是负值。(参看上面的案例难点2)

  1. 为什么要计数器。

(我们需要一个值, 记录当前图片,方便后续操作)

  1. 为什么方法1里的num--;方法2里面的num++。

我们要看之前的图片,就要num--,要看后面的图片就要num++;

图片想左走显示后面的,图片向右走显示前面的。

无缝滚动

缓动动画

三个函数

都是在数轴上向上或者向下取整。

Math.ceil()             向上取整

Math.floor()         向下取整

Math.round();        四舍五入

缓动动画原理

leader=leader+(target-leader)/10;

    盒子位置 = 盒子本身位置+(目标位置-盒子本身位置)/ 10;

动画原理 = 盒子位置 + 步长(步长越来越小)。

体验缓动动画

 

分析为什么没有到达指定位置

盒子本身位置     目标位置      步长         已经到达了的位置

0                                    400                 0                                 0

0                                     400                 40                               40

40                                   400                 36                               76

76                                   400                 32.4                            108.4

.........

JS实际运算时会四舍五入取整,然后计算。

396(四舍五入获取)       400                 0.4                     396.4

396(四舍五入获取)       400                 0.4                     396.4

....

offsetLeft和style.left的值的获取问题

获取盒子距离左侧具有定位的父盒子的距离(没有的body),四舍五入取整。

Style.left获取的是具体值。 (赋值的时候也是直接赋值)                         

按例:筋斗云

鼠标悬停和鼠标移开不会影响初始化值,只有点击影响。而移开的情况下,span移动到计数器的位置。

 第二家族scroll

Scroll家族组成

ScrollWidth和scrollHeight(不包括border)

检测盒子的宽高。(调用者:节点元素。)

盒子内容的宽高。(如果有内容超出了,显示内容的高度)

scrollWidth和scrollHeight不包括border和margin

scrollWidth = width + padding;

IE8以下,不包括IE8,为盒子本身内容的多少。

scrollTop和scrollLeft

网页,被浏览器遮挡的头部和左边部分。

兼容有问题(火狐和谷歌就不一样)

window.onscroll只能使用一次,多了一最后一次为准

它有兼容性问题(火狐演示)

DTD:兼容老版本浏览器,使老版本浏览器可以遵循一些新的标准

  • 未声明 DTD(谷歌只认识body, ie9+以上认识它)

没有dtd约束的 : document.title = document.body.scrollTop;

  • 已经声明DTD(IE678只认识documentElement, ie9+以上任何时候)

有dtd约束的 : document.title = document.documentElement.scrollTop;

  • 火狐/谷歌/ie9+以上支持的(不管有没有DTD)

window.pageXOffset     window.pageYOffset

ie9+以上:

IE9+推翻了之前的设计理念,创造斯巴达 edge

是否声明DTD: document.compatMode “BackCompat”未声明”CSSCompat”已声明

兼容写法

var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

 

获取title、body、head、html标签

document.title --- 文档标题;

document.head --- 文档的头标签

document.body --- 文档的body标签;

document.documentElement --- 这个很重要

它表示文档的html标签, 也就是说,基本结构当中的html标签并不是通过document.html 去访问的,而是document.documentElement。

Json回顾

Json是一种和数组类似的数据类型。

不同的是:数组中的元素是单一的。

而json中的元素,是以键值对的形式出现的。(key: value)

定义方法

var  json  =  { key1:value1,key2:value2,key3:value3...  };

数组是通过索引值获取数组中的元素的,而json是通过key获取元素的。

获取内容

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。表示方法为键值对,key:value。

var myjson={k1:v1,k2:v2,k3:v3...}

获取方式:v1 == myjson.k1  v2 == myjson.k2

Json一般就是被当做一个配置单用;

Json的遍历(了解)

用的是新的语法方法:for ... in ....

 

 Scroll()的封装

 判断页面有没有DTD

document.compatMode === "BackCompat"  注意大小写

BackCompat  未声明

CSS1Compat  已经声明

只要判断不是undefined就可以调用pageYOffset

只要判断是CSS1Compat就可以调用documentElement

只要判断是BackCompat就可以调用 body

return {
   
"top": window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop,
   
"left": window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft
}

 

案例

 固定导航栏

 广告跟随

 返回头部小火箭  (原理类似:缓动框架。只不过是多一个页面滚动)

 小知识

onscroll事件

只要页面滚动无论向左向右,向上向下,哪怕只有1px,都会触动这个事件

 

屏幕跳转

window.scrollTo

方法可把内容滚动到指定的坐标。

格式:

scrollTo(xpos,ypos)

xpos  必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos  必需。要在窗口文档显示区左上角显示的文档的 y 坐标

 

 

前端基本功—javascript 第八天

今日内容:

  1.  案例:楼层跳跃
  2.  事件对象(event)
  3.  案例
  4.  鼠标跟随、显示鼠标坐标、放大镜、拖拽、模拟滚动条

 

 scroll家族

案例

楼层跳跃

100%子盒子会继承父盒子的宽高。父盒子继承body宽高。body继承html的宽高。

盒子属性:auto:适应盒子自身的宽度或者高度。(对自己负责)

盒子属性:100%:适应盒子父盒子的宽度或者高度。(对爸爸负责)

 事件对象(event

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。

比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date)

普通浏览器支持 event(带参,任意参数)

ie 678 支持 window.event(无参,内置)

总结:他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。

 

事件对象的获取(event的获取)

IE678中,window.event

在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event.

  box.onclick = function (aaa){   aaa就是event     }

兼容获取方式有两种:

不写参数直接使用event;

写参数,但是为event....

var event  = event || window.event;(主要用这种)

event内容重要内容

 

 

screenX、pageX和clientX的区别

 

 

 

 

pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。(页面)

screenY/screenX: 鼠标位于屏幕的上方和左侧的距离。(屏幕)

clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。(浏览器大小和位置)

pageY和pageX的兼容写法(低版本不支持,很重要

在页面位置就等于 = 看得见的+看不见的

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

新事件(onmousemove

只要鼠标在绑定该事件的事件源上移动,哪怕1像素,也会触动这个事件。

这个事件可以直接或者间接的替代定时器

 

点击鼠标跟随

鼠标在盒子中的位置

案例

放大镜

注意1:CSS部分要注意:大图片/大盒子 = 小图片/显示部分

注意2:(大图片/大盒子 = 小图片/黄盒子)

大盒子滑动的距离/小盒子滑动的距离  = 大盒子滑倒头/小盒子滑倒头

大盒子滑倒头/小盒子滑倒头(他们的距离如何获取呢?)

(大图片-大盒子)(两边各有一伴儿大盒子的距离是没有走的)

(小盒子-小图片)(两边各有一伴儿小盒子的距离是没有走的)

注意3:

onmouseover、onmouseout事件给定一个盒子,子元素也会获取这个事件。

替代方法:onmosueenteronmouseleave.

拖拽案例

//禁止文本选中(选中后取消)

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

模拟滚动条

 

第三大家族client

主要成员

1、clientWidth   获取网页可视区域宽度(两种用法)

   clientHeight   获取网页可视区域高度(两种用法)

     调用者不同,意义不同:

                     盒子调用:              指盒子本身。

                     body/html调用:       可视区域大小。 

2、clientX       鼠标距离可视区域左侧距离(event调用)

   clientY       鼠标距离可视区域上侧距离(event调用)

3、clientTop/clientLeft        盒子的border宽高

三大家族区别(三大家族总结)

Width和height

clientWidth  = width  + padding

clientHeight  = height + padding

offsetWidth  = width  + padding + border

offsetHeight  = height + padding + border

scrollWidth   = 内容宽度(不包含border)

scrollHeight  = 内容高度(不包含border)

top和left

offsetTop/offsetLeft :

          调用者:任意元素。(盒子为主)

          作用:距离父系盒子中带有定位的距离。

scrollTop/scrollLeft:(盒子也可以调用,必须有滚动条)

          调用者:document.body.scrollTop/.....(window)

          作用:浏览器无法显示的部分(被卷去的部分)。

clientY/clientX:(clientTop/clientLeft 值的是border)

          调用者:event.clientX(event)

          作用:鼠标距离浏览器可视区域的距离(左、上)。

client家族特殊用法之:检浏览器宽/高度(可视区域)

 

Onresize事件

只要浏览器的大小改变,哪怕1像素,都会触动这个事件。

案例:根据浏览器可视区域大小,给定背景色

事件总结

区分:

    1.window.onscroll           屏幕滑动

    2.window.onresize      浏览器大小变化

    3.window.onload           页面加载完毕

    4.div.onmousemove            鼠标在盒子上移动(注意:不是盒子移动!!!)

  5.onmouseup/onmousedown  ==  onclick

获得屏幕宽高

window.screen.width

分辨率是屏幕图像的精密度,指显示器所能显示的像素有多少。

我们的电脑一般:

横向1280个像素点,

纵向960个像素点。

我们看电影的时候是满屏和半屏的,就是这。

 冒泡

事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。(BUG)

本来应该一人做事一人当,结果,我做错了事情,你去告诉我妈

什么是冒泡:子元素事件被触动,父盒子的同样的事件也会被触动。

取消冒泡就是取消这种机制。

阻止冒泡

w3c的方法是:(火狐、谷歌、IE11)

    event.stopPropagation()

IE10以下则是使用:event.cancelBubble = true

兼容代码如下:

  var event = event || window.event;

 if(event && event.stopPropagation){

      event.stopPropagation();

  }else{

      event.cancelBubble = true;

  }

addEventListener(参数1,参数2,参数3)

调用者是:事件源。                参数1:事件去掉on   参数2 :调用的函数

参数3:可有可无。没有默认false.false情况下,支持冒泡。true支持捕获。

 

 

//兼容获取事件触动时,被传递过来的对象

//  var aaa = event.target || event.srcElement;

   var aaa = event.target?event.target:event.srcElement;

案例

 点击空白隐藏模态框

Document事件的绑定,无论绑定什么事件,只要事件被出发,传递过来的应该是指定的元素本身,而不是document。

 事件委托

 

 缓动框架

封装框架遇到的两个问题

原有的方法:div.style.width :这个方法比较固定,不能用变量或者字符串的形式更换属性,不方便我传值获取属性,和给属性赋值。

属性值的获取和属性的赋值

div.style["width"] = "5000px";

可以通过传字符串或者变量的方式获取和赋值属性。

缺点:他的操作完全是对行内式CSS来操作的。赋值的时候毫无问题。但是,获取值的时候有问题了。

获取任意类型的CSS样式的属性值

Div.style.width   

div.currentStyle.width

Window.getComputedStyle(div,null).width;

他们的公共使用变量或者字符串获取属性值的方法都是:去掉属性和点,然后加上中括号和属性的字符串形式。

div.style[“width”];

div.currentStyle[“width”];

Window.getComputedStyle(div,null)[“width”];

 

开闭原则

定义一个变量。数据可以修改。但是,只能修改成为两个值。

 

 

 

回调函数

程序执行完毕,在次执行的函数。

在函数中给指定的函数定义一个形参,然后程序执行到最后,调用这个形参后面加一个括号。

 

 

案例(缓动框架的应用)

 手风琴案例

鼠标放上去的时候,该li变大的速度太快,而其他的li变小的速度没有跟上。导致盒子右侧出现了空白。

 360关闭广告

缓动框架存在的问题

很多属性我们的框架无法获取值和赋值。

border-radius: 1px  21px  41px  1px ;

opacity: 0.5;

background: rgba(0,0,0,.4);

z-index: 1;

主要处理两个

第一个是透明度(旋转木马)

  1. 值为小数,获取的时候要特殊处理。
  2. 兼容问题。IE678不识别opacity;

第二个是层级(旋转木马)(由需求决定的)

层级的提高是一次性直接提到最高,不需要一点一点儿的缓动。

 缓动框架案例

旋转木马

原理:我们先定义一个数组,数组中的元素是json;json中的元素是属性。

点击一个按钮,按顺序更换数组中元素的位置。

(如果我们想完成旋转木马,只需要更换数组中元素的位置)

步骤:

  1. 我们必须让页面加载的时候把所有的属性加载出来,让我看看。(核心)
  2. 鼠标放到大盒子上显示对应的左右切换按钮,移开隐藏
  3. 获取两个按钮。对他们进行事件绑定。对他们进行判断。
  4. 如果是左侧的按钮执行一套程序,如果是右侧的按钮执行另一套程序。
  5. 绑定按钮的函数,一个是正转,一个是反转。(传参确定)
  6. 调换相应的数组对应的元素。(先删除谁,在怎么添加)

正转反转的问题

最开始是:12345;我想让他变成:23451

把1删除,在最后添加1;

在数组json中,删除第一个元素,添加到最末尾。(正转)

在数组json中,删除最后一个元素,添加到第一位。(反转)

函数节流

定义一个变量,只有函数执行完毕在去执行下一个。

正则表达式(RegExp)

概述

正则表达式(英语:Regular Expression)

本质:用来记录文本规则的代码

(为字符串定义规则,为输入内容定义规则!)     

应用非常广泛,如:表单验证、高级搜索、生化科学     

(有一定难度,不要求非常熟练,但至少会表单验证)

  1. 表单验证

  

  1. 隐藏手机号码:  150****7654
  2. 可以通过正则表达式,从字符串中获取我们想要的特定部分

 

正则表达式的特点是:

1. 灵活性、逻辑性和功能性非常的强;

2. 可以迅速地用极简单的方式达到字符串的复杂控制。

3. 对于刚接触的人来说,比较晦涩难懂。

比如:

匹配国内电话号码:\d{3}-\d{8}|\d{4}-\d{7}

验证手机号:

/^((13[0-9])|(15[^4,\D])|(18[0,5-9]))\d{8}$/  

很难记住。

正则表达式声明

1.通过构造函数定义

var 变量名= new RegExp(/表达式/); 

2.通过直接量定义  (较为常用)

var 变量名= /表达式/;

  console.log(regexp1.test(345));

  console.log(/\d/.test(567));(直接使用)

正则表达式的组成是:(总结)

有一些普通字符元字符组成,普通字符就是字母和数字,元字符具有特殊意义的字符

匹配腾讯QQ号:[1-9][0-9]{4,}

评注:腾讯QQ号从10000开始

比如  \d

预定义类: 表示数字   [0-9]

test() 方法         

正则对象方法,检测测试字符串是否符合该规则,返回true和false,参数(测试字符串)

使用语法: 

   Boolean = 表达式.test("要验证的内容"); 

 

console.log(/\d/.test(567));

 验证  567 符不符合 \d 的规范

 

正则内部类(帮我们写好的工具直接使用)

预定义类                                                      

 .    [^\n\r]  除了换行回车之外的任意字符(“”不行

 \d     [0-9]          数字字符

 \D    [^0-9]     非数字字符

 

 \s     [ \t\n\x0B\f\r]   空白字符

 \S     [^ \t\n\x0B\f\r] 非空白字符

 

 \w    [a-zA-Z_0-9]        单词字符

 \W   [^a-zA-Z_0-9]     非单词字符 

简单类(正则://中什么特殊符号都不写,和[]的加入)

1、/string/.test(“string”);            必须是完整的,只多不能少

/andy/.test(“andy”)                          // true

/andy/.test(“andylv”)                      // true

/andy/.test(“an”)                             // false

一句话,只要完整包含andy 就可以了(有他就行)

   2、/[string]/.test(“string”);               只要包含里面的任何一个就可以

  /[andy]/.test("andy");                        // true

  /[andy]/.test("an");                        // true

    /[andy]/.test("ady");                  // true

    /[andy]/.test("anll");                  // true

    /[andy]/.test("assd");                       // true

    /[andy]/.test("ss");                           // false

 /[3aH8]/.test("ss");                         // false

负向类(不能是其中的整体或者一部分)

中括号内,前面加个元字符^进行取反不是括号里面的字符(一部分也不行)

(可以不够,但是不能多)(不够和正好,返回false;多了或者没有返回true

 console.log(/[^abc]/.test('a'));

 console.log(/[^abc]/.test('gg'));

注意这个符号一定是写到方括号里面

范围类

有时匹配的东西过多,而且类型又相同,全部输入太麻烦,我们可以在中间加了个横线

console.log(/[a-z]/.test('1111'));

console.log(/[A-Z]/.test('aa'));

组合类

用中括号匹配不同类型的单个字符。

console.log(/[a-m1-5]/.test("b"))//true

正则边界(重点)

^ 会匹配行或者字符串的起始位置

注:^[]中才表示非!这里表示开始

$ 会匹配行或字符串的结尾位置

^$在一起 表示必须是这个(精确匹配)

// 边界可以精确说明要什么

console.log(/lily/.test("lilyname")); // true

console.log(/^lily$/.test("lily"));  // true

console.log(/^lily$/.test("ly"));   // false

 

console.log(/^andy$/.test("andy"));  // true

 这个的最终意思就是 说, 必须是 andy 这四个字母

量词(重点)

(多个字母,重复最后一个)

 *   (贪婪)   重复零次或更多   (>=0)

 +   (懒惰)   重复一次或更多次  (>=1)

 ?    (占有)   重复零次或一次   (0||1)  要么有 要么没有

{}  重复多少次的意思   可以有多少个 

您的银行卡密码只能是 6位      {6}

{n}    n次     (x=n) 

{n,}   重复n次或更多  (x>=n)

{n,m} 重复出现的次数比n多但比m少 (n<=x<=m)

*      {0,}

+      {1,}

?      {0,1}

 

x|y    一个 |   x  或者 y(没有&,用的是,代替的)  

()提高权限,有限计算

案例:

  1. 匹配座机号
var regexp  = /^(0\d{2}-\d{8})|(0\d{3}-\d{7})$/;

var demo    = /^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/;
  1. 匹配中文

(     /^[\u4e00-\u9fa5]{2,4}$/     )

3.匹配验证表单(注册QQ)

 

replace 函数

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

语法格式:(返回值是新字符串)

需要匹配的对象.replace(正则式/字符串,替换的目标字符)

 

正则表达式的匹配模式支持的2个标志

   g:表示全局模式(global),即模式将被应用于所有字符串而非发现一个而停止

 

   i:表示不区分大小写(ease-insensitive)模式,在确定匹配想时忽略模式与字符串的大小写

 

封装自己的trim 函数

 

function trim(str) {

       return str.replace(/(^\s+)|(\s+$)/g,"");  // 去掉前面和后面的空格

}

 

jQuery

jQuery 基础课程—jQuery选择器

为什么要学jQuery

学习JS的遇到的痛点

痛点的总结:

 

jQuery是什么?

jQuery描述(理解)

jQueryjs的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率。

Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了。

animate.js(JQurey.js)是我们自己封装的库,而jQuery是别人帮我们封装好的库。

学习jQuery,主要是学什么呢?

目前这个阶段,主要学习如何来使用jQuery操作DOM,其实就是学习jQuery封装好的那些功能方法,这些方法叫做API(Application Programming Interface应用程序编程接口)。

这些API的共同特点是:几乎全都是方法。所以,在使用jQuery的API时,都是方法调用,也就是说要小括号()小括号里面是相应的参数,参数不同,功能不同

 

 

体验JQuery

JS实现显示盒子,设置文字。

JQ实现显示盒子,设置文字。

 

 

 

 

 

 

 

如何使用jQuery?(重点

使用步骤:

 

 

1.引包

2.入口函数

3.功能实现代码(事件处理)

 

jQuery隐式迭代简单介绍:(了解)

    隐式 对应的是 显示,隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用。

 

jQuery详细解释

版本介绍(了解)

 

两个版本的区别:2.x版本,不再支持IE678

两个版本对浏览器的支持情况:

 

 

这几天主要学习1.x版本,1.x版本说明:

 

同版本两个文件的区别:

min:压缩版,压缩过后,体积会更小

压缩指的是:把注释、空格、换行全部去掉,把变量名称尽可能的换成更加简短的字符。

压缩的主要目的:就是让文件变的更小。

平时开发过程中,这两个文件使用哪个都可以;但是,项目上线的时候,推荐使用压缩版。

 

引包注意点(理解)

第一点:在使用jQuery之前,先把jQuery文件引到页面中来

    如果在使用jQuery之前,没有引用jQuery文件,会报错:

 

第二点:src路径一定要写正确

    如果src路径写错,也会报错:

 

 

jQuery的入口函数(重点)

 

 

jQuery入口函数与js入口函数的区别(理解)

js入口函数指的是:window.onload = function() {};

 

区别一:书写个数不同

    Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。

    jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。

区别二:执行时机不同

    Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。

    jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。

   

    文档加载的顺序:从上往下,边解析边执行。

 

jQuery的$符号(重点)

js命名规范允许出现的字符有:数字、字母、下划线、$。

js命名规范允许作为变量命名开头的字符有:字母、下划线、$;但是,不允许以数字作为变量命名的开头。

 

var $ = “我是字符串”;

var $ = 123;

function $(){

   alert(“我是函数$”);

}

 

jQuery使用$符号原因:书写简洁、相对于其他字符与众不同、容易被记住。

 

 

怎么理解jQuery里面的$符号:

$实际上表示的是一个函数。

$(); // 调用上面我们自定义的函数$

$(document).ready(function(){}); // 调用入口函数

$(function(){}); // 调用入口函数

$(“#btnShow”) // 获取id属性为btnShow的元素

$(“div”) // 获取所有的div元素

jQuery里面的$函数,根据传入参数的不同,进行不同的调用,实现不同的功能。返回的是jQuery对象

 

jQuery这个js库,除了$之外,还提供了另外一个函数:jQuery

jQuery函数跟$函数的关系:jQuery ===$;

jQuery对象和DOM对象的相互转换(难点

DOM对象此处指的是:使用js操作DOM返回的结果。

var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

jQuery对象此处指的是:使用jQuery提供的操作DOM的方法返回的结果。

jQuery拿到DOM对象后又对其做了封装,让其具有了jQuery方法的jQuery对象,说白了,就是把DOM对象重新包装了一下。

(联想:手机和有手机壳的手机,手机就好比是DOM对象,有手机壳的手机就好比是jQuery对象)

var $btn = $(“#btnShow”); // $btn就是一个jQuery对象

DOM对象转换成jQuery对象:

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1

// $(document).ready(function(){}); // 调用入口函数

// 此处是将document这个js的DOM对象,转换成了jQuery对象,然后才能调用jQuery提供的方法:ready

 

jQuery对象转换成DOM对象:

// 第一种方式

var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 (推荐使用此方式)

// 第二种方式

var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

这两种方式都要记住,使用哪一种都可以。

案例:隔行变色

案例:开关灯

图解:

 

所有这些,都体现了jQuery对js的封装!

JS跟jQuery的区别是什么?(理解)

 

为什么要学jQuery选择器?

JS提供的选择DOM元素的方法有几个?

考虑兼容性的话,js里面提供的选择DOM的方法只有两个:

JavaScript选择元素的方法:

document.getElementById();

通过id属性获取指定元素

返回唯一的DOM对象

document.getElementsByTagName();

通过标签名获取指定元素

返回DOM对象数组(即使只有一个元素)

正是因为js提供的选择DOM的方法太少了,满足不了我们平时开发的需要,所以,我们可以使用jQuery选择器来弥补这方面的不足。

什么是jQuery选择器

jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。(联想:CSS选择符)

 

强大的jQuery选择器(重点)

强大的原因:jQuery实现了从CSS1到CSS3所有的选择器以及其他常用的选择器。

各种选择器之间可以相互代替,所以,平时真正用到的只是最常用的选择器。

基本选择器(重点

符号(名称)

说明

用法

#

Id选择器

$(“#btnShow”).css(“color”, “red”);

选择id为btnShow的一个元素(返回值为jQuery对象,下同

.

类选择器

$(“.liItem”).css(“color”, “red”);

选择含有类liItem的所有元素

element

标签选择器

$(“li”).css(“color”, “red”);

选择标签名为li的所有元素

 

层级选择器(重点)、基本过滤选择器

符号(名称)

说明

用法

层级选择器

空格

后代选择器

$(“#j_wrap li”).css(“color”, “red”);

选择id为j_wrap的元素的所有后代元素li

>

子代选择器

$(“#j_wrap > ul > li”).css(“color”, “red”);

选择id为j_wrap的元素的所有子元素ul的所有子元素li

基本过滤选择器

:eq(index)

选择匹配到的元素中索引号为index的一个元素,index0开始

$(“li:eq(2)”).css(“color”, ”red”);

选择li元素中索引号为2的一个元素

:odd

选择匹配到的元素中索引号为奇数的所有元素,index0开始

$(“li:odd”).css(“color”, “red”);

选择li元素中索引号为奇数的所有元素

:even

选择匹配到的元素中索引号为偶数的所有元素,index0开始

$(“li:odd”).css(“color”, “red”);

选择li元素中索引号为偶数的所有元素

    

 

 

筛选选择器(方法)(重点

符号(名称)

说明

用法

find(selector)

查找指定元素的所有后代元素(子子孙孙)

$(“#j_wrap”).find(“li”).css(“color”, “red”);

选择id为j_wrap的所有后代元素li

children()

查找指定元素的直接子元素(亲儿子元素)

$(“#j_wrap”).children(“ul”).css(“color”, “red”);

选择id为j_wrap的所有子代元素ul

siblings()

查找所有兄弟元素(不包括自己)

$(“#j_liItem”).siblings().css(“color”, “red”);

选择id为j_liItem的所有兄弟元素

parent()

查找父元素(亲的)

$(“#j_liItem”).parent(“ul”).css(“color”, “red”);

选择id为j_liItem的父元素

eq(index)

查找指定元素的第index个元素,index是索引号,从0开始

$(“li”).eq(2).css(“color”, “red”);

选择所有li元素中的第二个

案例:隔行变色。

下拉菜单(this)

鼠标进入高亮(隔行变色)

突出展示案例

手风琴

淘宝精品服饰

css();hide();show()

index();过去当前元素在父元素中的索引值(解放自定义属性)

jQuery 基础课程—jQuery-DOM操作

使用jQuery操作DOM

为什么要使用jQuery操作DOM

对比JS操作DOM和jQuery操作DOM

 

使用jQuery的方式来操作DOM更加的简介,方便,统一的调用方式方便我们学习,降低来我们的学习成本。

重点内容

  • 样式和类操作
  • jQuery动画
  • 节点操作

 

样式操作

样式属性操作  .css()

作用:设置或获取元素的样式属性值

1 设置样式属性操作:

a设置单个样式:

// 第一个参数表示:样式属性名称

// 第二个参数表示:样式属性值

$(selector).css(“color”, “red”);

b设置多个样式:(也可以设置单个)

// 参数为 {}(对象)

$(selector).css({“color”: “red”, “font-size”: “30px”});

 

2获取样式属性操作:

// 参数表示要获取的 样式属性名称

$(selector).css(“font-size”);

此时,会返回”font-size”样式属性对应的值。

类操作

添加类样式:

(addClass) 为指定元素添加类className

$(selector).addClass(“liItem”);

注意:此处类名不带点,所有类操作的方法类名都不带点

移除类样式:

removeClass(className) 为指定元素移除类 className

$(selector).removeClass(“liItem”);

$(selector).removeClass(); 不指定参数,表示移除被选中元素的所有类

 

判断有没有类样式:

hasClass(calssName) 判断指定元素是否包含类 className

$(selector).hasClass(“liItem”);

此时,会返回true或false

 

切换类样式:

toggleClass(className) 为指定元素切换类 className,该元素有类则移除,没有指定类则添加。

$(selector).toggleClass(“liItem”);

 

注意点:

            操作类样式的时候,所有的类名,都不带点(.

       经验:

            1 操作的样式非常少,那么可以通过.css()这个 方法来操作

            2 操作的样式很多,那么要通过使用类的方式来操作

 

            3 如果考虑以后维护方便(把CSSjs中分离出来)的话,推荐使用类的方式来操作。类比CSS书写位置(把csshtml中分离出来)

 

前面内容特色总结:简约、“粗暴”、干净利落、直截了当

案例:图片京东Table

 

jQuery动画是什么?

jQuery提供的一组网页中常见的动画效果,这些动画是标准的、有规律的效果;同时还提供给我们了自定义动画的功能。

隐藏显示动画

1 show方法

作用:让匹配的元素展示出来

 

// 用法一:

// 参数为数值类型,表示:执行动画时长

/* 单位为:毫秒(ms),参数2000即2秒钟显示完毕 */

$(selector).show(2000);

 

// 用法二:

// 参数为字符串类型,是jQuery预设的值,共有三个,分别是:slow、normal、fast

/* 跟用法一的对应关系为: */

/* slow:600ms、normal:400ms、fast:200ms */

$(selector).show(“slow”);

 

// 用法三:

// 参数一可以是数值类型或者字符串类型

// 参数二表示:动画执行完后立即执行的回调函数

$(selector).show(2000, function() {});

 

// 用法四:

// 不带参数,作用等同于 css(“display”, ”block”)

/* 注意:此时没有动画效果 */

$(selector).show();

 

注意:

jQuery预设的三组动画效果的语法几乎一致:参数可以有两个,第一个是动画的执行时长,第二个是动画执行完成后的回调函数。

第一个参数是:可以是指定字符或者毫秒数

 

2 hide方法

作用:让匹配元素隐藏掉

用法参考show方法

$(selector).hide(1000); // 1000表示什么?

$(selector).hide(“slow”);

$(selector).hide(1000, function(){});

$(selector).hide();

 

滑入滑出动画

1滑入动画效果(联想:生活中的卷帘门)

作用:让元素以下拉动画效果展示出来

$(selector).slideDown(speed,callback);

 

注意:省略参数或者传入不合法的字符串,那么则使用默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp

$(selector).slideDown();

 

2 滑出动画效果

作用:让元素以上拉动画效果隐藏起来

$(selector).slideUp(speed,callback);

 

3滑入滑出切换动画效果

$(selector).slideToggle(speed,callback);

参数等同与1.5.1 隐藏和显示

淡入淡出动画

1 淡入动画效果

作用:让元素以淡淡的进入视线的方式展示出来

$(selector).fadeIn(speed, callback);

2 淡出动画效果

作用:让元素以渐渐消失的方式隐藏起来

$(selector).fadeOut(1000);

3淡入淡出切换动画效果

作用:通过改变透明度,切换匹配元素的显示或隐藏状态

$(selector).fadeToggle('fast',function(){});

参数等同与1.5.1 隐藏和显示

 

4改变透明度到某个值

与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的!

作用:调节匹配元素的不透明度

// 用法有别于其他动画效果

// 第一个参数表示:时长

// 第二个参数表示:不透明度值,取值范围:0-1

$(selector).fadeTo(1000, .5); //  0全透,1全不透

 

// 第一个参数为0,此时作用相当于:.css(“opacity”, .5);

$(selector).fadeTo(0, .5);

 

jQuery提供的动画使用方法总结:

 

 

 

有规律的体现:

jQuery提供的这几个动画效果控制的CSS属性包括:高度、宽度、不透明度。{height:400px; width:300px; opacity:.4;}

这三个CSS属性的共性是:属性值只有一个,并且这个值是数值(去掉单位后)。

 

自定义动画

注意:所有能够执行动画的属性必须只有一个数字类型的值。

比如:要改变字体大小,要使用:fontSize(font-size),不要使用:font

 

动画支持的属性:

    http://www.w3school.com.cn/jquery/effect_animate.asp

 

作用:执行一组CSS属性的自定义动画

// 第一个参数表示:要执行动画的CSS属性(必选)

// 第二个参数表示:执行动画时长(可选)

// 第三个参数表示:动画执行完后立即执行的回调函数(可选)

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

 

停止动画

stop()

作用:停止当前正在执行的动画

为什么要停止动画?

如果一个以上的动画方法在同一个元素上调用,那么对这个元素来说,后面的动画将被放到效果队列中。这样就形成了动画队列。(联想:排队进站)

动画队列里面的动画不会执行,直到第一个动画执行完成。

// 第一个参数表示后续动画是否要执行

(true:后续动画不执行  ;false:后续动画会执行)

// 第二个参数表示当前动画是否执行完

(true:立即执行完成当前动画  ;false:立即停止当前动画)

$(selector).stop(clearQueue,jumpToEnd);

都不给,默认false;

解释:

当调用stop()方法后,队列里面的下一个动画将会立即开始。但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。

如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。

 

注意:如果元素动画还没有执行完,此时调用sotp()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。

 

常用方式:

$(selector).stop();

 

jQuery节点操作

动态创建元素

// $()函数的另外一个作用:动态创建元素

var $spanNode = $(“<span>我是一个span元素</span>”);

var node = $(“#box”).html(“<li>我是li</li>”);

   

添加元素

在元素的最后一个子元素后面追加元素:

append()重点

作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以)

如果是页面中存在的元素,那么调用append()后,会把这个元素放到相应的目标元素里面去;但是,原来的这个元素,就不存在了。

       如果是给多个目标追加元素,那么方法的内部会复制多份这个元素,然后追加到多个目标里面去。

常用参数:htmlString 或者 jQuery对象

 

// 在$(selector)中追加$node

$(selector).append($node);

// 在$(selector)中追加div元素,参数为htmlString

$(selector).append('<div></div>');

 

不常用操作:(用法跟append()方法基本一致)

1 appendTo()

作用:同append(),区别是:把$(selector)追加到node中去

$(selector).appendTo(node);

 

2 prepend()

作用:在元素的第一个子元素前面追加内容或节点

$(selector).prepend(node);

 

3 after()

作用:在被选元素之后,作为兄弟元素插入内容或节点

$(selector).after(node);

 

4 before()

作用:在被选元素之前,作为兄弟元素插入内容或节点

$(selector).before(node);

html创建元素(推荐使用,重点)

作用:设置或返回所选元素的html内容(包括 HTML 标记)

设置内容的时候,如果是html标记,会动态创建元素,此时作用跟js里面的 innerHTML属性相同

// 动态创建元素

$(selector).html(‘<span>传智播客</span>’);

// 获取html内容

$(selector).html();

清空元素

// 清空指定元素的所有子元素(光杆司令)

// 没有参数

$(selector).empty();

$(selector).html(“”);

// “自杀” 把自己(包括所有内部元素)从文档中删除掉

$(selector).remove();

 

复制元素

作用:复制匹配的元素

// 复制$(selector)所匹配到的元素

// 返回值为复制的新元素

$(selector).clone();

 

总结:

    推荐使用html(“<span></span>”)方法来创建元素或者html(“”)清空元素

案例:

  1. 选择水果
  2. 动态创建表格
  3. 动态添加数据

操作form表单

属性操作

设置属性:

// 第一个参数表示:要设置的属性名称

// 第二个参数表示:改属性名称对应的值

$(selector).attr(“title”, “传智播客”);

 

获取属性:

// 参数为:要获取的属性的名称,改操作会返回指定属性对应的值

$(selector).attr(“title”);

此时,返回指定属性的值

 

移除属性:

// 参数为:要移除的属性的名称

$(selector).removeAttr(“title”);

 

注意:checked、selected、disabled要使用.prop()方法。

prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属性。例如:input和button的disabled特性,以及checkbox的checked特性。

细节参考:http://api.jquery.com/prop/

 

值和内容

val()方法:

作用:设置或返回表单元素的值,例如:input,select,textarea的值

// 获取匹配元素的值,只匹配第一个元素

$(selector).val();

// 设置所有匹配到的元素的值

$(selector).val(“具体值”);

 

text() 方法:

作用:设置或获取匹配元素的文本内容

//获取操作不带参数(注意:这时候会把所有匹配到的元素内容拼接为一个字符串,不同于其他获取操作!)

$(selector).text();

//设置操作带参数,参数表示要设置的文本内容

$(selector).text(“我是内容”);

 

尺寸位置操作

高度和宽度操作

高度操作height() :

作用:设置或获取匹配元素的高度值

//带参数表示设置高度

$(selector).height(200);

//不带参数获取高度

$(selector).height();

宽度操作width() :

作用:设置或获取匹配元素的宽度值

//带参数表示设置宽度

//不带参数获取宽度

$(selector).width(200);

css()获取高度和height获取高度的区别?

 

坐标值操作

offset()

作用:获取或设置元素相对于文档的位置

// 无参数表示获取,返回值为:{left:num, top:num},值是相对于document的位置

$(selector).offset();

// 有参数表示设置,参数推荐使用数值类型

$(selector).offset({left:100, top: 150});

 

注意点:设置offset后,如果元素没有定位(默认值:static),则被修改为relative

 

position()

作用:获取相对于其最近的具有定位的父元素的位置。

// 获取,返回值为对象:{left:num, top:num}

$(selector).position();

注意:只能获取,不能设置。

 

scrollTop()

作用:获取或者设置元素垂直方向滚动的位置

// 无参数表示获取偏移

// 有参数表示设置偏移,参数为数值类型

$(selector).scrollTop(100);

 

scrollLeft()

作用:获取或者设置元素水平方向滚动的位置

$(selector).scrollLeft(100);

 

对scrollTop的理解:

垂直滚动条位置 是可滚动区域 可视区域上方的 被隐藏区域的高度。

如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条,那么这个距离为0

 

 

jQuery 基础课程—jQuery其他必备知识

jQuery其他必备知识

重点内容

  • val()值操作
  • 事件绑定
  • 事件解绑
  • 事件触发
  • 插件基本使用

操作form表单

属性操作

设置属性:

// 第一个参数表示:要设置的属性名称

// 第二个参数表示:该属性名称对应的值

$(selector).attr(“title”, “传智播客”);

 

获取属性:

// 参数为:要获取的属性的名称,改操作会返回指定属性对应的值

$(selector).attr(“title”);

此时,返回指定属性的值

 

移除属性:

// 参数为:要移除的属性的名称

$(selector).removeAttr(“title”);

 

注意:checked、selected、disabled要使用.prop()方法。

prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属性。例如:input和button的disabled特性,以及checkbox的checked特性。

细节参考:http://api.jquery.com/prop/

案例:表格案例全选反选;

值和内容

val()方法:

作用:设置或返回表单元素的值,例如:input,select,textarea的值

// 获取匹配元素的值,只匹配第一个元素

$(selector).val();

// 设置所有匹配到的元素的值

$(selector).val(“具体值”);

 

text() 方法:

作用:设置或获取匹配元素的文本内容

//获取操作不带参数(注意:这时候会把所有匹配到的元素内容拼接为一个字符串,不同于其他获取操作!)

$(selector).text();

//设置操作带参数,参数表示要设置的文本内容

// 如果设置的内容包含html标签(<span>我要动态创建span,这时候行吗?</span>),那么text这个方法会把他们当作文本内容输出,而不会创建元素。这个text()和html()方的主要区别

$(selector).text(“我是内容”);

案例:红鲤鱼与绿鲤鱼

尺寸位置操作

高度和宽度操作

高度操作height() :

作用:设置或获取匹配元素的高度值

//带参数表示设置高度

$(selector).height(200);

//不带参数获取高度

$(selector).height();

宽度操作width() :

作用:设置或获取匹配元素的宽度值

//带参数表示设置宽度

//不带参数获取宽度

$(selector).width(200);

css()获取高度和height获取高度的区别?

 

坐标值操作

offset()

作用:获取或设置元素相对于文档的位置

// 无参数表示获取,返回值为:{left:num, top:num},值是相对于document的位置

$(selector).offset();

// 有参数表示设置,参数推荐使用数值类型

$(selector).offset({left:100, top: 150});

 

注意点:设置offset后,如果元素没有定位(默认值:static),则被修改为relative

 

position()

作用:获取相对于其最近的具有定位的父元素的位置。

// 获取,返回值为对象:{left:num, top:num}

$(selector).position();

注意:只能获取,不能设置。

 

scrollTop()

作用:获取或者设置元素垂直方向滚动的位置

// 无参数表示获取偏移

// 有参数表示设置偏移,参数为数值类型

$(selector).scrollTop(100);

 

scrollLeft()

作用:获取或者设置元素水平方向滚动的位置

$(selector).scrollLeft(100);

 

对scrollTop的理解:

垂直滚动条位置 是可滚动区域 可视区域上方的 被隐藏区域的高度。

如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条,那么这个距离为0

 

案例:固定导航栏

jQuery事件机制

jQuery的事件机制,指的是:jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定、事件解绑、事件触发。

jQuery事件的发展历程(了解)

简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on【重点】

 

  1. 简单事件绑定:

click(handler)                      单击事件

blur(handler)                       失去焦点事件

mouseenter(handler)            鼠标进入事件

mouseleave(handler)            鼠标离开事件

dbclick(handler)                  双击事件

change(handler) 改变事件,如:文本框值改变,下来列表值改变等

focus(handler)                     获得焦点事件

keydown(handler)               键盘按下事件

其他参考:http://www.w3school.com.cn/jquery/jquery_ref_events.asp

 

  1. bind方式(不推荐,1.7以后的jQuery版本被on取代)

作用:给匹配到的元素直接绑定事件

// 绑定单击事件处理程序

第一个参数:事件类型

第二个参数:事件处理程序

$("p").bind("click mouseenter", function(e){

    //事件响应方法

});

比简单事件绑定方式的优势:

  1. 可以同时绑定多个事件,比如:bind(“mouseenter  mouseleave”, function(){})

缺点:要绑定事件的元素必须存在文档中。

 

3 delegate方式(特点:性能高,支持动态创建的元素)

作用:给匹配到的元素绑定事件,对支持动态创建的元素有效

// 第一个参数:selector,要绑定事件的元素

// 第二个参数:事件类型

// 第三个参数:事件处理函数

$(".parentBox").delegate("p", "click", function(){

    //为 .parentBox下面的所有的p标签绑定事件

});

与前两种方式最大的优势:减少事件绑定次数提高效率,支持动态创建出来的元素绑定事件!

 

on方式(最现代的方式,兼容zepto(移动端类似jQuery的一个库),强烈建议使用的方式)(重点)

jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法

作用:给匹配的元素绑定事件,包括了上面所有绑定事件方式的优点

语法:

// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)

// 第二个参数:selector, 执行事件的后代元素

// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用

// 第四个参数:handler,事件处理函数

$(selector).on(events[,selector][,data],handler);

 

   // 表示给$(selector)绑定事件,当必须是它的内部元素span才能执行这个事件

$(selector).on( "click",“span”, function() {});

 

// 绑定多个事件

// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件

$(selector).on(“click mouseenter”, function(){});

 

事件解绑

  1. unbind() 方式

作用:解绑 bind方式绑定的事件

$(selector).unbind(); //解绑所有的事件

$(selector).unbind(“click”); //解绑指定的事件

  1. undelegate() 方式

作用:解绑delegate方式绑定的事件

$( selector ).undelegate(); //解绑所有的delegate事件

$( selector).undelegate( “click” ); //解绑所有的click事件

 

off解绑on方式绑定的事件(重点)

// 解绑匹配元素的所有事件

$(selector).off();

// 解绑匹配元素的所有click事件

$(selector).off(“click”);

// 解绑所有代理的click事件,元素本身的事件不会被解绑

$(selector).off( “click”, “**” );

 

事件触发

简单事件触发

$(selector).click(); //触发 click事件

trigger方法触发事件,触发浏览器行为

$(selector).trigger(“click”);

triggerHandler触发 事件响应方法,不触发浏览器行为

比如:文本框获得焦点的默认行为

$(selector).triggerHandler(“focus”);

 

jQuery事件对象介绍

event.data                            传递给事件处理程序的额外数据

event.currentTarget              等同于this,当前DOM对象

event.pageX                         鼠标相对于文档左部边缘的位置

event.target                         触发事件源,不一定===this

event.stopPropagation() 阻止事件冒泡

event.preventDefault();      阻止默认行为

event.type                            事件类型:click,dbclick…

event.which                         鼠标的按键类型:左1 中2 右3

event.keyCode                      键盘按键代码

案例:按键变色

jQuery补充

链式编程

链式编程原理:return this;

通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。

 

end(); // 结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态。

隐式迭代

隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。

如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。

 

案例【五角星评分控件】

each方法

有了隐式迭代,为什么还要使用each函数遍历?

大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性。

如果要对每个元素做不同的处理,这时候就用到了each方法

 

作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号

// 参数二表示当前元素(DOM对象)

$(selector).each(function(index,element){});

Element是一个 js对象,需要转换成jquery对象

 

【案例】 什么都看不见

 

多库共存

此处多库共存指的是:jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库,并且引用的其他库(或者其他版本的jQuery库)中也用到了$或者jQuery这两个变量,那么,要保证每个库都能正常使用,这时候就有了多库共存的问题。

 

// 模拟另外的库使用了 $ 这个变量

// 此时,就与jQuery库产生了冲突

var $ = { name : “itecast” };

 

解决方式:

// 作用:让jQuery释放对$的控制权,让其他库能够使用$符号,达到多库共存的目的。此后,只能使用jQuery来调用jQuery提供的方法

$.noConflict();  //true两个都交出来,返回值是新的调用方法

 

 

jQuery插件机制

jQuery这个js库,虽然功能强大,但也不是面面俱到包含所有的功能。

jQuery是通过插件的方式,来扩展它的功能:

当你需要某个插件的时候,你可以“安装”到jQuery上面,然后,使用。

当你不再需要这个插件,那你就可以从jQuery上“卸载”它。

(联想:手机软件,安装的app就好比插件,用的时候安装上,不用的时候卸载掉)

第三方插件

jQuery.color.js

    animate()自定义动画:不支持背景的动画效果

animate动画支持的属性列表

jQuery.lazyload.js

使用步骤:

  1. 引入jQuery文件
  2. 引入插件
  3. 使用插件

制作插件

如何创建jQuery插件:

http://learn.jquery.com/plugins/basic-plugin-creation/

 

全局jQuery函数扩展方法

$.pluginName = function() {};

 

jQuery对象扩展方法

$.fn. pluginName = function() {};

 

 

jQueryUI

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API:http://api.jqueryui.com/category/all/

其他教程:jQueryUI教程

基本使用:

  1. 引入jQueryUI的样式文件
  2. 引入jQuery
  3. 引入jQueryUI的js文件
  4. 使用jQueryUI功能

HTML5第一天

H5

    1. 认识HTML5

前面我们学习的html是什么?

  Html4.0

 网页开发:   htmlà 结构  4.0

                           Css ->样式  2.0

                           Js à  行为 用户交互

HTML5  是html4.0 升级版

                 结构 Html5 、样式 css3 、行为: API  都有所增强

HTML5并不仅仅只做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。

HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合Canvas我们可开发网页版游戏。

广义概念:HTML5代表浏览器端技术的一个发展阶段。在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,它包括:HTML5,CSS3,Javascript,API在内的一套技术组合

 

H5范称

HTML + CSS3 + JS  

优点:http://www.intertid.com/school/2014/595568.shtml

    1. 语法规范

HTML5在语法规范上也做了比较大的调整,去除了许多冗余的内容,书写规则更加简洁、清晰。

见代码实例

 

特点:

1、更简洁

2、更宽松

          单标签不用写关闭符号
                  双标签省略结束标签

         html、head、body、colgroup、tbody可以完全省略        

实际开发中应规范书写,不建议太随意

语义标签

语义标签对于我们并不陌生,如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备理解HTML页面内容。

传统的做法我们或许通过增加类名如class="header"、class="footer",使HTML页面具有语义性,但是不具有通用性

HTML5则是通过新增语义标签的形式来解决这个问题,例如<header></header>、<footer></footer>等,这样就可以使其具有通用性

此章节学习目的为了解增加语义标签的目的,以及各语义标签所表达的意义,在网页布局中能够合理使用标签。

传统网页布局:

    <!-- 头部 -->

        <div class="header">

                <ul class="nav"></ul>

        </div>

      <!-- 主体部分 -->

      <div class="main">

         <!-- 文章 -->

      <div class="article"></div>

      <!-- 侧边栏 -->

      <div class="aside"></div>

      </div>

       <!-- 底部 -->

      <div class="footer"></div>
H5 经典网页布局:
   <!-- 头部 -->

     <header>

       <ul class="nav"></ul>

   </header>

<!-- 主体部分 -->

<div class="main">

   <!-- 文章 -->

   <article></article>

   <!-- 侧边栏 -->

   <aside></aside>

</div>

<!-- 底部 -->

<footer></footer>

常用新语义标签

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

<article> 表示文章 如文章、评论、帖子、博客

<aside> 表示侧边栏 如文章的侧栏

<figure> 表示媒介内容分组 ul > li 做个比较

<mark> 表示标记 (文本有背景颜色,表示标记)

<progress> 表示进度

<time> 表示日期 ( 包裹时间 )

本质上新语义标签与<div>、<span>没有区别,只是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav"> 相当于 <nav>。不要好奇,它只是一个标签!

尽量避免全局使用headerfooteraside等语义标签。

 

兼容处理

(我们在测试ie 的兼容的时候,有一个叫做ietest 的软件,这个软件可以模拟ie6-ie11)

     在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了,在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

 

 

表单

伴随着互联网富应用以及移动开发的兴起,传统的Web表单已经越来越不能满足开发的需求,所以HTML5在Web表单方向也做了很大的改进,如拾色器、日期/时间组件等,使表单处理更加高效。

此章节学习目的,了解HTML5表单的新增的特性,以及PC和移动设备间的差异,其兼容性较差。

 

输入类型  (表单类型,表单元素,表单属性,表单事件.)

email 输入email格式

tel 手机号码 

url 只能输入url格式

number 只能输入数字

search 搜索框

range 范围 滑动条

color 拾色器

time   时间

date 日期 不是绝对的

--datetime-local

时间日期

month 月份

week 星期

部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。

表单元素(标签)

智能表单( 输入指定文本提供备选 ) 

<datalist> 数据列表

  与input 配合使用

<input type=”text” list=”  car  ”>

<datalist id="  car   ">

        <option>宝马</option>

        <option>宝骏</option>

        <option>宝强</option>

        <option>宝宝</option>

        <option>奥迪</option>

        <option>奥迪奥</option>

        <option>迪奥</option>

    </datalist>

<keygen   name =”  -----  ”>  生成加密字符串

 

  keygen 元素  



      keygen 元素的作用是提供一种验证用户的可靠方法。 

      keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,    一个是私钥,一个公钥。 



    私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

<output>   不可当做数据提交?  ()

<progress></progress>

<progress value="40" max="100"></progress>

 

<meter>   表示度量器,不建议用作进度条

   <meter  value="81"    min="0" max="100"  low="60"  high="80" />
 

Max-width  

Min-width

表单属性

placeholder 占位符

autofocus 获取焦点 (打开页面焦点自动锁定在当前目标)

multiple 文件上传多选或多个邮箱地址 

autocomplete 自动完成,用于表单元素,也可用于表单自身(on/off)

(记录上次输入的信息,e-mail默认不会记录)

form 指定表单项属于哪个form,处理复杂表单时会需要

novalidate 关闭验证,可用于<form>标签 (写在form,不会对表单进行验证)

required 必填项 (不填写无法提交表单)

pattern 正则表达式 验证表单

 手机号:<input type="tel" name="tel" required="required"       pattern="^(\+86)?1[3,5,8](\d{9})$">

  

 

表单事件

oninput 用户输入内容时触发,可用于移动端输入字数统计(js直接调用)

oninvalid 验证不通过时触发(js直接调用)

 

 

案例练习

注册表单

 多媒体

在HTML5之前,在网页上播放音频/视频的通用方法是利用Flash来播放,但是大多情况下,并非所有用户的浏览器都安装了Flash插件,由此使得处理音频/视频播放变的非常复杂,并且移动设备的浏览器并不支持Flash插件。

Media palyer

此章节学习目的,了解如何通过HTML5播放音频/视频,以及针对不同浏览器所支持的格式,做多浏览器兼容处理。

音频

HTML5通过<audio>标签来解决音频播放的问题。

使用相当简单,如下图所示

 

并且可以通过附加属性可以更友好控制音频的播放,如:

autoplay 如果出现该属性,则视频在就绪后马上播放

controls 如果出现该属性,则向用户显示控件,比如播放按钮。

loop 循环播放

preload 预加载 同时设置autoplay时些属性失效

描述

 

load

规定是否预加载视频。

可能的值:

  • auto - 当页面加载后载入整个视频
  • meta - 当页面加载后只载入元数据
  • none - 当页面加载后不载入视频

 

 

由于版权等原因,不同的浏览器可支持播放的格式是不一样的

 

多浏览器支持的方案,如下图

 

视频

HTML5通过<video>标签来解决音频播放的问题。

同音频播放一样,<video>使用也相当简单,如下图

 

同样,通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

preload 预加载,同时设置了autoplay,此属性将失效

width 设置播放窗口宽度

height 设置播放窗口的高度

由于版权等原因,不同的浏览器可支持播放的格式是不一样的

 

多浏览器支持的方案,如下图

 

DOM扩展

获取元素

1、document.getElementsByClassName ('class') 通过类名获取元素,以类数组形式存在。

2、document.querySelector(‘#box’) 通过CSS选择器获取元素,符合匹配条件的1元素。

3、document.querySelectorAll('selector') 通过CSS选择器获取元素,以类数组形式存在。

类名操作

1、Node.classList.add('class') 添加class

2、Node.classList.remove('class') 移除class

3、Node.classList.toggle('class') 切换class,有则移除,无则添加

4、Node.classList.contains('class') 检测是否存在class

Node指一个有效的DOM节点,是一个通称。

自定义属性

在HTML5中我们可以自定义属性,其格式如下data-*="",例如

data-info="我是自定义属性",通过Node.dataset['info'] 我们便可以获取到自定义的属性值。

Node.dataset是以类对象形式存在的

当我们如下格式设置时,则需要以驼峰格式才能正确获取

data-my-name="itcast",获取Node.dataset['myName']

案例练习 (tab 切换)

 

 

HTML5第二天API

新增API

多媒体

方法:load() 加载、play() 播放、pause() 暂停

属性:currentTime 视频播放的当前进度(播放的当前时间)

      duration:视频的总时间

      paused:视频播放的状态.

事件:

     oncanplay: 事件在用户可以开始播放视频/音频(audio/video)时触发。
     ontimeupdate:通过该事件来报告当前的播放进度
(播放时一直触发)
              (当拖动进度条时触发该事件)
    onended:播放完时触发
 
以下内容作为了解(视频架加载过程当中的事件)
 
全屏:video.webkitRequestFullScreen();
 
 
 

拖拽

在HTML5的规范中,我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启的。

拖拽元素

页面中设置了draggable="true"属性的元素

目标元素

页面中任何一个元素都可以成为目标元素

事件监听

拖拽元素

ondrag          应用于拖拽元素,整个拖拽过程都会调用

ondragstart    应用于拖拽元素,当拖拽开始时调用

ondragleave  应用于拖拽元素,当鼠标离开拖拽元素时调用

ondragend     应用于拖拽元素,当拖拽结束时调用

目标元素

ondragenter   应用于目标元素,当拖拽元素进入时调用

ondragover   应用于目标元素,当停留在目标元素上时调用

ondrop          应用于目标元素,当在目标元素上松开鼠标时调用

ondragleave  应用于目标元素,当鼠标离开目标元素时调用

 

preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。

历史

提供window.history,对象我们可以管理历史记录,可用于单页面应用,Single Page Application,可以无刷新改变网页内容。

旧版本浏览器..

history.back() 回退

history.forward() 前进

地理定位

在HTML规范中,增加了获取用户地理信息的API,这样使得我们可以基于用户位置开发互联网应用,即基于位置服务 (Location Base Service)

获取地理信息方式

1、IP地址

2、三维坐标

    GPS(Global Positioning System,全球定位系统)

  目前世界上在用或在建的第2代全球卫星导航系统(GNSS)有:1.美国 Global Positioning System 全球定位系统 简称GPS.2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM (全球卫星导航系统)简称GLONASS(格洛纳斯);3.欧盟(欧洲是不准确的说法,包括中国在内的诸多国家也参与其中)Galileo satellite navigation system伽利略卫星导航系统) 简称GALILEO伽利略);4.中国 BeiDou(COMPASS) Navigation Satellite System北斗卫星导航系统)简称 BDS 5.日本 Quasi-Zenith Satellite System (准天顶卫星系统) 简称QZSS ;印度 India Regional Navigation Satellite System(印度区域卫星导航系统)简称IRNSS;以上6个系统中国都能使用。

    Wi-Fi

    手机信号

3、用户自定义数据

如下图对不同获取方式的优缺点进行了比较,浏览器会自动以最优方式去获取用户地理信息。

 

隐私

HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可,才能获取用户的位置信息。

API详解

navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息

navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息

1、当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。Coords(坐标)

position.coords.latitude纬度

position.coords.longitude经度

2、当获取地理信息失败后,会调用errorCallback,并返回错误信息error

3、可选参数 options 对象可以调整位置信息数据收集方式

百度地图案例.

Web存储

随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案。

Storage 存储 

window.sessionStorage

window.localStorage

(向本地保存数据,有可能在浏览器内存里面,有可能在硬盘上面.)

特性

1、设置、读取方便

2、容量较大,sessionStorage约5M、localStorage约20M

3、只能存储字符串,可以将对象JSON.stringify() 编码后存储

window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口下数据可以共享

window.localStorage

1、永久生效,除非手动删除

2、可以多窗口共享

方法详解

setItem(key, value) 设置存储内容

getItem(key) 读取存储内容

removeItem(key) 删除键值为key的存储内容

clear() 清空所有存储内容

key(n) 以索引值来获取存储内容

案例:记住用户名

其它

WebSQL、IndexDB

已经被w3c 放弃了..

生命周期差异,存储空间差异

WebSQL、IndexDB

全屏

 HTML5规范允许用户自定义网页上任一元素全屏显示。

 requestFullscreen() 开启全屏显示

 cancleFullscreen() 关闭全屏显示

不同浏览器需要添加前缀如:

 webkitRequestFullScreen、mozRequestFullScreen

 webkitCancleFullScreen、mozCancleFullScreen

 通过document.fullScreen检测当前是否处于全屏

 不同浏览器需要添加前缀

     document.webkitIsFullScreen、document.mozFullScreen

全屏伪类

:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}

var docElm = document.documentElement;

    if (docElm.requestFullscreen) {

       docElm.requestFullscreen();

    }

    else if (docElm.mozRequestFullScreen) {

       docElm.mozRequestFullScreen();

    }

    else if (docElm.webkitRequestFullScreen) {

       docElm.webkitRequestFullScreen();

    }

 

网络状态

我们可以通过window.onLine来检测,用户当前的网络状况,返回一个布尔值

(切换网络时触发)

   window.online用户网络连接时被调用

   window.offline用户网络断开时被调用

window.addEventListener("online",function(){

         alert("已经建立了网络连接")

    })

   window.addEventListener("offline",function(){

         alert("已经失去了网络连接")

   })

应用缓存

HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件。

优势

1、可配置需要缓存的资源

2、网络无连接应用仍可用

3、本地读取缓存资源,提升访问速度,增强用户体验

4、减少请求,缓解服务器负担

缓存清单

一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名,添加MIME类型

AddType text/cache-manifest .appcache

例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache",路径要保证正确。

manifest文件格式

1、顶行写CACHE MANIFEST

2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等

3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符

4、FALLBACK: 当前页面无法访问时退回的页面(回退;  后退)

 换行 当被缓存的文件找不到时的备用资源 可自行查阅资料

其它

1、CACHE: 可以省略,这种情况下将需要缓存的资源写在CACHE MANIFEST

2、可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制

 

CACHE:需要缓存那些资源.

NETWORK:不需要缓存那些资源,必须在网络下面才能访问.

FALLBACK:当访问不到某个资源时,自动由另外一个资源替换.

CACHE MANIFEST



   CACHE:

   #此部分是需要缓存的资源

   1.jpg

   js/jquery.min.js



   NETWORK:

   js/demo.js

    # 可以使用 * 好替代

    FALLBACK:

    one.css two.css    会缓存two.css 当找不到one.css 会去找two.css 文件.

3、#表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。

4、chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存

 

Font Awesome 字体框架

http://fontawesome.dashgame.com/

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果

CSS3

 

如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。

    1. CSS3的现状

1、浏览器支持程度差,需要添加私有前缀

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

-webkit-border-radius  radius 半径

 

    1. 如何对待

1、坚持渐进增强原则

2、考虑用户群体

3、遵照产品的方案

4、Boss

准备工作

统一环境

由于CSS3兼容性问题的普遍存在,为了避免因兼容性带来的干扰,我们约定统一的环境,以保证学习的效率,在最后会单独说明兼容性的问题。

1、Chrome浏览器 version 46+    2、Firefox浏览器 firefox 42+

如何使用手册

学会使用工具,可以让我们事半功倍。

[]       表示全部可选项  padding

||        表示或者   

|         表示多选一

?      表示0个或者1个

*        表示0个或者多个

{}      表示范围

学会查看手册,培养自主学习能力。

基础知识

选择器

CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

属性选择器

其特点是通过属性来选择元素,具体有以下5种形式:

  1. E[attr] 表示存在attr属性即可;
   div[class]

2、E[attr=val] 表示属性值完全等于val;

   div[class=mydemo]

3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置;

     div[class*=mydemo]

4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置;

      div[class^=mydemo]

5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置;

      div[class$=demos]

案例  配合jQuery 的过滤选择器

 

 

伪类选择器

除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。

1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。

重点理解通过E来确定元素的父元素。

E:first-child第一个子元素

E:last-child最后一个子元素

E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素;

  div>ul>li:nth-child(3){

           color: deeppink;
第三个元素

E:nth-last-child(n) 同E:nth-child(n) 相似,只是倒着计算;

div>ul>li:last-child(2){

         color: deeppink;

}

  n遵循线性变化,其取值01234... 但是当n<=0时,选取无效。

  选中所有的奇数的li

   li:nth-child(2n-1){

       color: red;

   }

  选中所有的7 的倍数的li 
li:nth-child(7n){

      color: red;

    }

   选中前面五个

   li:nth-child(-1n+5){

       color: red;

   }

   选中后面五个

   li:nth-last-child(-1n+5){
   color: red;

   }

   所有的偶数

   li:nth-child(even){

      color:red

   }

   所有的奇数

   li:nth-child(odd){

      color:blue;

   }

 

 

 

 

n可是多种形式:nth-child(2n)nth-child(2n+1)nth-child(-1n+5)等;

E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)

没有任何的子元素,包括空格.

案例:日历图.

2、目标伪类

E:target 结合锚点进行使用,处于当前锚点的元素会被选中;

      <li><a href="#title1">CSS (层叠样式表)</a></li>

      <h2 id="title1">CSS (层叠样式表)</h2>

       h2:target{

              color:red;

      }

    图片切换

伪元素选择器

重点:E::beforeE::after

是一个行内元素,需要转换成块元素

E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理

E:afterE:before后面的练习中会反复用到,目前只需要有个大致了解

E::first-letter文本的第一个字母或字(如中文、日文、韩文等)

案例:首字下沉

E::first-line 文本第一行;  文本第一行高亮..

E::selection 可改变选中文本的样式;

":" "::" 区别在于区分伪类和伪元素

  关于before和after

      CSS2中 E:before或者E:after,是属于伪类的,并且没有伪元素的概念

      CSS3中 提出伪元素的概念 E::before和E::after,并且归属到了伪元素当中,伪类里就不再存在E:before或者   E:after伪类;

颜色

一种新的颜色的表示方式

 rgba(255,0,0,0.1)

 RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间

新增了RGBA、HSLA模式,其中的A 表示透明度通道,即可以设置颜色值的透明度,相较opacity,它们不具有继承性,即不会影响子元素的透明度。

Red、Green、Blue、Alpha即RGBA

Hue、Saturation、Lightness、Alpha即HSLA

R、G、B 取值范围0~255

H 色调 取值范围0~360,0/360表示红色、120表示绿色、240表示蓝色

S 饱和度 取值范围0%~100%

L 亮度 取值范围0%~100%

A 透明度 取值范围0~1

关于透明度:

 

1、opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;

2 、transparent 不可调节透明度,始终完全透明

RGBAHSLA可应用于所有使用颜色的地方。

案例:
       1:  opacity 设置透明度,只能针对整个盒子设置透明度.
       2: 子盒子会继承父盒子的透明度.
       .out{
        width: 200px;
        height: 200px;
        background: green;
        border: 1px solid darkgreen;
        margin: 40px auto;
        opacity: 0.3;
       }

       子盒子也出现透明
           .out .inner{
              width: 100px;
              height: 100px;
              background-color: yellow;
           }

   2:background-color: transparent; 完全透明,不可调节透明度.

   3:使用rgba 来控制颜色,相对opacity ,不具有继承性.

 

文本 (shadow阴影)

text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)。

1、水平偏移量 正值向右 负值向左;

2、垂直偏移量 正值向下 负值向上;

3、模糊度是不能为负值;

代码演示:

/* 3px 水平偏移量. 正值向右  负值向左*/

    /* 5px 水垂直偏移量. 正值向下 负值向上*/

    /* 5px 模糊度   模糊度不能为负值 值越大越模糊*/

    /* #ccc 设置对象阴影的颜色.

     可以有多个影子.

   ul>li{

     margin: 20px;

     font-size: 24px;



   }



   ul>li:nth-child(1){

        text-shadow: 5px 5px 2px #ccc;

   }

   ul>li:nth-child(2){

         text-shadow: -5px  -5px 2px #ccc;

    }

   ul>li:nth-child(3){

     text-shadow: 5px 5px 2px #ccc, -5px  -5px 2px #ccc;

    }
案例1:浮雕文字.

  /*设置背景色.*/
      body {
         background-color: gray;
         font: bold 6em "microsoft yahei";
      }

              div {
                   margin: 30px;
                 color: #808080;
                 text-align: center;
              }
6
              /*设置水平向左1px 向上1 px   向右1px 向下1px */
              .to{
                      text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
              }
              .ao{
                          text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
              }

 

111盒模型

CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变

box-sizing 有两个值:content-box  border-box

可以分成两种情况:

      content-box:对象的实际宽度等于设置的width值和border、padding之和

     border-box: 对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )

     我们把这种方式叫做盒模型

 兼容性比较好

边框

其中边框圆角边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握

边框圆角

 border-radius    每个角可以设置两个值 ,x 值,y值

 1:  边框圆角处理

    2:  正方形
 
    3:椭圆

圆角处理时,脑中要形成圆、圆心、横轴、纵轴的概念,正圆是椭圆的一种特殊情况。如下图

 

可分别设置长、短半径,以“/”进行分隔,遵循“1234”规则,“/”前面的1~4个用来设置横轴半径(分别对应横轴1234位置 ),“/”后面1~4个参数用来设置纵轴半径(分别对应纵轴1234位置

 

边框阴影

box-shadow  与 text/shadow 用法差不多

1、水平偏移量 正值向右 负值向左;

2、垂直偏移量 正值向下 负值向上;

box-shadow: 5px 5px 27px red, -5px -5px 27px green;

 

3、模糊度是不能为负值;

4、inset可以设置内阴影;

 

设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。

可以设置多重边框阴影,实现更好的效果,增强立体感

边框图片

  border-image: url("images/border.png") 27/20px round

    border-image 设置边框的背景图片.

border-image-source:url(“”) 设置边框图片的地址.

//裁剪图片,如何去裁切图片,浏览器会自动去裁剪图片.

border-image-slice:27,27,27,27

//指定边框的宽度.

border-image-width:20px;

//边框平铺的样式  stretch 拉升 

round  会自动调整缩放比例

repeat(重复)

border-image-repeat: stretch;

 

设置的图片将会被“切割”成九宫格形式,然后进行设置。如下图

 

“切割”完成后生成虚拟的9块图形,然后按对应位置设置背景,

其中四个角位置、形状保持不变,中心位置水平垂直两个方向平铺。如下图

 

1、round和repeat之间的区别

round 会自动调整尺寸,完整显示边框图片。

 

repeat 单纯平铺多余部分,会被“裁切”而不能完整显示。

 

2、更改裁切尺寸

background-slice: 34 36 27 27 分别设置裁切如下图

 

 

关于边框图片重点理解9宫格的裁切及平铺方式,实际开发中应用不广泛,但是如能灵活动用会给我们带来不少便利。

 

 

1.1.4案例  用css 实现

 

代码实现:

 

 

 

渐变

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

可分为线性渐变、径向渐变

线性渐变 (gradient 变化)

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

 

上图是从黄色渐变到绿色

Background:linear-gradient(

To right 表示方向 (left,top,right,left ,也可以使用度数)

         Yellow,  渐变起始颜色

Green   渐变终止颜色

)

   background:linear-gradient(

          to right,

          red 0%, red 25% ,

          blue 25%,blue 50%,

          green 50%,green 75%,

          pink 75% ,pink 100%

      );  //起止颜色,终止颜色.
 
 background: linear-gradient(

        135deg,

        black 25%,

        transparent 25%,

        transparent 50%,

        black 50%,

        black 75%,

        transparent 75%

     );
background-size: 100px 100px;
animation: move 1s linear infinite;
@keyframes move {

     from {}

       to {

           background-position: 100px 0;

       }

     }
 
                    

 

1、必要的元素:

a、方向

b、起始颜色

c、终止色;

2、关于方向如下图

 

径向渐变 (radial 径向)

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

 

  background: radial-gradient(

           150px  at  center,

           yellow,

           green

      );  

围绕中心点做渐变,半径是150px,从黄颜色到绿颜色做渐变.

1、必要的元素:

a、辐射范围即圆半径  (半径越大,渐变效果越大)

b、中心点 即圆的中心  (中心点的位置是以盒子自身)

    background: radial-gradient(

            150px  at left center,

           yellow,

           green

        );

以左上角为圆的中心点

    background: radial-gradient(
           
150px  at 0px  0px,
            
yellow,
            
green
       
);

c、渐变起始色

d、渐变终止色

2、关于中心点:中心位置参照的是盒子的左上角

3、关于辐射范围:其半径可以不等,即可以是椭圆

 

div{

         width: 300px;

         height: 300px;

         margin:100px auto;

         background: radial-gradient(

             250px  at 0px 0px,

             yellow,

             green

         );

         border-radius: 150px;

    }

背景

背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

background-size:width,height 可以设置背景图片的宽度以及高度

  1. background-size设置背景图片的尺寸

     background-size:600px,auto;

       自动是适应盒子的宽度

         background-size: 100% auto;  当宽度发送改变时,高度会有内容溢出。
     常规用法,通过百分百,和像素来调整背景的尺寸.
     background-size: auto 100%;
 

 

cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。

整个背景图片完整显示在背景区域.

contain会自动调整缩放比例,保证图片始终完整显示在背景区域。

也可以使用长度单位或百分比

 

案例:全屏背景自动适应.

  1. background-origin(原点,起点)设置背景定位的原点

所谓的背景原点就是调整背景位置的一个参照点.

调整背景图片定位的参照原点.

 

border-box以边框做为参考原点;

padding-box以内边距做为参考原点;

content-box以内容区做为参考点;

3、background-clip设置背景区域clip(裁切) 

border-box裁切边框以内为背景区域;

padding-box裁切内边距以内为背景区域;

content-box裁切内容区做为背景区域;

4、以逗号分隔可以设置多背景,可用于自适应局

背景图片尺寸在实际开发中应用十分广泛

 

 

 

过渡(transition)

Transition:param1  param2

param1    要过渡的属性

param2    过渡的时间.

过渡是CSS3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。

补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态

帧动画:扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

 

关于补间动画更多学习可查看http://mux.alimama.com/posts/1009

特点:当前元素只要有“属性”发生变化时,可以平滑的进行过渡。

 

 

 

transition-property设置过渡属性

transition-duration设置过渡时间 用来控制速度linear(匀速)

ease-in (加速)

transition-timing-function设置过渡速度 

transition-delay设置过渡延时  超过时间后执行动画.

以上四属性重在理解

案例:气泡

 

 

 

案例2:手风琴效果

 

 

 

 2D转换

转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中,通过transform(变形) 来实现2d 或者3d 转换,其中2d 有,缩放,移动,旋转。

  1.  缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值;

 

 

 

  1. 移动 translate(x, y) 可以改变元素的位置,x、y可为负值;

x 在水平方向移动。

y 在垂直方向移动。

 

  1. 旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;

 

 

案例1,火箭移动

 

案例2 盾牌,将位置还原

 

案例3 旋转 原点

transform-origin:left top;

 

 

1、 3d变换

    rotateX(30deg) 绕着x旋转30deg

    rotateY(30deg) 绕着y旋转30deg

    rotateZ(30deg) 绕着z旋转30deg

    translateX(30px) 沿着x轴移动30px

    translatey(30px) 沿着y轴移动30px

    translatez(30px) 沿着Z轴移动30px( 必须给父盒子加透视)

 

 2、透视:

        加给变换元素的父盒子, 设置的是用户眼睛和屏幕的距离;

        只是视觉上的呈现,不是正真的3d

        perspective:1000px;

 

  3、transform-style:preserve-3d;

        加给变换元素的父盒子,让子盒子存在三维空间中,保持3d效果

       flat:默认值 (让子盒子被扁平化)

 

   4、 backface-visibility:hidden; 背面不可见

 

 

    skew(30deg,30deg);  2d变换 -倾斜

 

    css3中获取自定义属性的值:content:attr(data-text);

 

  5、动画:

      定义:

        @keyframes 动画名{

            0%{

 

            }

 

            100%{

 

            }

 

            或者

            from{}

            to{}

        }

 

        动画调用:

            animation: 动画名称 动画时间  执行次数  运动曲线 延迟执行 结束后状态 是否反向;

                inifnite: 无限次

                alternate: 反向执行

                forwards: 保持结束后的状态

                backwards: 保持动起开始前的状态

                steps(5): 让动画分步执行;

 

                动画详细属性:

                    animation-name:动画名称

                    animation-duration:持续时间

                    animation-iteration-count:执行次数

                    animation-timing-function:运动曲线

                    animation-fill-mode:结束状态

                    animation-direction: 动画方向

                    animation-delay: 延迟时间

 

 

                多列:(了解)

                    -webkit-column-count:列数

                    -webkit-column-rule:分割线样式

                    -webkit-column-width:列宽

                    -webkit-column-gap:列间距

                    -webkit-column-span:跨列 all 跨所有列

 

伸缩布局

CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。

如下图,学习新的概念:

主轴:cl

 

1、必要元素:

a、指定一个盒子为伸缩盒子 display: flex

b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction

c、明确主侧轴及方向

d、可互换主侧轴,也可改变方向

2、各属性详解

a、flex-direction调整主轴方向(默认为水平方向)

该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置

row 水平方向

reverse-row 反转

column 垂直方向

reverse-column 反转列

b、justify-content设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

flex-start、 起点对齐

flex-end、  终点对齐

center    中间对齐

space-around、 环绕

space-between  两端对齐

c、flex控制子项目的缩放比例

不指定flex 属性,则不参与分配

d、align-items设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

flex-start、 起点对齐

flex-end、  终点对齐

center    中间对齐

Strethc:  拉伸;

 

此知识点重在理解,要明确找出主轴、方向,各属性对应的属性值可参考示例源码

应用场景1:

 

应用场景2:

   

 

应用场景3-携程旅行

 

 

Web字体

开发人员可以为自已的网页指定特殊的字体,无需考虑用户电脑上是否安装了此特殊字体,从此把特殊字体处理成图片的时代便成为了过去。

支持程度比较好,甚至IE低版本浏览器也能支持。

字体格式

不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。

1、TureTpe(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;

2、OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;

3、Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;

4、Embedded Open Type(.eot)格式

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+;

5、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;

了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体生成工具帮我们生成各种格式的字体,因此无需过于在意字体格式间的区别差异。

下载字体的网站.

推荐http://www.zhaozi.cn/http://www.youziku.com/ 查找更多中文字体

 

字体图标

其实我们可以把文字理解成是一种特殊形状的图片,反之我们是不是也可以把图片制作成字体呢?

答案是肯定的。

常见的是把网页常用的一些小的图标,借助工具帮我们生成一个字体包,然后就可以像使用文字一样使用图标了。

优点:

1、将所有图标打包成字体库,减少请求;

2、具有矢量性,可保证清晰度;

3、使用灵活,便于维护;

Font Awesome 使用介绍

http://fontawesome.dashgame.com/

定制自已的字体图标库

http://iconfont.cn/

https://icomoon.io/

SVG素材

http://www.iconsvg.com/

兼容性

通过http://caniuse.com/ 可查询CSS3各特性的支持程度,一般兼容性处理的常见方法是为属性添加私有前缀,如不能解决,应避免使用,无需刻意去处理CSS3的兼容性问题。

我们需要知道每个属性,能被那个版本的浏览器支持.

高级应用

 360 案例:

  监听滚轮

    var i=0;
        document.onmousewheel=function(){
           console.log(i++);
        }

    //需要处理兼容 (我们是靠监听滚轮的时间来处理)

    //我们需要使用到插件.  (滚屏插件) 基于jQuery 的一个插件.

   

   jQuery fullPage   全屏滚动插件

   中文网址:http://www.dowebok.com

 

   相关说明:http://www.dowebok.com/77.html

 

 对应的颜色

          sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],

loopTop:true , 滚到顶部 回到最后一屏;

js代码

$(function(){
    $('#dowebok').fullpage({
        sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
        loopTop:true,
        afterLoad:function( anchorLink ,index){
            console.log(index);

            $('.section').removeClass('current');
            setTimeout(function(){
                $('.section').eq(index-1).addClass('current');
            },100);
        }
    });
});

 

 

ajax

HTTP服务搭建

AMP

AMP:A:Apache,M:MySQL,P:PHP

  • Apache 世界排名第一的服务器软件,特点是简单,速度快,性能稳定
  • MySQL 得益于他体积小、速度快、使用成本低,而且是开源,所以很多网站都选用MySql作为他们的数据库.
  • PHP 展开后PHP: Hypertext Preprocessor,中文名:超文本预处理器,直接将代码嵌入HTML 文档中执行,简单易学,容易上手.

AMP集成环境

AMP是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多AMP集成环境帮助我们简化安装

  • WAMP: windows平台下如果想要一步到位安装好这些软件,可以使用wamp,其中w的意思为windows指的是windows操作系统
  • XAMPP: 不同于wamp针对于windows,XAMPP可以安装在Linux,Windows,MAC OS X,Solaris这些操作系统上面

WAMP安装

  1. 双击提供的安装包
  2. 点击Next
  3. 选择安装路径,注意:不要使用中文路径.建议使用跟图片一致的路径
  4. 如果担心安装完成后找不到wamp可以将两个方框全部勾选,点击next继续安装
  5. 点击install开始安装
  6. 安装完毕以后点击finish即可启动wamp
  7. 启动完成能够在任务栏的右下角看到这个图标即表示安装成功

测试访问

打开浏览器输入127.0.0.1查看显示的内容,如果是第一次安装,默认显示的应该是如下图片

  • 127.0.0.1含义: 127.0.0.1是回送地址,指本地机,一般用来测试使用,如果想要让其他电脑也能够访问,需要进行一些配置,详见下文.

 

WAMP图标橙色解决方案

如果没有使用过自己的电脑配置服务器那么WAMP默认应该为绿色的图标,那么如果WAMP启动,显示的是橙色图标怎么办呢?

1.检查是否开启了服务:保证Apache,MySQL的服务都是启动状态即可

2.检查是否开启了微软自带的IIS服务:保证Internet Information Services没有被勾选即可

1打开,控制面板-管理工具-服务中,将IIS Admin Service服务 停止就行了

2开始----运行----cmd-----输入 net stop iisadmin

3.修改端口号:httpd.conf中搜索 listen,大概在46行的位置

    Listen 80
    改为 listen 8080
    注这里可以改为任意的端口,修改完毕之后, 保存并重启wamp
    访问时在ip地址之后添加:8080 端口号即可
     192.168.18.125:8080

4.终极解决:卸载-删除文件夹(wamp安装的文件夹)-重装

配置局域网访问

安装好了WAMP之后就能够通过自己的浏览器输入127.0.0.1,如果想要让同一局域网中的其他电脑也能够访问,需要进行如下配置

  • 关闭防火墙
  • 修改httpd.conf文件 因为Apache的配置默认不允许外部访问,我们需要修改配置 找到D:\wamp\bin\apache\Apache2.2.21\conf文件 使用文本编辑工具打开,通过搜索功能找到onlineoffline tag - don't remove这句话 ``` 将在234行附近的 Allow from 127.0.0.1 替换为 Allow from all

保存,然后重启wamp的所有服务即可

  • 获取本机IP地址:
    • 方法1:
      • 打开控制面板->网络和Internet->网络和共享中心->更改适配器设置
      • 找到正在连接的网络,双击 
    • 方法2:
      • 打开命令行工具
      • 输入ipconfig 
  • 局域网内访问: 使用一台相同局域网内的拥有浏览器的设备即可通过刚刚获取的IP地址进行访问
  • 常见的通局域网计算机:

局域网的概念这里不做拓展,为了方便测试当满足下列情况可以尝试访问

    • 连接同一个wifi的计算机(手机也可以测试)
    • 连接同一个交换机的计算机
      • 同教室的电脑
      • 同公司的电脑

配置网站根目录

(: 这里使用的路径为上述安装时的路径,如果没有安装在D,那么需要找到对应的路径)

  • 找到WAMP的安装目录:D:\wamp
  • 找到Apache的配置文件 D:\wamp\bin\apache\Apache2.2.21\conf
  • 修改http.conf文件 使用文本编辑工具打开httpd.conf文件,搜索documentRoot 如果是初次安装,应该分别在178,205 修改完毕以后记得保存ctrl+s
  • 重启WAMP服务 左键点击wamp图标,选择重新启动所有服务 
  • 建立文件夹,尝试访问 为了保证访问时确实有内容,E:盘下建立www文件夹,并且在改文件夹下放入文件,再次尝试通过127.0.0.1进行访问 

PHP基础

PHP简介

PHP在众多的编程语言中,是比较容易上手,结合我们搭建的WAMP环境就能够开始学习了

  • PHP代码执行方式: 服务端web编程写好的代码,需要通过浏览器访问服务器,服务器端执行,然后返回给用户结果,如果直接使用浏览器打开,就会解析为文本

PHP常见语法

文件定义,注释: PHP文件以.php结尾,代码的编写位置在<?php 写在这里?>.注释的写法跟js一致

<?php
  //这是单行注释
  /*
      这是多行注释
  */
?>
  • PHP变量规则:
    • 变量以$符号开头,其后是变量的名称
    • 变量名称必须以字母或下划线开头
    • 变量名称不能以数字开头
    • 变量名称只能包含字母数字字符和下划线(A-z0-9 以及_
    • 变量名称对大小写敏感
// 变量以`$`符号开头,其后是变量的名称
// 变量名称必须以字母或下划线开头
$a;
$b;
$a1;
$_abc;
 
// 变量名称不能以数字开头
// 变量名称只能包含字母数字字符和下划线(`A-z``0-9` 以及` _`
// 下面这些是错误的变量定义
$1;
$哈哈;
$^&*;
 
//变量名称对大小写敏感(`$y` `$Y` 是两个不同的变量)
// 下面定义的两个变量是不同的,大写,小写x
$x;
$X;
  • 数据类型 PHP支持的数据类型包括:字符串,整数,浮点数,布尔,数组,对象,NULL(:由于对象中可以使用函数,故对象的语法在下文中会提及)
    • 定义字符串时需要注意:
      • 单引号:`` 内部的内容只是作为字符串
      • 双引号:"" 如果内部是PHP的变量,那么会将该变量的值解析
    • 字符串连接:不同于JavaScript,PHP中使用.进行连接
// 字符串
$str = '123';
 
// 字符串连接
$str2 = '123'.'哈哈哈';
 
// 字符串
 
// 整数
$numA = 1; //正数
$numB = -2;//负数
 
// 浮点数
$x = 1.1;
 
// 布尔
$a = true;
$b = false;
 
// 数组
$arr = array('123',123)
  • 运算符 PHP中的运算符跟JavaScript中的基本一致,用法也基本一致
    • 算数运算符+,-,/,*,%
    • 赋值运算符x = y,x += y,x -= y :这里列举的并不完全
<?php 
$x=10; 
$y=6;
echo ($x + $y); // 输出 16
echo ($x - $y); // 输出 4
echo ($x * $y); // 输出 60
echo ($x / $y); // 输出 1.6666666666667
echo ($x % $y); // 输出 4
?>
  • 函数: PHP虽然系统内建了一些函数,但是这不影响我们定义自己的. 函数的作用就是在代码中可以重复使用的语法块,页面加载的时候不会执行,只有在被调用的时候才会执行
// 基础语法
function functionName() {
  这里写代码
}
 
// 无参数 无返回值的函数
function sayhi(){
    echo "Hello World";
}
 
// 有参数 无返回值的函数
function sayName($name){
    echo $name.'你好哦';
}
// 调用
sayName('小狐狸');
 
// 有参数,参数有默认值的函数
function sayFood($food='西兰花'){
    echo $food.'好好吃';
}
// 调用
sayFood('西葫芦');// 如果传入参数,就使用传入的参数
sayFood();// 如果不传入参数,直接使用默认值
 
// 有参数,有返回值的函数
function sum($a,$b){
    return $a+$b
}
sum(1,2);// 返回值为1+2 = 3
  • 对象: PHP中允许使用对象这种,自定义数据类型. 使用时必须先声明,实例化之后才能够使用
// 定义最基础的类
class Fox{
 
        public $name = 'buka';
        public $age = 10;
}