jquery判断页面是否加载完毕
原生js方法

1
2
3

window.onload = function() {

}

jquery的ready方法

1
2
3
4
5

document.onreadystatechange = function() {
    if(document.readyState == 'complete'){
        document.getElementById("#div").style.display = "none";
            }
}

ready函数在文档进入ready状态时执行代码，当dom完全加载完，jquery允许执行代码，它适用于所有的浏览器，

1
2
3

$(document).ready() {

}

window.onload与jquery的ready函数区别
window.onload除了要等待dom被创建还需要等待包括图片，音频，视频内的所有外部资源都被完全加载，
如果加载图片和媒体资源内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。
另一方面，jquery ready函数只需要dom树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快，使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。
参考链接
慕课地址
jquery源码分析

jquery2.0以及后续版本将不再支持IE 6/7/8浏览器
jquery采用一个匿名构造函数立即执行的方法
整个模块化便是如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

(function(global, factory){
    if ( typeof module === "object" && typeof module.exports === "object" ) {
    //模块化环境
    }else{
        factory( global );
    }
})(typeof window !== "undefined" ? window: this, function(window, noGlobal) {
    //回调函数

    if ( typeof noGlobal === strundefined ) {
        window.jQuery = window.$ = jQuery;
    }
    return jQuery;
});

接收2个参数，global(当前执行作用域链的对象),factory(回调)
匿名函数：本身做了一个初始化的判断，判断当前js是否使用了模块化开发，。如果是再做一些相应的逻辑处理
回调函数：factory所有的jquery方法属性都是在这个回调函数里面实现的最后一行代码，就是向外暴露接口。
整体架构如下:

如今jQuery库，一共13个模块，模块不是单一的
jquery采用AMD进行模块化开发
可以分为五大模块，选择器，DOM操作，事件，ajax与动画，
jquery可以抽出共同的特性并且使之模块化。

移动端的适配问题 主要有以下几个
1.1px问题
2.UI图完美适配方案
3.iPhoneX适配访问
4.横屏适配
5.高清屏图片模糊问题
像素，分辨率，PPI,DPI,DP,DIP,DPR,视口等概念

1.英寸

一般用英寸描述屏幕的物理大小，例如电脑的17,22英寸，手机显示的4.8,5.7英寸等。
需要注意，上面的尺寸是屏幕对角线的长度
1英寸 = 2.54厘米

2.分辨率

像素即一个小方块，具有特定的位置和颜色。
图片，电子屏幕等就是由无数个具有特定位置的小方块组成的。

2.2 屏幕分辨率

一个屏幕具体由多少个像素点组成
iphone xs max 为2688 1242
iphone se 为 1136 640

2.3 图像分辨率

图像分辨率也指图片含有的像素数

2.4 PPI

PPI指的是每英寸包括的像素数
PPI可以用于描述屏幕的清晰度以及一张图片的质量。
使用PPI描述时，PPI越高，图片质量越高。
超链接
常用有flexible布局，媒体查询和vw,vh方案

http与浏览器1

http的ssl加密是在传输层实现的
http 超文本传输协议。客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
https:以安全为目标的http通道。http的安全版。http加入了ssl层。
区别：
http传输的数据都是明文的，未加密的。https由http和ssl构成。
ssl进行加密传输和身份认证。
https需要ca证书。
端口不一致 http是80端口,https是443端口。
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
https优点：认证用户和服务器。确保数据安全的传送。
缺点:握手阶段较费时。缓存不高。
重点掌握
tcp三次握手
tcp和udp区别。
tcp面向连接。udp是无连接的。
tcp提供可靠服务，udp尽最大努力交付。
websocket:html5协议。支持持久连接。http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个,http1.1有keep-alive属性。一次http连接，发送多次request,接收多次response.
400状态码：请求无效
前端提交数据的字段名称和字段类型与后台的实体没有保持一致：
401：当前请求需要用户验证
403：服务器已经得到请求，但是拒绝执行。
Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）
localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）
html语义化是指正确的标签包含了正确的内容。结构良好，便于阅读，例如nav标签,aside标签。
iframe元素会创建包含另一个文档的内联框架
提示：可以将提示文字放在

