js进阶
一、基本输入输出
var age = prmopt('请输入年龄');
alert(age);
console.log('对吧');
控制台打印的数据，蓝色是number型，黑色是字符串
二、数据类型转换
parseInt(String)//转整数。取整，去单位
parseFloat(String)//转浮点数
Number(String)
Console.log('123' - 0)//减号隐式转换为数字类型
三、短路运算
1.逻辑与&&
表达式1结果为真，返回表达式2的值，如果表达式1为假，则返回表达式1的值
Console.log(123 && 456)//456
Console.log(0 && 456)//0
2.逻辑或||
表达式1结果为真，返回表达式1的值，如果表达式1为假，则返回表达式2的值
Console.log(123 || 456)//123
Console.log(0 || 456)//456
四、arguments
arguments可以获取函数的全部实参输入，是一个伪数组（没有数组的一些方法，pop，push）,每个函数里都有。
function fn(){
Console.log(arguments)
}
fn(1,2,3)
五、创建对象
1.字面量创建
var obj = {
name:'zzh',
age:'23',
fn : function(){
console.log('hi~')
}
}
2.new Object创建
var obj = new Object();
obj.name = 'zzh';
obj.age = '23';
obj.fn = function(){
console.log('hi~')
}
3.构造函数创建
function Star(name, age, sex){
this.name=name;
this.age=age;
this.sex=sex;
this.sing=function(data){
console.log(data);
}
}
//使用
var star_1 = new Star('zzh',23,'男');
star_1.sing('lalala');
4.对象遍历
for(var k in obj){
console.log(k);//输出属性名
console.log(obj[k]);//输出属性值
}
六、内建(MDN查文档吧~)
返回两个数字之间的随机整数，包含这两个整数
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
得到时间戳
var date = +new Date();
var date = Date.now();
格式化时间戳
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);//秒
七、DOM
1.getElementById()：
var element= document.getElementById('id')//大小写敏感
返回的element是一个对象
console.dir(element)//打印对象的属性与方法
2.getElementByTagName():
var lis= document.getElementByTagName('li')
返回的lis是一个对象集合，以伪数组存储 lis[0]就是第一个
var ol= document.getElementByTagName('ol');
ol[0].getElementByTagName('li')//获取父元素下的子元素
3.getElementByClassName():
var boxs= document.getElementByClassName('box')
返回的boxs是一个对象集合，以伪数组存储 boxs[0]就是第一个
4.querySelector():
var firstbox= document.querySelector('.box')//class
var firstnav=document.querySelector('#nav')//id
var firstli=document.querySelector('li')//tag
返回的是满足条件的第一次出现的对象，注意加符合
5.querySelectorAll():
var allboxs= document.querySelectorAll('.box')
返回的是满足条件的所有对象，以伪数组存储
6.特殊元素获取：
var bodyEle= document.body;//body
var htmlEle= document.documentElement;//html
八、事件
1.事件三要素
事件源、事件类型、事件处理程序
onclick onblur onfocus onmouseover onmouseout
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('hello world')
}
2.改变元素内容
var btn = document.querySelector('btn');
var div = document.querySelector('div');
btn.onclick = function(){
div.innerText='hello world';
div.innerHTML='<i>hello</i> world'
}
3.改变表单属性
type、value 、checked 、selected 、disabled
4.改变样式属性
this.style.backgroundColor = 'pink';
this.style.width='200px';
this.style.display= none//隐藏
this.style.display= block//显示
this.className='change';
this.className='first change';//保留原类名
5.操作自定义属性值
getAttribute('myindex')//获取
setAttribute('myindex'，2)//设置myindex为2
removeAttribute('myindex')//移除
九、节点
1.概述
一个节点一般有nodeType、nodeName、nodeValue基本属性
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3
2.父节点parentNode
先获取到一个节点，然后.parentNode即可获取其最近的父节点。
3.子节点ChildNodes、children
先获取到一个节点，然后.ChildNodes即可获取其所有子节点。但一般我们只想要其中的元素节点0-0,所以有了children，只获得其元素节点。
firstElementChild 获取第一个元素节点--或者children[0]
lastElementChild 获取最后一个元素节点--或者children[children.length-1]
4.兄弟节点nextSibling
nextSibling获取下一个兄弟节点，包括文本节点。
nextElementSibling获取下一个兄弟元素节点
previousSibling获取上一个节点，包括文本节点。
previousElementSibling获取上一个兄弟元素节点
5.创建添加节点
var lis = document.createElement('li')//创建
node.appendChild(lis)//追加，node为父节点
node.insertBefore(lis,node.Childern[0])//添加
6.删除节点
node.removeChild(child)//删除节点child
7.复制节点
node.cloneNode()//复制一份,不复制子节点
node.cloneNode(true)//复制一份,并复制子节点
node.appendChild(lis)//追加，node为父节点
node.insertBefore(lis,node.Childern[0])//添加
十、事件高级
1.事件注册的方法
1.传统注册方式，绑定onclick，缺点只能注册一个事件，具有唯一性
2.方法监听方式，addEventListener()，可注册多个事件，依次执行
addEventListener(type,listener,useCapture)
//type,事件类型,'click'
//listener,处理函数,function(){处理方法}
//useCapture,true为捕获阶段，false为冒泡阶段
3.attachEvent('onclick',function(){})
2.删除事件的方法
1.传统注册方式解绑事件：onclick=null
2.方法监听方式解绑事件：removeEventListener()
removeEventListener(type,listener,useCapture)
//type,事件类型,'click'
//listener,移除的处理函数,fn
3.事件对象
div.onclick=function(event){}
//event叫做事件对象，只有有了事件，才有event
event.preventDefault();
//阻止默认行为
event。stopPropagation();
//阻止冒泡
4.事件委托
不给子节点设置事件监听器，给父节点设置，利用target获取到点击的具体子节点，然后会冒泡到父节点，触发事件。
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
e.target.style.backgroundColor='pink'
})
5.禁止选中
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
6.鼠标事件对象
document.addEventListener('click',function(e){
e.clientX
e.clientY//相对可视区域坐标
e.pageX
e.pageY//相对页面文档坐标
e.screenX
e.screenY//相对电脑屏幕的坐标
})
案例：鼠标图片跟随，mousemove事件
//图片先绝对定位
<img src=''>
var pic = document.querySelector('img')
document.addEventListener('mousemove',function(e){
var x=e.pageX;
var y=e.pageY;
pic.style.left=x+'px';
pic.style.top=y+'px';
})
7.键盘事件
document.addEvenetListener('keyup',function(){
//按键弹起
})
document.addEvenetListener('keydown',function(){
//按键按下
})
document.addEvenetListener('keypress',function(){
//按键按下(不识别功能键ctrl shift 箭头键等)
})
//执行优先级 down > press > up
document.addEvenetListener('keyup',function(e){
e.keyCode();//按下键的ASCII值
//keyup与keydown不区分按键大小写。
//keypress区分按键大小写。
})
十一、BOM
浏览器对象模型，顶级对象为window，BOM包含DOM
1.常用事件
(1)页面加载完成
window.onload = function(){
}
window.addEventListener('load',function(){
})
(2)窗口加载完成：仅DOM加载完毕就执行
document.addEventListener('DOMContentLoaded',function(){
})
(3)调整窗口大小
window.addEventListener('resize',function(){
})
window.innerWidth//当前窗口宽度
(4)定时器
var time1 =setTimeout(函数名,延时毫秒数)//函数名不用括号
clearTimeout(定时器ID)//清除定时器
setInterval(函数名,间隔毫秒数)//反复调用
clearInterval(定时器ID)//清除定时器
2.location对象
location.href//整个URL
location.host//域名
location.port//端口号
location.pathname//路径
location.search//参数
location.hash//#后片段
location.assign('url')//跳转页面，保留历史
location.replace('url')//跳转页面，无法后退
3.navigator对象
userAgent//使用浏览器信息
4.history对象
history.back()//后退
history.forward()//前进
history.go(参数)//1前进1页面，-1后退1页面
十二、元素位置控制
1.offset
element.offsetTop//距离上边缘距离
element.offsetLeft//距离左边缘距离
element.offsetWidth//宽度
element.offsetHight//高度
2.client
element.clientTop//上边框大小
element.clientLeft//左边框大小
element.clientWidth//宽度,不含边框
element.clientHight//高度,不含边框
3.立即执行函数
不需要调用，自己立刻执行
(function(){})()
(function(){}())
4.scroll
element.scrollTop//被卷去的上侧距离
element.scrollLeft//被卷去的左侧距离
window.pageYOffset//页面被卷去的上侧距离
element.scrollWidth//自己的实际宽度,不含边框
element.scrollHight//自己的实际高度,不含边框
mouseover在经过子盒子时会再次触发
mouseenter只是经过自身盒子触发，不会冒泡（mouseleave）
十三、本地存储
1.sessionStorage
生命周期为浏览器关闭时,键值对存储
sessionStorage.setItem(key,value)//存储
sessionStorage.getItem(key)//获取
sessionStorage.removeItem(key)//删除
sessionStorage.clear()//清空所有
2.localStorage
存储到本地,关闭浏览器也不会清空,键值对存储,多页面共享
localStorage.setItem(key,value)//存储
localStorage.getItem(key)//获取
localStorage.removeItem(key)//删除
localStorage.clear()//清空所有