Javascript -第一篇基础

Js书写过程

1.实现布局
2.想出对应可以实现的原理
3.了解js语法，并且写出对应的代码且无BUG

元素不显示（隐藏）

1.display:none
2.visibility:hidden
3.opacity:0
4.width/height =0
5.拿空白div元素遮挡
6.定位
7.margin设置负值

5,6，7,一般为不规范使用

JS获取DOM元素的方法

1. 通过ID获取（getElementById）
2. 通过name属性（getElementsByName）
3. 通过标签名（getElementsByTagName）获取到的是一个集合, 类似于数组，但数组声明且只能存放一种类型，集合不声明且可存放多种类型
4. 通过类名（getElementsByClassName）
5. 通过选择器获取一个元素（querySelector）
6. 通过选择器获取一组元素（querySelectorAll）
7. 获取html的方法（document.documentElement）
8. document.documentElement是专门获取html这个标签的
9. 获取body的方法（document.body）
10. document.body是专门获取body这个标签的。

事件

javaScript是一种基于事件驱动型的编程语言

鼠标事件，键盘事件，html事件
事件和事件句柄的关系：click，onclick
事件句柄通常是某个标签的属性

<input type="button" value="button" onclick="">

事件发生之后，代码才会执行，事件不发生，不会执行JS代码

常见的事件如下：

事件	事件句柄	用法
blur	onblur	元素失去焦点
focus	onfocus	元素获得焦点
change	onchange	域的内容被改变
click	onclick	当用户点击某个对象时调用的事件句柄
dblclick	ondblclick	当用户双击某个对象时调用的事件句柄
keydown	onkeydown	某个键盘按键被按下
keyup	onkeyup	某个键盘按键被松开
load	onload	一张页面或一幅图像完成加载
mousedown	onmousedown	鼠标按钮被按下
mousemove	onmousemove	鼠标被移动
mouseout	onmouseout	鼠标从某元素移开
mouseover	onmouseover	鼠标移到某元素之上
mouseup	onmouseup	鼠标按键被松开
reset	onreset	重置按钮被点击
submit	onsubmit	确认按钮被点击
select	onselect	文本被选中

注册事件处理程序

1.普通的添加
同一类型事件添加多次时，只执行最后添加的事件
2.使用addEventListener()方法注册事件

mybutton.addEventListener('click', function() { 
alert('Hello World'); 
}, false);

同一类型事件可添加多次

js操作属性注意事项

1. JS属性中不能出现"-",如 font-size应该写成 fontSize
2. class是js中的关键字，在js中动态添加类要用到3. className
3. 不能用相对路径做判断，如 img中的src属性，还有href属性
4. 不能用颜色值做条件判断如 red #f00 rgb(255,0,0)尽量不用innerHTML值做判断
5. 在js中 .和[] 都表示 “的”点后面的值无法修改[] 里面的值可以修改，js中允许将.换成[]

for循环四部曲

1. 初始化变量
2. 条件判断
3. 执行代码
4. 条件更新

this指向

1. this总是指向函数的直接调用者
2. 在事件中，this指向触发这个事件的对象
3. 如果有new关键字，this指向new出来的对象

数据类型

简单数据类型

1. undefined 未定义
2. null 空值
3. boolean 布尔值
4. string 字符串
5. number 数值类型
6. symbol 原始值ES6

复杂数据类型

object包含object/array/function/Date/Math/window/global
一切皆对象

类型转换

1. 强制类型转换
   Number() 转为数值类型
   parseInt() 解析一个字符串，并返回一个整数
   parseFloat() 解析一个字符串，并返回一个浮点数
   toString() 转为字符串类型 无法转换null和undefined 解析null会报错
   String() 转为字符串类型 会返回字符串 “null”
   Boolean() 转为布尔类型
2. 隐式类型转换
   － 、*、/、%、可以将字符串数字转换成数值类型的数字
   +可以将一个数字+一个空的字符串转成成字符串类型

"＝＝和==="的区别

==相等 只要值相等条件成立； ＝＝有隐式类型转换作用
＝＝＝全等，值相等，而且数据类型也要相同

console.log([1]==[1])// false