1

<iframe></iframe>

之间，来提示某些不支持iframe的浏览器
Doctype作用?严格模式与混杂模式如何区分？它们有何意义?
位于文档最前面，告诉浏览器以何种方式渲染页面，有混杂模式和标准模式。
严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

http与浏览器2

cookie和session区别
cookie数据放在客户浏览器上，session放在服务器上。
cookie不是很安全，可以分析本地cookie进行欺骗。
session在一定时间内保存在服务器上。
cookie保存数据不能超过4k.
http 常用请求头
accept 可接受的响应内容。accept-encoding
authorization验证等。
origin:发起一个针对跨域资源共享的请求（该请求要求服务器在响应中加入一个Access-Control-Allow-Origin的消息头，表示访问控制所允许的来源）。
user-agent:浏览器身份识别

前端优化

降低请求量，合并资源。
加快请求速度，预解析dns,减少域名数。
get和post区别
get参数通过url传递.post放在request body中。
get在url中传递参数长度是有限制的。post没有。
get请求不安全。

浏览器的缓存

缓存分为强缓存和协商缓存，根据响应header来决定。
强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。

协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match
url输入发生了什么，天龙八部
浏览器在生成页面的时候，会生成那两颗树？
构造2颗树，dom数和cssom树
接收到服务器响应的html文档后，遍历文档节点，生成dom树。
cssom规则有浏览器解析css文件生成。

http与浏览器3

各种攻击方式

CSRF:跨站请求伪造。可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个tab页面访问量攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候CSRF就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库，防御方式的话：使用验证码，检查https头部的refer，使用token
XSS:跨站脚本攻击，攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取cookie,或者其他用户身份信息，可以分为存储型和反射型，存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的话不存储在数据库中，往往表现为将攻击代码放在url地址的请求参数中，防御的话为cookie设置httpOnly属性，对用户的输入进行检查，进行特殊字符过滤

304：如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。

get和post区别

GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。

GET：不同的浏览器和服务器不同，一般限制在2~8K之间，更加常见的是1k以内。

GET和POST的底层也是TCP/IP，GET/POST都是TCP链接。

GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

js基础(1)

eval的功能，
是将对应的字符串解析成js并执行，应该避免使用
js前端模块化
是将复杂的文件编程为一个个独立的模块，例如js文件等。
一个模块是实现特定功能的文件，有了模块就可以方便引用别人的代码。想要什么功能就加载什么模块。
common.js 导出使用module.exports 引入采用 require(“”);
AMD:中文名是异步模块定义的意思。
实现一个once函数 传入函数参数只执行一次

1
2
3
4
5
6
7
8
9
10

function ones(funcs) {
    var tag = true;
    return function () {
        if(tag == true){
            funcs.apply(null,arguments);
            tag = false;
        }
        return undefined;
    }
}

js监听对象属性的变化

es5中可以采用object.defineProperty

1
2
3
4
5

Object.defineProperty(user,'name',{
    set:function(key,value){

    }
})

es6中采用proxy来实现

1
2
3

var user = new Proxy({},{
    set:function(target,key,value,receiver){}
})

通过函数的形式创建私有变量，getName来访问

1
2
3
4
5
6
7

function Product() {
    var name = "ckq";
    this.getName = function() {
        return name;
    }
}
var obj = new Product();

Object.is()来判断值

1
2
3
4
5

console.log(+0 === -0); //true
console.log(null === undefined); //false
console.log(Object.is(+0,-0));//false
console.log(NaN == NaN);//false
console.log(Object.is(NaN,NaN));//true

跨域问题

