02-JavaScript

导读

• 文档：developer.mozilla.org

一、JavaScript基础

1、输入输出

方法	说明	归属
alert(msg)	弹出警示框	浏览器
console.log(msg)	输出信息	浏览器
prompt(info)	输入信息	浏览器

2、数据类型

• Js是动态语言，变量的数据类型是可以变化的

var x = 10;
x = 'xiaoqing';

2.1、转移字符

• 在字符串中需要转义字符

转义符	解释说明
\n	换行符
\\	反协杠
\‘	单引号
\‘’	双引号
\t	tab 缩进
\b	空格

2.2、NaN

• 非数字

var space = null;
console.log(space + 1);
输出：1

2.3、underfined

• 未定义类型

var str;
console.log(str + "pink");
输出：underfinedpink;

2.4、typeof

• 可以通过typeof获取数据类型

var num = 10;
console.log(typeof num);
输出：number
var num = true;
console.log(typeof num);
输出：boolean
var num = undefined;
console.log(typeof num);
输出：undefined
var num = null;
console.log(typeof num);
输出：object
var num = 'pink';
console.log(typeof num);
输出：Strign

2.5、转换成字符串

方法	说明
toString()	转成字符串
String()强制转换	转成字符串
加号拼接字符串	和字符串拼接的都是字符串

2.6、转化成数字型

方法	说明	备注
parseInt(String)函数	将String转换成int类型	会将浮点数向下取整；会将多余的单位去掉；若前面有其它字符直接NaN
parseFloat(String)函数	将String转换成浮点类型	会将多余的单位去掉；若前面有其它字符直接NaN
Number()强制转换函数	强制转换成数值型	无
js隐式转换（- * /）	利用算数运算隐式转换为数值型	会将原来的字符串转换成int类型再进行运算console.log(‘100’ - 0);

2.7、转换成布尔类型

方法	说明	案例
Boolean()函数	将其他类型转换成布尔类型	Boolean(’true‘)

• 代表空、否定的数值会呗转换成false，如 ‘’、0、NaN、null、undefined
• 其余数值都会被转换为true

console.logp(Boolean('')); false
console.logp(Boolean(0)); false
console.logp(Boolean(NaN)); false
console.logp(Boolean(null)); false
console.logp(Boolean(undefined)); false
console.logp(Boolean('小白')); true
console.logp(Boolean(12)); true]

3、运算符

1、等号的使用

符号	作用	用法
=	赋值	给变量赋值
==	判断	判断两边数值是否相等（注意此时有隐式转换）
===	全等	判断两边的值和数据类型是否完全相同

//2、== 的使用
console.log(3 == 5); false
console.log('pink' == '刘德华'); false
console.log(18 == 18); true
console.log(18 == '18'); true
console.log(18 != 18); false
//3、=== 数据类型和数值都是要保持一致
console.log(18 === 18); true
console.log(18 == '18'); false

2、运算优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – ！
3	算数运算符	先*/
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 ||
7	赋值运算符	=
8	逗号运算符	，

4、流程控制-分支

5、数组

var arr = new Array();
var arr = [];
var arr1 = [1,2,'pink',true];

6、函数

方法	说明	备注
getSum(a,b)	将a到b的所有数值相加

1、声明函数

//第一种常用方式
function sayHi(){
    console.log('hi~~');
}
//第二种可以将返回值赋值给变量
var getSum = function (){
    return 100;
}

2、arguments使用

• arguments是用来存放实参的数组，可以使用数组的方式进行访问

function fn(){
    consolo.log(arguments);
}
fn(1,2,3);

7、作用域

js中不存在块级作用域，if {} for {}

if(3 < 5){
    var num = 10;
}
consolo.log(num) // 10

作用域链

• 采取就近原则来查找变量

<script>
	var num = 10;
	function fn() {
        var num = 20;
        function fun(){
            console.log(num); // 20;
        }
    }
	
</script>

8、预解析

• 我们js引擎运行js 分为两步：预解析、代码执行
  • 预解析js 引擎会把js里面所有得 var 还有function 提升到当前作用域的最前面
  • 代码执行 按照代码书写的顺序从上往下执行
• 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
  • 变量提升：就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操纵
  • 函数提升：就是把所有的函数声明提升到当前作用域的最前面 不调用函数

//问题一
console.log(num); 
var num = 10;
------预处理------
var num;
conosle.log(num);
num = 10;
结果：undefined

//问题二
fn()
function fun(){
    console.log(11);
}
//结果：11

//问题三
fun();
var fun =  function(){
    console.log(22)
}
-----预处理-----
var fun;
fun();
function fun(){
    console.log(22);
}
//答案：报错

//问题四
f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){
    var a = b = c = 9;
    console.log(a);
    console.log(b);
}
----预处理----binaliang
function f1(){
    var a; // 局部变量
    a = b = c = 9; // b and c 相当于全局变量
    console.log(a); 9
    console.log(b); 9
    console.log(c); 9
}
f1();
console.log(c); 9
console.log(b); 9
console.log(a); // 因为a是局部变量，所以是error
】

• 糖：旺仔四袋
• 水：椰子水24 两箱、王老吉24 四箱、花生牛奶 两箱

9、对象

创建对象

var ovj = {
    username = '张三丰',
    age: 18,
    sex: '男',
    sayHi: function(){
        console.log('h1~')
    }
}

构造函数

• 不需要return

