javascript基础知识
下文知识点总结,方便个人查看复习--常用方法或单词,
您必须掌握js的基础知识,否则80%您将看不懂
offsetParent 父元素有定位返回父元素,没有返body
offsetTop 返回元素有定位的父元素上方的偏移
offsetLeft 左边的偏移
offsetWidth 返回自身宽度,包括padding border
offsetHeight 自身高度 包括padding......
continue 跳过本次循环,执行下一次循环
resize 窗口大小发生改变事件
DOMContentLoaded 主要dom元素加载完毕
pageshow 重新加载页面触发的页面pre
removeEventListener('事件',事件函数名)
1.offset系列 经常用于获得元素位置 offsetLeft offsetTop
2.client经常用于获取元素大小 clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageYOffset 获得
变量名 instanceof Array 判断是否是某个构造函数的实例
Array.isArray()判断是否是数组 h5新增
数组添加删除追加
push(参数1...) 末尾追加一个或多个元素 并返回新长度
pop() 删除数组最后一个元素,长度-1 返回删除元素值
unshift(参数1...) 数组开头添加一个或多个新元素 返回新长度
shift() 删除数组第一个元素 长度-1 返回删除值
鼠标事件
click 鼠标点击
mouseover 经过
mouseenter 鼠标经过
mouseout 离开
mouseleave 离开
focus 获得焦点
blur 失去焦点
mousemove 鼠标移动
mouseup 鼠标弹起
mousedown 鼠标按下
e.pageX e.pageY 获取鼠标相当于整个文档坐标 event常见个属性
键盘事件 keydown
获得元素,常用,其他您需要百度
children[0] 获得亲儿子 非标准但是常用
parentNode 获得元素最近的亲爹
创建,克隆,追加,前添加,删除,移除事件
var li = document.createElement('li') 创建一个元素
父级node.appendChild(子级) 后面追加子元素
父级node.insertBefore(创建的,指定元素) 前面添加子
node.insertBefore(元素名,ul.children)此元素前面
node.removeChild(删除节点) 删除子后返回子
克隆节点 node.cloneNode(true)深拷贝
移除事件 removeEventListener('click',fun) 移除事件 需要给移除的事件单独设置函数名
自定义属性
.getAttribute('index') 获得自定义内置属性
.setAttribute('属性名','值') 设置自定义属性 用var会导致window关键字冲突
阻止:冒泡,默认
e.preventDefault()阻止默认行为
e.stopPropagation() 阻止冒泡
e.target 返回触发事件
e.type 返回事件类型,如 click
延时器 定时器 清除定时器
setTimeout()延时器
setInterval()反复调用的定时器
clearTimeout(定时器名字) 名字要自己定义
clearInterval(反复调用的定时器名字)
scroll页面滚动事件
scroll 经常用于获取滚动距离
scrollTop scrollLeft
元素 . scrollTop 被卷去的上侧距离
window.pageYOffset 注意页面滚动的距离通过 window.pageYOffset 获得
window.scroll (x,y) 窗口滚动到指定位置
触屏事件TouchEvent
touchstart 手指触摸触发事件
touchmove 滑动触发事件
touchend 手指移开触发事件
touchcancel 触摸被取消时触发， 例如当用户将他们的手指移动到屏幕之外时。
e.touches 正在触摸屏幕的所有手指列表
e.targetTouches正在触摸dom元素手指列表
e.targetTouches[0] 第一个手指元素的坐标
pageX pageY 手指的坐标
e.changedTouches手指状态发生改变, 手指状态从有到无 从无到有
e.preventDefault();阻止默认的屏幕滚动
Math 对象方法 方法描述
abs(x) 返回数的绝对值。
acos(x) 返回数的反余弦值。
asin(x)返回数的反正弦值。
atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)对数进行上舍入。
cos(x)返回数的余弦。
exp(x)返回 e 的指数。
floor(x)对数进行下舍入。
log(x)返回数的自然对数（底为e）。
max(x,y)返回 x 和 y 中的最高值。
min(x,y)返回 x 和 y 中的最低值。
pow(x,y)返回 x 的 y 次幂。
random()返回 0 ~ 1 之间的随机数。
round(x)把数四舍五入为最接近的整数。
sin(x)返回数的正弦。
sqrt(x)返回数的平方根。
tan(x)返回角的正切。
toSource()返回该对象的源代码。
valueOf()返回 Math 对象的原始值。
数据类型
js的变量数据类型是在程序运行当中根据等号右边的值判断的
var a = 10； 数字型或数值型 number 默认0
var a ='pink' 字符串型 string
boolean 布尔值 代表真假 flase true默认flase 等价0和1
undefined 声明了但是没有给值
null 空值 属于object 数据类型
typeof 检测数值类型 log(typeof A)
arr.reveres() 数组反转
arr.indexOf('bkue') 返回该数组元素的索引号,没有返回-1
lastIndexOf ('') 从后往前
arr.toString() 数组转换为字符串
jojn(分隔符) 例 jijn('-')
arr.splice(1,2) 从第二个开始删除两个
concat() 合并数组
substr (1,2) 从2截取两个
replace('a','c') a替换为c
split(',') 分隔符
typeof 检测数据类型 null返回的是obj
转义符
都是\开头，都写在引号里面
\n换行 \ \斜杠 \ '单引号 \ "双引号 \t缩进 \b空格 \r\n也是换行
单引号不支持换行 反引号支持换行
数值转换
转换为字符串
变量·tostring() string(变量) 和字符串相加
转成数值型
log(parseInt(变量)函数)将字符串类型转化为整数数值型自动去掉后面的不是数字的文字，前面是文字会（nan）
parseFloat(string) 将string转化为浮点数数值型
Nunber() 强制转换函数 将string类型转换为数值型
js隐式转换(- * /) 利用算数运算隐式转换为数值型
示例 log(parseInt(age));
boolean（）布尔值转换
没有值或者否定的是false 有值的就是true
&&且的意思 | |或的意思 ! 非
&&两侧有一个fales就是假
三元表达式
条件表达式 ？ 表达式1真 ： 表达式2假
var num =10
var ccc=num>10 ? 是 : 否
alert(ccc)
age +=5相当于age=age+5
age-=5相当于age=age-5
age*=10相当于age * 10
switch多分支语句，可以多选一
switch 开关的意思
switch(表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:执行最后语句
}
while循环 (for循环是重中之重)
while (条件表达式) {循环体}
var a=1
while (a<=100) {
a++、
}
循环退出循环关键字
continue 立即退出本次循环，开始下一次循环
break 退出整个循环
函数的返回值
function 函数名(){
return需要返回的结果
}
只要函数遇到return 就把后面的结果返回给调用者。
return 终止函数 只能返回一个值
函数没有teturn 返回的是undefined
arguments的使用
当不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
具有 length 属性
按索引方式储存数据
对象
var obj = { "name":"张三疯", "sex":"男", "age":128, "height":154}
创建空对象
var andy = new Obect();
追加空对象属性和方法
andy.name = 'ldh';andy.age = 18;andy.sex = '男';andy.sayHi = function(){ alert('大家好啊~');}
遍历对象 循环 for in
for (var k in obj) { console.log(k); // 这里的 k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值}
for (var k in obj) { console.log(k); // 这里的 k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值}
/格式化日期 年月日
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2019
console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1 呦
console.log(date.getDate()); // 返回的是 几号
console.log(date.getDay()); // 3 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
// 我们写一个 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
时间对象的使用
天var d = parseInt(times / 60 / 60 / 24);
时var h = parseInt((times / 60 / 60) % 24);
分 var m = parseInt((times / 60) % 60);
秒 var s = parseInt(times % 60);
随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var aa = getRandom(1, 50);//1-50的随机数
var now = new Date();
log(date.getDay())
检查是否为数组
变量名 instanceof Array 可以判断一个对象是否是某个构造函数的实例
比如array就是数组
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
Array.isArray()判断是否是数组
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
添加删除数组元素的方法
push(参数1...) 末尾追加一个或多个元素 并返回新长度
pop() 删除数组最后一个元素,长度-1 返回删除元素值
unshift(参数1...) 数组开头添加一个或多个新元素 返回新长度
shift() 删除数组第一个元素 长度-1 返回删除值
location对象
href 设置或返回完整的 URL。
