JavaScript知识总结

JavaScript

前端开发人员必须了解的七大技能图谱

1. 基本语法

1.1 引入

  • 内联试
<a href="javascript:void(0)" onclick="alert('ok')">点击</a>
  • 内嵌式
<script>
alert('ok');
</script>
  • 外链式
<script src="demo.js"></script>

1.2 调试输出

  1. alert():将内容通过对话框弹出到浏览器
  • document.write():将内容直接输出到浏览器
  • console.log():将内容输出到浏览器的控制台

1.3 语句

  1. javascript代码的末尾不必须添加分号，但是推荐加上
  • javascript严格区分大小写
  • javascript会忽略多余的空格
  • javascript是脚本语言，浏览器在读取代码时，逐行的执行脚本代码。而对于传统的编程来说，会在执行前对所有代码进行编译（解释型语言）

1.4 注释

  1. 单行注释：(双斜杠)//
  • 多行注释：/**/

1.5 变量：

  • 存储信息的“容器”（使用以前的代数来理解）
  • 变量的命名规则：变量名由字母，数字，下划线和$组成，且不能以数字开头
// 申明变量
var username = 'zhangsan';

// 同时申明多个变量
var username = 'zhangsan', age = 30, sex = '男';

// 申明变量但是不赋值
var username;

// 不使用var申明变量
username = 'zhangsan';

一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
尽可能不要定义全局变量，防止变量污染

1.6 数据类型

字符串（String）、数字（Number）、布尔（Boolean）、数组（Array）、对象（Object）、空（Null）、未定义（Undefined）
只有一种：对象

使用typeof检测数据类型

1.6.1 字符串（String）

  • 使用单引号和双引号定义字符串
  • 单双引号需要注意的内容
    • 单双引号没有区别
    • 单双引号可以相互嵌套
    • 不可以嵌套自身，除非使用转义字符转义

1.6.2 数字（Number）

  • 整型
  • 浮点型（计算的时候有计算损耗，不建议进行精确计算）
  • NaN(Not a number)
    • NaN与任何值运算都为NaN
    • NaN与任何值都不想等，包括自身
    • isNaN():判断一个值是否时NaN

1.6.3 布尔（Boolean）

  • true
  • false

1.6.4 数组

	// 1. 创建数组的方式
	var cars = new Array();
	cars[0] = 'BMW';
	cars[1] = 'BYD';
	cars[2] = 'BenZ';
	
	// 2.直接定义数组
	var cars = new Array('BMW', 'BYD', 'Benz');
	
	// 3.简单定义
	var cars = ['BMW', 'BYD', 'Benz'];

1.6.5 对象

	var person = {username:'zhangsan', age:20, sex:'男'};
	
	// 调用对象的两种方式
	person.username
	person['age']

1.6.6 Undefined

  • 未定义的变量
  • 定义但是未赋值的变量

1.6.7 Null

  • 将值设置为null清空变量

1.7 数据类型的相互转化

1.7.1 转化为字符串

  • String()

1.7.2 转化为布尔

  • Boolean()
    • '' 0 0.0 NaN false null undefined->false
    • 其余都为真（'false','0','null'）

1.7.3 转化为数值

  • Number() 不包含进制之间的转化
    1. 普通字符串->NaN
    2. 纯数字字符串,数值->原型输出
    3. 空字符串'',空格字符串' ',null->0
    4. true->1 false->0
    5. undefined->NaN
  • parseInt()
    • 从第一个字符开始查找，直到找到非法字符(非数字)截止，返回找到的数字
  • parseFloat()
    • 从第一个字符开始查找，直到找到非法字符(除数字和第一个小数点之外的字符)截止，返回找到的数字

1.8 运算符

1.8.1 算术运算符

  • /
  • %：取余
  • ++
  • --
var a = 3;
var b = 5;

a++ + b++	// 9
a++ + ++a	// 9
++a + a++	// 8

1.8.2 赋值运算符

  • =
  • +=
  • -=
  • *=
  • /=
  • %=
var a = 3;
a += 2;	// 相当于 a = a + 2

alert(a)	// 5

1.8.3 连接运算符 +

  • ＋号两边是纯数字：＋代表加法运算
  • 除此之外，＋都是连接运算
3 + 5 		// 8
3 + '5'		// 35
'3a' + 5	// 3a5

1.8.4 比较运算符

  • =：赋值操作
  • ==：判断双等于号两边是否相等
  • ===
  • !=
  • !==
  • >
  • <
  • <=

1.8.5 逻辑运算符

  • &&（两真为真，其余都为假）
  • ||（两假为假，其余都为真）
  • ! （取反）

1.8.6 条件运算符（三元运算符）

3==3 ? value1 : value2;

1.9 流程控制：条件语句

1.9.1 if条件语句

条件语句用于基于不同的条件来执行不同的动作

// 定义变量
var age = 24;

// 只有if判断
if (age < 18) {
	console.log('小弟弟，你好小');
}