function Star(username,age,sex){
    this.name = username;
    this.age = age;
    this.sex = sex;
    this.sing = function(song){
        console.log(song);
    }
}
var temp = new Star('sdaf',123,'男');
temp.sing('冰雨');

遍历对象

for(var k in obj){
    console.log(k); // k变量输出得到的是属性名
    console.log(obj[k]) // obj[k]得到的是属性值
}

10、内置对象

1、Date日期

1.1、使用

var data = new Date();
console.log(data); // 返回当前系统的时间
var data1 = new Date(2019,10,1);
console.log(data1); //  返回的是11月 不是 10月
var data2 = new Date('2019-10-1 8:8:8');
console.log(date2); 

1.2、格式化

function getTime() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    var s = time.getSeconds;
    return h + ':' + m + ':' + s;
}

1.3、获得Date总的毫秒数

//1、
var date = new Date();
consolo.log(date.valueOf());
console.log(date.getTime());
//2、常用方法
var date = +new Date();
console.log(date);
//3、H5 新增的
console.log(Date.now());

2、数组

数组的创建

var arr = [1,2,3];
console.log(arr[0]);
//2、
var arr = new Array(2); // 数组的长度是二
//3、
var arr = new Array(2,3);
console.log(arr); // [2,3]

判断数据类型

• 判断数组有两个办法，一个是instanceof另外一个则是Array.isArray(arr)

//1、
var arr = [];
var obj = {};
console.log(arr instanceof Array);
//2、
console.log(Array.isArray(arr));

添加和删除元素

方法	说明	返回值
push(参数1,…)	在数组的末尾添加元素	返回的是添加元素过后的数组长度
pop()	删除数组最后的一个元素	返回的是删除元素的数值
unshift(参数一,…)	想数组的开头添加一个元素或者是多个元素	返回新数组的长度
shift()	删除数组的第一个元素	返回的是删除元素的数值

数组的排序

方法	说明
arr.reverse()	数组反转
arr.sort()	数组按照指定的方式进行排序（默认值比较第一个数字）

var arr = [13,4,77,1,7];
arr.sort(function(a,b){
    return a-b;
})

数组索引方法

• 如果元素重复则返回第一个所索号

方法	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号，如果不存在则返回-1
lastIndex()	在数组中的最后一个的索引	如果存在返回索引号，如果不存在则返回-1

案例

• 去除重复的元素

function unique(arr){
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(newArr.indexOf(arr[i]) === -1 ){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

转换成字符串

方法	说明	返回值
toString	转换成字符串	字符串
join（‘分隔符’）	可以通过自定的分隔符来转换成字符串	字符串
concat()	连接两个或者多个数组 不影响原数组	返回一个新的数组
slice()	数组截取slice(begin,end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始，要删除个数)	返回被删除项目的新数组，注意这个会影响原数组

3、字符串

• 查找字符串“aksdjflajsdlfkj”中所有a的位置以及次数

var index = str.indexOf('a');
while(index !== -1){
	console.log(index);
	index = str.indexOf('a',index + 1);
}

根据位置返回字符

方法名	说明	使用
charAt(index)	返回指定位置的字符（index 字符串的索引号）	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码（index索引号）	str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML5
o[‘属性名’]	判断该对象中是否存在该属性	o[‘sex’]

案例

• 找到"aksdjflajsdlfkj"中出现次数最多的字符

var a = {};
for(var i = 0; i < str.length; i++){
    var data = str.charAt(i);
    if(a[data]){
        a[data]++;
    }else{
        a[data] = 1;
    }
}
var max = 0;
var item = '';
for(var k in a){
    if(max < a[k]){
        item = k;
        max = a[k];
    }
}

字符串操作方法

方法名	说明
concat(str1,str2)	拼接字符串
substr(str,length)	从start位置开始，length 取得个数重点记住这个
slice（str,end）	从start位置开始，截取到end位置（不包括end）
subString（start,end）	跟slice一样，但是不接受负数
replace（‘被替换的字符’，‘字符’）	替换字符
split（‘分隔符’）	将字符转换成数组
toUpperCase()	转换成大写
toLowerCase()	转换成小写

11、简单类型与复杂类型

• 简单数据类型：是存放在栈里面 里面直接开辟一个空间存放的是值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jEIu45jH-1678617038938)(D:\01_Software\03-markdownImages\image-20221231103442526.png)]

• 复杂数据类型：首先在栈里面存放地址 十六进制 然后这个地址指向堆里面的数据
• 从新的赋值会直接影响堆里面的数据的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4uoRYlKa-1678617038939)(D:\01_Software\03-markdownImages\image-20221231110428793.png)]

二、Web APIS

1、DOM

获取页面元素

• 根据 ID 获取
• 根据标签名获取
• 通过 HTML5 新增的方法获取
• 特殊元素获取

根据 ID 获取

• console.log()：打印我们返回的元素对象 更好的查看里面的属性和方法

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

console.dir(time);

根据标签名获取

• 得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
• 得到元素对象是动态的
• 是以伪数组的形式存储的

var ol = document.getElementByTagName('ol');
var lis = ol[0].getElementByTagName('li');
console.log(lis[0]);

根据类名来获取元素

var boxs = document.getElementByClassName('box');
cn

通过 HTML5 新增的方法获取

• document.querySelector(‘id或者元素标签’)：返回指定选择器的第一个元素对象
  • 里面的选择器需要加符号：.box/#nav

