JS(一)

js代码导入方式
1. 嵌入式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    	alert('hello');
    </script>
</head>
<body>
    
</body>
</html>
2. 行内式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="点我" onclick="alert('hello')">
</body>
</html>
3. 外部导入
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="myjs.js"></script>
</head>
<body>
    
</body>
</html>
注释
1. 单行注释
// 单行注释
2. 多行注释
/*
多行注释
*/

修改vscode中块注释
管理 -> 键盘快捷方式 -> 搜索 切换块注释 -> 设置为 ctrl + shift + /

输入输出语句
  • alert 浏览器警示框 alert('hello')
  • console.log 浏览器控制台打印 console.log('see this message')
  • prompt 浏览器弹出输入框 prompt('请输入数字:')
变量
变量的初始化
var name = 'zzer';
var age;
age = 20;

var a=1,b=2,c=3;
变量命名规范
  1. 变量名可使用字母,数字,下划线,美元符号$ 组成
  2. 区分大小写
  3. 不能以数字开头
  4. 不能为保留关键字
  5. 驼峰命名法,首字母小写,后面的单词首字母大写
数据类型
基本数据类型
简单数据类型说明默认值
Number数字型,整形,浮点型0
Boolean布尔值类型,如 true、false,等价于 1,0false
String字符串''
Undefinedvar a; 未赋值时 a = undefinedundefined
Nullvar a = null; 声明变量a为空值null
#### Number ##### 八进制 数字前加 0 010 -> 十进制 8 ##### 十六进制 数字前加 0x 0x10 -> 十进制16
Number对象属性

Number.MAX_VALUE
Number.MIN_VALUE

Infinity 无穷大
-Infinity 无穷小
NaN (not a number ) 非数字

isNaN

判断变量是否为数字
isNaN(123)

String

使用一对单引号或双引号

转义字符
\n 换行
\b 空格
\t 制表符

字符串长度

字符串length属性

var str = 'hello';
str.length;
字符串拼接
var str = 'hello' + 'world';

数值和字符串相加 自动将数值转为字符串

Boolean

true 相当于 1
false 相当于 0

Undefined

变量声明未赋值时 未undefined

Null

空值

内置函数
typeof 获取对象数据类型

var str = ‘string’;
typeof str

数据类型转换
转换为字符串
对象方法 .toString()

var num = 10;
console.log(num.toString())

String

var num = 10;
console.log(String(num))

使用字符串拼接

var num = 10;
console.log(num + ‘’)

转换为数字型
parseInt()

parseInt(‘123’)
parseInt(‘120px’) 可以去单位

parseFloat()

parseFloat(‘3.14’)

Number()

Number(‘321’)

进行算术运算隐式转换

‘12’ - 0 结果为 Number 12
‘123’ - ‘120’ 结果为 Number 3

Boolean转换为布尔型

‘’,0,NaN,null,undefined 为false
Boolean(1) -> true

运算符
递增运算符

递增 ++
递减 –

前置递增运算符

先加1 后返回值
var num = 0;
console.log(++num + 1); //->2

后置递增运算符

先返回原值,后自加1
var num = 0;
console.log(num++ + 1); //->1

比较运算符
>大于
>=大于等于
<小于
<=小于等于
==相等判断两边值是否相等,包含隐性转换
!=不等于
===全等值和数据类型都一样
逻辑运算符
逻辑运算符说明案例
&&逻辑与 and true && false -> false
||逻辑或 ortrue || false -> true
!逻辑非 not!true -> false
赋值运算符

var num = 1;
num += 2;
num -= 2
num *= 2;
num /= 2;
num %= 2;

运算符优先级

小括号
一元运算符
算术运算符
关系运算符
相等运算符
逻辑运算符 先 && 后 ||
赋值运算符
逗号运算符

流程控制
if语句
if (条件表达式) {
	代码块1;
} else if{
	代码块2;
} else {
	代码块3;
}
三元表达式

条件表达式 ? 表达式1: 表达式2

如果条件表达式为真 执行表达式1 否则执行表达式2

switch语句

将表达式的值与 value值相匹配

switch(表达式) {
	case value1:
		执行语句1;
		break;
	case value2:
		执行运距2;
		break;
	default:
		执行最后语句;
}
for循环
for (初始化变量; 条件表达式; 操作表达式) {
 循环体
}
while循环
while (条件表达式) {
	循环体
}

当条件表达式为true时执行,为false是退出

do while循环
do {
	循环体
} while (条件表达式) 

先执行循环体,再判断条件

continue,break 关键字

