javascript面试

ECMAScript是JavaScript的标准，JavaScript是ECMAScript的组成

DOM:Document Object Model 文档对象模型

BOM:Browser Object Model 浏览器对象模型

数据类型

基本数据类型Number String boolean Null Undefined

引用数据类型 Object Function Array

typeof:typeof(变量） / typeof 变量

类型转换

Number(),parseInt(),parseFloat()

String() ,toString(),Boolean(),isNaN()是隐式转换，先使用Number()在判断

toFixed(n)保留几位小数

获取元素

document.getElementById()通过Id获取元素获取不到为null

document.getElenemtsByTagName()得到的是集合，得不到为空集合

父元素.getElementsByTagName()

document.getElementsByClassName()得到的是集合，得不到为空集合

父元素.getElementsByClassName()

鼠标事件

onclick 点击事件

ondbclick 双击事件

onmousedown 鼠标按下事件 onmouseup鼠标抬起事件

onmouseover鼠标进入，子元素事件默认传递给父元素（冒泡）

onmouseout鼠标离开(冒泡）

onmouseenter鼠标进入（不冒泡）onmouseleave鼠标离开（不冒泡）

onmousemove 鼠标移动

oncontexmenu 鼠标右击

元素内容

表单元素内容

	获取：表单元素.value

	设置：表单元素.value=值

闭合标签

	获取：元素.innerHTML=值 /  元素.innerText=值

	设置：元素.innerHTML=值 /  元素.innerText=值

	区别：innerHTML可以识别标签，innerText不识别标签

元素样式

• 获取样式: 元素.style.样式名 只能获取行内样式,非行间样式获取不到
• 设置样式: 元素.style.样式名 = 样式值 直接设置在行内
• cssText: 批量设置样式, 覆盖原有行内样式

for-in遍历对象

return

1.把结果返回到函数调用处

2.结束函数执行

3.一个函数只能又一个返回值只能返回一个结果

4.函数没有return默认返回undefined

this

1.全局下表示window对象

2.普通函数表示window对象

3.事件处理函数表示出发事件的对象

4.对象方法中表示对象本身

定时器

/* 
定时器: 间歇定时器, 延迟定时器
间歇定时器: 每间歇固定的时间执行一次函数, 比如: 轮播图,倒计时
延迟定时器: 延迟固定的时间执行一次函数, 执行执行一次, 比如: 广告
*/
// setInterval(函数, 时长)
// setInterval(function () {
//     console.log('setInterval');
// }, 1000);
function fun() {
    console.log('fun');
}
setInterval(fun, 1000);

// setTimeout(函数, 时长): 延迟时长执行一次函数(执行一次)
// setTimeout(function () {
//     console.log('setTimeout');
// }, 1000);
function fun(){
    console.log('setTimeout');
}
setTimeout(fun, 1000);

清除定时器

• intervalId: 添加定时器时, 返回一个定时器的唯一标识符, 从1开始的数字.
• clearInterval(intervalId)
• clearTimeout(intervalId)

string

length

charAt(下标）返回下标对应的字符串

charCodeAt(下标): 返回下标对应的字符编码顺序

indexOf(目标字符串, 下标): 目标字符串在当前字符串对象中首次出现的位置, 第二个参数表示开始查找的位置, 如果没有第二个参数默认从开始位置查找. 如果找不到返回-1.

lastIndexOf(目标字符串, 下标): 目标字符串在当前字符串对象中最后一次出现的位置(从后往前找), 第二个参数表示开始查找的位置, 如果没有第二个参数默认从最后位置查找. 如果找不到返回-1.

substring(start, end): 截取字符串, 从start位置截取到end位置(end截取不到), 如果没有end就从start截取到结束. 如果没有start和end返回字符串本身.

slice(start, end): 截取字符串, 从start位置截取到end位置(end截取不到), 如果没有end就从start截取到结束. 如果没有start和end返回字符串本身.

• 区别1: 如果start和end互换位置, substring可以截取,slice返回空字符串.
• 区别2: 如果出现负数, substring把负数变为0; slice把负数认为是倒数第几个.

substr(start, length): 截取字符串, 从start开始截取, 截取length个.

replace(旧, 新): 使用新内容替换就内容, 返回新字符串, 对原字符串不影响.

toUpperCase(): 转大写, 返回新字符串, 对原字符串不影响.

toLowerCase(): 转小写, 返回新字符串, 对原字符串不影响.

split(分隔符, length): 以分隔符去切割字符串, 返回数组, length表示数组的长度.

trim(): 去除字符串两侧空格

数组array

• push(): 在数组尾部添加元素, 返回数组的新长度.
• pop(): 删除数组尾部元素并返回.
• unshift(): 在数组头部添加元素, 返回数组的新长度
• shift(): 删除头部元素并返回.
• splice(start, deleteCount, items): 删除, 替换, 添加, 返回值为删除的元素组成的数组. splice只写第一个参数表示开始删除的位置, 从当前位置开始删除到结束.splice添加两个参数, 第一个表示开始删除的位置, 第二个表示删除的个数.splice设置是三个参数, 第一个表示开始删除的位置, 第二个表示删除的个数, 第三个表示替换的新元素
• concat(): 数组拼接, 结果返回新数组, 对原数组无影响.
• slice(start, end): 截取数组
• indexOf(): 查找元素首次出现的下标, 找不到返回-1
• reverse(): 倒序
• join(): 把数组拼接成字符串

数组迭代方法

• every(): 对数组进行迭代判断, 如果结果都为true, 则返回true.
• some(): 对数组进行迭代判断, 如果有一个结果为true, 就返回true.
• filter(): 对数组进行迭代判断, 返回条件成立的元素并组成一个新数组.
• map(): 对数组进行迭代, 结果返回新数组
• forEach(): 没有返回值, 就是一个简单的迭代(遍历)

获取元素的方式

• document.getElementById(): 通过id获取元素, 获取单个元素, 如果获取不到返回null. 静态获取
• document.getElementsByTagName(): 通过标签名获取元素, 得到是元素集合, 如果找不到返回空集合. 动态获取
• document.getElementsByClassName(): 通过类名获取元素, 得到是元素集合, 如果找不到返回空集合. 动态获取
• document.querySelector(): 通过选择器获取元素, 获取的是第一个符合条件的元素. 静态获取.
• document.querySelectorAll(): 通过选择器获取元素, 获取的是所有符合条件的元素, 结果是集合. 如果找不到返回空集合. 静态获取.

子节点

// children: 子节点(非标准属性)
console.log(list.children); // HTMLCollection(3) [li, li, li]
alert(list.children.length); // 3

// childNodes: 子节点(标准属性)
console.log(list.childNodes); // NodeList(7) [text, li, text, li, text, li, text]
alert(list.childNodes.length); // chrome: 7  IE: 3

节点属性

• nodeName: 节点名称 (DIV, P, A)
• nodeType: 节点类型 (标签的节点类型是1, 文本节点类型是3)
• nodeValue: 节点内容(文本节点使用)

父节点

• parentNode: 父节点
• offsetParent: 偏移参考父节点, 距离最近的定位的父元素, 如果父元素都没有定位找到body.

其他节点关系

• list.firstElementChild || list.firstChild: 第一个子节点
• list.lastElementChild || list.lastChild: 最后一个子节点
• target.previousElementSibling || target.previousSibling: 上一个兄弟节点
• target.nextElementSibling || target.nextSibling: 下一个兄弟节点

节点操作

• createElement(): 创建节点
• createTextNode(): 创建文本节点
• 父节点.appendChild(子节点): 拼接子节点, 默认拼接到最后
• 父节点.insertBefore(新节点, 标杆节点): 把新节点插入到标杆节点前面
• remove() : 删除节点
• removeChild(): 删除子节点
• 节点.cloneNode(): 复制节点, 接收Boolean参数, true表示复制节点和内容, false只复制节点.
• 父节点.replaceChild(newchild, refchild): 使用新节点替换旧节点

属性

• getAttribute(‘属性名’): 获取属性值
• setAttribute(‘属性名’, ‘属性值’): 设置属性
• removeAttribute(‘属性名’): 移除属性
  • 区别1: 点语法class变为className, getAttribute不需要变
  • 区别2: 开始标签内添加的自定义属性点语法无法直接获取, getAttribute可以

获取表格

// 获取表格
var tb = document.querySelector('table');
console.log(tb); // 整个表格
console.log(tb.tHead); // thead
console.log(tb.tBodies[0]); // tbody
console.log(tb.tFoot); // tfoot
console.log(tb.rows); // 表格中所有的行
console.log(tb.tHead.rows); // thead中的行
console.log(tb.tBodies[0].rows); // tbody中的行
console.log(tb.tFoot.rows); // tfoot中的行
console.log(tb.tBodies[0].rows[0]); // tbody中的第0行
console.log(tb.tBodies[0].rows[0].cells); // tbody中的第0行中的单元格
console.log(tb.tBodies[0].rows[0].cells[0]); // tbody中的第0行中的第0个单元格

表单

• 表单元素获取: 使用form标签.表单元素name属性获取.
• onsubmit: 提交事件, 当表单提交数据时触发, 使用return可以控制提交功能, 默认提交(return true), return false阻止提交.
• onreset: 重置事件, 当表单重置时触发, 使用return可以控制重置功能, 默认重置(return true), return false阻止重置.
• submit(): 提交方法
• reset(): 重置方法
• onfocus: 得到焦点
• onblur: 失去焦点
• oninput(onpropertychange): 内容发生改变时触发
• onchange: 失去焦点并内容发生改变时触发
• focus(): 得到焦点方法
• blur(): 失去焦点方法

BOM

• BOM: Browser Object Model 浏览器对象模型. 核心是window对象.
• window对象不需要声明, 直接使用, 声明的全局变量和函数都是window对象的属性和方法.
• 使用window的属性和方法时, 一般省略window.

系统对话框

• alert(): 系统警告框, 阻断式, 点击确定才会向后执行.
• confirm(): 带有确定和取消按钮的警告框, 确定返回true, 取消返回false.
• prompt(): 输入框

open

• open(): 打开页面 open(url, 打开网页的方式, 网页大小, 是否替换当前页面)
• close(): 关闭页面

history

// history: 历史记录
console.log(window.history);
console.log(history.length); // 历史记录长度
history.back(); // 返回
history.forward(); // 前进
history.go(1); // 跳转 1:前进1 -1:后退1 0:刷新当前页面

BOM事件

• window.onload: 当页面结构和资源加载完毕后调用
• window.onresize: 页面大小发生改变时调用
• window.onscroll: 页面滚动时调用

client

• clientWidth: 可视宽 width+padding
• clientHeight: 可视高 height+padding
• clientLeft: 左边框宽
• clientTop: 上边框宽
• document.documentElement.clientWidth: 屏幕可视宽
• document.documentElement.clientHeight: 屏幕可视高

offset

• offsetWidth: 占位宽 width+padding+border
• offsetHeight: 占位高 height+padding+border
• offsetLeft: 从当前盒子边框外到offsetParent盒子边框内的距离
• offsetTop: 从当前盒子边框外到offsetParent盒子边框内的距离
• offsetParent: 距离自己最近的有定位属性的父元素, 如果父元素没有定位就是body.

scroll

• scrollWidth: 真实内容宽
• scrollHeight: 真实内容高
• scrollLeft: 水平方向滚动的距离
• scrollTop: 垂直方向滚动的距离
• document.documentElement.scrollTop || document.body.scrollTop: 页面滚动的高度

事件对象

/* 
事件:可以被JavaScript监听的行为.
事件函数:事件触发时可以调用的函数.
事件对象:触发事件时浏览器会把本次事件所有相关的信息封装为一个对象, 作为参数传递给事件函数.
*/
var box = document.querySelector("div");
box.onclick = function (event) {
    // 事件对象兼容
    event = event || window.event;
    console.log(event); // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
    console.log(event.type); // 事件类型
    console.log(event.target || event.srcElement); // 触发事件的元素
    console.log(event.clientX, event.clientY); // 鼠标位置(相对于可视区)
    console.log(event.screenX, event.screenY); // 鼠标位置(相对于屏幕)
    console.log(event.ctrlKey, event.altKey, event.shiftKey); // 功能键
}

事件绑定

• DOM0级事件: 元素.事件类型=事件函数 使用DOM0级事件给同一元素添加相同的事件,会覆盖.
• DOM2级事件:
  • 标准浏览器: addEventListener(事件类型, 事件函数, 是否捕获); 使用addEventListener给同一元素添加相同的事件, 顺序执行.
  • 低版本IE: attachEvent(事件类型, 事件函数); 使用attachEvent给同一元素添加相同的事件, 倒序执行.
• 兼容

function bind(ele, eventType, callback) {
    if (ele.addEventListener) {
        ele.addEventListener(eventType, callback);
    } else {
        ele.attachEvent('on' + eventType, callback);
    }
}

事件取消

function unbind(ele, eventType, callback) {
    if (ele.removeEventListener) { // 标准浏览器
        ele.removeEventListener(eventType, callback);
    } else { // 低版本IE
        ele.detachEvent('on' + eventType, callback);
    }
}

事件流

• 事件流: 事件在元素之间的传播过程.
• 事件捕获阶段: 从window对象到具体对象的过程.
• 目标确定阶段: 确定具体的目标
• 事件冒泡阶段: 从具体目标到window的过程.
• 使用addEventListener来监听事件流, addEventListener有三个参数, 其中第三个参数为Boolean(是否捕获), true表示捕获阶段, false表示冒泡阶段.
• JavaScript中事件默认是冒泡的, 默认冒泡到window, 低版本IE只到document.

阻止事件冒泡和默认事件

• 阻止事件冒泡: event.stopPropagation ? event.stopPropagation() : event.cancalBubble = true;
• 阻止默认事件:
  • DOM0级事件: return false;
  • DOM2级事件: event.preventDefault ? event.preventDefault() : event.returnValue = false;

事件委托

// 事件委托: 利用事件冒泡原理, 把事件监听绑定在父节点上, 当子节点触发该事件时会冒泡给父节点, 利用事件对象找到具体触发事件的子节点来处理. 事件可以发生在未来.
var ul = document.querySelector('ul');
ul.onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    console.log(target);

    if (target.nodeName == 'LI') {
        target.style.background = 'red';
    }
}
var newli = document.createElement('li');
newli.innerHTML = 'newli';
ul.appendChild(newli);

键盘事件

• onkeydown: 键盘按下事件
• onkeyup: 键盘抬起事件
• onkeypress: 键盘按下事件
  • onkeydown不区分大小写 a/A: 65 ; onkeypress: 区分大小写 A:65 a:97
  • onkeydown可以监听类似ctrl的功能键; onkeypress不能监听功能键

滚轮事件

• chrome,IE: DOM0级事件 onmousewheel 根据event.wheelDelta判断方向: 向上: 120 向下: -120
• firefox: DOM2级事件 DOMMouseScroll 根据event.detail判断方向: 向上: -3 向下: 3

回调函数

// 回调函数callback: 作为参数传递给另一个函数去调用的函数, 是解决异步操作的一个常用的途径.
// 异步: 在执行某一操作时, 其他的操作不用等待当前操作执行完毕即可执行. 定时器
// 同步: 在执行某一操作时, 其他的操作必须等待当前操作执行完毕. alert, for

var count = 0;
var timer = setInterval(function () {
    console.log(Math.random());
    count++;
    if (count == 10) {
        clearInterval(timer);
        callback();
    }
}, 50);

function callback () {
    console.log('定时器执行完毕');
}

匿名函数

// 1.匿名函数(没有名字的函数)
// function () {
//     console.log('匿名函数');
// }

// 2.匿名函数立即执行(IIFE)
// (function () {
//     console.log('匿名函数');
// })();

// 3.匿名函数可以接受参数
// (function (a, b) {
//     console.log(a + b);
// })(1, 2);

// 4.匿名函数可以有返回值
var s = (function (a, b) {
    return a + b;
})(1, 2);
console.log(s);

// 1.匿名函数可以把作用域包起来, 内部的变量和函数不会污染全局作用域
// 2.可以嵌入代码

闭包

// 闭包是能够访问其他函数内部变量的函数(函数套函数, 能够访问函数内部变量的函数).
// 好处: 可以把变量长久的存储在内存中
// 坏处: 可能会发生内存泄漏
// function fun() {
//     var a = 10;
//     console.log(a);
// }
// fun();
// console.log(a); // Uncaught ReferenceError: a is not defined

function outer() {
    var a = 10;
    function inner() {
        a++;
        console.log(a);
    }
    return inner;
}
var inn = outer();
console.log(inn); // ƒ inner() { a++; console.log(a); }
inn(); // 11
inn(); // 12
inn(); // 13

// 每次产生的闭包都是全新的
var innn = outer();
console.log(innn); // ƒ inner() { a++; console.log(a); }
innn(); // 11
innn(); // 12

this

1.全局下,this表示window

2.普通函数中, this表示window

3.事件处理函数中, this表示触发事件的元素本身

4.对象方法中, this表示对象本身

5.定时器中, this表示window

call和apply

// call和apply: 改变this指向, 区别: call的参数直接罗列, apply需要把参数使用数组包裹.
function sum(a, b) {
    console.log(a + b);
    console.log(this);
}
sum(10, 20); // 30 window
sum.call(obj, 10, 20); // 30 {name: "lieli"}
sum.apply(obj, [10, 20]); // 30 {name: "lieli"}

防抖和节流

// 防抖: 如果短时间内多次触发同一事件，只会执行一次函数
// 非立即执行
function debounce(fun, wait) { // fun: 事件处理函数  wait: 等待时间
    var timer; // 维护全局纯净, 借助闭包来实现
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(fun, wait);
    }
}

// 立即执行
function debounce(fun, wait) { // fun: 事件处理函数  wait: 等待时间
    var timer; // 维护全局纯净, 借助闭包来实现
    return function () {
        if (timer) clearTimeout(timer);
        var tag = !timer;
        timer = setTimeout(function () {
            timer = null;
        }, wait);
        if (tag) fun();
    }
}

// 节流: 控制触发事件的频率
// 非立即执行
function throttle(fun, wait) {
    var timer; // 维护全局纯净, 借助闭包来实现
    return function () {
        if (!timer) {
            timer = setTimeout(function () {
                timer = null;
                fun();
            }, wait);
        }
    }
}

// 立即执行
function throttle(fun, wait) { // fun: 事件处理函数  wait: 等待时间
    var previous = 0;
    return function () {
        var now = Date.now(); // 当前时间戳
        if (now - previous > wait) { // 两次时间差>wait
            fun();
            previous = now;
        }
    }
}

原型链: 每个对象都有原型对象属性(proto), 指向的是一个对象, 该对象也有自己的原型对象属性(proto), 组成了一个链式结构, 称之为原型链. 原型链的终点是Object的prototype, 再往上为null.

原型链继承 对象冒充继承 组合继承 寄生式组合继承

localStorage-本地存储

• localStorage: 本地存储, 可以把数据长久的存储在浏览器中.
• localStorage.setItem(‘key’, ‘value’); 存储内容
• localStorage.getItem(‘key’); 获取内容
• localStorage.removeItem(‘key’); 移除内容
• localStorage.clear(); 清空内容
• JSON.stringify(): 把对象转成字符串
• JSON.parse(): 把字符串转成对象

jQuery

ready()

window.onload与$(document).ready()

1.执行时机不同: onload是在页面结构和资源加载完毕后调用, ready()在页面结构加载完毕后调用.

2.重复添加: onload不可以重复添加, ready()可以重复添加.

3.简写: onload没有简写方式, read()可以简写为$(function(){})

原生对象和jQuery对象

• 使用原生js获取到的是原生js对象, 调用原生js方法; 使用jQuery获取到的是jQuery对象, 调用jQuery方法. 两者不能混用.
• jQuery对象可以使用[index]或者get(index)转为原生对象; 原生对象使用$()包裹转为jQuery对象.

### jQuery选择器

• 基本选择器: id选择器, class选择器, 标签选择器. $(id), $(class), $(标签名)
• 层次选择器:
  • $(‘a b’): 后代选择器
  • $(‘a>b’): 子代选择器
  • $(‘a+b’): a后面紧邻的b
  • $(‘a~b’): a后面所有的b
• 基本过滤器

  $('div:first').css('color', 'red'); // 第一个
  $('div:last').css('color', 'red'); // 最后一个
  $('div:lt(3)').css('color', 'blue'); // 下标小于3
  $('div:gt(3)').css('color', 'blue'); // 下标大于3
  $('div:eq(3)').css('color', 'blue'); // 下标等于3
  $('div').eq(3).css('color', 'red'); // 下标等于3
  var a = 3;
  $('div').eq(a).css('color', 'orange');
  $('div:even').css('color', 'red'); // 偶数
  $('div:odd').css('color', 'blue'); // 奇数
  $('div:not(.box)').css('color', 'blue'); // 排除
  

• 属性过滤器

  ele[attr]: 具有attr属性的ele元素
  ele[attr=value]: 具有attr属性并且属性值为value的ele元素
  ele[attr^=value]: 具有attr属性并且属性值为value开头的ele元素
  ele[attr$=value]: 具有attr属性并且属性值为value结尾的ele元素
  ele[attr!=value]: attr属性不为value的ele元素
  ele[attr*=value]: 具有attr属性并且属性值包含value的ele元素
  

• 表单过滤器

  console.log($(':text')); // 所有text类型的input
  console.log($(':password')); // 所有password类型的input
  console.log($(':radio')); // 所有radio类型的input
  console.log($(':checkbox')); // 所有checkbox类型的input
  console.log($(':submit')); // 所有submit类型的input
  console.log($(':reset')); // 所有reset类型的input
  console.log($(':radio:checked')); // 选中的radio
  console.log($(':checkbox:checked')); // 选中的checkbox
  console.log($(':checked')); // 所有选中的input(包含checkbox,radio)
  

jQuery节点关系

• children(): 子节点
• find(‘*’): 后代节点
• parent(): 父节点
• parents(): 所有父节点
• prev(): 上一个兄弟
• next(): 下一个兄弟
• prevAll(): 上面所有兄弟
• nextAll(): 下面所有兄弟
• siblings(): 兄弟节点

类名操作

• addClass(): 添加类名
• removeClass(): 移除类名
• toggleClass(): 切换类名
• hasClass(): 判断是否有该类名(Boolean)

属性操作

/*
jQuery对象.attr(属性名): 获取属性
jQuery对象.attr(属性名, 属性值): 设置属性 / jQuery对象.attr(json)
jQuery对象.removeAttr(属性名): 移除属性
*/

/*
jQuery对象.prop(属性名): 获取属性
jQuery对象.prop(属性名, 属性值): 设置属性 / jQuery对象.prop(json)
jQuery对象.removeProp(属性名): 移除属性
适用于以下两种场景:
1.如果只添加属性名即可起作用的属性
2.属性值为Boolean的属性
*/

获取样式

• jQuery对象.css(样式名): 获取样式
• jQuery对象.css(样式名, 样式值): 设置样式 / jQuery对象.css(json)

操作内容

• 闭合标签: html()/text() html()可以识别标签,text()不可以识别标签.
• 表单元素: val()

元素宽高

• jQuery对象.width(): 元素宽度 width
• jQuery对象.innerWidth(): 元素宽度 width+padding
• jQuery对象.outerWidth(): 元素宽度 width+padding+border
• jQuery对象.outerWidth(true): 元素宽度 width+padding+border+margin

元素位置

• offset(): 元素位置(相对于页面)
• position(): 元素定位位置

页面滚动

// scrollTop(): 滚动出去的高度
$(window).scroll(function () {
    console.log($(this).scrollTop());
});

拼接节点

// 父节点.append(子节点): 把子节点拼接到父节点后面
$('ul').append('<li>li2</li>');
// 子节点.appendTo(父节点): 把子节点拼接到父节点后面
$('<li>li3</li>').appendTo('ul');
// 父节点.prepend(子节点): 把子节点拼接到父节点前面
$('ul').prepend('<li>li4</li>');
// 子节点.prependTo(父节点): 把子节点拼接到父节点前面
$('<li>li5</li>').prependTo('ul');

// insertAfter(): 拼接到兄弟节点后
$('.box').after('<li>li6</li>');
$('<li>li7</li>').insertAfter('.box');

// insertBefore(): 拼接到兄弟节点前
$('.box').before('<li>li8</li>');
$('<li>li9</li>').insertBefore('.box');

复制节点和替换节点

• clone(): 复制节点. 参数为Boolean, true表示复制节点和事件, false只复制节点.
• replaceWith() / replaceAll(): 替换节点

删除节点

• remove(): 移除节点并返回
• detach(): 移除节点并返回, 保留事件
• empty(): 清空节点内容

事件对象

console.log(event); // 事件对象
console.log(event.originalEvent); // 原生事件对象
console.log(event.type); // 事件类型
console.log(event.target); // 事件源
console.log(event.delegateTarget); // 事件绑定对象
console.log(event.clientX, event.clientY); // 鼠标位置(相对于可视区)
console.log(event.offsetX, event.offsetY); // 鼠标位置(相对于元素)
console.log(event.screenX, event.screenY); // 鼠标位置(相对于屏幕)
console.log(event.ctrlKey, event.altKey, event.shiftKey); // 功能键
event.preventDefault(); // 阻止默认事件
event.stopPropagation(); // 阻止事件冒泡
return false; // 阻止默认事件+阻止事件冒泡

绑定事件

function fun1() {
    console.log('fun--1');
}
function fun2() {
    console.log('fun--2');
}
// 使用on()给元素绑定事件, 同一事件绑定不同函数, 不会覆盖
// $('div').on('click', fun1);
// $('div').on('click', fun2);

// 不同类型事件可以绑定同一函数
// $('div').on('click mouseenter', fun1);

// 一次绑定多个事件
// $('div').on({
//     'click': fun1,
//     'mouseenter': fun2
// });

// 自定义事件
$('div').on('haha', fun1);
// 触发自定义事件
$('div').trigger('haha');

事件委托

• 事件委托: 利用事件冒泡原理, 当子元素触发事件后, 会把事件冒泡给父元素, jQuery的事件委托中的事件处理函数中的this就是触发事件的子元素. 事件委托可以发生在未来(新添加的子元素也可以触发).
• 语法: 父元素.on(事件类型, 子元素选择器, 事件处理函数)

取消事件

$('div').off('click', fun1); // 取消click事件对应的fun1
$('div').off('click'); // 取消所有click事件
$('div').off('mouseenter'); // 取消所有mouseenter事件
$('div').off(); // 取消div的所有事件
$('div').off('click.wxy'); // 取消div的click.wxy命名空间事件

one

• one(事件类型, 事件函数): 绑定事件, 只执行一次

hover

• hover(鼠标移入事件处理函数, 鼠标移出事件处理函数)

1.jQuery动画

1.1 预置动画

1.1.1 显示隐藏

• 显示隐藏 方法 (宽高透明度) ： show():显示 hide():隐藏 toggle()：开关
• 语法：$(selector).show(speed,easing,callback)
• 参数：
  • speed：动画过渡的所需的时间 , 可能的值：num(ms), 关键字：“fast”:200, “normal”:400 , “slow”:600
  • easing:运动方式 可能的值：linear：匀速 swing：慢-快-慢
  • callback:回调函数

    $('.show').click(function(){
            // 显示 - 宽高透明度
            $('div').eq(0).show('fast','linear')
           /*  $('div').eq(1).show(1000,'swing',function(){
                alert('我是回调函数')
            }) */

        })

        $('.hide').click(function(){
            $('div').hide(1000)
        })

        $('.toggle').click(function(){
            $('div').toggle(1000)
        })

1.1.2 滑入滑出

• 滑入滑出方法 (高)： slideUp():滑出 slideDown():滑入 slideToggle()：开关
• 语法：$(selector).slideDown(speed,easing,callback)
• 参数：
  • speed：动画过渡的所需的时间 , 可能的值：num(ms), 关键字：“fast”:200, “normal”:400 , “slow”:600
  • easing:运动方式 可能的值：linear：匀速 swing：慢-快-慢
  • callback:回调函数

        $('.slideDown').click(function(){
            $('div').slideDown(1000)
        })

        $('.slideUp').click(function(){
            $('div').slideUp(1000)
        })

        $('.slideToggle').click(function(){
            $('div').slideToggle(1000)
        })

1.1.3 淡入淡出

• 淡入淡出 方法 (透明度) ： fadeIn():淡入 fadeOut():淡出 fadeToggle()：开关 fadeTo（）：透明度
• 语法：$(selector).fadeIn(speed,easing,callback)
• 参数：
  • speed：动画过渡的所需的时间 , 可能的值：num(ms), 关键字：“fast”:200, “normal”:400 , “slow”:600
  • easing:运动方式 可能的值：linear：匀速 swing：慢-快-慢
  • callback:回调函数
• 语法：$(selector).fadeTo(speed,to,easing,callback)
  • to:指定透明的数值 范围0-1

       $('.fadeIn').click(function(){
            $('div').fadeIn(1000)
        })

        $('.fadeOut').click(function(){
            $('div').fadeOut(1000)
        })

        $('.fadeToggle').click(function(){
            $('div').fadeToggle(1000)
        })

        $('.fadeTo').click(function(){
            $('div').fadeTo(500,0.5)
        })

1.2 自定义动画

1.2.1 第一种用法

• 语法： $(标签).animate({attr},speed,easing,callback)
  • 排队执行
  • 同时运行多个属性
  • 自动运算
  • 使用关键词 ： show hide toggle
  • 链式操作

          // 1.多个动画，排队执行
          /* $('div').animate({'width':600},1000);
          $('div').animate({'height':600},1000); */
  
          // 2.多个属性一起执行
          // $('div').animate({'width':600,'height':600},1000);
  
          // 3.可自动计算
          // let n = 0;
          $('div').click(function(){
              // n+=50
              $(this).animate({'left':'-=50'})
          })
  
          // 4.关键词
          // $('div').animate({'width':'show','height':'show'},1000)
  
          // 5.链式调用动画
          $('div').animate({'width':600},1000)
                  .animate({'height':600},1000)
                  // .animate({'backgroud':'green'},500)  //动画 值只能是数字才能执行
                  .queue(function(next){
                      $('div').css({'background':'green'});
                      // $('div').dequeue() //出队
                      next();//继续往下执行
                  })
                  .animate({'opacity':0.5},500)
  

1.2.2 第二种用法

• 语法：$(标签).animate({attr},{props})

• 参数props：

  ​ duration - 设置动画的时间

  ​ easing - 规定要使用的 easing 函数

  ​ callback - 规定动画完成之后要执行的函数

  ​ queue - 布尔值。指示是否在动画队列中放置动画。如果为 false，则动画将立即开始。

 // 第二种写法
    $('div').animate({'width':500},{duration:1000,queue:false})
            .animate({'height':500},{duration:1000,queue:false})
            .animate({'opacity':0.5})

1.2.3 运动scrollTop

 $('html,body').animate({'scrollTop':0})

1.2.4 动画方法

• stop(clearQueue,gotoEnd):停止动画

  • 参数：

  ​ clearQueue：是否停止动画队列中的所有动画，默认是false：停止当前正在运动的动画， true：停止所有的动画

  ​ gotoEnd:停止动画时当前运动的属性是否立刻到达目标值，默认是false:点那停那 true：停止时立刻到达目标点

• finish() : 停止动画，所有动画全部停止，并且都到达目标点

• delay():延迟执行

• is(“:animated”):判断当前元素上是否有动画，有–true 没有—false

       $('.add').click(function(){
            $('div').animate({'width':500},1000)
                    .delay(1000)
                    .animate({'height':500},1000)
        })

        $('.stop').click(function(){
            // $('div').stop(true,true)
            $('div').finish()
        })


        $('.toggle').click(function(){
            if(!$('div').is(':animated')){
                $('div').toggle(1000)
            }
        })

原生js实现深拷贝

 // 获取数据类型
        function getType(data){
            /* [object Array]  [object Object] [object Number] */
           return Object.prototype.toString.call(data).slice(8,-1)
        }

        function deepCopy(data){
             // 1.判断要拷贝的是数组还是对象，开辟相对应新的数组或对象
             if(getType(data) == 'Array'){
                 var res = [];
             }else if(getType(data) == 'Object'){
                 var res = {}
             }else{
                 return data;
             }

            //  2.循环拿到每一项的值，判断是什么类型，如果是基本数据类型，直接赋值给新的空间res
             for(var key in data){
                if(getType(data[key]) == 'Object' || getType(data[key]) == 'Array'){
                    res[key] = deepCopy(data[key]);
                }else{
                    res[key] = data[key]
                }
             }
             return res;

        }

jquery实现深浅拷贝

语法：$.extend(true, 目标对象，原对象1，原对象2 。。。。)

 var obj = {
            name: '张三',
            score: [10, 20, 30]
        }

        // 浅拷贝
        var newobj = $.extend({}, obj);
        newobj.score[0] = 100;
        console.log(obj, newobj)

        // 深拷贝
        var newobj1 = $.extend(true, {}, obj);
        newobj1.score[1] = 200;
        console.log(obj, newobj1)



        // 合并对象，会改变目标对象
        var newobj = $.extend(obj, obj1, {
            sex: '男'
        });
        console.log(obj, newobj)

        var newobj = $.extend({}, obj, obj1)
        console.log(obj, newobj)

JSON实现深拷贝的方法

• JSON.stringify(obj) : 将对象转换为字符串的格式
• JSON.parse(str)：将字符串转换为对象的格式

zepto

zepto.js和jQuery.js类似，zepto.js为了实现轻量级，将不同的功能分成一个一个单独的js文件，需要的时候引入对应的js文件即可。

• 和jQ的区别
  • jquery有innerWidth 和 outerWidth zepto: 没有innerWidth 和 outerWidth
    • zepto有width() 包含： content + padding + border
  • 隐藏元素 jQuery照样可以获取大小 zepto不能获取大小
  • zepto的offset() 包含 {left: 108, top: 100, width: 240, height: 240}
• touch 移动端手势

  /* 
   'swipe':滑动, 'swipeLeft':左滑, 'swipeRight', 'swipeUp'：上滑, 'swipeDown',
   'doubleTap'：双击, 'tap'：点击, 'singleTap'：单击, 'longTap'：长按
  */
  

          $('div').on('swipe', function() {
              console.log('滑动事件')
          })
  
          $('div').on('tap', function() {
              console.log('点击')
          })
  
          $('div').on('singleTap', function() {
              console.log('单击') //延迟300ms 目的判断后边还有没有点击，如果300ms内再次点击，触发双击事件
          })
  
          $('div').on('doubleTap', function() {
              console.log('双击')
          })