41-事件委托
title: 41-事件委托publish: true
事件委托事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown……）的函数委托到另一个元素。
比如说有一个列表 ul，列表之中有大量的列表项 <a>标签：
<ul id="parent-list"> <li><a href="javascript:;" class="my_link">超链接一</a></li> <li><a href="javascript:;" class="my_link">超链接二</a></li> <li><a href="javascript:;" class="my_link">超链接三</a></li></ul>
当我们的鼠标移到<a&g ...
42-键盘事件
title: 42-键盘事件publish: true
鼠标的拖拽事件拖拽的流程：
（1）onmousedown：当鼠标在被拖拽元素上按下时，开始拖拽；
（2）onmousemove：当鼠标移动时被拖拽元素跟随鼠标移动；
（3）onmouseup：当鼠标松开时，被拖拽元素固定在当前位置。
鼠标的滚轮事件onmousewheel：鼠标滚轮滚动的事件，会在滚轮滚动时触发。但是火狐不支持该属性。
DOMMouseScroll：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。注意该事件需要通过addEventListener()函数来绑定。
键盘事件事件名onkeydown：按键被按下。
onkeyup：按键被松开。
注意：
如果一直按着某一个按键不松手，那么，onkeydown事件会一直触发。此时，松开键盘，onkeyup事件会执行一次。
当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，后续的间隔会非常快。这种设计是为了防止误操作的发生。
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。代码举例：
<body> ...
43-BOM简介和navigator.userAgent&History&Location
title: 43-BOM简介和navigator.userAgent&History&Locationpublish: true
常见概念JavaScript的组成JavaScript基础分为三个部分：
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型（Document object Model），操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型（Browser Object Model），操作浏览器部分功能的API。比如让浏览器自动滚动。
常见的 BOM 对象BOM可以让我们通过JS来操作浏览器。BOM中为我们提供了一些对象，来完成对浏览器相关的操作。
常见的 BOM对象有：
Window：代表整个浏览器的窗口，同时 window 也是网页中的全局对象。
Navigator：代表当前浏览器的信息，通过该对象可以识别不同的浏览器。
Location：代表当前浏览器的地址栏信息，通过 Location 可以获取地址栏信息，或者操作浏览 ...
44-定时器
title: 44-定时器publish: true
定时器的常见方法
setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）
setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）
备注：在实际开发中，二者是可以根据需要，互相替代的。
setInterval() 的使用setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）
参数：
参数1：回调函数，该函数会每隔一段时间被调用一次。
参数2：每次调用的间隔时间，单位是毫秒。
返回值：返回一个Number类型的数据。这个数字用来作为定时器的唯一标识，方便用来清除定时器。
定义定时器方式一：匿名函数
每间隔一秒，将 数字 加1：
let num = 1;setInterval(function () { num ++; console.log(num);}, 1000);
方式二：
每间隔一秒，将 数字 加1：
setInterval(fn,1000);function fn() { ...
45-jQuery的介绍和选择器
title: 45-jQuery的介绍和选择器publish: true
jQuery 的介绍引入 jQuery 的原因在用 js 写代码时，会遇到一些问题：
window.onload 事件有事件覆盖的问题，因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐，代码量多。
代码很乱，各个页面到处都是。
动画效果很难实现。
如下图所示：
jQuery的出现，可以解决以上问题。
什么是 jQueryjQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。
以下是jQuery的相关信息：
官网：http://jquery.com/
官网API文档：http://api.jquery.com/
中文汉化API文档：http://www.css88.com/jqapi-1.9/
学习jQuery，主要是学什么初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些API。
这些API的共同特点是： ...
46-jQuery动画详解
title: 46-jQuery动画详解publish: true
前言jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
显示动画方式一：
$("div").show();
解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。
方式二：
$("div").show(2000);
解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
效果如下：
方式三：
$("div").show("slow");
参数可以是：
slow 慢：600ms
normal 正常：400ms
fast 快：200ms
解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。
方式四：
//show(毫秒值，回调函数;$("div").show(5000,function () { alert(" ...
47-jQuery操作DOM
title: 47-jQuery操作DOMpublish: true
文本主要内容
样式和类操作
节点操作
样式操作和类操作作用：设置或获取元素的样式属性值。
样式操作1、设置样式：
//设置单个样式： css(属性，值); $("div").css("background-color","red"); //设置多个样式： css(json);$("div").css({"width":100,"height":100,"background-color":"pink"});
2、获取样式：
//获取样式：css(属性);//获取的时候如果有很多个，那么获取jquery对象中的第一个alert($("div").css("width"));
举例如下：
类操作（className）1、添加类样式：
$(selector).addClass( ...
48-jQuery的事件机制和其他知识
title: 48-jQuery的事件机制和其他知识publish: true
jQuery 设置宽度和高度宽度操作：
$(selector).height(); //不带参数表示获取高度$(selector).height(200); //带参数表示设置高度
宽度操作：
$(selector).width(); //不带参数表示获取宽度$(selector).width(200); //带参数表示设置高宽度
问题：jQuery的css()获取高度，和jQuery的height获取高度，二者的区别？
答案：
$("div").css(); //返回的是string类型，例如：30px$("div").height(); //返回得失number类型，例如：30。常用于数学计算。
如上方代码所示，$("div").height();返回的是number类型，常用于数学计算。
jQuery 的坐标操作offset()方法$(selector).offset();$(selector).of ...
49-Zepto入门
title: 49-Zepto入门publish: true
Zepto 的介绍什么是 Zeptozepto是轻量级的JavaScript库，专门为移动端定制的框架。
与jquery有着类似的API，俗称：会jquery就会用zepto
zepto的特点
针对移动端
轻量级，压缩版本只有8kb左右
响应，执行快
语法、API大部分同jquery一样，学习难度低，上手快。
目前API完善的框架中体积最小的一个
相关网址
官网：http://zeptojs.com/
GitHub：https://github.com/madrobby/zepto
Zepto 与 jQuery 的前世今生相同点
都是优秀的js函数库
语法、API大部分都一样（zepto是按照jquery的思路来设计的）
Zepto 相当于 jQuery 的子集
同jQuery一样，都是以$符号为核心函数。
不同点Zepto 的初体验（1）Zepto 库的下载：
我们去官网下载 Zepto的开发版本zepto.js：
官网里，还有这样一张图：
上图的意思是：
最前面打钩的那五个api，已 ...
BOM的常见内置方法和内置对象
publish: false
本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。
以下是正文。
BOM的介绍JavaScript的组成JavaScript基础分为三个部分：
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
什么是BOMBOM：Browser Object Model，浏览器对象模型。
BOM的结构图：
从上图也可以看出：
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
DOM越是BOM的一部分。
window对象：
window对象是JavaScript中的顶级对象。
全局变量、自定义函数也是window对象的属性和方法。
window对象下的属性和方法调用时，可以省略window。
下面讲一下 ...
ES6：Symbol
publish: falseSymbol概述背景：ES5中对象的属性名都是字符串，容易造成重名，污染环境。
概念：ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。
特点：
Symbol属性对应的值是唯一的，解决命名冲突问题
Symbol值不能与其他数据进行计算，包括同字符串拼串
for in、for of 遍历时不会遍历Symbol属性。
创建Symbol属性值Symbol是函数，但并不是构造函数。创建一个Symbol数据类型：
let mySymbol = Symbol();console.log(typeof mySymbol); //打印结果：symbolconsole.log(mySymbol); //打印结果：Symbol()
打印结果：
下面来讲一下Symbol的使用。
1、将Symbol作为对象的属性值let mySymbol = Symb ...
JavaScript 编码技巧
JavaScript 编码技巧目录
Array.includes 与条件判断
Set去重
Map与字典数据类型
函数式的方式处理数据
组合 compose
字符串反转
使用 Array.from 快速生成数组
使用 setTimeout 代替 setInterval
遍历数组不要使用for in
使用解构赋值
持续更新中:fish: …
1. Array.includes 与条件判断一般我们的判断都是用 || 例如：
function testFruit(fruit) { if(fruit == 'apple' || fruit == 'orange') { console.log(`I love it`); }}
如果我们有更多水果:
function testFruit(fruit) { const sweetFrutis = ['apple', 'cherry', 'orange', ' ...
wiki.js
introWiki.js is an open source project that has been made possible due to the generous contributions by community backers.
wiki.js
原型对象
publish: false
在看本文之前，我们可以先复习上一篇文章：《03-JavaScript基础/12-对象的创建&构造函数.md》
原型对象原型的引入function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function () { console.log("我是" + this.name); }}//创建一个Person的实例var per = new Person("孙悟空", 18, "男");var per2 = new Person("猪八戒", 28, "男");per.sayName();per2.sayName();console.log(per.sayName == per2.s ...
原型链
publish: false常见概念
构造函数
构造函数-扩展
原型规则和示例
原型链
instanceof
构造函数任何一个函数都可以被new，new了之后，就成了构造方法。
如下：
function Foo(name, age) { this.name = name; this.age = age; //retrun this; //默认有这一行。new一个构造函数，返回一个对象}var fn1 = new Foo('smyhvae', 26);var fn2 = new Foo('vae',30); //new 多个实例对象
与普通函数相比，构造函数有以下明显特点：
用new关键字调用。
不需要用return显式返回值的，默认会返回this，也就是新的实例对象。
建议函数名的首字母大写，与普通函数区分开。
参考链接：
JavaScript中的普通函数与构造函数
当new之后，this会先变成一个空对象，然后通过this.name = name来赋值。
构造函数的扩 ...