var box = document.querySelector('.box');
var nav = document.querySelector('#nav');

• document.querySelectorAll(‘li’)：返回指定选择器的所有元素对象集合

var allBox = document.querySlectorAll('.box');

特殊元素获取

• 获取body元素

var body = document.body 

• 获取html元素

document.documentElement

事件基础

事件三要素

• 事件源：事件被触发对象

  • var btn = document.getElementByid('btn')
    

• 事件类型：事件被触发什么事件，比如鼠标单点

• 事件处理程序：通过一函数赋值的方式 完成

  • btn.onclick = function(){ alert('点秋香') }
    

操作元素

鼠标事件	触发条件
onclick	鼠标点击左键
onmouseover	鼠标经过
onmouseout	鼠标离开
onfocus	获取鼠标焦点
onblur	市区鼠标焦点
onmousemobe	鼠标移动触发
onmouseup	鼠标弹开
onmousedown	鼠标按下

改变元素内容

• element.innerText：从起始位置到终止位置的内容，但它取出html标签，同时空格和换行也会被去掉
• element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。

var div = document.querySelctor('div');
div.innerText = '2019-06-06';

• InnerText和InnerHTML区别

  • innnerText：不识别html标签，同时空格和换行也会被去掉
  • InnerHTML：识别html标签

• 案例：根据按钮更换照片

var a = document.getElemenetById('a');
var b = document.getElemenetById('b');
var img = document.querySelector('img');
a.onclick = function(){
    img.src = 'images/b.jpg';
}
b.onclick = function(){
    img.src = 'images/a.jpg';
}

• 案例：根据不同的时间段选择不同的照片

var img = document.querySelector('img');
var img = document.querySelector('div');
var date = new Date();
var h = date.getHours();
if(h < 12){
    div.innerHTML = '早上好';
}else if(h < 18){
    div.innerHTML = '中午好';
}else{
    div.innerHTML = '晚上好';
}

表单元素的属性操作

btn.onclick = function(){
    input.value = '被点击了';
    this.disabled = true;//禁用按钮
}

• 案例显示密码

eye.onclick = function(){
    if(flag == 1){
        img.src = 'open.img';
        flag = 0;
        input.type = 'text';
    }else{
        img.src = 'cloes.img';
        flag = 1;
        input.type = 'password';
    }
}

修改样式属性

• js 修改的样式操作，产生的是行内样式，Css权重比较高

1、emleemnt.style 行内样式操作

2、element.className 类名样式操作

div.onclick = function(){
    this.style.backgourdCorlor = 'pink';
}

• 案例：隐藏盒子

btn.onclick = function(){
    box.style.display = 'none';
}

• 案例：精灵图用法

var lis = document.querySelectorAll('li');
for(var i = 0 ;i < lis.length; i++){
    lis[i].style.backgourPosition = '0 -'+44 * i +'px';
}

排他思想

var btns = document.querySelctoryAll('button');
for(var i = 0; i < btns.length; i++){
    btns[i].onclick = function(){
        for(var i = 0; i < btns.length; i++){
             btns[i].style.backgroudColor = '';
        }
        this.style.backgroundColor = 'pink';
    }
}

切换背景图

var imgs = document.querSelector('div').querSelectorAll('img');

for(var i = 0; i < imgs.length; i++){
    imgs[i].onclick = function(){
        document.body.style.backgroundImage = 'url('+this.src+')';
    }
}

表单隔行变色

var trs = document.querySelectAll('tr');
for(var i = 0; i < trs.length; i++){
    trs[i].onmouseover = function(){
        this.style.backgourndColor('pink');
    }
    trs[i].onmouseout = function(){
        this.style.backgourndColor('');
    }
    
}

全选按钮

• this.checked：可以获取复选框的状态

var checkboxAll = document.querySelctory('.cbAll')
var checkboxs = document.querySelectory('tbody').querySlectoryAll('input');
checkboxAll.onclick = function(){
    for(var i = 0; i < checkboxs.length; i++){ 
        checkboxs[i].checked = this.checked;
    }
}

for(var i = 0; i < trs.length; i++){
    var falg = true;
    checkboxs[i].onclick = function(){
       for(var i = 0; i < trs.length; i++){
           if(!checkboxs[i].checked){
               flag = false;
               break;
           }
       }
       checkboxAll.checked = flag;

    }
}

自定义属性的操作

1、获取属性值

• element.属性 获取属性值
• element.getAttribute(‘属性’)

区别

• element.属性 获取内置属性值
• element.getAttribute(‘属性’); 主要获取自定义的属性数值

2、设置属性值

• element.属性 = ‘值’
• element.setAttribute(‘属性’,‘数值’);

Tab切换导航栏

var navs = document.querySelectoryAll('li');
var divs = docuemnt.querySelectoryAll('div');
for(var i = 0; i < navs.length; i++){
    navs[i].onclick = function(){
        //1、导航栏切换更换底色
        for(var i = 0; i < navs.length; i++){
            navs[i].style.backgrouedColor = '';
        }
        this.style.backgrouedColor = 'red';
        //2、显示出导航栏相对应的模块
        for(var i = 0; i < navs.length; i++){
            divs[i].style.display = 'none';
        }
        divs[i].style.display = 'bolck';
    }
}

H5 自定义属性

• 自定义属性目的：是为了保存并使用数据

1、设置 H5 自定义属性