continue 跳过本轮循环
break 跳出循环体

数组

js中一个数组可以保存不同数据类型数据

数组创建
1.方式一
var arr = new Array();
2.方式二
var arr = [];

数组元素用逗号分隔

获取数组元素
索引访问
var arr = ['a','b','c','d'];
arr[0]  //索引从0开始 只有正向索引
arr[4] // 输出undefined
获取数组长度
var arr = [‘a’,'b','c','d'];
console.log(arr.length)
数组遍历
var arr = [‘a’,'b','c','d'];
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i])
}
数组添加元素

1.方式一

修改length属性,length可读性
var arr = [‘a’,'b','c','d'];
arr.length = 6
其中 arr[4],arr[5] 为undefined

2.方式二

var arr = [‘a’,'b','c','d'];
arr[4] = 'e'
循环追加元素
var arr = [];
for (var i = 0; i < 10; i++) {
	arr[i] = i;
}
var arr = [];
for (var i = 0; i < 10; i++) {
	arr[arr.length] = i;
}
翻转数组
var arr = [1,2,3,4,5];
var new_arr = [];
for (var i = 0; i < ar.length; i++) {
	new_arr[arr.length - i - 1] = arr[i] 
}

//==============

var arr = [1,2,3,4,5];
var new_arr = [];
for (var i = arr.length - 1; i >= 0; i--) {
	new_arr[new_arr.length] = arr[i] 
}
数组冒泡排序
var arr = [5,4,3,2,1];
var temp;
for (var i = 0; i < arr.length - 1; i++) {
	for (var j = 0; j < arr.length - 1 - i; j++ ) {
		if (arr[j] > arr[j+1]) {
			temp = arr[j];
			arr[j] = arr[j+1];
			arr[j+1] = temp;
		}
	}
}
函数
函数定义
function 函数名(arg1, arg2) {
	函数体
}
参数

实参个数大于形参个数 -> 不会报错 多余的实参不会被接受
实参个数小于形参个数 -> 不会报错 多余的形参定义为undefined

return

终止函数,且只能返回一个值

function func(arg) {
	return arg;
}

返回多个值可以使用数组

function func(num1, num2) {
	return [num1+num2, num1-num2, num1*num2, num1/num2]
}

无返回值函数返回undefined

arguments

函数中arguments对象包含传递的所有实参

伪数组(1. 具有length属性,2. 按索引方式存储 3. 没有真正数组的方法 pop等)

function func() {
	return arguments
}

func(1,2,3,4,5)
匿名函数
var func = function(arg1,arg2) {
	函数体;
}
func()
作用域

某个变量起作用的范围

函数内定义的变量作用域只在函数内

函数内部 不适用var 关键字直接赋值的变量 作用域为全局

块级作用域

es6之前没有块级作用域
块级作用域 {} 里面为单独的作用域

作用域链

内部函数访问外部函数的变量,采取的是链式查找的方式,就近原则

预解析

js引擎运行js 分两步 : 预解析 代码执行

预解析
变量预解析

将var变量声明 放到当前作用域最前面(只声明不符值)

var a = b = c = 9; // var a = 9; b = 9; c = 9;
// 多变量赋值 var a = 9,b = 9, c = 9
/*预解析时相当于 
var a;
c = 9; 
b = 9;
a = 9;
b,c为全局作用域
*/

函数预解析

将function关键字声明的函数提升到当前作用域的最前面
不提升 匿名函数赋值

var func = function() {
	
}
对象

一组无序的属性和方法的集合

对象创建
  1. 字面量创建
    对象字面量 {}
var obj = {
	name:'man',
	run: function() {
		console.log('running...')
	}
}
  1. new Object创建
var obj = new Object(); // 创建一个空对象
obj.name = 'man';
obj.run = function() {
	console.log('running...')
}
  1. 构造函数创建对象
    用函数封装类
function 构造函数名() {
	this.属性 =;
	this.方法 = function() {}
}

var obj = new 构造函数名() // 构造函数创建对象必须用new关键字

构造函数不需要返回this

new关键字
  1. 内存中创建对象
  2. this指向创建的对象
  3. 执行构造函数内代码
  4. 返回对象
访问对象

访问属性

  1. 对象名.属性名
  2. 对象名[‘属性名’]

调用对象方法
3. 对象名.方法名()

遍历对象

for (var k in obj) {
console.log(k); // k为获取的属性名,方法名
console.log(obj[k]) // 获取属性值
}

内置对象
Math

Math详细内容