// if...else...判断
if (age < 18) {
	// 当年龄小于18岁的时候，执行此段代码
	console.log('你还小，不要祸害小姑娘');
} else {
	// 当年龄大于等于18岁的时候，执行此段代码
	console.log('不小了，找个小姑娘吧');
}

// if...else if...else...
if (age < 18) {
	console.log('小弟弟，你还小');
} else if (age >= 18 && age < 24) {
	console.log('你还是一个剩斗士');
} else if (age >= 24 && age < 30) {
	console.log('你是一个必剩客');
} else {
	console.log('你乃齐天大剩也');
}

1.9.2 switch语句

基于不同的条件来执行不同的动作

var month = 1;
switch (month) {
	case 1:
	case 3:
	case 5:
	case 7:
	case 8:
	case 10:
	case 12:
		console.log('31天');
		break;
	case 4:
	case 6:
	case 9:
	case 11:
		console.log('30天');
		break;
	case 2:
		console.log('28天');
		break;
	default:
		console.log('输入的月份有问题');
}

2.0 流程控制－循环语句

2.0.1 for循环

for (var i = 0; i < 10; i++) {
	console.log(i);
}

2.0.2 while循环

var i = 0;
while (i < 10) {
	console.log(i);
	
	i++;
}

2.0.3 do...while循环

var i = 0;
do {
	console.log(i);
	
	i++;
} while (i < 10);

2.0.4 for...in...循环

var data = {username:'张三',age:20,sex:'男'};

for (var i in data) {
	console.log(i+'===>'+data[i]);
}

2.0.5 break和continue语句

// break:终止循环
for (var i = 0; i < 10; i++) {
	if (i == 4) {
		break;
	}

	console.log(i);
}

// 最终的结果是：0 1 2 3

// 跳过当前循环继续执行下一次的循环
for (var i = 0; i < 10; i++) {
	if (i == 4) {
		continue;
	}

	console.log(i);
}
// 最终的结果是：0 1 2 3 5 6 7 8 9

2.1 正则表达式

2.1.1 元字符

  • \d:数字
  • \s:空白字符
  • \w:约等于A-Za-z0-9_
  • [1]{6,12}$:必须时6-12位的字母

2.1.2 量词

  • * 相当于
  • + 相当于
  • ? 相当于

2.1.3 模式修正符

  • i:不区分大小写
  • g:执行全局匹配
  • m:执行多行匹配

2.2 JSON

2.2.1 JSON功能

存储和传输数据的格式

2.2.2 实例

{"username":"zhangsan", "age":20, "sex":"男"}

2.2.3 JSON方法

  • 将JSON字符串转化为JSON对象：JSON.parse()
  • 将Javascript对象转换为JSON字符串:JSON.stringify()

2.3 函数

2.3.1 函数定义

// 1.常规定义函数
// demo函数如果被new关键字使用，则为构造函数，如果普通调用，则为普通函数
function demo(){
	console.log('第一种定义函数方式');
}

// 2.使用匿名函数
(function(){
	console.log('第二种定义函数方式');
})()

// 3.使用Function定义函数
new Function('x','y','return x+y;');

2.3.2 函数的特点

  • 变量的作用域
    • 在函数外申明的变量为全局变量，函数内可以直接调用
    • 在函数内使用var申明的变量为局部变量，只能在函数内调用，相当于此函数内的全局变量
    • 在函数内直接定义变量为全局变量
  • 参数个数
    • 形参 > 实参：多余的形参的值为undefined
    • 实参 > 形参：多余的实参被忽略
  • arguments函数内置对象
    • 函数中内置的的所有参数组成的对象

2.4 内置对象

2.4.1 Array对象

  • arr.length
  • arr.concat()
  • arr.join()
  • arr.push()
  • arr.pop()
  • arr.shift()
  • arr.unshift()
  • arr.sort()
  • arr.reverse()
  • arr.splice():从数组中添加或删除元素。
  • arr.every():检测数值元素的每个元素是否都符合条件。
  • arr.map():通过指定函数处理数组的每个元素，并返回处理后的数组。
  • arr.filter():检测数值元素，并返回符合条件所有元素的数组。
  • arr.some():检测数组元素中是否有元素符合指定条件。

2.4.2 Boolean对象

2.4.3 Date对象

  • var d = new Date()
  • d.getFullYear()
  • d.getMonth()
  • d.getDate()
  • d.getHours()
  • d.getMinutes()
  • d.getSeconds()
  • d.getTime()
  • d.toUTCString()

2.4.4 Math对象

属性
  • PI:圆周率
方法
  • abs()
  • ceil()
  • floor()
  • round()
  • max()
  • min()
  • random()

2.4.5 Number对象

  • MAX_VALUE:最大的数
  • MIN_VALUE:最小的数
  • toFixed()