1. 原始值的比较是值的比较，类型的比较
2. 对象的比较并非值的比较,而是引用的比较
   即使两个对象包含同样的属性及相同的值，它们也是不相等的
   即使两个数组各个索引元素完全相等，它们也是不相等的
   当且仅当它们引用同一个基对象时，它们才相等

true与false

1.true、非零数字、非空字符串、非空数组、函数、对象
2.false、0、NaN、null、undefined、空字符串、数组、对象

break和continue区别

1.break是结束代码，后面代码不再执行
2.continue结束代码，解释本次循环，如果条件满足，会继续执行后续代码

函数

1. return 函数返回值，就相当于函数本身；return也有终止代码的作用
2. arguments 函数天生自带，获取实参列表的，可以得到一个集合
   arguments不是数组，类数组

call和apply

不同点:call传递参数直接传参，apply以数组形式传递参数
call：将函数作为对象的方法来调用
apply：将函数作为对象的方法来调用
相同点:都可以改变函数内部this指向

变量提升/函数提升

console.log(a);
var a=100;
 console.log(a);
 
 //等价于
 
 var a
 console.log(a);
 a=100;
 console.log(a);

字符串

var str="Abcdefghigked";
			
//字符串有length
console.log(str.length)

//charAt(index)  找到子串，如果查询不到返回空值
console.log(str.charAt(3))

//charCodeAt(index) 得到子串的unicode编码，不传参时，默认字符串第一位
console.log(str.charCodeAt())

//indexOf("子串",n) 获取子串的索引位置，如果查询不到返回-1;n代表从索引n往后查找子串，如果n为负数从后往前查找
console.log(str.indexOf('d',6))
console.log(str.indexOf('d',-3))

//lastIndexOf("子串",n)  从后往前查找，n代表从索引n往后查找子串，如果n为负数从后往前查找
console.log(str.lastIndexOf("e",4))

Date对象简单应用（倒计时）

var date1=new Date("2020/01/19 00:00:00")
		setInterval(function(){
			var date2=new Date();
			var milli=date1.getTime()-date2.getTime();
			var _day=Math.floor(milli/1000/60/60/24)
			milli=milli-_day*24*60*60*1000;
			var _hour=Math.floor(milli/1000/60/60)
			milli=milli-_hour*60*60*1000;
			var _minutes=Math.floor(milli/1000/60)
			milli=milli-_minutes*60*1000;
			var _secend=Math.floor(milli/1000)
			document.getElementById("box").innerHTML="距离过年还有"+_day+"天"+_hour+"时"+_minutes+"分"+_secend+"秒"		
		},1000)

Math对象简单应用（100~999随机数）

Math.floor(Math.random()*(999-100+1))+100

定时器

超时定时器
setTimeout()
间歇定时器
setInterval()

Date对象

date对象的创建方式

1. new Date() 创建当前时间对象
2. new Date(2020/01/02 00:00:00) 创建某个时间点的对象

date对象的常用方法

1. getFullYear() 获取时间对象的年份
2. getMonth() 获取时间对象的月份
3. getDate() 日期，哪一日
4. getDay() 星期，返回一周的星期数（0~6）
5. getHours() 小时
6. getMinutes() 分钟
7. getSeconds() 秒数
8. getMilliseconds() 毫秒
9. getTime() 返回1970年1月1日至今的毫秒数

Math对象

Math 是一个内置对象， 它具有数学常数和函数的属性和方法。不是一个函数对象。

与其它全局对象不同的是, Math 不是一个构造器. Math 的所有属性和方法都是静态的.

1. Math.ceil(x) 向上取整（天花板函数）
2. Math.floor(x) 向下取整（地板砖函数）
3. Math.max(x,y,z……) 求多个数值中的最大值
4. Math.min(x,y,z……) 求多个数值中的最小值
5. Math.round(x) 四舍五入，结果为整数
6. Math.random() 求0~1之间随机数，包含0，不包含1，[0,1)
7. Math.pow(x,y) 返回x的y次方
8. Math.sqrt(x) 开平方

闭包

function fn(){
var num=100;
	return function(){
		console.log(num)
	}
}
fn()()

来源：CSDN

作者：drift_away_

链接：https://blog.csdn.net/drift_away_/article/details/103574778