常用属性............................................................................................ 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
超链接优化写法
另存为 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
优先级 默认样式<标签选择器<类选择器 链接伪类.................................................................................. 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;/*让控件在右侧*/ text-align: center;/*文本内容居中*/ /*隐藏*/ box.onmouseover = fun1;/*鼠标悬停,即鼠标停留在图片等上方*/ 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;/*清除鼠标点击输入框时出现的蓝色边框*/ border: 2px solid #e4e4e4;/*设置外边框* dotted 点线,dashed 虚线,solid 实线/ z-index: 100;/*设置层次,值越大层次越高*/ font-weight: bold;/*设置字体加粗*/ border-radius: 4px;/*设置圆角*/ /*获取窗口内部的宽高*/ 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”禁止被选中 Ctrl+c 复制 Ctrl+v 粘贴 Ctrl+x 剪切 Ctrl+a 全选 Ctrl+s 保存文件 Ctrl+z 撤销一步 Windows+d 显示桌面 Windows+e 资源管理器 Windows+r 打开运行窗口 Alt+tab 切换软件窗口 Ctrl+tab 切换页签 F2 重命名 F5 刷新 养成一种习惯。 W3c组织(万维网联盟) Html 结构标准 相当于 结构,骨骼,组成 Css 表现标准 相当于给人化妆 Js 行为标准 想当于 行为,功能,动作 灵动 ◆浏览器是一个上网的客户端(软件)。 渲染引擎 IIS web服务器 提供网页浏览服务 超文本标记语言。 超文本 标记 < html > 语言 < ! DOCTYPE html> 声明文档类型 根标签 头标签
主体标签
Html 与htm是一样的。 后缀名能否决定文件格式? 不能,只能决定 打开方式 包含(嵌套关系): 常用属性
margin: 0 auto;/*使内部的div居中*/
text-decoration: none;/*去掉a标签的下划线*/
.hide{
display: none;
}
/*显示*/
.show{
display: block;
}
box.onmouseout = fun2;/*鼠标移出,即鼠标离开图片等所在的区域*/
<input type="text" οnblur="fn(this)" οnfοcus="fn2(this)">
var w = window.innerWidth;
var y = window.innerHeight;
Html基础
常用快捷键
认识大前端
前端工作就是 : 将设计图通过 Html,CSS,JS等技术生成网页
应用于 : 移动端 PC端
用户体验 : UI设计
学习态度
认识网页
网页由文字,图片,按钮,超链接等组成。
Web标准
浏览器
浏览器内核
浏览器和服务器的那点事
Url地址
认识html
Html 全称 : HyperText Markup Language
Html结构标准(html 5 才开始的)
Html标签关系分类
并列关系 :
单标签
双标签
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+/
◆ 换行标签
◆ 水平线标签
文本内容
特点:上下自动生成空白行。
换行不会生成空白行。
标题标签
h1-h6 取值到h6
文本内容
文本格式化标签
文本加粗标签 工作里尽量使用strong
文本倾斜标签
工作里尽量使用em
删除线标签
工作里尽量使用del
下划线标签
工作里尽量ins
◆注意:之所以工作里使用
是因为更有语义化。
Src 图片的来源 必写属性
Alt 替换文本 图片不显示的时候显示的文字
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
◆图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。
相对于文件自身出发,就是相对路径。
◆文件和图片(html文档)在同一个目录(文件夹) ,直接写文件名。
◆图片(html文档)在文件在下一级目录里。文件夹名称+/+图片(html)名称
◆图片(html)在文件的上一级目录里,..+/+图片(html)名称
◆图片在文件的上一级的其他目录里,../文件夹名称/图片名称
★总结:找到下一级目录(文件夹)的图片(文件)用 /
跳出当前目录使用../
href 去往的路径(跳转的页面) 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开(关闭自身页面,打开链接页面)
target=”_blank” 打开新页面 (自身页面不关闭,打开一个新的链接页面)
列表项
type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈
列表项
◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。
小标题
解释标题
解释标题
注意:此标签是h5 特有的,老版本不支持
hidden属性表示是否隐藏播放界面
scrolldelay="10" 设置移动速度,数值越小越快 ,默认 90
scrollamount="5" 设置移动距离数值越大移动距离越大
Ascll
Ansi 扩展的ASCII编码
Unicode 日文/韩文
Gbk 中文
Gb2312 中文
Big5 繁体
Utf-8 通用字符集
展示数据。 是对网页重构的一个有益补充。
表格
行
列
◆属性:
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" 边框颜色
◆ 表头
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
◆表格标题
标题的文字自动加粗水平居中对齐
◆边框颜色
◆内容垂直对齐方式
Valign=”top | middle | bottom”
表单的组成
◆提示信息
◆表单控件
◆表单域
属性:action:处理信息
Method=”get | post”
Get通过地址栏提供(传输)信息,安全性差。
Post 通过1.php来处理信息,安全性高。
◆文本输入框
maxlength="6" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态(不能编辑)
disabled="disabled" 输入框未激活状态
name="username" 输入框的名称
value="大前端" 将输入框的内容传给处理文件
◆密码输入框
★注意:文本输入框的所有属性对密码输入框都有效。
◆单选框
★只有将name的值设置相同的时候,才能实现单选效果。
★checked=”checked” 设置默认选择项。
◆下拉列表
属性:
Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目
对下拉列表进行分组。
Label=”” 分组名称。
◆多选框
Checked=”checked” 设置默认选中项
◆多行文本框
Cols 控制输入字符的长度。
Rows 控制输入的行数
◆ 文件上传控件
◆文件提交按钮
★:可以实现信息提交功能
◆普通按钮
★不能提交信息,配合JS使用。
◆图片按钮
★图片按钮可实现信息提交功能
☆提交按钮与图片按钮的区别:唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。
◆重置按钮
★将信息重置到默认状态
◆表单信息分组
对表单信息分组
表单信息分组名称
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 指层叠样式表 (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里,
◆行内样式表
◆三种写法特点:
★内嵌式写法,样式只作用于当前文件,没有真正实现结构表现分离。
★外链式写法,作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离。推荐使用
★行内样式表,作用范围仅限于当前标签,范围小,结构表现混在一起。 (不推荐使用)
典型代表,div,h1-h6,p,ul,li
特点: ★独占一行
★可以设置宽高
★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致。
典型代表 span ,a, ,strong , em, del, ins
特点:★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高。
典型代表 input img
特点:★在一行上显示
★可以设置宽高
◆块元素转行内元素
display:inline;
◆行内元素转块元素
display:block;
◆块和行内元素转行内块元素
display:inline-block;
当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码。和标签调用选择器的顺序没有关系。
继承性发生的前提是包含(嵌套关系)
★文字颜色可以继承
★文字大小可以继承
★字体可以继续
★字体粗细可以继承
★文字风格可以继承
★行高可以继承
总结:文字的所有属性都可以继承。
◆特殊情况:
h系列不能继承文字大小。
a标签不能继承文字颜色。
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
★方位值只写一个的时候,另外一个值默认居中。
★写2个方位值的时候,顺序没有要求。
★写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向。
★:连写的时候没有顺序要求,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和%的行高是和父元素文字大小相乘。行高以像素为单位,就是定义的行高值。
◆推荐行高使用像素为单位。
-1. IE无法调整那些使用px作为单位的字体大小;
-2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
-3. Firefox能够调整px和em,rem,但是有大部分的国产浏览器使用IE内核。
-1. em的值并不是固定的;
-2. em会继承父级元素的字体大小。
em是以字为单位,1em是占一个字符的宽度,大小随着字符的字号而变化。
px是像素,是对所有浏览器都显示为一样大小的。
border-top-style: solid 实线
dotted 点线
dashed 虚线
border-top-color 边框颜色
border-top-width 边框粗细
◆边框属性的连写
特点:没有顺序要求,线型为必写项。
◆四个边框值相同的写法
特点:没有顺序要求,线型为必写项。
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
◆内边距撑大盒子的问题
内边距影响盒子的宽度
边框影响盒子的宽度
盒子的宽度=定义的宽度+边框宽度+左右内边距
◆继承的盒子一般不会被撑大
包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。
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 格式化上下文 感兴趣了解
元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行。
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; }
定位方向: 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;
overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。
display:none; 隐藏元素 隐藏之后不占据原来的位置。
Display:block; 元素可见
Display:none 和display:block 常配合js使用。
◆使用text-indent:-5000em;
◆将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow:hidden;将文字隐藏。
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
!+ tab,可以生成html5的结构代码。
标签名.类名#id名+tab
没有标签名.类名+tab ==>div
标签名+标签名+标签名 “+”tab
标签名>子标签名>子标签名>子标签名+tab
标签名>子标签名>子标签名>子标签名^^子标签名+tab
ul>li.abc$*3 + tab
ul>li>a{item}*5
width:30px==>w30+tab
Height:30px==>h30+tab
Margin:30px==>mg30+tab
Padding:30px==> pd30+tab
Line-height:12px==>lh12px+tab
Background==>bg+tab
后代:>
缩写:nav>ul>li
兄弟:+
缩写:div+p+bq
上级:^
缩写:div+div>p>span+em^bq
缩写:div+div>p>span+em^^bq
分组:()
缩写:div>(header>ul>li*2>a)+footer>p
缩写:(div>dl>(dt+dd)*3)+footer>p
乘法:*
缩写:ul>li*5
自增符号:$
缩写:ul>li.item$*5
缩写:h$[title=item$]{Header $}*3
Header 1
Header 2
Header 3
缩写:ul>li.item$$$*5
缩写:ul>li.item$@-*5
缩写:ul>li.item$@3*5
ID和类属性
缩写:#header
缩写:.title
缩写:form#search.wide
缩写:p.class1.class2.class3
自定义属性
缩写:p[title="Hello world"]
缩写:td[rowspan=2 colspan=3 title]
缩写:[a='value1' b="value2"]
文本:{}
缩写:a{Click me}
Click me
缩写:p>{Click }+a{here}+{ to continue}
Click here to continue
隐式标签
缩写:.class
缩写:em>.class
缩写:ul>.class
缩写:table>.row>.col
所有未知的缩写都会转换成标签,例如,foo →
缩写:!
Document
缩写:a
缩写:a:link
缩写:a:mail
缩写:abbr
缩写:acronym
缩写:base
缩写:basefont
缩写:br
缩写:frame
缩写:hr
缩写:bdo
缩写:bdo:r
缩写:bdo:l
缩写:col
缩写:link
缩写:link:css
缩写:link:print
缩写:link:favicon
缩写:link:touch
缩写:link:rss
缩写:link:atom
缩写:meta
缩写:meta:utf
缩写:meta:win
缩写:meta:vp
缩写:meta:compat
缩写:style
缩写:script
缩写:script:src
缩写:img
缩写:iframe
缩写:embed
缩写:object
缩写:param
缩写:map
缩写:area
缩写:area:d
缩写:area:c
缩写:area:r
缩写:area:p
缩写:form
缩写:form:get
缩写:form:post
缩写:label
缩写:input
缩写:inp
缩写:input:hidden
别名:input[type=hidden name]
缩写:input:h
别名:input:hidden
缩写:input:text, input:t
别名:inp
缩写:input:search
别名:inp[type=search]
缩写:input:email
别名:inp[type=email]
缩写:input:url
别名:inp[type=url]
缩写:input:password
别名:inp[type=password]
缩写:input:p
别名:input:password
缩写:input:datetime
别名:inp[type=datetime]
缩写:input:date
别名:inp[type=date]
缩写:input:datetime-local
别名:inp[type=datetime-local]
缩写:input:month
别名:inp[type=month]
缩写:input:week
别名:inp[type=week]
缩写:input:time
别名:inp[type=time]
缩写:input:number
别名:inp[type=number]
缩写:input:color
别名:inp[type=color]
缩写:input:checkbox
别名:inp[type=checkbox]
缩写:input:c
别名:input:checkbox
缩写:input:radio
别名:inp[type=radio]
缩写:input:r
别名:input:radio
缩写:input:range
别名:inp[type=range]
缩写:input:file
别名:inp[type=file]
缩写:input:f
别名:input:file
缩写:input:submit
缩写:input:s
别名:input:submit
缩写:input:image
缩写:input:i
别名:input:image
缩写:input:button
缩写:input:b
别名:input:button
缩写:isindex
缩写:input:reset
别名:input:button[type=reset]
缩写:select
缩写:option
缩写:textarea
缩写:menu:context
别名:menu[type=context]>
缩写:menu:c
别名:menu:context
缩写:menu:toolbar
别名:menu[type=toolbar]>
缩写:menu:t
别名:menu:toolbar
缩写:video
缩写:audio
缩写:html:xml
缩写:keygen
缩写:command
缩写:bq
别名:blockquote
缩写:acr
别名:acronym
缩写:fig
别名:figure
缩写:figc
别名:figcaption
缩写:ifr
别名:iframe
缩写:emb
别名:embed
缩写:obj
别名:object
缩写:src
别名:source
缩写:cap
别名:caption
缩写:colg
别名:colgroup
缩写:fst, fset
别名:fieldset
缩写:btn
别名:button
缩写:btn:b
别名:button[type=button]
缩写:btn:r
别名:button[type=reset]
缩写:btn:s
别名:button[type=submit]
异常最大的特征,就是一旦代码出现异常,后面的代码就不会再执行
捕获异常,使用try-catch
语句
try{
//这里写可能出现异常的代码
}
catch(e){
//这里的e就是捕获的异常对象
//可以在这里写,出现异常后的处理代码
}
异常捕获语句执行的过程为:
通过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中很少会用到
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"}
设置页面中的div
和p
的边框为1px solid red
// 任务需求:
// 1> 获取div标签
vardivs =
document.getElementsByTagName(
'div');
// 2> 遍历获取到的div标签
for(
vari =
0; i < divs.length; i++) {
//3> 获取到每一个div元素,设置div的样式
divs[i].style.border =
"1px dotted black";
}
// 4> 获取p标签
varps =
document.getElementsByTagName(
"p");
// 5> 遍历获取到的p标签
for(
varj =
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
(
vari =
0; i < arr.length; i++) {
// 获取到每一个div元素
arr[i].style.border =
"1px solid #abc";
}
}
vardvs = tag(
"div");
varps = 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
(
vari =
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;
}
//断点调试,进行类型查看
varp1 =
newPerson();
varp2 =
newObject
();
varp3 =
newDate
();
varp4 =
newRegExp
();
var p5 = {};
在JavaScript中,构造函数是给对象添加属性,初始化属性用的。
varp =
newPerson();
以上面这个p对象创建为例:
{}
,这个时候创建出来的对象是一个"没有任何成员"的对象。这里需要注意两点:
new
关键字创建的对象,对象的类型就是创建这个对象使用的构造函数的函数名{}
创建对象,对象的类型一定是Object
,相当于使用了new Object()
this =
刚创建出来的对象
this
就代表刚创建出来的对象JavaScript面向对象的特性
对象是将数据与功能组合到一起, 即封装
所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西
子类可以使用从父类继承的属性和方法。
class Person {
s
tring name;
int age;
}
class Student : Person {
}
var stu = new Student();
stu.name
即:让某个类型的对象获得另一个类型的对象的属性的方法
在JavaScript中,继承就是当前对象可以使用其他对象的方法和属性。
js继承实现举例:混入(mix)
function mix ( o1, o2 ) {
for
(
vark
ino2 ) {
o1[ k ] = o2[ k ];
}
}
把不同的子类对象都当作父类来看,可以屏蔽不同子类对象之间的差异,写出通用的代码,做出通用的编程,以适应需求的不断变化。
动物
animal = new
子类
(); //
子类:麻雀、狗、猫、猪、狐狸
...
动物
animal = new
狗
();
animal.
叫
();
现有构造函数如下:
function Person(name, age){
this
.name = name;
this
.age = age;
this
.sayHi =
function(){
console
.log(
"你好");
}
}
调用该构造函数创建对象,并对比创建出来的对象的sayHi
方法:
varp =
newPerson(
"张三",
18);
varp1 =
newPerson(
"李四",
19);
console.log(p.sayHi == p1.sayHi);
//输出结果为false
由于每个对象都是由new Person
创建出来的,因此每创建一个对象,函数sayHi都会被重新创建一次,这个时候,每个对象都拥有一个独立的,但是功能完全相同的方法。
功能相同的函数,完全没有必要再内存中存在这么多份。所以就造成了资源浪费。
这里最好的办法就是将函数体放在构造函数之外. 在构造函数中只需要引用该函数即可。
function sayHello(){
console
.log(
"你好");
}
function Person(name, age){
this
.name = name;
this
.age = age;
this
.sayHi = sayHello;
}
//调用该构造函数创建对象,并对比创建出来的对象的sayHi方法
varp =
newPerson(
"张三",
18);
varp1 =
newPerson(
"李四",
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
这样写依然存在问题:
function Person(name, age){
this
.name = name;
this
.age = age;
this
.sayHi =
function(){
console
.log(
"Hello!");
};
}
varp =
newPerson(
"张三",
18);
p.sayHi();
//当前对象内有这个方法,所以不会去神秘对象内进行查找
varp1 =
newPerson(
"李四",
19);
p1.sayHello();
//当前对象没没有找到这个方法,所以去神秘对象内进行查找
问题来了,如何访问到这个神秘对象呢?
//可以通过 构造函数.prototype 访问这个神秘对象
console.log(Person.prototype);
当尝试给这个对象新增一个方法之后:
Person.prototype.sayHello =
function(){
console
.log(
"我是神秘对象中的方法");
};
使用p
,p1
都可以访问这个方法:
p.sayHello();
p1.sayHello();
总结:
所有对象共享神秘对象(构造函数.prototype)内的属性和方法。
既然所有对象共享神秘对象(构造函数.prototype)内的属性和方法。我们只需要将需要共享的东西,也就是重复占用内存的东西,全部都放到 神秘对象(构造函数.prototype)中,那么所有对象就都可以使用,并且内存里面也只有一份了。
改造构造函数
function Person(name, age){
this
.name = name;
this
.age = age;
}
Person.prototype.sayHi =
function(){
console
.log(
"你好");
};
//测试
varp =
newPerson(
"张三",
18);
varp1 =
newPerson(
"李四",
19);
console.log(p.sayHi == p1.sayHi);
//输出true
3.1. 将属性写在神秘对象(构造函数.prototype)内
function Car(name){
this
.name = name;
}
function Person() {}
Person.prototype.name =
'张三';
//基本类型的属性影响不大
Person.prototype.car =
newCar(
"法拉利");
//引用类型的属性,会被所有的对象共享
varp =
newPerson();
3.2. 赋值的错误
function Person() {}
Person.prototype.name =
'张三';
varp1 =
newPerson();
varp2 =
newPerson();
p1.name =
'李四';
console.log( p1.name );
console.log( p2.name );
// 如果是访问数据, 当前对象中如果没有该数据就到构造函数的原型属性中去找
// 如果是写数据, 当对象中有该数据的时候, 就是修改值; 如果对象没有该数据, 那么就添加值
function Person () { }
Person.prototype.func =
function (){
console
.log(
'something');
};
varp =
newPerson();
p.func();
function Person () { };
Person.prototype = {
func:
function (){
console
.log(
'22222');
}
};
varp =
newPerson();
p.func();
function Person () { }
Person.prototype.func =
function (){
console
.log(
'something');
};
varp =
newPerson();
Person.prototype.func =
function (){
console
.log(
'something');
};
varp1 =
newPerson();
p.func();
p1.func();
替换原型之后,在替换前创建出来的对象和替换后创建出来的对象的原型对象不一致
__proto__
属性Name
和name
是两个不同的变量_
,美元符$
或者字母开头,但是不能是数字_
,美元符$
,字母,数字组成prototype
属性之前我们访问神秘对象的时候,使用的是原型属性
prototype
function Person(){}
//通过构造函数的原型属性prototype可以直接访问原型
Person.prototype;
在之前是无法通过构造函数创建出来的对象访问原型的
function Person(){}
varp =
newPerson();
//以前不能直接通过p来访问神秘对象
__proto__
属性__proto__
属性最早是火狐浏览器引入的,用以通过实例对象来访问原型,这个属性在早期是非标准的属性
有了__proto__
属性,就可以通过构造函数创建出来的对象直接访问神秘对象
function Person(){}
varp =
newPerson();
//实例对象的__proto__属性可以方便的访问到原型对象
p.__proto__;
//既然使用构造函数的`prototype`和实例对象的`__proto__`属性
//都可以访问原型对象
//就有如下结论
p.__proto__ === Person.prototype;
__proto__
属性的用途__proto__
属性去修改原型的成员,tips:
早期如何通过实例对象访问原型?
可以使用实例对象访问构造函数属性constuctor
varp =
newPerson();
p.constructor.prototype;
4.给实例继承自原型的属性赋值需要注意的问题
function Person(){};
Person.prototype.name =
"周华健";
varo1 =
newPerson();
varo2 =
newPerson();
o1.name =
"李宗盛";
//这里修改的不是原型对象的name属性,而是给o1自己新增了一个name属性,进行了赋值
//我们可以对比一下o1和o2的name值
console.log(o1.name , o2.name);
通过继承来让dog
对象可以使用animal
对象的属性和方法,那怎么实现继承呢?
直接遍历父对象的属性,将所有的属性加到当前对象上
var animal = {
name:
"Animal",
sex:
"male",
age:
5,
bark:
function(){
console
.log(
"Animal bark");
}
};
var dog = {};
for(
vark
inanimal){
dog[k]= animal[k];
}
每一个构造函数都有prototype
原型属性,通过构造函数创建出来的对象都继承自该原型属性。所以可以通过更改构造函数的原型属性来实现继承。
function Dog(){
this
.type =
"yellow Dog";
}
function extend(obj1, obj2){
for
(
vark
inobj2){
obj1[k] = obj2[k];
}
};
//使用混入的方式,将属性和方法添加到构造函数的原型属性上,构造函数所创建出来的实例就都有了这些属性和方法。
extend(Dog.prototype, {
name:
"",
age:
"",
sex:
"",
bark:
function(){}
})
//使用面向对象的思想把extend方法重新封装
//extend是扩展的意思,谁要扩展就主动调用extend这个方法
//所以extend应该是对象的方法,那现在我们要扩展的是构造函数的原型对象
//所以给构造函数的原型对象添加一个extend方法
//如下:
Dog.prototype.extend =
function(obj){
for
(
vark
inobj){
this
[k]=obj[k];
}
}
//调用方式就变成了下面这种形式
Dog.prototype.extend({
name:
"",
age:
"",
sex:
"",
bark:
function(){}
});
访问一个对象的成员的时候,首先是在实例中找,没有找到, 就去原型中找, 但是原型中没有怎么办?
每一个对象都有原型属性,那么对象的原型属性也会有原型属性,所以这样就形成了一个链式结构,我们称之为原型链。
所谓的属性搜索原则,也就是属性的查找顺序,在访问对象的成员的时候,会遵循如下的原则:
Object.prototype
还没有, 那么是属性就返回 undefied
,是方法,就报错xxx is not a function
。凡是对象就有原型, 原型又是对象, 因此凡是给定义一个对象, 那么就可以找到他的原型, 原型还有原型. 那么如此下去, 就构成一个对象的序列. 称该结构为原型链.
使用构造函数创建出对象, 并且没有利用赋值的方式修改原型, 就说该对象保留默认的原型链.
默认原型链结构是什么样子呢?
function Person() {
}
varp =
newPerson();
// p 具有默认的原型链
默认的原型链结构就是:
当前对象 -> 构造函数.prototype -> Object.prototype -> null
在实现继承的时候, 有时会利用替换原型链结构的方式实现原型继承, 那么原型链结构就会发生改变
function ToolsCollection () {
}
ToolsCollection.prototype = [];
vararr =
newToolsCollection();
// arr -> [] -> Array.prototype -> Object.prototype -> null
// var arr = new Array();
观察:DOM对象的原型链
原型式继承就是利用修改原型链的结构( 增加一个节点, 删除一个节点, 修改节点中的成员 ), 来使得实例对象可以使用整条链中的所有成员.
注意:函数也有__proto__
属性,暂时不考虑这个!
观察如下代码,绘制相应的原型链结构图:
function Person(){};
varp =
newPerson();
注意:
在 js 中, 所有的对象字面量在解析以后, 就是一个具体的对象了. 那么可以理解为 调用的 对应的构造方法.
{}
, 就相当于new Object()
[]
, 就相当于new Array()
/./
, 就相当于new RegExp( '.' )
注意: 在底层理论执行的过程中, 是否有调用构造函数, 不一定. 和浏览器的版本有关.
Object.prototype
常用成员 成员 |
描述 |
|
指向当对象被实例化的时候,用作原型的对象。 |
|
返回一个布尔值 ,表示某个对象是否含有指定的属性,而且此属性非原型链继承的。 |
|
返回一个布尔值,表示指定的对象是否在本对象的原型链中。 |
|
|
|
返回对象的字符串表示。 |
|
返回指定对象的原始值。 |
在 js 中 使用Function
可以实例化函数对象。也就是说在 js 中函数与普通对象一样, 也是一个对象类型. 函数是 js 中的一等公民.
要解决的问题
//Function函数所有的参数全都是字符串
//Function函数的作用就是将所有的参数组合起来,变成一个函数
//1、如果只传一个参数,那么这个函数必然是函数体
//2、如果传多个参数,那么最后一个参数表示函数体,前面的参数代表将要创建的函数的参数
//3、如果不传参数,表示创建一个空函数
newFunction
(arg1, arg2, arg3, ..., argN, body);
//传统的方式
function foo(){
console
.log(
"你好");
}
//使用Function
varfunc =
newFunction
(
"console.log('你好');");
这里两种方式创建出来的函数功能是一样的。
//传统的方式
function foo(){}
//Function
varfunc =
newFunction
();
//传统的方式
function foo(num){
console
.log(num);
}
//Function
varfunc =
newFunction
(){
"num",
"console.log(num);"};
利用+
连接字符串
varfunc =
newFunction
(
'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;
}
varfunc =
newFunction
(
'a',
'b',
'c',
'return foo( a, b, c );');
`
表示可换行字符串的界定符,之前我们用的是单引号或者双引号来表示一个字符串字面量,在ES6中可以用反引号来表示该字符串可换行。
var txt = document.getElementbyId("code).innerHtml + ' ';
var func = new Function('a', 'b', 'c', txt);
静态成员和实例成员这两个概念其实也是从面相对象的编程语言中引入的,对应到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 = {};
varp =
newPerson();
//这里的name是构造函数创建出来的实例对象的属性,所以是实例属性
p.name =
"李四";
//这里的sayHello也是构造函数创建出来的实例对象的方法,所以是实例方法
p.sayHello();
一般工具型方法都有静态成员提供, 一般与实例对象有关的方法由实例成员表示.
工具方法:比如jQuery.Ajax()
、jQuery.trim()
、jQuery.Each()
在每一个函数调用的过程中, 函数代码体内有一个默认的对象arguments
, 它存储着实际传入的所有参数。
arguments
是一个伪数组对象. 它表示在函数调用的过程中传入的所有参数的集合。在函数调用过程中不规定参数的个数与类型, 可以使得函数调用变得非常灵活性。
JavaScript中的函数并没有规定必须如何传参:
在代码设计中, 如果需要函数带有任意个参数的时候, 一般就不带任何参数, 所有的参数利用arguments
对象来获取.
域,表示的是一个范围,作用域,就是作用范围。
作用域说明的是一个变量可以在什么地方被使用,什么地方不能被使用。
JavaScript中没有块级作用域
{
var
num =
123;
{
console
.log( num );
}
}
console.log( num );
上面这段代码在JavaScript中是不会报错的,但是在其他的编程语言中(C#、C、JAVA)会报错。
这是因为,在JavaScript中没有块级作用域,使用{}
标记出来的代码块中声明的变量num
,是可以被{}
外面访问到的。
但是在其他的编程语言中,有块级作用域,那么{}
中声明的变量num
,是不能在代码块外部访问的,所以报错。
什么是词法作用域?
词法( 代码 )作用域, 就是代码在编写过程中体现出来的作用范围. 代码一旦写好, 不用执行, 作用范围就已经确定好了. 这个就是所谓词法作用域.
在 js 中词法作用域规则:
练习:
varnum =
123;
function foo() {
console
.log( num );
}foo();
2.
if(
false) {
var
num =
123;
}
console.log( num );
// undefiend
3.
varnum =
123;
function foo() {
var
num =
456;
function func()
{
console
.log( num );
}
func();
}
foo();
4.
varnum1 =
123;
function foo1() {
var
num1 =
456;
function foo2()
{
num1 =
789;
function foo3 ()
{
console
.log( num1 );
}
foo3();
}
foo2();
}
foo1();
console.log( num1 );
面试题
varnum =
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代码进行预解析,在预解析阶段,会将以关键字var
和function
开头的语句块提前进行处理。
关键问题是怎么处理呢?
当变量和函数的声明处在作用域比较靠后的位置的时候,变量和函数的声明会被提升到作用域的开头。
重新来看上面的那段代码
func();
function func(){
alert(
"Funciton has been called");
}
由于JavaScript的预解析机制,上面的代码就等效于:
function func(){
alert(
"Funciton has been called");
}
func();
看完函数声明的提升,再来看一个变量声明提升的例子:
alert(a);
vara =
1;
由于JavaScript的预解析机制,上面这段代码,alert出来的值是undefined
,如果没有预解析,代码应该会直接报错a is not defined
,而不是输出值。
Wait a minute, 不是说要提前的吗?那不是应该alert出来1,为什么是undefined
?
那么在这里有必要说一下声明
、定义
、初始化
的区别。其实这几个概念是C系语言的人应该都比较了解的。
行为 |
说明 |
声明 |
告诉编译器/解析器有这个变量存在,这个行为是不分配内存空间的,在JavaScript中,声明一个变量的操作为: |
定义 |
为变量分配内存空间,在C语言中,一般声明就包含了定义,比如: |
初始化 |
在定义变量之后,系统为变量分配的空间内存储的值是不确定的,所以需要对这个空间进行初始化,以确保程序的安全性和确定性 |
赋值 |
赋值就是变量在分配空间之后的某个时间里,对变量的值进行的刷新操作(修改存储空间内的数据) |
所以我们说的提升,是声明的提升。
那么再回过头看,上面的代码就等效于:
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(){}
varfoo =
2;
当出现变量声明和函数同名的时候,只会对函数声明进行提升,变量会被忽略。所以上面的代码的输出结果为
function foo(){}
我们还是来吧预解析之后的代码展现出来:
function foo(){};
alert(foo);
foo =
2;
再来看一种
varnum =
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标签的
func(); // 输出 AA2;
function func(){
console.log('AA1');
}
function func(){
console.log('AA2');
}
function func(){
console.log('AA3');
}
第一个script标签中的两个func
进行了提升,第二个func
覆盖了第一个func
,但是第二个script标签中的func
并没有覆盖上面的第二个func
。所以说预解析是分段的。
tip:但是要注意,分段只是单纯的针对函数,变量并不会分段预解析。*****
func();
varfunc =
function(){
alert(
"我被提升了");
};
这里会直接报错,func is not a function
,原因就是函数表达式,并不会被提升。只是简单地当做变量声明进行了处理,如下:
var func;
func();
func =
function(){
alert(
"我被提升了");
}
console.log(
typeoffunc);
if(
true){
function()
{
return
1
;
}
}
console.log(
typeoffunc);
上面这段代码,就是所谓的条件式函数声明,这段代码在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(){
}
}
声明变量使用`var`, 如果不使用`var`声明的变量就是全局变量( 禁用 )
因为在任何代码结构中都可以使用该语法. 那么再代码维护的时候会有问题. 所以除非特殊原因不要这么用.
下面的代码的错误
function foo () {
var
i1 =
1// 局部
i2 =
2,
// 全局
i3 =
3;
// 全局
}
闭包从字面意思理解就是闭合, 包起来.
简单的来说闭包就是,一个具有封闭的对外不公开的, 包裹结构, 或空间.
在JavaScript中函数可以构成闭包. 一般函数是一个代码结构的封闭结构, 即包裹的特性, 同时根据作用域规则, 只允许函数访问外部的数据, 外部无法访问函数内部的数据, 即封闭的对外不公开的特性. 因此说函数可以构成闭包.
函数就可以构成闭包, 要解决的问题就是访问到函数内部的数据
我们观察下面的函数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();
//分别定义get和set函数,使用对象进行返回
return
{
//get_num负责获取数据
get_num:
function(){
return
num;
},
//set_num负责设置数据
set_num:
function(value){
num = value;
}
}
}
一般闭包要解决的的问题就是要想办法间接的获得函数内数据的使用权. 那么我们的可以总结出一个基本的使用模型.
特征:就是一个简单的函数调用,函数名前面没有任何的引导内容
function foo(){}
varfunc =
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(){
};
}
varp =
newPerson();
构造函数中this
与方法中一样, 表示对象, 但是构造函数中的对象是刚刚创建出来的对象
return
关键字的补充说明return
, 就会默认的return this
return
, 就相当于 return thisreturn
基本类型; 无效, 还是保留原来 返回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;
}
varp =
newPerson(
"zhangsan",
19,
"男");
寄生式创建对象
function Person(name, age, gender){
var
o = {};
o.name = name;
o.age = age;
o.gender = gender;
return
o;
}
varp =
newPerson(
"Jack",
18,
"male");
混合式创建
混合式继承就是将所有的属性放在构造方法里面,然后将所有的方法放在原型里面,使用构造方法和原型配合起来创建对象。(模仿着前面的,自己试一试)
上下文(Context),就是函数调用所处的环境。
上下文调用,也就是自定义设置this
的含义。
在其他三种调用模式中,函数在调用的时候,this的值都是指定好了的,我们没办法自己进行设置,如果尝试去给this
赋值,会报错。
//第一种, apply
函数名
.apply(
对象
, [
参数
]);
//第二种, call
函数名
.call(
对象
,
参数
);
//上面两种方式的功能一模一样,只是在传递参数的时候有差异。
功能描述:
this
默认是全局对象obj.method
),在使用方法模式调用的时候,this
默认是指当前对象apply
和call
的时候,默认的this
都会失效,this
的值由apply
和call
的第一个参数决定补充说明
this
的操作, 那么无论什么调用其实都一样.foo()
, 那么有点像foo.apply( window )
.o.method()
, 那么有点像o.method.apply( o )
.call
和apply
在没有后面的参数的情况下(函数无参数, 方法无参数) 是完全一样的.
如下:
function foo() {
console
.log(
this);
}
foo.apply( obj );
foo.call( obj );
第一个参数的使用规则:
foo();
foo.apply();
foo.apply(
null);
foo.call(
undefined);
第二个参数的使用规则
在使用上下文调用的时候, 原函数可能会带有参数, 那么这个参数在上下文调用中使用第二个( 第 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);
//将这三个元素依次加到数组中, 返回所加个数
vara = { 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. 求数组中的最大值
传统的做法
varmax = arr[
0];
for(
vari =
1; i < arr.length; i++ ) {
if
( arr[ i ] > max ) {
...
}
}
在 js 中的Math
对象中提供了很多数学函数Math.max( 1,2,3 )
还是利用 apply 可以展开数组的特性
vararr = [
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++ 等都是编译型语言,而Java,C#等都是解释型语言。
虽然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 这样的快速系统语言来编写的。所以所有需要运行快速的东西将因为是用快速的语言实现的而运行得快速。脚本语言只用于将东西绑在一起,并且这些通常不是性能的瓶颈( 或如果是,你需要重新检查你的设计)。
canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.
canvas
英
['kænv
ə
s]
美
['kænv
ə
s]
帆布
画布
1.1.1. canvas 的基本用法
基本语法
canvas 的使用领域
canvas 的使用领域很多:
1.1.2. 我们的课程目标
绘图步骤
canvas
对象.getContext
方法, 提供字符串参数 '2d'
.CanvasRenderingContext2D
类型的对象. 该对象提供基本的绘图命令.CanvasRenderingContext2D
对象提供的方法进行绘图.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. 代码分析
canvas
标签, 该标签用于展示图像.canvas
的宽高不要使用 CSS 来设置, 会有拉伸的问题. 应该直接使用属性设置.canvas
只是展示图像的标签, 它没有绘图的能力. 需要使用 canvas
的上下文工具来实现绘图.canvas.getContext( '2d' )
可以获得绘图工具, 该工具是 CanvasRenderingContext2D
类型的对象.canvas
绘图, 需要主要的是他主张先描点, 再连线绘制效果.CanvasRenderingContext2D.moveTo( x, y )
方法设置起点.
CanvasRenderingContext2D.lineTo( x, y )
来描述绘制直线的下一个点. 依次类推可以描述多个点.CanvasRenderingContext2D.stroke()
方法来连线. 开可以显示出效果.1.2.1.3. getContext 方法
语法: Canvas.getContext( typeStr )
描述:
'2d'
作为参数, 如果绘制立体图形使用 'webgl'
.'2d'
返回 CanvasRenderingContext2D
类型的对象.'webgl'
返回 WebGLRenderingContext
类型的对象.1.2.1.4. moveTo 方法
语法: CanvasRenderingContext2D.moveTo( x, y )
描述:
1.2.1.5. lineTo 方法
语法: CanvasRenderingContext2D.lineTo( x, y )
描述:
1.2.1.6. stroke 方法
语法: CanvasRenderingContext2D.stroke()
描述: 该方法用于连线, 将描述的所有点按照指定顺序连接起来.
1.2.1.7. 结论
分别绘制下面的案例:
CanvasRenderingContext2D.stroke()
方法.CanvasRenderingContext2D.fill()
方法.1.2.2.1. fill 方法
语法: CanvasRenderingContext2D.fill()
描述: 该方法会按照描绘的点的路径来填充图形. 默认是黑色.
绘制下面的图
填充满足非零环绕数原则
说明:
canvas
中使用各种方法描点实际上描述的是一个称为路径( path )的东西.canvas
绘图中, 所有描述的东西都是路径, 只有最后填充或描边的时候才会显示出效果.练习: 绘制下面图形
1.2.4.1. closePath 方法
语法: CanvasRenderingContext2D.closePath()
描述: 使用该方法可以将最后一个描点与最开始的描点自动连接起来.
案例
...
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.lineTo( 300, 200 );
ctx.closePath();
ctx.stroke();
练习: 使用 closePath
改写非零环绕的案例.
CanvasRenderingContext2D.beginPath()
方法.示例
在一个区域内绘制描边的图形和填充的图形
设置描边与填充不一定只能使用黑色的细线. 可以利用一些属性设置其效果
CanvasRenderingContext2D.lineWidth
设置线宽.CanvasRenderingContext2D.lineCap
设置线末端类型.CanvasRenderingContext2D.lineJoin
设置相交线的拐点.CanvasRenderingContext2D.getLineDash()
获得线段样式数组.CanvasRenderingContext2D.setLineDash()
设置线段样式.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
描述:
案例
...
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
描述:
案例
...
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. 虚线
语法:
CanvasRenderingContext2D.lineDashOffset = number
CanvasRenderingContext2D.getLineDash()
CanvasRenderingContext2D.setLineDash()
描述:
lineDashOffset
用于设置开始绘制虚线的偏移量. 数字的正负表示左右偏移.演示
...
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. 填充与描边样式
语法:
CanvasRenderingContext2D.strokeStyle = value
CanvasRenderingContext2D.fillStyle = value
描述:
案例
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();
}
}
展示效果
绘制下面的效果
绘制下面的效果
绘制下面的效果
Title
绘制图形不仅仅是利用线条来实现绘图, 还可以有快捷的绘制图形的办法
绘制矩形的方法
CanvasRenderingContext2D.strokeRect
CanvasRenderingContext2D.fillRect
CanvasRenderingContext2D.rect
注意: rect
方法就是矩形路径, 还需要使用 fill
或 stroke
才可以看到效果. 因此一般使用 strokeRect
或 fillRect
直接可以看到结果.
清除矩形区域
CanvasRenderingContext2D.clearRect
2.1.1.1. 绘制矩形框
语法: CanvasRenderingContext2D.strokeRect( x, y, width. height )
描述:
moveTo
和 lineTo
方法要简单许多.moveTo
方法设置起始点, 也不需要调用 stroke
等绘画方法.strokeStyle
设置颜色样式.案例
...
ctx.strokeStyle = 'red';
ctx.strokeRect( 100, 100, 200, 100 );
展示效果
2.1.1.2. 绘制填充矩形
语法: CanvasRenderingContext2D.fillRect( x, y, width. height )
描述:
moveTo
和 lineTo
方法要简单许多.moveTo
方法设置起始点, 也不需要调用 stroke
等绘画方法.fillStyle
设置颜色样式.案例
...
ctx.fillStyle = 'green';
ctx.fillRect( 100, 100, 200, 100 );
展示效果
2.1.1.3. 清除矩形区域
语法: CanvasRenderingContext2D.clearRect( 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;
绘制圆弧的方法有
CanvasRenderingContext2D.arc()
CanvasRenderingContext2D.arcTo()
2.1.2.1. 绘制圆弧
语法: CanvasRenderingContext2D.arc( x, y, radius. startAngle. endAngle, anticlockwise )
描述:
stroke
方法或 fill
方法可以绘制扇形. 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. 注意事项
moveTo
那么会从开始的绘弧的地方作为起始点. 如果设置了 moveTo
, 那么会连线该点与圆弧的起点.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 )
描述:
例如有一个起始点 ( 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. 绘制圆角矩形
封装一个函数, 用于绘制圆角矩形.
rect
方法, 需要坐标参数 x, y.首先绘制一个矩形边框. 但是需要考虑圆角, 虽然从 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' );
绘制文本的方法
CanvasRenderingContext2D.fillText()
CanvasRenderingContext2D.strokeText()
CanvasRenderingContext2D.measureText()
文本样式
CanvasRenderingContext2D.font
CanvasRenderingContext2D.textAlign
CanvasRenderingContext2D.textBaseline
语法:
CanvasRenderingContext2D.strokeText( text, x, y[, maxWidth] )
CanvasRenderingContext2D.fillText( text, x, y[, maxWidth] )
描述:
案例
ctx.strokeRect( 100, 100, 200, 50 );
ctx.strokeText( 'Hello JK', 100, 100 );
ctx.strokeRect( 100, 200, 200, 50 );
ctx.fillText( 'Hello JK', 100, 200 );
注意: 第一个文字由于中间空心, 所以文字相当于双线显示. 就显得较粗.
根据绘制的矩形块可以发现文字几乎使用该点作为文字基线参考.
语法: CanvasRenderingContext2D.measureText()
描述:
2.2.3.1. 设置文字字体
语法: CanvasRenderingContext2D.font = value
描述:
修改字号后查看 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
描述:
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
描述:
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 );
实际上大多数参考方式只有在特定语言中有作用, 而且与字体也有相对复杂的关系.
绘制图像虽然只有一个 drawImage
函数, 但是该函数有多重参数形式.
CanvasRenderingContext2D.drawImage( img, dx, dy )
.CanvasRenderingContext2D.drawImage( img, dx, dy, dWidth, dHeight )
.CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )
.语法: CanvasRenderingContext2D.drawImage( img, dx, dy )
描述:
准备一张网络图片, 绘制, 便于查看其加载过程.
//
随便从百度中搜索
'
美女头像
',
记录一个链接地址
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' )
是一样的.
当图片比较大的时候, 如果使用这样的方式绘图, 那么图片可能会完全覆盖画布.
因此, 需要将其控制在一个矩形区域内绘制.
语法: CanvasRenderingContext2D.drawImage( img, dx, dy, dWidth, dHeight )
描述:
将上面的图绘制在 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 );
};
类似于 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 );
有了图片部分绘制的功能, 我们就可以尝试绘制动画了.
开始的时候绘制第一行的第一张图. 计算它的坐标与宽高
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 );
};
扩展一下, 把四行都画出来
Canvas 绘图中支持矩阵变换功能. 其中涉及的常用方法有
CanvasRenderingContext2D.transform()
CanvasRenderingContext2D.scale()
CanvasRenderingContext2D.translate()
CanvasRenderingContext2D.rotate()
CanvasRenderingContext2D.setTransForm()
还有一些方法, 暂时没有普及与确定. 因此这里的几个方法才是最常用的方法.
计算机图形学是建立在解析几何基础之上的. 也就是说所有绘制的图形都是基于坐标进行计算得到的. 那么利用坐标系位置的调整, 同样的坐标可以得到不同的效果. 例如有一个点 A ( 10, 10 ). 可以在坐标系中绘制出该点.
如果调整坐标系. 比如将坐标系向右移动 10 个单位,
此时同样是 A 点, 坐标就变成了 ( 0, 10 ). 然后再把坐标系向上移动 10 个单位,
那么针对新坐标系, 这个点的坐标就是 ( 0, 0 ). 这个就是坐标变换. 通过移动坐标的位置, 对坐标进行旋转, 以及对坐标轴数据的缩放, 从而使得原有点的坐标发生变化, 或利用原有的坐标点绘制新的效果.
坐标变换有一套完整的数学公式. 利用矩阵可以很容易的表示坐标的所有变换.
这里的 a, b, c, d, e, f 就刚好是 transform
函数的 参数.
演示
...
ctx.transform( 1, 0, 0, 1, 0, 0 );
ctx.fillRect( 0, 0, 100, 100 );
这里矩阵变换会比较复杂, 因此在使用中一般使用简单的, 平移, 旋转 和 缩放 的简单 api.
平移变换就是将原有坐标轴进行平行移动, 那么坐标轴移动后就可以使用新坐标来绘制图形了.
语法: CanvasRenderingContext2D.translate( x, y )
描述:
使用该变换, 常常用于绘制不同位置, 但是形状重复的图形.
注意: 变换也会被 "继承", 开启新路径后依旧保留原先变换.
语法: CanvasRenderingContext2D.rotate( radian )
描述:
该变换常常用于实现旋转动画等.
语法: CanvasRenderingContext2D.scale( x, y )
描述:
该变换常常用于放大与缩小, 以及反转的效果.
前面提到 Canvas 是含有状态的, 也就是说需要修改颜色, 直线样式, 绘图方式等效果时需要开启一个新的状态. 但是有时在绘制过程中需要修改状态, 同时绘制完当前状态后又需要回到之前的状态中继续绘制另外的形状. 那么只有再将修改过的样式载更改回来. 如果在该状态中修改的属性较多, 那么每次在回到之前状态时就有很多的代码.
Canvas 中引入了状态的保持机制. 使用 CanvasRenderingContext2D.save()
方法可以保存当前状态. 如果需要恢复到已经保存的状态, 只需要调用 CanvasRenderingContext2D.restore()
方法即可.
状态保持的机制是基于状态栈实现的. 也就是说 save 一次就存储一个状态. restore 一次就将刚刚存入的恢复. 如果 save 两次, 就需要 restore 两次, 才可以恢复到最先的状态.
一般在封装绘图的时候都会采用开始绘制之前, save 一次, 然后 开启一个新路径, 然后绘制结束后 restore, 然后再开启一个新路径. 这样保持当前状态不会对其他绘图代码构成影响.
canvas 在绘制图片的时候, drawImage 方法还支持将一个 canvas 绘制到另一个 canvas 中. 因此使用该功能, 可以在内存中完成复杂的绘图, 将绘制好的半成品再绘制到 canvas 中合成需要的效果.
画布在绘制后实际上就是一张图片, 可以直接右键另存为. 同时也支持使用 js 代码将其保存为 base64 编码的字符串.
语法: Canvas.ToDataURL( type, encoderOptions )
描述:
...
...
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;
绘制图像有两个主要方法, 一个是描边, 一个是填充. 前面介绍过要设置其样式, 可以使用 strokeStyle
和 fillStyle
属性, 只需要给它们提供颜色就可以了. 但是不仅仅是颜色, 它还支持渐变和重复.
相关方法
CanvasRenderingContext2D.createLinearGradient()
CanvasRenderingContext2D.createRadialGradient()
CanvasRenderingContext2D.createPattern()
语法: CanvasRenderingContext2D.createLinearGradient( x0, y0, x1, y1 )
描述:
CanvasGradient.addColorStop( rate, color )
.*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 );
注意: 渐变点的坐标是基于坐标轴来计算的.
语法: CanvasRenderingContext2D.createRadialGradient( x0, y0, r0, x1, y1, r1 )
描述:
案例
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();
语法: CanvasRenderingContext2D.createPattern( img, repetition )
描述:
案例
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 );
};
在 Canvas 中还可以给绘制的内容设置阴影. 但是一般不这么用, 因为性能不高.
相关属性:
CanvasRenderingContext2D.shadowBlur
属性表示模糊程度.CanvasRenderingContext2D.shadowColor
属性表示模糊颜色.CanvasRenderingContext2D.shadowOffsetX
属性表示模糊位置 x 坐标偏移.CanvasRenderingContext2D.shadowOffsetY
属性表示模糊位置 y 坐标偏移.
编译执行:把代码编译成CPU认识的语言(文件),然后整体的执行。
解析执行:一行一行解析,解析一行执行一行。
脚本语言是:弥补编译语言的不足而存在的,作为补充语言,不用编译。
弱类型语言:简单理解定义一个变量,可以有多种数据类型。(var temp)
JavaScript、HTML、CSS各自的作用
HTML 提供网页上显示的内容(结构)
CSS 美化网页(表现)
JavaScript(JS) 控制网页行为(行为)
设计原则:
结构、样式、行为 --- 分离!
JS = ECMAScript + DOM + BOM + 高级
ECMAScript(前身为欧洲计算机制造商协会)
JavaScript的语法规范
DOM(Document Object Model 的简称)
JavaScript操作网页上元素的API
BOM(Browser Object Model 的简称)
JavaScript操作浏览器部分功能的API
注释问题:单行,多行,方法注释等..... 快捷键: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
进制包括2进制、8进制(011)、10进制、16进制(0xA)等....
因为精度丢失问题,所以不判断计算后的两个浮点数是否相等。
由于内存的限制,ECMAScript 并不能保存世界上所有的数值
最小值:Number.MIN_VALUE,这个值为: 5e-324
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
无穷大:Infinity
无穷小:-Infinity
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
用引号时,可单可双,唯独不可一单一双。可用.length看有几个字符。
var name = "zhangsan";
var name = 'zhangsan';
var name = 'zhangsan"; //错误,单引号和双引号要成对出现
总结:无法输出的字符,先输出\,在输出字符。
在内存中不会立刻消失,只能二次赋值,原有的字符在一定时间 内被 垃圾回收器回收。
如果两个变量都是字符串,无论是否包含数字,只要是拼接,那么在前一个后面添加后一个字符串。(+与-情况不同,详情参考数据转换)
Booblean
虽然Boolean 类型的字面值只有两个,但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值
true、除0数字、“something”、Object(任何对象)为true
false、0 、“”、undefined 、null为false
4.if判断时会把()内的值强行转换成boolean类型进行判断。
undefined和null
null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。但是null ===undefined的结果(false)。不过相似归相似,还是有区别的,就是和数字运算时,10 + null结果为:10;10 + undefined结果为:NaN。
任何数据类型和undefined运算都是NaN;
任何值和null运算,null可看做0运算。
变量+“” 或者 变量+“abc”
String(变量)
变量.toSting() 注意:undefined和null不可以
null和undefined无toString方法。
此转换容易产生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()返回NaN,Number("")返回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(变量)
var bool = Boolean(“1111”); bool为true;
!!变量
第一个逻辑非操作会基于无论什么操作数返回一个与之相反的布尔值
第二个逻辑非操作则对该布尔值求反
于是就得到了这个值真正对应的布尔值
主要研究操作符的种类以及优先级。
案例学习。
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取后面。
赋值运算时为从右往左执行,且左侧为属性或变量,不取值!!!
程序正常执行顺序不必过多研究,特殊需求,后续特殊讲解。
共有两种,if语句和switch语句。If常用,switch为特殊情况使用,判断条件出现的情况特别多的时候用switch,其他时候if语句比较方便。
If语句
案例:
输入名人,弹出他所参演的电视剧!如果没有这个人,那么弹框警示!
三目运算可以替代部分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.把百分制转换成优良中可差
共3种,for/while/do...while;可根据需求选择使用;
for循环
for (变量;条件1;条件2){ 执行程序 }
执行过程:变量->条件1->执行程序->条件2->条件1->执行程序.....
直到条件1不成立,跳出循环。
for(;;){程序} 死循环;
6个简单案例,用来体验for循环如何使用。(利息和数列提升思维)
1 打印1到100
2 打印1到100的和
3 求1-100之间所有数的和、平均值
4 求1-100之间所有偶数的和、所有奇数的和
5 本金10000元存入银行,年利率是千分之三,每过1年,将本金和利息相加作为新的本金。计算5年后,获得的本金是多少?
6 有个人想知道,一年之内一对兔子能繁殖多少对?于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子,而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象,那么,一对兔子一年内(12个月)能繁殖成多少对?
九九乘法表
打印宽9,长9的正方形。
打印直角/等边三角形(外循环控制行,内循环控制列,试着以上几种的打印倒三角)
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,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
提示:
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...
(四年一闰,百年不闰,四百年在闰)
函数声明(自定义声明)
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+100和。
什么是对象
创建空白对象
var obj = new Object();
自定义属性
Obj.属性名= 值;
自定义方法(行为)
Obj.方法名 = function (){
方法体;
}
构造函数(就是为了创建对象实例)
function Student(name){ //创建一个构造函数
this.name = name; //构造函数中的对象指的是this。
this.sayHi = function () {
console.log(this.name+"说:大家好!");
}
}
This
new
1.开辟内存空间,存储新创建的对象( new Object() )
2.把this设置为当前对象
3.执行内部代码,设置对象属性和方法
4.返回新创建的对象
十进制的值 = 位值*进制(位数-1) +位值*进制(位数-1) +位值*进制(位数-1)............
对象的字面量就是一个{};而里面的属性和方法是以:键值对形式对应表现的。
(键值对)
//数组: var arr = [];
var obj = {aaa: 111}; var json = {“aaa”:111};
var obj = { sayHi: function () {
console.log(1);
}
} 也是可以调用的
对象和数组也可以作为其他对象的属性(不深究)
对象字面量定义方法和json很像,只有一点不同,json的key要求必须加“”;
JSON : JS中一种对象的表现形式
var json = {“aaa”: 1,“bbb”: 2,“ccc”: 3,“ddd”: 4}
Json由{}和key:value以及逗号组成,三部分。(只有一个键值对key:value时,可以没有逗号)
对象本身没有length,所以不能用for循环遍历
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在说。
侧重点(四点)
调用者:谁调用的。 参数:有无,几个。
返回值:有无,什么类型。 功能:干什么用的。
自学方法
数组 ,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){
程序和返回值;
}
);
//对数组中每一项运行以下函数,如果都返回true,every返回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)
事件有哪些
HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的 是该元素的属性。
document是文档对象模型的一部分。
DOM是一个复合的数据类型。
在HTML当中一切都是节点……
由结构图中我们可以看到,整个文档就是一个文档节点。
每一个HMTL标签都是一个元素节点(标签)。
标签中的文字则是文字节点。(文本)
标签的属性是属性节点。(属性)
操作节点,必须首先找到该元素。有三种方法来做这件事:
通过 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节点之间的相对关系对它们进行访问。
父节点 ( parentNode )
调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.
案例:
兄弟节点
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 if(p[i] !== elm) a.push(p[i]); } return a; } 定义一个函数。必须传递自己。定义一个数组,获得自己的父亲,在获得自己父亲的所有儿子(包括自己)。遍历所有的儿子,只要不是自己就放进数组中。 要明白两个属性(!!!重点!!!) parentNode 和 children 这两个属性。 节点的访问关系都是属性。节点的操作都是函数或者方法。 创建节点 使用方法是这样的document.createElement(); 新的标签(节点) = document.createElement(“标签名”); 插入节点(使用节点) 使用方法: 父节点.appendChild(); 父节点.appendChild(新节点); 父节点的最后插入一个新节点 使用方法:父节点.insertBefore(要插入的节点,参考节点); 父节点.insertBefore(新节点,参考节点)在参考节点前插入; 如果参考节点为null,那么他将在节点最后插入一个节点。 删除节点 用法:用父节点删除子节点。 父节点.removeChild(子节点);必须指定要删除的子节点 节点自己删除自己: 不知道父级的情况下,可以这么写:node.parentNode.removeChild(node) 复制节点 ( oldNode.cloneNode(true) ) 想要复制的节点调用这个函数cloneNode(),得到一个新节点。 方法内部可以传参,如果是true,深层复制,如果是false,只复制节点本身。 新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点 用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点) 节点属性(节点.属性) 两种方法: 1. 属性节点获取 节点.属性 = 值; 2. 获取:getAttribute(名称) 设置:setAttribute(名称, 值) 删除:removeAttribute(名称) 注意:IE6、7不支持。 调用者:节点。 有参数。 没有返回值。 每一个方法意义不同。 DOM就是html文档的模型抽象。数据以树的形式在内存中排列。 节点就是DOM的组成。是一个对象,有属性和方法。获取方式有很多种。 节点分为元素节点(标签),文本节点,属性节点。 区分方法:nodeType: 1是标签,2是属性,3是文本 href=”#” è href=”javascript:;” 1.切换图片(a连接+图片) 2.显示和隐藏盒子 3.美女相册(placehold.it网站,获取 xxx * xxx 大小的图片) 1.老版本的火狐不支持innerText,支持textContent 2.p不能嵌套p。h1不能嵌套h1。a连接内部不能嵌套a连接 表单元素的常用属性:type,value.checked,selected,disabled 需求:鼠标放到a链接上,显示二维码 , 鼠标移开a链接,隐藏二维码 菜单练习, 属性获取修改和删除(属性绑定) 属性绑定的两种方式不能交换使用,赋值和获取值必须使用用一种方法。 元素节点.属性(元素节点[属性]):绑定的属性值不会出现在标签上。 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 //判断,如果不是传递过来的元素本身,那么添加到新数组中。 if(arr[i]!==ele){ newArr.push(arr[i]); // newArr[newArr.length] = arr[i]; } } return newArr; } 案例: 菜单练习(利用封装方法) 高级隔行变色 百度换肤 第一种创建方式:document.write(); 第二种:直接利用元素的innerHTML方法。(innerText方法不识别标签) 第三种:利用dom的api创建元素 document.createElement(“节点”);创建元素 append Child(新节点);插入子元素 insertBefore(新节点,参照节点);在指定元素前插入 removeChild();删除子元素 replaceChild(新节点,旧节点);替换子元素 cloneNode(true)克隆元素,深层复制 创建,添加,删除,替换 案例: 半透明的遮蔽层 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秒关闭广告 关闭广告栏(逐渐消失) 创建时间对象 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(); 案例:模拟日历、倒计时 给索引查字符(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.abs(); 取绝对值 Math.floor(); 向下取整 Math.ceil(); 向上取整 Math.round(); 四舍五入取整 Math.random(); 随机数0-1 三大家族(offset/scroll/client),其实就是DOM的一些属性 事件对象/event (事件被触动时,鼠标和键盘的状态)(通过属性控制) offset这个单词本身是 -- 偏移,补偿,位移的意思。 js中有一套方便的获取元素尺寸的办法就是offset家族; offsetWidth和offsetHight 以及offsetLeft和offsetTop以及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), offsetParent为body。 2、如果当前元素的父级元素中有CSS定位 (position为absolute或 relative,fixed), offsetParent取最近的那个父级元素。 运动的图片。(让图片或者图画动起来) 闪现(基本不用) 匀速(今天重点) 动画原理: 盒子未来的位置 = 盒子现在的位置 + 步长; 缓动(以后重点) 盒子的位置 = 盒子本身所在的位置+步长。 style.left赋值,用offsetLeft获取值。 style.left获取值不方便,获取行内式,如果没有事“”;容易出现NaN; offsetLeft获取值特别方便,而且是现成number方便计算。因为他是只读的不能赋值。 练习:动画封装 BUG1:点击多次以后,越来越快。(定时器重复创建导致的) BUG2:无法返回。 原因就是步长不能为恒定值。(原因就是不长不能为恒定值,返回要为负数) BUG3:二次点击不停止问题。(当满足 === 条件时再次点击,就再也不会满足了,最后一步直接赋值到目标位置(闪现)) 难点1:先点亮盒子,然后移动图片。 2:移动图片的目标位置都是负值。 (负的图片的个数乘以图片的宽,到0之间)(负数) 3:获取盒子的索引值,我们才能知道,ul向右移动几张图片。 难点:1.为什么移动的图片是负值。(参看上面的案例难点2) (我们需要一个值, 记录当前图片,方便后续操作) 我们要看之前的图片,就要num--,要看后面的图片就要num++; 图片想左走显示后面的,图片向右走显示前面的。 都是在数轴上向上或者向下取整。 Math.ceil() 向上取整 Math.floor() 向下取整 Math.round(); 四舍五入 动画原理 = 盒子位置 + 步长(步长越来越小)。 盒子本身位置 目标位置 步长 已经到达了的位置 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 .... 获取盒子距离左侧具有定位的父盒子的距离(没有的body),四舍五入取整。 Style.left获取的是具体值。 (赋值的时候也是直接赋值) 鼠标悬停和鼠标移开不会影响初始化值,只有点击影响。而移开的情况下,span移动到计数器的位置。 ScrollWidth和scrollHeight(不包括border) 检测盒子的宽高。(调用者:节点元素。) 盒子内容的宽高。(如果有内容超出了,显示内容的高度) scrollWidth和scrollHeight不包括border和margin scrollWidth = width + padding; IE8以下,不包括IE8,为盒子本身内容的多少。 scrollTop和scrollLeft 网页,被浏览器遮挡的头部和左边部分。 兼容有问题(火狐和谷歌就不一样) window.onscroll只能使用一次,多了一最后一次为准 它有兼容性问题(火狐演示) DTD:兼容老版本浏览器,使老版本浏览器可以遵循一些新的标准 没有dtd约束的 : document.title = document.body.scrollTop; 有dtd约束的 : document.title = document.documentElement.scrollTop; window.pageXOffset window.pageYOffset ie9+以上: IE9+推翻了之前的设计理念,创造斯巴达 edge 是否声明DTD: document.compatMode “BackCompat”未声明”CSSCompat”已声明 兼容写法 document.title --- 文档标题; document.head --- 文档的头标签 document.body --- 文档的body标签; document.documentElement --- 这个很重要 它表示文档的html标签, 也就是说,基本结构当中的html标签并不是通过document.html 去访问的,而是document.documentElement。 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 .... 判断页面有没有DTD document.compatMode === "BackCompat" 注意大小写 BackCompat 未声明 CSS1Compat 已经声明 只要判断不是undefined就可以调用pageYOffset 只要判断是CSS1Compat就可以调用documentElement 只要判断是BackCompat就可以调用 body return { 固定导航栏 广告跟随 返回头部小火箭 (原理类似:缓动框架。只不过是多一个页面滚动) 只要页面滚动无论向左向右,向上向下,哪怕只有1px,都会触动这个事件 window.scrollTo 方法可把内容滚动到指定的坐标。 格式: scrollTo(xpos,ypos) xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。 ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标 楼层跳跃 100%子盒子会继承父盒子的宽高。父盒子继承body宽高。body继承html的宽高。 盒子属性:auto:适应盒子自身的宽度或者高度。(对自己负责) 盒子属性:100%:适应盒子父盒子的宽度或者高度。(对爸爸负责) 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。 比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date) 普通浏览器支持 event(带参,任意参数) ie 678 支持 window.event(无参,内置) 总结:他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。 IE678中,window.event 在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event. box.onclick = function (aaa){ aaa就是event } 不写参数直接使用event; 写参数,但是为event.... var event = event || window.event;(主要用这种) pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。(页面) screenY/screenX: 鼠标位于屏幕的上方和左侧的距离。(屏幕) clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。(浏览器大小和位置) 在页面位置就等于 = 看得见的+看不见的 pageY/pageX=event.clientY/clientX+scroll().top/scroll().left 只要鼠标在绑定该事件的事件源上移动,哪怕1像素,也会触动这个事件。 (这个事件可以直接或者间接的替代定时器) 点击鼠标跟随 鼠标在盒子中的位置 放大镜 注意1:CSS部分要注意:大图片/大盒子 = 小图片/显示部分 注意2:(大图片/大盒子 = 小图片/黄盒子) 大盒子滑动的距离/小盒子滑动的距离 = 大盒子滑倒头/小盒子滑倒头 大盒子滑倒头/小盒子滑倒头(他们的距离如何获取呢?) 注意3: onmouseover、onmouseout事件给定一个盒子,子元素也会获取这个事件。 替代方法:onmosueenter和onmouseleave. 拖拽案例 //禁止文本选中(选中后取消) window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 模拟滚动条 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) 作用:鼠标距离浏览器可视区域的距离(左、上)。 只要浏览器的大小改变,哪怕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; } 调用者是:事件源。 参数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 :这个方法比较固定,不能用变量或者字符串的形式更换属性,不方便我传值获取属性,和给属性赋值。 属性值的获取和属性的赋值 可以通过传字符串或者变量的方式获取和赋值属性。 缺点:他的操作完全是对行内式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; 主要处理两个 第一个是透明度(旋转木马) 第二个是层级(旋转木马)(由需求决定的) 层级的提高是一次性直接提到最高,不需要一点一点儿的缓动。 旋转木马 原理:我们先定义一个数组,数组中的元素是json;json中的元素是属性。 点击一个按钮,按顺序更换数组中元素的位置。 (如果我们想完成旋转木马,只需要更换数组中元素的位置) 步骤: 正转反转的问题 最开始是:12345;我想让他变成:23451 把1删除,在最后添加1; 在数组json中,删除第一个元素,添加到最末尾。(正转) 在数组json中,删除最后一个元素,添加到第一位。(反转) 函数节流 定义一个变量,只有函数执行完毕在去执行下一个。 正则表达式(英语:Regular Expression) 本质:用来记录文本规则的代码 (为字符串定义规则,为输入内容定义规则!) 应用非常广泛,如:表单验证、高级搜索、生化科学 (有一定难度,不要求非常熟练,但至少会表单验证) 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] 正则对象方法,检测测试字符串是否符合该规则,返回true和false,参数(测试字符串) 使用语法: Boolean = 表达式.test("要验证的内容"); 验证 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(/^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(没有&,用的是,代替的) ()提高权限,有限计算 ( /^[\u4e00-\u9fa5]{2,4}$/ ) 3.匹配验证表单(注册QQ) replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。 语法格式:(返回值是新字符串) 需要匹配的对象.replace(正则式/字符串,替换的目标字符) 正则表达式的匹配模式支持的2个标志 g:表示全局模式(global),即模式将被应用于所有字符串而非发现一个而停止 i:表示不区分大小写(ease-insensitive)模式,在确定匹配想时忽略模式与字符串的大小写 封装自己的trim 函数 function trim(str) { return str.replace(/(^\s+)|(\s+$)/g,""); // 去掉前面和后面的空格 } 学习JS的遇到的痛点 痛点的总结: jQuery描述(理解) jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率。 Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了。 animate.js(JQurey.js)是我们自己封装的库,而jQuery是别人帮我们封装好的库。 学习jQuery,主要是学什么呢? 目前这个阶段,主要学习如何来使用jQuery操作DOM,其实就是学习jQuery封装好的那些功能方法,这些方法叫做API(Application Programming Interface应用程序编程接口)。 这些API的共同特点是:几乎全都是方法。所以,在使用jQuery的API时,都是方法调用,也就是说要加小括号(),小括号里面是相应的参数,参数不同,功能不同。 体验JQuery JS实现显示盒子,设置文字。 JQ实现显示盒子,设置文字。 使用步骤: 1.引包 2.入口函数 3.功能实现代码(事件处理) jQuery隐式迭代简单介绍:(了解) 隐式 对应的是 显示,隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用。 版本介绍(了解) 两个版本的区别:2.x版本,不再支持IE6、7、8 两个版本对浏览器的支持情况: 这几天主要学习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提供的选择DOM元素的方法有几个? 考虑兼容性的话,js里面提供的选择DOM的方法只有两个: JavaScript选择元素的方法: document.getElementById(); 通过id属性获取指定元素 返回唯一的DOM对象 document.getElementsByTagName(); 通过标签名获取指定元素 返回DOM对象数组(即使只有一个元素) 正是因为js提供的选择DOM的方法太少了,满足不了我们平时开发的需要,所以,我们可以使用jQuery选择器来弥补这方面的不足。 什么是jQuery选择器 jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。(联想:CSS选择符) 强大的原因: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的一个元素,index从0开始 $(“li:eq(2)”).css(“color”, ”red”); 选择li元素中索引号为2的一个元素 :odd 选择匹配到的元素中索引号为奇数的所有元素,index从0开始 $(“li:odd”).css(“color”, “red”); 选择li元素中索引号为奇数的所有元素 :even 选择匹配到的元素中索引号为偶数的所有元素,index从0开始 $(“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();过去当前元素在父元素中的索引值(解放自定义属性) 对比JS操作DOM和jQuery操作DOM 使用jQuery的方式来操作DOM更加的简介,方便,统一的调用方式方便我们学习,降低来我们的学习成本。 样式属性操作 .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 如果考虑以后维护方便(把CSS从js中分离出来)的话,推荐使用类的方式来操作。类比CSS书写位置(把css从html中分离出来) 前面内容特色总结:简约、“粗暴”、干净利落、直截了当 案例:图片京东Table栏 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() 作用:停止当前正在执行的动画 为什么要停止动画? 如果一个以上的动画方法在同一个元素上调用,那么对这个元素来说,后面的动画将被放到效果队列中。这样就形成了动画队列。(联想:排队进站) 动画队列里面的动画不会执行,直到第一个动画执行完成。 // 第一个参数表示后续动画是否要执行 // 第二个参数表示当前动画是否执行完 $(selector).stop(clearQueue,jumpToEnd); 都不给,默认false; 解释: 当调用stop()方法后,队列里面的下一个动画将会立即开始。但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。 如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。 注意:如果元素动画还没有执行完,此时调用sotp()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。 常用方式: $(selector).stop(); 动态创建元素 // $()函数的另外一个作用:动态创建元素 var $spanNode = $(“我是一个span元素”); var node = $(“#box”).html(“ 添加元素 在元素的最后一个子元素后面追加元素: append()(重点) 作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以) 如果是页面中存在的元素,那么调用append()后,会把这个元素放到相应的目标元素里面去;但是,原来的这个元素,就不存在了。 如果是给多个目标追加元素,那么方法的内部会复制多份这个元素,然后追加到多个目标里面去。 常用参数:htmlString 或者 jQuery对象 // 在$(selector)中追加$node $(selector).append($node); // 在$(selector)中追加div元素,参数为htmlString $(selector).append(''); 不常用操作:(用法跟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(‘传智播客’); // 获取html内容 $(selector).html(); 清空元素 // 清空指定元素的所有子元素(光杆司令) // 没有参数 $(selector).empty(); $(selector).html(“”); // “自杀” 把自己(包括所有内部元素)从文档中删除掉 $(selector).remove(); 复制元素 作用:复制匹配的元素 // 复制$(selector)所匹配到的元素 // 返回值为复制的新元素 $(selector).clone(); 总结: 推荐使用html(“”)方法来创建元素或者html(“”)清空元素 案例: 属性操作 设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:改属性名称对应的值 $(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其他必备知识 属性操作 设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(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,这时候行吗?),那么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对JavaScript操作DOM事件的封装,包括了:事件绑定、事件解绑、事件触发。 jQuery事件的发展历程(了解) 简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on【重点】 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 作用:给匹配到的元素直接绑定事件 // 绑定单击事件处理程序 第一个参数:事件类型 第二个参数:事件处理程序 $("p").bind("click mouseenter", function(e){ //事件响应方法 }); 比简单事件绑定方式的优势: 缺点:要绑定事件的元素必须存在文档中。 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(){}); 事件解绑 作用:解绑 bind方式绑定的事件 $(selector).unbind(); //解绑所有的事件 $(selector).unbind(“click”); //解绑指定的事件 作用:解绑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 键盘按键代码 案例:按键变色 链式编程 链式编程原理: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这个js库,虽然功能强大,但也不是面面俱到包含所有的功能。 jQuery是通过插件的方式,来扩展它的功能: 当你需要某个插件的时候,你可以“安装”到jQuery上面,然后,使用。 当你不再需要这个插件,那你就可以从jQuery上“卸载”它。 (联想:手机软件,安装的app就好比插件,用的时候安装上,不用的时候卸载掉) 第三方插件 jQuery.color.js animate()自定义动画:不支持背景的动画效果 animate动画支持的属性列表 jQuery.lazyload.js 使用步骤: 制作插件 如何创建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教程 基本使用: 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 HTML5在语法规范上也做了比较大的调整,去除了许多冗余的内容,书写规则更加简洁、清晰。 见代码实例 特点: 1、更简洁 2、更宽松 单标签不用写关闭符号 html、head、body、colgroup、tbody可以完全省略 实际开发中应规范书写,不建议太随意 ! 语义标签对于我们并不陌生,如 表示一个段落、 传统的做法我们或许通过增加类名如class="header"、class="footer",使HTML页面具有语义性,但是不具有通用性。 HTML5则是通过新增语义标签的形式来解决这个问题,例如 此章节学习目的为了解增加语义标签的目的,以及各语义标签所表达的意义,在网页布局中能够合理使用标签。 传统网页布局: 表示标记 (文本有背景颜色,表示标记) 表示进度 表示日期 ( 包裹时间 ) 本质上新语义标签与DOM节点操作 (!!!!!重点!!!!!)
DOM详解(属性操作)
DOM元素
案例
value和innerHTML和innerText和textContent
DOM详解
DOM案例
总结
工具类的封装tools.js(了解,尝试)
DOM创建元素
内置对象BOM
Date
String
Math
offset家族
三大家族和一个事件对象
Offset家族简介
offsetLeft和style.left区别
style.left在=的左边和右边还不一样。(左边的时候是属性,右边的时候是值)
动画和封装
动画定义
动画的种类
动画原理
体验匀速动画
案例
焦点图
切换图
无缝滚动
缓动动画
三个函数
缓动动画原理
leader=leader+(target-leader)/10;
盒子位置 = 盒子本身位置+(目标位置-盒子本身位置)/ 10;
体验缓动动画
分析为什么没有到达指定位置
offsetLeft和style.left的值的获取问题
按例:筋斗云
第二家族scroll
Scroll家族组成
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
获取title、body、head、html标签
Json回顾
Scroll()的封装
"top": window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft
}案例
小知识
onscroll事件
屏幕跳转
前端基本功—javascript 第八天
今日内容:
scroll家族
案例
事件对象(event)
事件对象的获取(event的获取)
兼容获取方式有两种:
event内容重要内容
screenX、pageX和clientX的区别
pageY和pageX的兼容写法(低版本不支持,很重要)
新事件(onmousemove)
案例
(大图片-大盒子)(两边各有一伴儿大盒子的距离是没有走的)
(小盒子-小图片)(两边各有一伴儿小盒子的距离是没有走的)
第三大家族client
主要成员
三大家族区别(三大家族总结)
client家族特殊用法之:检浏览器宽/高度(可视区域)
Onresize事件
案例:根据浏览器可视区域大小,给定背景色
事件总结
获得屏幕宽高
冒泡
阻止冒泡
addEventListener(参数1,参数2,参数3)
案例
缓动框架
封装框架遇到的两个问题
div.style["width"] = "5000px";
获取任意类型的CSS样式的属性值
开闭原则
回调函数
案例(缓动框架的应用)
缓动框架存在的问题
缓动框架案例
正则表达式(RegExp)
概述
正则表达式的特点是:
正则表达式声明
test() 方法
console.log(/\d/.test(567));
正则内部类(帮我们写好的工具直接使用)
正则边界(重点)
// 边界可以精确说明要什么
console.log(/lily/.test("lilyname")); // true
console.log(/^lily$/.test("lily")); // true
console.log(/^lily$/.test("ly")); // false
量词(重点)
案例:
var regexp = /^(0\d{2}-\d{8})|(0\d{3}-\d{7})$/;
var demo = /^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/;
replace 函数
jQuery
jQuery 基础课程—jQuery选择器
为什么要学jQuery?
jQuery是什么?
如何使用jQuery?(重点)
jQuery详细解释
JS跟jQuery的区别是什么?(理解)
为什么要学jQuery选择器?
强大的jQuery选择器(重点)
jQuery 基础课程—jQuery-DOM操作
使用jQuery操作DOM
为什么要使用jQuery操作DOM
重点内容
样式操作
jQuery动画是什么?
(true:后续动画不执行 ;false:后续动画会执行)
(true:立即执行完成当前动画 ;false:立即停止当前动画)
jQuery节点操作
操作form表单
尺寸位置操作
jQuery其他必备知识
重点内容
操作form表单
尺寸位置操作
jQuery事件机制
jQuery补充
jQuery插件机制
H5
双标签省略结束标签语义标签
表示一个无序列表
~
表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备理解HTML页面内容。
H5 经典网页布局:
常用新语义标签