跨域问题的解决方法：
什么叫跨域：是指浏览器不能执行其他网站的脚本，是由浏览器的同源策略造成的，浏览器对js的安全限制，只要协议，域名，端口，有一个不同，
都被当做是不同的域，跨域原理，通过各种方式，避开浏览器的安全限制。
jsonp方式：通过动态创建script,再请求一个带参网址实现跨域通信。
通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。
jsonp缺点：只能实现get请求。
2.document.domain + iframe跨域
此方案仅限主域相同，子域不同的跨域应用场景。
实现原理：两个页面都通过js强行设置document.domain为基础主域，就实现了同域。
3.location.hash + iframe跨域
实现原理:a域与b域相互通信，通过中间页c来实现,3个页面，不同域之间通过iframe的location.hash传值，相同域之间通过js直接访问，
4.window.name + iframe跨域
window.name属性的独特之处，name值在不同的页面，甚至不同域名加载后依旧存在，并且可以支持非常长的name,
通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。
5.postMessage跨域
h5 xmlHttpRequest level2中的API，且是为数不多可以跨域操作的window属性之一。
cors 跨域资源共享，服务端设置access-control-allow-orgin即可。前端无需设置。
6.nginx跨域请求。
跨域总结链接

new运算过程

1.以构造器的prototype属性为原型，创建新对象
2.将this和调用参数传给构造器，执行；
3.如果构造器返回的是对象，则返回，否则返回第一步创建的对象。
JSDOM事件存在如下3个阶段：
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
先捕获再冒泡，点击dom节点后，事件捕获，从上往下传播，然后到达目标节点，随后是冒泡，从下往上传播。
event.stopPropagation 阻止捕获或者冒泡，当前事件的进一步传播
event.stopImmediatePropagetion 阻止调用相同事件的其他侦听器
event.preventDefault取消该事件，而不停止事件的进一步传播
event.target 指向触发事件的元素，在事件冒泡过程中这个值不变
event.currentTarget = this;事件帮顶的当前元素，只有被点击时目标元素的target才会等于currentTarget，
最后，对于执行顺序的问题，如果DOM节点同时绑定了2个事件监听函数，一个用于捕获，一个用于监听，那么两个事件的执行顺序真的是先捕获在冒泡吗，答案是否定的，绑定在被点击元素的事件是按照代码添加的顺序执行的，其他函数是先捕获再冒泡。
函数作用域，如果在函数内部我们给未定义的一个变量赋值，这个变量会转变成为一个全局变量，
块作用域：块作用域吧标识符限制在{}中。
改变函数作用域的方法：
eval（），这个方法接受一个字符串作为参数，并将其中的内容视为好像在书写时就存在于程序中这个位置的代码，
with关键字：通常被当做重复引用同一个对象的多个属性的快捷方式
JS采用的是词法作用域，也就是静态作用域，所以函数的作用域在函数定义的时候就决定了
js对象分类
1.宿主对象：由js宿主环境提供的对象，它们的行为完全由宿主环境确定
2.内置对象:有js语言提供
2.1.固有对象 由标准规定，随着js运行时创建而自动创建的对象实例
2.2.原生对象 可以有用户通过Array,RegExp等内置构造器和特殊语法构造
2.3.普通对象,由{}语法，object构造器或者class关键字定义类的创建的对象
宿主对象:浏览器宿主对象，windows上有很多属性
内置对象:例如类，固有对象一种
原生对象:能够通过语言本身的构造器创建的对象称为原生对象。提供了30多个构造器，例如Array,Boolean,Date等。
在js中，微任务的执行高于宏观任务的执行，因此promise的执行高于setTimeout的执行。

实现一个ajax

ajax创建异步对象XMLHttpRequest
操作XMLHttpRequest对象
(1)设置请求参数(请求方式，请求页面的相对路径，是否异步等)
(2)设置回调函数 一个处理器响应的函数 使用onreadystatechange 类似于函数指针
(3)获取异步对象的readyState属性，该属性存有服务器响应的状态信息。每当readyState改变时，onreadystatechange 函数就会被执行
(4)判断响应报文的状态，若为200则说明服务器正常响应并且返回
(5)读取数据 可以通过responseText属性来取回服务器返回的数据

1
2
3
4
5
6
7
8
9
10

var xhr = new XMLHttpRequest();
xhr.open("get","aabb.php",true);
xhr.send(null);
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            console.log(xhr.responseText);
        }
    }
}