Math.max()
获取一组数据的最大值,若参数出现非数字型 放回值为NaN
Math.PI
圆周率
Math.abs()
取绝对值,会把字符串隐式转化成数值
Math.floor()
向下取整,直接去掉小数
Math.ceil()
向上取整 Math.ceil(1.1) -> 2
Math.round()
四舍五入 .5 往大的取 Math.round(-1.5) -> -1

Math.random()
返回一个随机小数,无参数,0~1,不包括1

日期对象

是一个构造函数需要使用new 创建日期对象

var date = new Date(); // 不加参数返回系统当前时间
// 使用数字方式
var date2 = new Date(2019,10,10,3,3,3);
// Sun Nov 10 2019 03:03:03 GMT+0800 (中国标准时间)
var date3 = new Date(('1995-11-17T03:24:00');
// Fri Nov 17 1995 03:24:00 GMT+0800 (中国标准时间)
方法名说明代码
getFullYear()获取当前年dObj.getFullYear()
getMonth()获取当前月0-11,月份记得+1dObj.getMonth()
getDate()获取当天日期dObj.getDate()
getDay()获取星期几(周日0 周六6)dObj.getDay()
getHours()获取当前小时dObj.getHours()
getMinutes()获取当前分钟dObj.getMinutes()
getSeconds()获取当前秒dObj.getSeconds()
获取时间戳
var date = new Date()
// 方式1
date.valueOf()
// 方式2
date.getTime()
// 方式3
var now = +new Date() // 返回之间戳
// 方式4 H5 新增
Date.now()
倒计时
function conutDown(time) {
	var now = Date.now();
	var inptime = +new Date(time);
	var time = (inptime - now) / 1000;
	var d = parseInt(time / 60 / 60 / 24);
	var h = parseInt(time / 60 / 60 % 24);
	var m = parseInt(time / 60 % 60);
	var s = parseInt(time % 60);
}
数组对象
数组创建
var arr1 = [];
var arr2 = new Array(2) // 数组长度为2
var arr3 = new Array(2,3) // 数组包含元素 2,3
数组添加元素
push

给数组追加元素,返回值是新数组长度

var arr = [1,2,3];
arr.push(4,5); // [1,2,3,4,5]
unshift

在数组前面追加新元素,返回值为新数组长度

var arr = [1,2,3];
arr.unshift('a','b'); // ['a','b',1,2,3]
数组删除元素
pop

删除数组最后一个元素并返回

var arr = [1,2,3];
arr.pop() // 3
shift

删除数组第一个元素,并返回

var arr = [1,2,3];
arr.shift() // 1
数组排序
reverse

翻转数组

var arr = [1,2,3,4]
arr.reverse() // [4,3,2,1]
sort

数组排序(字符排序,升序)

var arr = [1,3,2,6,5,4]
arr.sort()  // 按字符规则排序
// 升序排列
arr.sort(function(a,b) {
	return a - b
})
// 降序排列
arr.sort(function(a,b) {
	return b - a
])
数组排序,判断元素是否存在
indexOf

返回数组元素的索引号,只返回第一个找到的元素的索引号

若找不到元素返回 -1

var arr = ['a','b','c'];
console.log(arr.indexOf('b'));

数组去重
原理:遍历旧数组,若元素不在新数组中在新数组中添加元素

var arr = ['a','b','c','c','d','f','g','d'];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
	if (newArr.indexOf(arr[i]) === -1) {
		newArr.push(arr[i]);
	}
return newArr
}
lastIndexOf

从后面开始查找

var arr = ['a','b','c'];
console.log(arr.lastIndexOf('a')) // 0
数组转换为字符串
.toString 方法
var arr = [1,2,3];
console.log(arr.toString());
join(分隔符)
var arr = [1,2,3];
console.log(arr.join(','))
concat 连接数组
var arr1 = [1,2,3];
var arr2 = ['a','b','c'];
console.log(arr1.concat(arr2)); // 返回连接数组的副本原数组不会改变
// [1,2,3,'a','b','c']
slice 数组切片

arrayObject.slice(start,end)

参数描述
start必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
返回值
返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素
var arr = [1,2,3,4,5,6,7,8];
console.log(arr.slice(1,5));
splice 数组中删除/替换元素

arrayObject.splice(index,howmany,item1,…,itemX)

参数描述
index必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX可选。向数组添加的新项目。
var arr = ['a','b','c','d'];
console.log(arr.splice(1,3,'e'));
// ['b','c','d']
console.log(arr);
// ['a','e']
字符串对象
基本包装类型

将简单数据类型包装成复杂对象

字符串不可变
查找字符索引
indexOf

