js 视频课程总结
特点
解释型语言
类 C 的语法结构
动态语言
基于原型的面向对象
ECMAScript
基本语法
-
编写位置
- 网页中 <script> 标签中
-
区分大小写
-
注释
- 单行：//内容
- 多行：/*内容 */
-
标识符
- 第一个字符：字母，_，$
- 其他字符：字母，_，$，数字
- 驼峰命名法
-
关键字
- break,do,instanceof,typeof,case,else,new,var,catch,finally,return,void,continue,for,switch,while,default,if,throw,delete,in,try,function,this,with,debugger,false,true,null
-
保留字
- class,enum,extends,super,const,export,import,implements,let,private,public,yield,interface,package,protected,static
-
变量
- 声明：var a
- 赋值：a=123
-
数据类型
-
基本数据类型
-
字符串：String
-
需要使用 ’ 或 " 括起来
-
转义字符
-
其他类型转字符串
- toString()
- String()
- 拼串
-
-
数值型：Number
-
范围
- ±1.7976931348623157e+308
- 超出返回 ± Infinity
-
NaN（not a number）
-
数值转换
- Number()
- String.parseInt()
- String.parseFloat()
-
-
布尔型：Boolean
- 类型转换：Boolean()
- 转换规则
-
null型：Null
-
undefined型：Undefined
-
-
Object
-
-
运算符
-
算数
- +,-,*,/,%
- ++,–,+,-
-
位
-
逻辑
- ！，&&，||
-
赋值
- =
- +=，*=，-=，/=，%=
-
关系
- <,>,<=,>=
-
等于
-
相等
- ==
- !=
-
全等
- ===
- !==
-
-
条件
- ？：
-
逗号
-
优先级
-
-
语句
-
代码块
-
条件语句
- if…else if…else
- switch…case
-
循环语句
- while
- do…while
- for
- break, continue
- label
-
Object 对象
-
创建
- new Object()
- {}
-
对象属性
-
访问
- 对象.属性名
- 对象[‘属性名’]
-
修改
- 对象.属性名 = 属性值
-
删除
- delete 对象.属性名
-
检查
- “属性名” in 对象
- hasOwnProperty(“属性名”)
-
枚举
- for…in
-
constructor
-
-
数组
-
创建
- new Array()
- []
-
添加元素
- 数组对象[索引] = 值;
- var arr = [元素1,元素2…元素N];
-
获取长度
- 数组.length
-
修改数组长度
- 数组.length = 新长度
-
方法
- push(), pop()
- unshift(), shift()
- slice(), splice()
- reverse(), concat(), join(), sort()
-
遍历
- for
- 数组.forEach()
-
-
函数
-
声明1：var a = function () {}
-
声明2：function a () {}
-
调用：a()
-
参数传递：按值传递
-
属性
-
arguments
- callee：当前执行的函数对象
-
this
- 以函数的形式调用时：window
- 以方法的形式调用时：调用方法的对象
- 以构造函数的形式调用时：新建的那个对象
- 使用call和apply调用时：指定的那个对象
- 在全局作用域中：window
-
-
变量的声明提前
-
函数的声明提前
-
函数声明提升
-
作为参数
-
函数对象的方法
-
call()，apply()
-
使用
- 函数对象.call(this对象，参数数组)
- 函数对象.apply(this对象，参数1，…)
-
-
闭包
-
-
基本包装类型
- String() Boolean() Number()
-
原型继承
-
原型对象：prototype
-
设置原型
-
获取
- 构造函数.prototype
- Object.getPrototype(对象)
- 对象.__proto__
- 对象.constructor.prototype
-
-
原型链
-
BOM
浏览器对象模型
window 对象
-
浏览器中的全局对象
-
窗口大小
-
网页窗口大小
- innerWidth
- innerHeight
-
浏览器本身的尺寸
- outerWidth
- outerHeight
-
-
打开窗口
- open()
-
超时调用
- setTimeout()
- clearTimeout()
-
间歇调用
- setInterval()
- clearInterval()
-
系统对话框
- alert()
- confirm()
- prompt()
-
location 对象
- 提供了与当前窗口中加载的文档有关的信息，和一些导航功能
- href
- assign()
- replace()
- reload()
-
navigator 对象
- 包含浏览器的版本，所支持的插件，所使用的语言等与浏览器相关的信息
- userAgent
-
screen 对象
- 用来表明客户端的能力，包括浏览器窗口外部的显示器的信息，如像素宽度和高度
-
history 对象
- 保存用户上网的历史记录，从窗口被打开那一刻算起
- go()
- back()
- forward()
-
document 对象
DOM
文档对象模型
节点 Node
-
文档节点
- document 对象
-
元素节点
-
获取
- document.getElementById()
- document.getElementsByTagName()
- document.getElementsByName()
-
查询
-
父节点
- parentNode
-
兄弟节点
- previousSibling
- nextSibling
-
子节点
- getElementsByTagName()
- childNodes
- firstChild
- lastChild
-
CSS选择器查询
- document.querySelector()
- document.querySelectorAll()
-
-
属性
-
获取
- 元素.属性名
-
设置
- 元素.属性名 = 属性值
-
nodeValue
-
innerHTML
-
-
修改
-
创建
- document.creatElement(标签名)
- document.createTextNode()
-
删除
- 父节点.removeChild(子节点)
-
替换
- 父节点.replaceChild(新节点，旧节点)
-
插入
- 父节点.appendChild(子节点)
- 父节点.insertBefore(新节点，旧节点)
-
-
-
属性节点
- 元素节点的一部分
- 元素节点.getAttributeNode(“属性名”)
-
文本节点
- 元素节点的子节点
- 元素节点.firstChild
对 CSS 的操作
-
内联样式
-
读取
- 元素.style.样式名
- 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法，将-去掉，然后-后的字母改大写
-
修改
- 元素.style.样式名 = 样式值
-
-
当前样式
- getComputedStyle()：当前元素生效样式（只读）
-
其他
事件
-
事件处理程序
-
绑定
-
通过 HTML 元素指定事件属性
-
通过 DOM 对象指定的属性
-
设置事件监视器
- 元素对象.addEventListener()
-
-
事件处理中的 this
-
-
事件对象
-
事件的触发
-
事件的传播
- 捕获阶段
- 目标阶段
- 事件冒泡阶段
-
取消事件传播
- event.stopPropagation()
- event.stopImmediatePropagation()
- event.cancelBubble = true
- event.preventDefault()
HTML
表格
<table> 用来创建一个表格
<tr> 表示表格中的一行
<th> 表示表头中的单元格
<td> 表示表格中的单元格
colspan 横向的合并单元格
rowspan 纵向的合并单元格
长表格
- <thead> 表格的头部
- <tbody> 表格的主体
- <tfoot> 表格的底部
表单
<form>
- action
<input />
- type=“text” 文本框
- type=“password” 密码框
- type=“radio” 单选按钮
- type=“checkbox” 多选框
- type=“submit” 提交按钮
- type=“reset” 重置按钮
- type=“button” 普通按钮
<select>
<button>
JavaScript
编写的位置
- 标签的指定属性中
- script标签中
- 外部的js文件中
输出语句
- alert(“要输出的内容”);
- document.write(“要输出的内容”);
- console.log(“要输出的内容”);
CSS
文档流
所有元素默认都在文档流中
网页的最底层
元素在文档流中的特点
-
块元素
- 默认宽度是父元素的全部
- 默认高度被内容（子元素）撑开
- 在页面中自上而下垂直排列
-
内联元素
- 默认宽度和高度都被内容撑开
- 在页面中自左向右排列，若一行容不下则换到下一行继续从左到右排列
浮动
float
- none,left,right
特点
- 元素设置浮动后，会完全脱离文档流，并向页面的左上或右上浮动，直到遇到父元素的边框
- 如果浮动元素上边是一个没有浮动的块元素，元素不会超过该块元素。
- 浮动元素的浮动位置不能超过他上边浮动的兄弟元素，最多一边齐
- 浮动元素不会覆盖文字，文字会围绕在浮动元素的周围
脱离文档流以后元素特点
- 块元素不独占一行
- 块元素的宽度和高度都被内容撑开
- 元素不在文档流占用位置
- 内联元素会变成块元素
高度塌陷
-
在文档流中元素的高度默认被子元素撑开，当子元素浮动时，子元素会脱离文档流，此时将不能撑起父元素的高度，会导致父元素的高度塌陷。父元素高度塌陷会导致其他元素的位置上移，导致页面的布局混乱
-
通过开启元素的 BFC 来处理高度塌陷的问题。
-
Block Formatting Context
-
开启后元素具的特性
- 父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素覆盖
- 父元素可以包含浮动的子元素
-
开启BFC的方式
- 设置元素浮动
- 设置元素绝对定位
- 设置元素为 inline-block
- 将元素的 overflow 设置为一个非默认值
-
一般采取副作用比较小的方式
- overflow:hidden;
-
定位
position
-
static
-
relative
- 相对于元素自身在文档流中的位置进行定位
- 相对定位的元素不会脱离文档流，定位元素的性质不会改变，块还是块，内联还是内联
- 如果不设置偏移量，元素不会发生任何的变化
- 会提升元素的层级
-
absolute
- 相对于离它最近的开启了定位的祖先元素进行定位，如果祖先元素都没有开启定位则相对于浏览器窗口进行定位。
- 绝对定位会使元素完全脱离文档流，会改变元素的性质，内联变成块元素，块元素的宽度被内容撑开
- 绝对定位的元素如果不设置偏移量，元素的位置不会发生变化
- 会提升元素的层级
-
fixed
-
固定定位也是一种绝对定位，它的大部分特点都和绝对定位是相同的
-
不同的是
- 固定定位永远相对于浏览器窗口进行定位
- 固定定位会固定在浏览器的指定的位置，不会随页面一起滚动
-
偏移量
- top,bottom,left,right
1224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