pwa全称为progressive web app,即渐进式web应用，一个pwa首先是一个网页，随后通过web技术编写成一个网页应用，随后添加上App Manifest和Service Worker来实现PWA的安装和离线等功能。
函数节流：当调整浏览器大小的时候，onresize事件可能会连续触发，在onresize事件处理程序内部如果尝试进行DOM操作的话，其高频率的操作可能导致浏览器崩溃，可以使用定时器对函数进行节流；
节流的思想：某些代码不可以在没有间断的情况下连续执行，第一次调用函数，创建一个定时器，在指定的时间间隔后再运行代码，第二次调用该函数时，它会清除前一次的定时器并且设置另一个。如果前一个定时器已经执行了，这个操作没有任何意义，然而，如果前一个定时器没有执行，其实就是替换为一个新的计时器，目的是只有在执行函数的请求停止了一段时间后才执行。
防抖：做多次函数的一段时间内操作，只有最后一次才是最有效的

es6箭头函数
1.如果只有一个参数,()可以省略
2.如果只有一个return {}可以省略

1

let show = a => a * 2;

剩余参数 args是剩余参数
参数扩展：收集剩余参数 …args 这个必须是最后一个。
不仅用于收集参数，也可以用于展开数组。

1
2
3

function(a,b,...args){
    console.log(args);
}

展开运算符

1
2
3
4
5
6
7
8

let arr = [1,2,3];
show(a,b,c) => {
console.log(a);
console.log(b);
console.log(c);
}
//调用的时候
show(...arr);

既可以展开，调用。
解构赋值
1.左右两边结构必须相同
2.右边必须是一个东西
3.声明和赋值是不能分开的，不能let[a,b] 随后再[a,b] = 这种事不合法的

1
2

let [a,b,c] = [12,13,14];
let {a,b,c} = {a:12,b:13,c:14}; //对象对应的值必须是相同的。a 对应字典里的a,b对应字典里的b，c对应字典里的c.

字符串的模板语法

1
2
3
4
5

var p = 12;
let str2 = `<div>
${p}
</div>`;
console.log(str2);

用来套进去，可以用$符号将外部的值传入嵌进去。可以多次换行。

类的使用 class关键字，专门的构造器 constructor

1
2
3
4
5
6
7
8
9
10

class User{
    constructor(name,pass){
        this.name = name;
        this.pass = pass; //属性的定义
    }
    //函数的定义
    showName(){
        alert(this.name);
    }
}

类中继承的作用
原先的继承

1
2
3
4
5
6
7
8
9

function VipUser(name,pass,level){
    User.call(this,name,pass);
    this.level = level;
}
VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;
VipUser.prototype.showLevel = function() {
    alert(this.level);
}

通过prototype的方法进行改变等。指定原型，随后指定自己的等。
es6中的方法

1
2
3
4
5
6
7
8
9
10

class VipUser extends User{
    constructor(name,pass,level){
       super(name,pass); //父级的 超类
       this.level = level;
    }
    //方法
    showLevel(){
        alert(this.level);
    }
}

json拼接到url字符串

1
2

let json = {a:12,b:5};
let str = "www.baidu.com" +

json的标准写法
json中的key必须用”“包起来，若是没有包起来就是js对象

1

{a:12,b:5}

这是js对象

1

{"a":12,"b":5}

这才是json对象。 而且不能用单引号。
json的简写：注意 以下说的都是对象的简写。而不是json

1
2
3
4

let a = 12;
let b = 5;
let json = {a,b,c:55};
console.log(json);

函数的简写 function可以去掉，直接加括号

1
2
3
4
5

var a = {
    show(){
        console.log(223);
    }
};

promise的使用 all必须全部成功
promise中的all方法，当全部promise执行完毕，并且成功返回的时候，才执行then方法

1
2
3
4
5

promise.all([
    p1,p2
]).then(function(object){
let [res1,res2] = object; //解析构值
})

promise中的race主要其中有一个返回就可以，不用管其中所有成功。
yield 可以让函数暂时停止在某个地方 等到next再进行下面的调用。

1
2
3
4
5
6