<div data-index = " 1 "></div>

2、获取 H5 自定义属性

• 兼容性获取：element.getAttribute(‘data-index’);
• H5新增element.dataset.index 或者 element.dataset[‘index’] ie11才支持

结点操作

父结点

var node = document.querySelector('div');
var parent = node.parentNode;

• parentNode属性返回某结点的父结点，注意是最近的一个父结点
• 如果指定的节点没有父结点则返回null

子节点

• parentNode.childNodes 返回包括指定节点的子节点，包括文本节点（不提倡使用）

parentNode.childNodes;

• children：获取所有的子元素结点（推荐使用）
  • parentNode.firstChildren：获取子元素的第一个文本结点或这个是元素结点（不推荐）
  • parentNode.firstElementChild：返回第一个子元素结点（IE9以上）
  • parentNode.lastElementChiled：返回最后一个子元素结点（IE9以上）
• 实际开发

var ol = document.querySelectory('ol');
第一个节点：ol.children[0]
最后一个节点：ol.children[ol.children.length - 1];

下拉菜单

var nav = document.querySelectory('.nav');
var lis = nav.children;
for(var i = 0; i < lis.length; i++){
 	 lis[i].onmouseover = function(){
         this.children[1].style.display = 'bolck';
     } 
     lis[i].onmouseover = function(){
         this.children[1].style.display = 'none';
     } 
    
}

兄弟节点

• div.nextSibling：下一个兄弟节点
• div.previousSibing：上一个兄弟节点

2、元素节点

• div.nextElementSibling：下一个兄弟节点
• div.previousElementSibing：上一个兄弟节点

创建节点

• append：在元素的末尾追加元素
• insertBefore：可以指定在元素的某个位置添加

var li = document.createElement('li');
var ul = document.querySelector('ul');
ul.appendChild(li);
ul.insertBefore(li,ul.children[0]);

案例：留言框

var btn = document.querySelector('button');
var text = document.querySlector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function(){
    //当点击发布时创建小li
    var li = document.createElement('li');
    li.innerHTML = text.value;
    ul.appendChild(li);
}

删除节点

node.removeChild(child);

删除评论

var btn = document.querySelector('button');
var text = document.querySlector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function(){
    //当点击发布时创建小li
    var li = document.createElement('li');
    li.innerHTML = text.value + "<a href="javascript:;">删除</a>";
    ul.appendChild(li);
    var as = document.querySelectory('a');
    for(var i = 0; i < as.length; i++){
        as[i].onclick = function(){
            ul.removeChild(this.parentNode);
        }
    }
}

赋值节点

• node.cloneNode(fase)：浅拷贝，只会复制元素的结构
• node.cloneNode(true)：深拷贝，克隆整个元素

var lili = ul.children[0].cloneNode();

动态创建单元格

var users = [
{
  name: '张三丰',
  age: 18,
  sex: '男'
},
{
  name: '张三丰',
  age: 18,
  sex: '男'
},
{
  name: '张三丰',
  age: 18,
  sex: '男'
},
]
var tbody = document.querySelector('tbody');
//1、动态生成tr
for(var i = 0; i < users.length, i++){
    var tr = document.createElement('tr');
    tbody.appendChild(tr);
    //2、添加列属性
    for(var k in users[i]){
        var td = document.createElement('td');
        td.innerHTML = users[i][k];
        tr.appendChild(td);
    }
    var del = document.createElement('td');
    del.innerHTML = '<a href="javascript:;">删除</a>';
    tr.appendChild(del);
}

//删除操作
var as = document.querySelector('a');
for(var i = 0; i < as.length;i++){
    as[i].onclick = function(){
        //删除所在节点的父元素结点
        tbody.removeChild(this.parentNode.parentNode);
    }
}

三种动态创建元素区别

• document.write（）
• element.innerHTML
• document.createElement（）

区别

1、document.write 是直接将内容跟写入页面的内容流，但是文档流执行完毕，则它会导致整个页面重绘。

2、innerHTML 是将内容写入某个 DOM 结点，不会导致页面全部重绘

3、innerHTML 创建多个元素效率更高（不要拼接字符串，采用数组形式拼接）

4、createElement() 创建多个元素效率稍低一点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 createElement 高

事件高级

addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, userCapture]);

• type：事件类型字符串，比如click、ouseover，注意这里不要带on
• listener：事件处理函数，事件发生时，会调用该监听函数
• userCapture：可选参数，是一个布尔值，默认false。

var btn = document.querSelector('button');
btn.addEventListener('click',funtion(){
        alter('你好');
})

removeEventListener 事件删除方式

var btn = document.querSelector('button');
btn.addEventListener('click',fn);
function fn(){
    alert('你好');
    removeEventListener('onclick',fn);
}

事件流

• 事件发生事结点之间按照特定的顺序传播，这个传播过程就是DOM事件流

注意：

1、捕获：document -> html -> father -> son

2、冒泡：son -> father -> html -> document

3、js 代码中只能执行其中一个阶段

4、onclick 和 attachEvent 只能得到冒泡阶段

5、addEventListener(type, listener[, useCapture])第三个参数如果时 true ，表示在事件捕获阶段调用事件处理程序；如果false（默认为false），标识在事件冒泡阶段调用事件处理函数

6、冒泡事件有时候会代来麻烦，有时候又会帮助很巧妙地左某些事件

事件对象