strObj.indexOf(‘char’,[start])
没有找到返回 -1

var str = 'abcdefg';
console.log(str.indexOf('b'));
lastIndexOf

strObj.lastIndexOf(‘char’,[start])
没有找到返回 -1

var str = 'abcdefg';
console.log(str.lastIndexOf('b'));
根据索引返回字符
charAt
var str = 'andy';
console.log(str.charAt(3)); // y
charCodeAt

返回字符对应的ASCII码

var str = 'andy';
console.log(str.charCodeAt(0)); // 0
strObj[index]
var str = 'andy';
console.log(str[0]);  // a
字符串拼接、截取
concat 拼接字符串

strObj.concat(str1,str2,str3…)

var str = 'andy';
console.log(str.concat('red'));
substr 截取字符串

strObj.substr(start, num)
从start开始截取几个字符

var str = 'andy';
console.log(str.substr())
slice

strObj.slice(start,end)
从start开始到end结束,不包括end,负值表示从后面开始数

var str = 'andy';
console.log(str.slice(0,2)) // 'an'
替换字符

strObj.replace(‘被替换的字符’,‘要替换的字符’)
只替换匹配到的第一个字符

var str = 'aaaac';
console.log(str.replace('a','b'))  // 'baaac'
split

strObj.split(分隔符)

var str = 'a,b,c,d';
console.log(str.split(',')) // ['a','b','c','d']
转换大小写
var str = 'Andy';
console.log(str.toUpperCase());  // ANDY
console.log(str.toLowerCase());  // andy
数据类型判断
instanceof
var arr = [];
if ~(arr instanceof Array) {
	console.log('请输入数组')
}
var arr = [];
Array.isArray(arr)

web APIs

DOMDOM树
  • 文档:一个页面就是一个文档,DOM中使用document表示
  • 元素:页面中的所有标签都是元素,DOM中使用element表示
  • 节点:网页中的所有内容都是节点(标签、属性、文本、注释),DOM中使用node表示
获取页面素

script 要写在页面元素下方

根据ID获取

若元素存在返回元素对象,元素不存在返回null

var time = document.getElementById('time');

console.dir(time);  // 打印元素对象 更好的查看里面的属性方法
根据标签名获取

getElementsByTagName()

获取元素对象的集合(伪数组)
若元素不存在返回空的伪数组

document.getElementsByTagName()
element.getElementsByTagName()

var uls = document.getElementsByTagName('ul');
var li = uls[0].getElementsByTagName('li');

根据类名获取

HTML5 新增
getElementsByClassName()

var boxs = document.getElementsByClassName('box');
querySelector

返回选择器选中的第一个对象

var firstBox = document.querySelector('.box');  // 根据类选择
console.log(firstBox);
var nav = document.querySelector('#nav');  // 根据id选择
console.log(nav);
var li = document.querySelector('li');  // 根据标签选择
console.log(li)
querySelectorAll

返回选中的所有元素

var boxAll = document.querySelectorAll('.box');
获取特殊元素

body,html

document.body // 获取body元素

document.documentElement  // 返回html元素
事件

事件源
事件类型
事件处理程序

事件源

事件被触发的对象(元素)

事件类型

如何触发,比如鼠标点击(onclick)

事件处理程序

事件触发时执行的程序

var btn = document.getElementById('btn');  // 获取事件源
// btn.onclick  注册事件(绑定事件)
btn.onclick = function() {			// 添加事件处理程序
	alert('hello');					
}
鼠标事件触发条件
onclick鼠标点击左键触发
onmouseover鼠标进过触发
onmouseout鼠标离开触发
onfocus获得鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标抬起触发
onmousedown鼠标按下触发
修改元素内容

element.innerText = ‘元素显示的内容’
element.innerText 可以获取元素内容
自动去除html标签,去除空格,换行
不识别HTML标签,

var btn = document.querySelector('button');
var div = document.querySelector('div');
var count = 0;
btn.onclick = function() {
    count++;
    div.innerText = count;
}

element.innerHTML = ‘元素显示的内容’
element.innerHTML 可以获取元素内容
W3C标准

修改元素属性

element.属性 = 属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <button>计数器</button>
    <div>0</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var count = 0;
        btn.onclick = function() {
            count++;
            div.innerText = count;
            this.disabled = true;  // this指向方法的调用者btn
        }
    </script>
</body>
</html>
修改样式

element.style 行内样式操作
元素属性值 采用 驼峰命名法

display:none 隐藏元素
display:block 显示元素

element.className 类名样式操作

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值