程序员书籍笔记
yuadh
2022-02-03
目录

BOM接口

# 键盘事件

键盘事件 触发条件
onkeyup 某个键盘按键被松开时触�?
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下时触发 ，不识别功能按键如ctrl

执行顺序 onkeydown-onkeypress-onkeyup

# keycode属�?

e.keycode 返回键盘按下键的 ASCII 码�?

注意 keyup �? keydowm 不区分大小写

输入框案�?

var search = document.querySelector('input');
document.addEventListener('keyup',function(e){
    if(e.keyCode == 83){
       search.focus();
    }
});
1
2
3
4
5
6

放大显示案例

var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
//此处需要使用到keyup事件 因为在使用keydown�? 值在事件中获取不�?
jd_input.addEventListener('keyup',function(e){
    if(this.value == ''){
       con.style.display = 'none';
    } else {
        con.style.display = 'block';
        con.innerText = this.value;
    }
})
jd_input.addEventListener('blur',function(e){
    con.style.dispaly = 'none';
})
jd_input.addEventListener('focus',function(e){
    con.style.dispaly = 'block';
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# BOM

BOM浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性，BOM缺乏标准

  • 浏览器对象模�?
  • 顶级对象�? window
  • 兼容性差

window 对象是浏览器的顶级对象，它具有双重角�?

  1. 它是 js 访问浏览器窗口的一个接�?
  2. 它是一个全局对象。定义在全局变量中的变量、函数都会变�? window 对象的属性和方法

window.name

# 常见事件

# 页面加载事件

window.onload load

页面加载事件，当文档内容完全加载完成会触发该事件，调用处理函�?

//传统的注册事件方�? 只能写一次可以使用addEventListener
window.onload = function(){
    btn.addEventListener('click',function(){
        alert('yuadh');
    });
}
window.addEventListener('load',function(){
    btn.addEventListener('click',function(){
        alert('yuadh');
    });
})
1
2
3
4
5
6
7
8
9
10
11

新属�? DOMContentLoaded

仅当BOM加载完成，不包括样式表，图片 �?

document.addEventListener('DOMContentLoaded',function(){
    alert('first');
});
1
2
3

# 调整窗口大小事件

window.onresize 是调整窗口大小事件，当触发时就调用的处理函数

window.innerWidth 获取当前屏幕宽度

window.addEventListener('resize',function(){
    if(window.innerWidth<=800){
       div.style.disply = 'none'
    } else {
         div.style.disply = 'block'
    }
})
1
2
3
4
5
6
7

# 定时�?

setTimeout(调用函数，[延迟的毫秒数])

可以省略毫秒�?

setTimeout(function(){...},1000);
function fn(){...}
setTimeout(fn,1000);
//不推荐写�?
setTimeout('fn()',1000);
1
2
3
4
5

回调函数 callback

# 清除定时�?

clearTimeout(timeoutID)

var btn = document.querySelector('button');
var timer = setTimeout(function(){
    console.log('yuadh');
},5000);
btn.addEventListener('click',function(){
    clearTimeout(timer);
})
1
2
3
4
5
6
7

案例

var begin  = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null;
begin.addEventListener('click',function(){
    timer = setIneterval(function(){
        console.log('yuadh');
    },1000);
})
stop.addEventListener('click',function(){
    clearInerval(timer);
})
1
2
3
4
5
6
7
8
9
10
11

# setInterval

setInterval(回调函数,[间隔的秒速])重复调用一个函数，每隔这个事件，就去调用一次回调函�?

倒计时案�?

var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +newDate('xxx');//倒计时时�?
countDown();//因为定时器有1s时间的延�? 所以需要先调用一次这个函�?
setInterval(countDown,1000);
function countDown(time){
    var nowTime = +new Date();
    var times = (inputTime - nowTime)/1000;
    var h = parseInt(times/60/60%24);
    h = h<10?'0'+h:h;
    hour.innerHTML = h;
    var m = parseInt(times/60%60);
    m = m<10?'0'+m:m;
    minute.innerHTML = m;
    var s = parseInt(times%60);
    s = s<10?'0'+s:s;
    second.innerHTML = s;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

See the Pen 倒计时案�? by yuandehua (@yuandehua) on CodePen.

# 发送验证码案例

var btn = docuemnt.querySelector('button');
var time = 3;
btn.addEventListener('click',function(){
    tbn.disabled = true;
    var timer = setInterval(function(){
        if(time = 0){
           clearInterval(timer);
            btn.disabled = false;
            btn.innerHTML = '发�?';
            time = 3;
        } else {
            btn.innerHTML = '还剩�?' + time-- + '�?';
        }
    },1000);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# this指向

this指向调用它的对象

  1. 全局作用域或者普通函数中 this 指向全局对象 window

    console.log(this);//window
    1

  2. 方法调用中谁调用 this 指向�?

    var o = {
    say:function(){
        console.log(this);//o
    }
}
o.sayHi();
    1
    2
    3
    4
    5
    6

  3. 构造函数中 this 指向构造函�?

    function Fun(){
    console.log(this);//指向var fun
}
var fun = new Fun();
    1
    2
    3
    4

# js 执行机制

单线程，同一个时间只能做一件事

随着H5的发�? ，允�? javaScript 创建多个线程。于�? �? JS 中出现了 同步 �? 异步

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务

JS 的异步是通过回调函数实现�?

  • 普通事件，�? click、resize�?
  • 资源加载，如 load、error�?
  • 定时器，包括 setInterval、setTimeout

执行机制

  1. 先执行栈中的同步任务
  2. 异步任务放入任务队列�?
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读�? 任务队列 中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执�?

主线程会不断的重复获得任务、执行任务，这种机制被称�? 事件循环（event loop�?

# location对象

常见�? location 对象属�?

属�? 返回�?
location.href 获取或者设�? 整个URL
location.host 返回主机 （域名）
location.port 返回端口�? || NULL
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段 #后面的内�?

页面跳转案例

var timer = 5;
setInterval(function(){
    if(timer == 0){
       location.href = 'http://www.yuadh.com';
    } else {
        div.innerHTML = 'last' + timer-- + 'second';
    }
},1000);
1
2
3
4
5
6
7
8

# 获取URL参数

案例

<!-- page 1 -->
<form action="index.html">
    <input type='text' name='uname'>
    <input type='submit' value='登入'>
</form>
1
2
3
4
5
<!-- page 2 -->
<script>
	var params = location.search.substr(1);
    var arr = paras.split('=');
    var div = document.querySelector('div');
    div.innerHTML = arr[1] + 'welcome';
</script>
1
2
3
4
5
6
7

# location方法

对象方法 返回�?
location.assign() �? href 一样，可以正常跳转页面（重定向页面�?
location.replace() 替换当前页面，不记录历史，不能后退页面
location.reload() 重新加载页面，相当于刷新

navigator 对象包含有关浏览器的信息

判断客户端切换页面显�?

if(navigator.userAgent.match(/(phone|windows phone...)/i){
   window.location.href = "../H5/index.html";
}else{
   window.location.href = "../PC/index.html";
}
1
2
3
4
5

# history对象

history对象方法 作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能，参�?1前进1�? �?-1后退一�?
编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48
节点操作
页面操作

← 页面操作→

Theme by Vdoing | Copyright © 2021-2023 yuadh
×