• event：事件对象，该事件对象是内置对象，可以得到鼠标相关信息
• 兼容性： e = e || windown.event

div.onclick = function(event) {}

事件对象的属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.type	返回触发事件的类型 比如 click mouseover 不带on
e.cancel	该属性阻止冒泡 非标准
e.returnValue	该属性 阻止默认事件 比如：不让连接跳转
e.preventDefault()	该方法 阻止默认事件 标准 比如：不让链接跳转
e.stopPropagation()	阻止冒泡 标准

事件委托/委派

• 不是给每个子节点添加事件，儿是将事件监听器设置在父结点上，通过冒泡原理影响到每一个子节点上。

<ul>
    <li>asdljkldjf</li>
    <li>asdljkldjf</li>
    <li>asdljkldjf</li>
    <li>asdljkldjf</li>
</ul>
var ul = docuemnt.querySelector('ul');
ul.addEventListener('click', functionc(){
    alter('给所有的li添加了事件元素');
})

鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Chb10Kth-1678617038940)(D:\01_Software\03-markdownImages\image-20230104090654654.png)]

• 禁用鼠标右键

document.addEvetListener('contextmenu', function(e){
         e.preventDefault();                
})

• 禁止选文字 selectstart

document.addEventListner('selectstart', function(e){
        e.preventDefault();                 
})

键盘事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CYZ08INA-1678617038940)(D:\01_Software\03-markdownImages\image-20230104091300596.png)]

• keyon和keydown：是不区分字母的大小写的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mHPCahjb-1678617038941)(D:\01_Software\03-markdownImages\image-20230104091924848.png)]

案例：京东搜索框

var serach = document.querySelectory('input');
document.addEvenetListener('keyup',function(){
    if(e.keyCode === 83){
        serach.focus();
    }
})

案例：京东搜索框放大效果

var serach = document.querySelector('input');
var fangda = document.querySelector('div');
serach.addEventListener('keyup',funtion(){
    //当用户按下s键快速获得焦点  
    if(e.keyCode === 83){
        serach.focus();
    }
	//当没有文字时就将放大域隐藏
	if(this.value == ''){
       fangda.style.display = 'none';
    }else{
       fangda.style.display = 'block';
       fangda.value = this.value;
    }	
})
//当搜索框焦点时放大框隐藏
	serach.addEventListener('blur',function(){
        fangda.style.display = 'none';
    })
	serach.addEventListener('focus',function(){
        fangda.style.display = 'bolck';
    })

2、BOM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k119gZQo-1678617038941)(D:\01_Software\03-markdownImages\image-20230104104429087.png)]

window 对象的常用事件

窗口加载事件

• 当页面元素全部图片加载完以后才会执行处理函数

window.onlocad = function(){}
windown.addEvenListener("load",function(){});

• 只要dom元素加载完以后就会执行

document.addEventListener('DOMContentLoaded', function(){
    alter(33);
})

调整窗口大小事件

window.addEventListener('resize',function(){
    alter('变化');
})

案例：达到一定宽度就隐藏盒子

window.addEventListener('load',function(){
    var div = document.querySlector('div');
    window.addEventListener('resize',function(){
        if(window.innerWidth <= 800){
            div.style.display = 'none';
        }else{
            dis.style.display = 'block';
        }
    }
    
})

定时器

setTimeout() 定时器

1、window.setTimeout(回调函数，延时毫秒)；

//1、
setTimeout(function(){
    console.log('时间到了')
},2000)

//2、
function timeOut(){
    console.log('123')
}
var time1 = setTimeOut(timeOut,2000);

2、停止定时器

clearTimeOut(time1);

setInterval() 定时器

1、window.setInterval(回调函数，延时毫秒)

//1、
setInterval(function(){
    console.log('时间到了')
},2000)

//2、
function timeOut(){
    console.log('123')
}
var time1 = setInterval(timeOut,2000);

2、暂停定时器

window.clearInterval(intervalID);

两个定时器的区别

• setTimeout：延时事件到了，就去调用这个回调函数，只调用依次 就结束这个定时器
• setInterval：会一直调用该函数

案例：倒计时

var targetTime = +new Date('1919-10-10');
function time(){
    var curTime = +new Date():
    timeData = (curTime - targetTime) / 1000; // 剩余秒数
    var day = timeData / 60 / 60 / 24;
    day = day < 10 ? '0' + day : day; 
    var hour = timeData / 60 / 60 % 24;
    hour = hour < 10 ? '0' + hour : hour; 
    var minute = timeData / 60 % 60;
    minute = minute < 10 ? '0' + minute : minute; 
    var second = timeData % 60;
    second = second < 10 ? '0' + second : second; 
}
time();
setInterval(time(),1000);

案例：发送短信

//获取发送按钮
var btn = docuemnt.querySelector('button');
//给发送按钮设定点击事件，点击按钮时
btn.addEventListener('click',function(){
    btn.disabled = true;
    var time = 3;
    var timeOut = setTimeOut(function(){
        if(time == 0){
            time = 3;
            btn.disabled = false;
            btn.innerHTML = '发送';
            clearTimeOut(timeOut);
        }
        time--;
        btn.innerHTML = '剩余'+time+'秒';
        
    },1000)
})

JS执行机制

• 为了解决js单线程的问题，利用多喝CPU的计算能力，HTML5提出 Web Worker 标准，允许 JavaScript 脚本多个线程。于是js中出现了同步和异步。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RcNiI1gX-1678617038941)(D:\01_Software\03-markdownImages\image-20230104124144828.png)]