//generator函数
function *show(){
//代码1
yield ajax(xxx)； //中间能够停
//代码2
}

同generator函数生成了许多小函数。 next进行下一步。yield是停止暂停。

1
2
3

let obj = show();
obj.next();
obj.next();

generator可以向内部传参数

1
2
3
4
5
6
7
8
9

function *show() {
    alert("a");
  let a =  yield ; //yield还能返回东西
    alert(a);
    return a;
};
let gen = show();
gen.next(12); //对于传参来说是费的 这里的next执行的是从show到第一个yield之间的代码
gen.next(5);

如上所示 gen.next(12)这个可以说是无用的，因为第一步的参数是要用过show()方法的直接调用传入的。
后续gen.next(5)表示向yield的第二个代码块传入了参数5 所以可以通过let a = yield 获取到5 并进行接下来的操作

generator也可返回值。

1
2
3
4
5
6
7
8
9
10
11
12

 function *show() {
      alert("a");
      //半路返回
      yield 12;
      alert("b");
      //最后一道靠return完成
      return 16;
  }
  let gen = show();
  let res1 = gen.next(); //返回的是一个json对象{value:12,done:false} 表示没有做完
  let res2 = gen.next(); //返回的是undefined done是true
console.log(res2);

yield 12 表示从函数开始到第一个代码块返回的是12，通过打印res1可以知道，还没有做完，当前取得的值时12
第二个res2拿到的是undefined,done为true,表示已经完成。最后的返回只能通过return返回，此时表示已经完成。
promise涉及到逻辑操作的时候，与普通回调的嵌套并没有什么差别。
所以用generator更适合。当第一个完成后，再执行逻辑，执行第二个。
js由ecmscript,dom,和bom组成。
string,number,undefined,boolean,null.
基本数据类型放在栈区，复杂数据类型放在堆区。堆区存储量大。
es6汇总
1.变量
var 重复声明，函数级别。
let 不能重复声明。块级变量。
const 不能重复声明，块级常量。
2.箭头函数
1.方便 如果只有一个参数，()可以省略。
2.如果只有一个return,{}也可以省。
3.修正this问题。
this相对正常点。
3.参数扩展
…
收集或者扩展。

1
2
3

默认参数function(a,b = 5){

}

4.数组方法
map映射,reduce汇总 一堆,filter 过滤(删选)forEach循环.
5.字符串
startWith/endWith
字符串模板 换行。$(a)xxx$(b)
6.promise方法
对数据分钟
promise.all
7.generator执行到一半可以暂停。
8.json对象。stringfy,parse.
9.解构赋值
左右结构一样
右边是个合法东西
声明和赋值一次性完成。

1

let [a,b,c] = [12,5,8];

10.面向对象

1
2
3
4
5
6

class Text{
    constructor(){
        this.xxx = 
    }
}
class class2 exnteds Text

浏览器窗口的尺寸，就是内容部分，是可以看见的大小，但不包括工具栏和滚动条。
对于IE,CHROME,FIREFOX,OPERA和Safari
window.innerHeight 浏览器窗口的可见宽度。
window.innerWidth 浏览器的可见宽度

IE 8 7 6 5
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight和document.body.clientWidth
兼容所有浏览器的代码

1

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

js是单线程的

js是单线程的，也就是说，同一个时间只能做一件事情。
原因：作为浏览器的脚本语言，js的主要用途是与用户进行交互，以及操作dom,所以如果有多线程的话，一个线程在某个节点上操作dom,另外一个节点在删除dom,就不知道以哪个线程为准。
单线程意味着所有任务都需要排队,前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。例如ajax请求，需要等到网络有响应了才返回数据(IO操作)。
JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面
的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。
同步任务进入主线程，而异步任务进入任务队列,不进入主线程，只有任务队列通知了主线程，某个异步任务执行完成了，该任务才会进入主线程。
执行流程如下：
1.所有同步任务都在主线程上执行，形成一个执行栈,
2.主线程之外，还存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件。
3一旦执行栈中所有同步任务都执行完毕后，系统就会读取”任务队列“，看看里面有些什么事件，那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4.主线程不断重复上面的第三步。
只要主线程空了，就会去读取”任务队列”，这就是JavaScript的运行机制。这个过程会不断重复。