2.4.6 String对象

  • length

  • split()

  • search()

  • match()

  • replace()

  • slice()

  • indexOf()

  • lastIndexOf()

  • charAt()

  • charCodeAt():指定位置的字母对应的Unicode编码

  • String.formCharCode():将Unicode编码转为字符

2.4.7 RegExp对象

  • reg.test(str):使用正则表达式检验str是否符合要求

2.BOM（Window对象）

2.1 全局属性和函数

  • 所有的全局变量是window对象的属性
  • 所有的全局函数是window对象的方法
  • 系统方法
    • alert()
    • confirm()
    • prompt()
    • open()
    • close()
    • moveBy()
    • moveTo()
    • resizeBy()
    • resizeTo()
    • scrollBy()
    • scrollTo()
    • setInterval()
    • setTimeout()
    • clearInterval()
    • clearTimeout()

2.2 Navigator对象:获取浏览器的相关信息

  • appCodeName 返回浏览器的代码名。
  • appName 返回浏览器的名称。
  • appVersion 返回浏览器的平台和版本信息。
  • cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
  • platform 返回运行浏览器的操作系统平台。
  • userAgent 返回由客户机发送服务器的 user-agent 头部的值。
  • userLanguage 返回 OS 的自然语言设置。

2.3 Screen对象：获取浏览器的屏幕信息

  • width
  • height
  • availHeight
  • availWidth

2.4 Frames对象

父修改iframe的背景色：iframeObj.contentWindow.document.style.background
iframe修改父页面的背景色：parent.document.style.background

2.5 History对象

  • length:返回浏览器历史列表中URL数目
  • back():加载 history 列表中的前一个 URL。
  • forward():加载 history 列表中的下一个 URL。
  • go():加载 history 列表中的某个具体的页面

2.6 Location对象

  • hash:锚点 历史回退 pushState(PAJAX)

  • href

  • reload()

3.HTML DOM对象

3.1 DOM Document对象

3.1.1 Form表单对象

- document.forms[0]
- document.forms['formName']
- document.formName
- 表单元素对象:formObj.inputName

3.1.2 Select对象

- 属性：
	- disabled
	- length
	- selectedIndex
- 方法：
	add()
	remove()

3.1.2 table表格对象

- table.rows：获取表格行
- talbe.insertRow(index)：添加行
- table.deleteRow(index)：删除行
- row.cells:获取单元格对象
- row.insertCell(index)：添加单元格

3.1.3 Cookie对象

document.cookie = 'username=zhangsan;expires=date;path=/;domain=qq.com;secure'

3.2 DOM 功能（通过功能确定DOM是做什么的）

3.2.1 获取并改变HTML标签

- document.getElementById()
- document.getElementsByTagName()
- document.getElementsByName()
- document.querySelector()
- document.querySelectorAll()
- ID名直接获取（用于测试，不推荐用于正式环境）

3.2.2 获取并改变HTML属性

- obj.src
- obj.getAttribute()
- obj.setAttribute()
- obj.removeAttribute()

3.2.3 获取并改变CSS样式

- obj.style.width
- 获取最终的样式（兼容）
	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, null)[attr];
	}

3.2.4 事件处理

3.2.4.1 鼠标事件
  • onclick
  • ondblclick
  • oncontextmenu
  • onmouseover
  • onmouseout
  • onmousedown
  • onmouseup
  • onmousemove
3.2.4.2 键盘事件
  • onkeydown
  • onkeyup
  • onkeypress
3.2.4.3 表单事件
  • onfocus
  • onblur
  • onsubmit
  • onchange
  • onreset
  • onselect
3.2.4.4 框架对象事件
  • onload
  • onunload
  • onresize
  • onscroll
  • onerror
  • onabort
3.2.4.5 鼠标键盘属性值
  • altKey:
  • shiftKey:
  • ctrlKey:
  • keyCode
  • clientX:
  • clientY:
3.2.4.6 事件冒泡
  • stopPropagation():火狐和谷歌
  • e.cancelBubble = true; IE火狐谷歌取消冒泡
  • jquery中可以用return false阻止冒泡和默认事件

3.3 DOM 节点操作

3.2.1 标签元素的属性

  • attribute:

  • childNodes:

  • className:

  • firstChild/firstElementChild:

  • lastChild/lastElementChild:

  • nextSibling/nextElementSibling:

  • previousSibling/previousElementSibling:

  • parentNode:

  • nodeName:

  • nodeType:1标签 2属性 3文本

  • nodeValue:

  • innerHTML:

  • clientWidth:

  • clientHeight:

  • offsetHeight:

  • offsetWidth

  • offsetLeft:

  • offsetTop:

  • scrollWidth:

  • scrollHeight:

  • scrollTop:

  • scrollLeft:

3.2.2 标签元素的方法

  • appendChild()
  • insertBefore()
  • replaceChild()
  • removeChild()
  • cloneNode()

  1. a-z ↩︎

posted @ 2016-08-02 21:58  维森  阅读(195)  评论(0)    收藏  举报