执行机制

1、先执行执行栈中的同步任务。

2、异步任务（回调函数）放入任务队列中

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wue76y4d-1678617038942)(D:\01_Software\03-markdownImages\image-20230104124526059.png)]

异步任务

• 一般而言，异步任务有以下三种类型：

1、普通时间，如click、resize等

2、资源加载，如load、error等

3、定时器，包括setInterval、setTimeout等L

location 对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0iglRbrW-1678617038942)(D:\01_Software\03-markdownImages\image-20230104142906701.png)]

localtion对象的属性

location对象属性	返回值
localtion.href	获取或者设置整个URL
loclation.host	返回主机（域名） www.itheima.com
location.port	返回端口号 如果未写返回 空字符串
localtion.pathname	返回路劲
localtion.search	返回参数
localtion.hash	返回片段 #后面内容 常用于链接 锚点

localtion对象的方法

方法	说明
localtion.assign(“www.baidu.com”)	重定向（可以后退）
localtion.replace(“www.baidu.com”)	替换当前页面不能后退
location.reload()	刷新页面，如果有形参true,就相当于强制刷新（Ctrl + F5）

案例：页面跳转倒计时

var times = 5;
setInterval(function(){
    if(times){
        localtion.href = 'www.baidu.com';
    }else{  
        div.innerHTML = '还有' + times + '秒跳转链接';
        times--;
    }
    
},5)

案例：数据不同页面的传递

console.log(location.serach); // ?username=andy
var namePath = location.serach.substr(1);
var arr = username.split('=');
var userName = arr[1] 

Navigator对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T2wlpTWd-1678617038942)(D:\01_Software\03-markdownImages\image-20230104145323324.png)]

history对象

方法	说明
back()	可以退后功能
forward()	前进功能
go（参数）	前进后退功能 参数如果是1就是前进 如果是-1就是后退

三、PC 端网页特效

元素偏移量 offset 系列

offset系列属性	作用
element.offsetParent	返回该元素带有定位的父结点
element.offsetTop	返回 元素相对带有定位父元素上边框的偏移
element.offsetLeft	返回 元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度。返回不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度。返回不带单位

offset和style区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NfELPObq-1678617038943)(D:\01_Software\03-markdownImages\image-20230104150711327.png)]

案例：获取鼠标在盒子内的坐标

box.addEventListener('click',function(e){
    var pagex = e.pageX;
    var pagey = e.pageY;
    var x = pagex - this.offsetLeft;
    var y = pagey - this.offsetTop;
})

案例：模态框的拖拽

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BNlo9l40-1678617038943)(D:\01_Software\03-markdownImages\image-20230104152408499.png)]

var title = document.querySelect('.title');
var box = document.querSelect('.box');
title.addEventListener('mousedown',function(e){
    //获取鼠标距离盒子的距离
    var x = e.pageX - title.offsetLeft;
    var y = e.pageY - title.offsetTop;
    //当鼠标移动
    function move(e){
        box.style.left = e.pageX - x;
        box.style.top = e.pageY - y;
    }
    document.addEventListener('mousemove',move());
    //当鼠标弹开
    document.addEventListener('mouseup',function(){
        document.removeEventListener('mousemove',move())
    })
})

元素的可视区 client 系列

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容的宽度，不含边框，返回数值不带单位

立即函数

//1、立即函数：不需要调用，立刻执行
function fn(){
    console.log(1);
}
fn();
//2、写法
(function(){}()) 或者 (function(){})()
(function(a,b){
    console.log(a+b);
})(1,2);

pageshow事件跟load事件的区别

• load：在火狐浏览器中，会缓存当前的页面，当后退事件不能再次进行load监听的事件
• pageshow：：可以避免火狐浏览器的这种情况发生

元素 scroll 系列属性

属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

案例：修改侧边栏样式

var banner = document.querySelector('.banner');
var slider = document.querySelector('.slider');
var main = docuement.querSelector('.main');
var bannerScrollTop = banner.scrollTop;
var sliderTop = slider.offsetTop - bannerScrollTop;
var mainScrollTop = main.scrollTop;
var goback = document.querySelector('.goback');
document.addEventListener('scroll',function(){
    //当页面到达banner时，改成固定定位
    if(window.pageYOffset >= bannerScrollTop){
        slider.style.position = 'fix';
        slider.style.top = sliderTop + 'px';
    }else{
        slider.style.top = '300px';
        slider.style.postition = 'absolute';
    }
    
    if(window.pageYoffset >= mainScrollTop){
        goback.style.display = 'block';
    }else{
        goback.style.display = 'none';
    }
})

三大系列总结

大小对比	作用
element.offsetWidth	返回自身包括padding、边框、内容去的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding、内容去的宽度，不含边框，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位

他们主要用法：

1、offset 经常用于获取元素位置 offsetLeft offsetTop

2、client 经常用于获取元素大小 clientWidth clientHeight

3、scroll 经常用于获取滚动距离 scrollTop scrollLeft

4、注意页面滚动的距离通过 window.pageXoffset 获取

mouseenter 和mouseover的区别

mouseenter 鼠标事件

• 当鼠标移动到元素上时就会触发 mouseenter 时间

动画函数封装

动画原理

• 元素必须要有定位