事件和回调函数

任务队列是一个事件的队列，IO设备(用户产生事件，例如鼠标点击等)，只要指定了回调函数，这些事件发生时就会进入”任务队列”，等待主线程读取。
回调函数的含义：(被主线程挂起来的代码),异步任务必须指定回调函数，当主线程执行异步任务，就会执行对应的回调函数。
“任务队列”是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，”任务队列”上第一位的事件就自动进入主线程。但是，由于存在后文提到的”定时器”功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。

event loop

主线程运行的时候，产生堆和栈。栈中的代码调用各种外部API，它们在”任务队列”中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取”任务队列”，依次执行那些事件所对应的回调函数。
setTimeOut的含义：指定某个任务在主线程得到的最早空闲时间执行，也就是说，尽可能早的执行，任务队列的尾部添加一个事件，因此等到同步任务和任务队列所有事件处理完，才会得到执行。
node的后续再说
(参考链接)[http://www.ruanyifeng.com/blog/2014/10/event-loop.html]

js事件冒泡

js所谓的事件冒泡就是子级元素的某个事件被触发，他的上级元素的该事件也会被递归的执行。
有如下html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul data-type="cityPick">
<li data-id = "0">全部</li>
    <li data-id = "1">纽约</li>
    <li data-id = "2">洛杉矶</li>
</ul>
<script src = "event.js"></script>
</body>
</html>

js代码如下

1
2
3
4
5
6
7

$("ul[data-type = 'cityPick']").on('click',function () {
  alert("父元素被点击");
})

$("ul[data-type = 'cityPick']").on('click','li',function () {
    alert("子元素被点击");
})

当点击子元素时，父元素的alert事件也会被触发。
而在某些时候，我们不希望他冒泡，
可以用stopPropagation()方法阻止对父元素的冒泡传递。
某些事件的默认事件不能被触发，例如点击a的href 链接跳转时，不进行跳转
可以用e.preventDefault()事件

1
2
3
4

$("ul[data-type = 'cityPick']").on('click','li',function (e) {
    e.stopPropagation();//阻止事件冒泡
    alert("子元素被点击");
})

js事件委托

事件委托实际上利用了冒泡的原理，从点击的元素开始，递归方式的向父元素传播事件，好处是不用为每一个子元素设置click事件，而只需为父元素上绑定一次即可。
如下代码html

1
2
3
4

<div id = "btnGroup">
    <div class = "btn">按钮1</div>
    <div class = "btn">按钮2</div>
</div>

js代码：

1
2
3

$("#btnGroup").on('click','.btn',function () {
    alert($(this).html());
})

由于事件委托是通过事件冒泡实现的，所以如果子级的元素阻止了事件冒泡，那么事件委托也将失效！
(参考链接)[https://www.cnblogs.com/alsy/p/4915912.html]

js字符串的常用操作

js字符串反转

1

js.split("").reverse().join("");

先进行分割成数组，随后再反转，再进行拼接。

js实现栈

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

//使用js来构造栈
function Stack() {
    //items 不用 this的原因，因为new操作符会将构造函数中的this指向生成的对象，
    //挂载在this上的方法或者属性将来会成为对象的方法或者属性，所以可以直接调用，而
    //items是函数内部的一个局部变量，在函数外部是不可访问的。所以需要通过作用域链的方法来访问item
    var items = [];
    //类方法
    this.push = function (element) {
         items.push(element);
    }
    //pop方法
    this.pop = function () {
        return items.pop();
    }
    //数组转化成字符串
    this.toString = function () {
        return items.toString();
    }
    //peek方法 返回最后一项
    this.peek = function () {
        return items[items.length - 1];
    }
    //长度方法
    this.size = function () {
        return items.length;
    }
    //期望item 不为空
    this.isEmpty = function () {
        return items.length == 0 ? true : false;
    }
    //清空数组
    this.clear = function () {
        while (items.length > 0)
        items.pop();
    }
}

重点：items不用this的原因：
items 不用 this的原因，因为new操作符会将构造函数中的this指向生成的对象，挂载在this上的方法或者属性将来会成为对象的方法或者属性，所以可以直接调用，而items是函数内部的一个局部变量，在函数外部是不可访问的。所以需要通过作用域链的方法来访问item
参考链接

水平居中

行内元素居中

利用text-align 实现行内元素的居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css_center.css">
    <style>
        .parent{
            text-align: center;
        }
        .child{
            display: inline-block;
        }
    </style>
</head>
<body>

<div class="parent">
    <div class="child">Demo</div>
</div>
</body>
</html>

块级元素水平居中

可以使用外边距margin-left margin-right 设置为auto即可。则两边都可以水平空出距离。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css_center.css">
    <style>
        .parent{
            margin: 0 auto;
            width: 100px; /* 必须设置width */
        }


    </style>
</head>
<body>

<div class="parent">
    Demo
</div>
</body>
</html>

使用table+margin方法。将子元素设置为块级表格来显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css_center.css">
    <style>
        .parent{
            display: table;
            margin: 0 auto;
            width:100px;
            /* 必须设置width */
        }


    </style>
</head>
<body>

<div class="parent">
    Demo
</div>
</body>
</html>

使用absolute+transform的方法。
将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父元素的一半，
最后通过向左移动子元素的一半宽度来达到水平居中。
tranform属于css3的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css_center.css">
    <style>
        .parent{
            position: relative;
        }
        .child{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }


    </style>
</head>
<body>

<div class="parent">
  <div class="child">
      Demo
  </div>
</div>
</body>
</html>

使用flex+justify-content

1
2
3
4
5
6
7
8
9
10

<style>

  .parent {

    display: flex;

    justify-content:center;

  }
  </style>

浮动元素水平居中

1.对于定宽的浮动元素，通过子元素设置relative+负margin
2.对于不定宽的浮动元素，父子容器都用相对定位
3.通用方法(不管定宽还是不定宽)：都使用flex布局。
1.通过浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css_center.css">
    <style>
       
        .child {

            position:relative;

            left:50%;

            margin-left:-250px;

        }


    </style>
</head>
<body>



<div class="parent">

    <span class="child" style="float: left;width: 500px;">我是要居中的浮动元素</span>

</div>

</body>
</html>

不定宽居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css_center.css">
    <style>

        .parent {

            position:relative;

            left:50%;

            float: left;

        }
        p{
            float: left;
            position: relative;
            right: 50%;
        }


    </style>
</head>
<body>



<div class="parent">

   <p class="child">demo</p>
</div>

</body>
</html>

使用flex+justify-content来实现居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css_center.css">
    <style>

        .parent {
  display: flex;
   justify-content: center;
        }
       .child{
           width: 200px;
         text-align: center;
           float: left;
       }


    </style>
</head>
<body>



<div class="parent">

   <p class="child">demo</p>
</div>

</body>
</html>

垂直居中

单行内联元素垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css_center.css">
    <style>

    #box{
        height:120px;
        line-height: 120px;
        border:2px dashed;
    }


    </style>
</head>
<body>
<div id = "box">
    <span>单行内联元素</span>
</div>

</body>
</html>

2.多行内联元素垂直居中
1.使用flex布局
利用flex布局实现垂直居中，其中flex-direction为column,column定义主轴方向为纵轴，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css_center.css">
    <style>

    #box{
        display: flex;
       flex-direction: column;
        justify-content: center;
        height: 100px;
        border: solid;
    }


    </style>
</head>
<body>
<div id = "box">
    <span>单行内联元素</span>
</div>

</body>
</html>

利用表布局的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css_center.css">
    <style>

    .parent{
        display: table;
        height: 100px;
        border: solid;
    }
        .child{
            display: table-cell;
            vertical-align: middle;
        }


    </style>
</head>
<body>
<div class="parent">
    <div class="child">
        the more
    </div>
</div>

</body>
</html>

参考链接