var box = document.querySelector('.box');
var time = setInteval(function(){
    if(box.style.left >= 400){
        clearInterval(time);
    }
    box.style.left = box.style.left + 1;
},1000)

动画函数封装

function animate(obj,target){
    //为了防止多次开启定时器
    clearInterval(obj.name);
    //取名为了开启多余的空间
    obj.name = setInterval(function(){
        //缓慢减速的效果
        var step = Math.ceil((target - obj.offsetLeft) / 10);
        if(obj.offsetLeft >= target){
        	clearInterval(time);
   		}
    	obj.style.left = obj.offsetLeft + step + 'px';
    },20)
})

回调函数

function animate(obj,target,callback){
    //为了防止多次开启定时器
    clearInterval(obj.name);
    //取名为了开启多余的空间
    obj.name = setInterval(function(){
        //缓慢减速的效果
        var step = Math.ceil((target - obj.offsetLeft) / 10);
        if(obj.offsetLeft >= target){
        	clearInterval(time);
            //回调函数
            if(callback){
            	callback();    
            }
   		}
    	obj.style.left = obj.offsetLeft + step + 'px';
    },20)
})

案例：滑动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t86i8TAo-1678617038943)(D:\01_Software\03-markdownImages\image-20230105210532202.png)]

sliderbar.addEventListener('mousenter',function(){
    animate(sliderbar,-(sliderbar.offsetWidth - con.offsetWidth),function(){
        sliderbar.innerHTML = '➡';
    });
})
sliderbar.addEventListener('mouseover',function(){
    animate(sliderbar,0,function(){
        sliderbar.innerHTML = '⬅';
    });
})

常用网页特效案例

轮播图

1、当鼠标经过两边箭头显示

2、动态生成小圆圈

3、小圆圈的排他思想

4、点击小圆圈轮播图图片移动

5、两侧箭头点击事件

• 当点击到最后一张图片时会快速的跳到第二张图片

6、克隆第一张图片

7、点击右侧按钮圆圈的样式会跟着变化

8、解决bug

9、自动播放

• 每两秒调用事件

document.addListener("load",function(){
    //获取两个箭头的信息,以及轮播图的信息
    var focus = document.querySelector(".focus");
    var arrow_l = document.querySelector(".arrow_l");
    var arrow_r = document.querySelector(".arrow_r");
    var imgWidth = focus.offsetWidth;
    //1、当鼠标经过焦点图两边箭头显示
    focus.addListener("mouseenter",function(){
        arrow_l.style.display = "block";
        arrow_r.style.display = "block";
    })
    //鼠标离开隐藏
    focus.addListener("mouseleave",function(){
        arrow_l.style.display = "none";
        arrow_r.style.display = "none";
    }
    //2、动态生成小圆圈
    var ul = document.querySelector("ul");
    var ol = document.querySelector("ol");
    for(var i = 0; i < ul.children.length; i++){
        var li = createElement("li");
        //设置属性
        li.setAttribute("index");
        ol.appendChild(li);
        //3、小圆圈的排他思想
        li.addListener("click",function(){
           for(var i = 0; i < ol.children.length; i++){
               ol.children[i].className = "";
           }
           this.className = "current";
           //4、点击小圆圈轮播图图片移动
           var index = this.getAttribute("index");
           animate(ul,-index * imgWidth);
           circle = index;
           num = index;
        })
    }
    //把ol的第一个小li设置类名
    ol.children[0].className = "current";
    //克隆第一张图片
   	var clone = ul.children[0].clone(true);
    ul.appendChild(clone);
    //5、两侧箭头点击事件
    var num = 0;
    var circle = 0;
    arrow_r.addListener("click", function(){
        num = 
        if(num == ul.children.length){
            ul.style.left = 0;
            num = 0;
        }
    	num++;
        animate(ul,- num * imgWidth);
        
        circle++;
        for(var i = 0; i < ol.children.length; i++){
        	ol.children[i].className = '';
        }
        ol.children[circle].className = "current";
    )}
    arrow_l.addListener("click", function(){
    	num--;
        animate(ul,- num * imgWidth);
    )}
    //9、自动调用点击事件
    var timer = setInterval(function(){
        arrow_r.click();
    },2000);	
}) 

节流阀

• 防止轮播图按钮连续点击造成播放过快。

• 节流阀目的：当傻瓜一个函数动画内容执行完毕，再去执行下个函数动画，让事件无法连续触发。

我们可以设置一个变量 var flag = true;

if(flag){ flag = false; do something }

关闭水龙头

• 李彤回调函数 动画执行完毕，flag = true 打开水龙头

筋斗云

1、当鼠标经过云彩就到目标位置

2、当鼠标离开云彩回到起始位置

3、点击导航栏时将云彩固定到当导航栏

var cloud = document.querySelector(".cloud");
var navs = documentt.querySelectorAll(".nav")
var current = 0;
//1、当鼠标经过云彩就到目标位置
for(var i = 0; i < navs.children.length; i++){
    //1、当鼠标经过云彩就到目标位置
    navs.children[i].addListener("mouseenter",function(){
        animate(cloud,this.offsetLeft);
    })
    //2、当鼠标离开云彩回到起始位置
    navs.children[i].addListener("mouseenter",function(){
        animate(cloud,current);
    })
    //3、点击导航栏时将云彩固定到当导航栏
    navs.children[i].addListener("click",function(){
        current = this.offsetLeft;
    })
}

四、移动端

触屏事件

触屏概述

触屏touch事件	说明
touchstart	手指触摸到一个 DOM 元素时触发
touchmove	手指在一个 DOM 元素上滑动时触发
touchend	手指从一个 DOM 元素上移开时触发

触屏对象

在实际开发中更多使用targetTouches

触摸系列	说明
touches	正在触摸屏幕的所有手指的列表
targetTouches	正在触摸当前 DOM 元素上的手直的一个列表
chagnedTouches	手指状态发生了改变的列表 从无到有 或 从有到无

拖动元素

div.addEventListener("touchstart", function (e) {
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        })
        //盒子当前的位置
        div.addEventListener("touchmove", function (e) {
            moveX = e.targetTouches[0].pageX - startX;
            moveY = e.targetTouches[0].pageY - startY;
            this.style.left = moveX + x + "px";
            this.style.top = moveY + y + "px";
            console.log(moveX);
            console.log(moveY);
        })

移动端常见特效

返回顶部

var goBack = docuemtn.querySelector(".goBack");
var nav = document.querySelector(".nav");
window.addEvenListener("scroll",function(){
    if(window.pageYOffset >= nav.offsetTop){
        goBack.style.display = "block";
    }else{
        goBack.style.display = "none";
    }
});
goBack.addEventListener("click".function(){
        windown.scroll(0,0);
})

click 延时解决方案

1、禁用缩放，浏览器禁用默认的双击双方行为并且去掉 300 ms的点击延时

<meta name="viewport" content="user-scalable=no">

2、引入fastclick 插件

网站链接：https://github.com/ftlabs/fastclick/tree/main/lib

常用插件

Swiper 插件的使用

中文官网地址：https://www.swiper.com.cn/

1、引入插件相关文件

2、按照规定语法使用

插件的使用总结

1、确认插件实现的功能

2、去网站查看使用说明

3、下载插件

4、打开demo实力文件，查看需要引入的相关文件，并且引入

5、赋值demo实例文件中的结构html，样式css以及js代码

移动端常用开发框架

Bootstart

• 网站：www.bootcss.com

1、引入jquery的js文件

五、本地存储

本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象JSON。stringfy() 编码后存储

window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口（页面）下载数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key,value);

获取数据：

sessionStorage.getItem(key);

删除数据：

sessionStorage.removeItem(key);

删除所有数据：

sessionStorage.clear();

window.localStorage

1、生命周期永久生效，除非手动删除 否则关闭页面也会存在

2、可以多窗口（页面）共享（同一页面可以共享）

3、 以键值对的形式存储使用
存储数据：

localStorage.setItem(key,value);
//若是对象，则要把对象转换成json格式
localStorage,setItem("person",JSON.stringify(p))

获取数据：

localStorage.getItem(key);
console.log(JSON.parse(person))

删除数据：

localStorage.removeItem(key);

删除所有数据：

localStorage.clear();

案例

1、把数据存入本地存储中

2、关闭页面，也可以显示用户名，所以用到localStorage

3、打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框。

4、当复选框发生改变的时候change事件

5、如果勾选，就存储，否则移除

var username = document.querySelector("#username");
var remember = document.querySelector("#remember");
//如果本地存储中有username 则直接显示
if(localStorage.getItem("username")){
    username.value = localStorage.getItem("username");
    remember.checked = true;
}
//当复选框发生改变的时候change事件
remember.addEventListener("change",function(){
    if(remember.checked){
        localStorage.setItem("username",username);
    }else{
        localStorage.removeItem("username");
    }
})

/lib

常用插件

Swiper 插件的使用

中文官网地址：https://www.swiper.com.cn/

1、引入插件相关文件

2、按照规定语法使用

插件的使用总结

1、确认插件实现的功能

2、去网站查看使用说明

3、下载插件

4、打开demo实力文件，查看需要引入的相关文件，并且引入

5、赋值demo实例文件中的结构html，样式css以及js代码

移动端常用开发框架

Bootstart

• 网站：www.bootcss.com

1、引入jquery的js文件

五、本地存储

本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象JSON。stringfy() 编码后存储

window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口（页面）下载数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key,value);

获取数据：

sessionStorage.getItem(key);

删除数据：

sessionStorage.removeItem(key);

删除所有数据：

sessionStorage.clear();

window.localStorage

1、生命周期永久生效，除非手动删除 否则关闭页面也会存在

2、可以多窗口（页面）共享（同一页面可以共享）

3、 以键值对的形式存储使用
存储数据：

localStorage.setItem(key,value);
//若是对象，则要把对象转换成json格式
localStorage,setItem("person",JSON.stringify(p))

获取数据：

localStorage.getItem(key);
console.log(JSON.parse(person))

删除数据：

localStorage.removeItem(key);

删除所有数据：

localStorage.clear();

案例

1、把数据存入本地存储中

2、关闭页面，也可以显示用户名，所以用到localStorage

3、打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框。

4、当复选框发生改变的时候change事件

5、如果勾选，就存储，否则移除

var username = document.querySelector("#username");
var remember = document.querySelector("#remember");
//如果本地存储中有username 则直接显示
if(localStorage.getItem("username")){
    username.value = localStorage.getItem("username");
    remember.checked = true;
}
//当复选框发生改变的时候change事件
remember.addEventListener("change",function(){
    if(remember.checked){
        localStorage.setItem("username",username);
    }else{
        localStorage.removeItem("username");
    }
})