後jQuery時代

（轉自公衆號：前端八點半，已受權）

前言

  在MV*框架興起，前端告別刀耕火種進入工程化的今天，還沒來得及學習Angular，Facebook就帶着react框架降臨，不久vue.js又在這些框架打得火熱的時候脫穎而出，各類框架充斥着咱們的視覺神經，好像操做DOM來寫前端的思想已經退出了歷史舞臺。而jQuery做爲那個年代前端er主要的庫，對於DOM的增刪改查的便利讓咱們對jQuery頂禮膜拜，jQuery爲了簡化js而生，卻又因簡化js而死，jQuery發佈初版距今已經11年之久，然後jQuery時代，咱們須要怎麼作？

  初版jQuery誕生於2006年，當初jQuery的誕生有兩個目的，第一簡化DOM操做，第二減小開發過程當中跨瀏覽器的問題。

  他的創始人John Resig給這些代碼添加了註釋，以下有初版jQuery的地址，你能夠初版的源碼。genius.it/johnresig.c…

  jQuery是偉大的，可是在當下技術發展的今天，咱們不須要再兼容IE6和IE7的狀況下，不少兼容性問題瀏覽器已經自行解決了，因此說，將jQuery從你的網站中刪除是正確的作法。並且js如今已經更加簡潔，對於不少DOM操做，用原生js來寫也會很是簡潔。

jQuery速覽

1.文檔載入後執行：

$(document).ready(function(){})
$(function(){})
複製代碼

2.jQuery事件綁定
on、bind、live、delegate

3.jQuery增刪改查

增長：
append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素以後插入內容
appendTo() - 把全部匹配的元素追加到指定的元素元素集合中。

刪除：
remove() - 刪除被選元素（及其子元素）

$("p").remove(".italic");
複製代碼

empty() - 從被選元素中刪除子元素

$("#div1").empty();
複製代碼

修改：
設置內容- text()、html() 以及 val()
text() - 設置或返回所選元素的文本內容

$("#test1").text("Hello world!");
複製代碼

html() - 設置或返回所選元素的內容（包括 HTML 標記）

$("#test2").html("Hello world!");
複製代碼

val() - 設置或返回表單字段的值

$("#test3").val("Dolly Duck");
複製代碼

設置屬性- attr()
jQuery attr() 方法也用於設置/改變屬性值。
attr設置多個值

$("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
});
複製代碼

獲取：
得到內容- text()、html() 以及 val()粗體文本
text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值

獲取屬性- attr()
jQuery attr() 方法用於獲取屬性值

$("#w3s").attr("href")
複製代碼

查找：
1.基本過濾器：
a) :first，選取第一個元素，別忘記它也是被放在一個集合裏哦！由於JQuery它是DOM對象的一個集合。如，「$(「tr:first」)」返回全部tr元素的第一個tr元素，它仍然被保存在集合中。

b) :last，選取最後一個元素。如:「$(「tr:last」)」返回全部tr元素的最後一個tr元素，它仍然被保存在集合中。

c):even、:odd奇偶過濾器

d):not選擇全部不符合的元素

e):eq選擇索引匹配的元素

2.子元素過濾器
:first-child（:last-child）選擇全部父級元素下的第一個（最後一個）子元素。
:first-of-type（:last-of-type）選擇全部相同的元素名稱的第一個（最後一個）兄弟元素
:nth-child(n) 選擇的他們全部父元素的第n個子元素。
:nth-last-child(n)選擇全部他們父元素的第n個子元素。計數從最後一個元素開始到第一個。
:nth-of-type(n) 選擇同屬於一個父元素之下，而且標籤名相同的子元素中的第n個。
find(selector) 查找該節點全部的子孫節點
children(selector)查找全部的子節點，不過該方法只會返回直接的子節點，不會返回全部的子孫節點

3.父元素過濾器
parent(selector) 查找父元素，可傳入selector進行過濾(下同)
parents(selector)查找全部的祖先節點

4.兄弟元素過濾器
siblings() 查找該節點全部的兄弟節點，不分先後
prev()查找該節點的上一個兄弟節點
prevAll()查找該節點以前全部的節點
next()查找該節點的下一個兄弟節點
nextAll()查找該節點以後全部的節點

去除DOM依賴

如何在項目中去除jQuery依賴，以及如何使用原生js替代jQuery中方法？
1.查找DOM
getElementById()：經過id查找元素，訪問DOM最快的方法，並且大部分瀏覽器都支持
getElementsByClassName()：經過class查找元素
注：上面兩個方法很快，但因爲僅經過類名選擇元素的限制，做用有限。

//polyfill，實現getElementsByClassName
function getElementsByClassName(className) {
    var all = document.all ? document.all : document.getElementsByTagName('*');
    var elements = new Array();
    for (var e = 0; e < all.length; e++) {
        if (all[e].className == className) {
            elements[elements.length] = all[e];
            break;
        }
    }
    return elements;
}
複製代碼

querySelector()和querySelectorAll()：匹配指定 CSS 選擇器元素的第一個子元素（所有元素）。
注：querySelectorAll獲取到的是一個類數組，能夠經過Array.prototype.slice.call()將類數組轉爲數組。

// jquery選擇器部分實現，container參數可選，獲取所有符合的元素
function $(selector, container) {
  return (container || document).querySelectorAll(selector);
}
// 獲取一個符合的元素
function $one(selector, container) {
  return (container || document).querySelector(selector);
}
複製代碼

getElementsByTagName：經過標籤名查找元素，跨瀏覽器安全快速的方法，獲取到一個類數組。

2.查找遍歷
獲取父類元素-parentNode
獲取子類元素-childNode，firstChild，lastChild
獲取同級元素-nextSibling、previousSibling，只獲取一個匹配的

//獲取所有的同級元素
function getSiblings(el, filter) {
    var siblings = [];
    el = el.parentNode.firstChild;
    do { if (!filter || filter(el)) siblings.push(el); } while (el = el.nextSibling);
    return siblings;
}
複製代碼

匹配特定選擇器且離當前元素最近的祖先元素-closest()[實驗中的功能，有的瀏覽器不兼容]

// polyfill，不兼容瀏覽器的實現方法
this.Element && function(ElementPrototype) {
    ElementPrototype.closest = ElementPrototype.closest ||
        function(selector) {
            var el = this;
            while (el.matches && !el.matches(selector)) el = el.parentNode;
            return el.matches ? el : null;
        }
}(Element.prototype);
複製代碼

matches():若是元素將被指定的選擇器字符串選擇，Element.matches() 方法返回true; 不然返回false。

//polyfill
if (!Element.prototype.matches) {
    Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;           
        };
}
複製代碼

3.DOM操做
建立DOM-createElement
替換DOM-replaceChild
刪除DOM（從DOM中刪除元素的父元素，使元素的內容保持原樣）

/*
 *刪除element，可是保留element裏面的子元素的作法
 */
var element = document.querySelector('.container');
// 獲取元素的父元素
var parent = element.parentNode;
// 遍歷將全部子元素從這個元素中移出去
while (element.firstChild) parent.insertBefore(element.firstChild, element);
// 刪除這個元素
parent.removeChild(element);
清空元素的內容-DOM中刪除元素的全部子節點。
var el = document.querySelector('div');
//經過設置innerHTML爲空清空全部子節點
el.innerHTML = '';
刪除DOM-removeChild方法從DOM中刪除一個子節點。返回刪除的節點。
//從parent中刪除child，函數的返回值也是child的引用
parent.removeChild(child);
插入DOM-insertBefore、appendChild
//insertBefore，在parent節點中將child節點插入到node1以前
parent.insertBefore(child, node1);
//appendChild，將child節點插入到parent的最尾部
parent.appendChild(child)
複製代碼

獲取元素的text內容-textContent、innerText（IE8）

let node = document.querySelector('container');
let text = node.textContent || node.innerText;
複製代碼

獲取/設置元素的HTML內容-innerHTML屬性
複製當前節點（或者複製當前節點以及它的全部子孫節點）-cloneNode()

4.屬性操做-用於獲取和設置元素的DOM屬性的功能

設置、獲取和刪除DOM元素屬性
原生JavaScript可一直接訪問元素的屬性，例如：href、title、alt、value，刪除這些屬性的可使用delete關鍵字

var node = document.querySelector('selector');
//設置屬性property
node.property = ''
//使用delete刪除property屬性
delete node.property;
添加，刪除和測試class
//判斷node是否有className
function hasClass(node, className) {
    return node.classList ?
        node.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(node.className);
}
//添加class
function addClass(node, className) {
    if (node.classList) {
        node.classList.add(className);
    }
    else if (!hasClass(node, className)) {
        node.className += ' ' + className;
    }
}
//移除class
function removeClass(node, className) {
    if (node.classList) {
        node.classList.remove(className);
    }
    else {
        node.className = node.className.replace(new RegExp('\\b' + className + '\\b', 'g'), '');
    }
}
複製代碼

獲取，設置和刪除屬性-getAttribute、setAttribute、removeAttribute

let node = document.querySelector('selector');
//在node上設置myProp屬性值爲mydata
node.setAttribute('myProp', 'mydata');
//獲取myProp屬性
console.log(node.getAttribute('myProp'));
//刪除myProp屬性
node.removeAttribute('myProp');
複製代碼

5.獲取設置元素樣式

樣式獲取-getComputedStyle（IE9如下:currentStyle）

var node = document.querySelector('selector');
// IE上使用currentStyle
var style = window.getComputedStyle ? getComputedStyle(node, null) : node.currentStyle;
複製代碼

樣式設置- style、cssText

function setCss(node, styles) {
    for (var property in styles){
        node.style[property] = styles[property];
    }
}
//使用cssText可以同時設置多個樣式
node.style.cssText += 'color:red;'
複製代碼

各類位置獲取以下：
獲取並設置元素的滾動位置-scrollTop、scrollLeft
獲取元素相對於其父元素的偏移位置-offsetLeft、offsetTop
獲取相對於文檔的元素的位置-getBoundingClientRect

function offset(node) {
  let rect = node.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
複製代碼

獲取元素的寬度和高度-根據盒模型，元素包含margin、border、padding、content（width+height）
獲取content+padding+border：offsetWidth/offsetHeight
獲取content+padding:clientWidth/clientHeight
獲取margin、border、padding的值能夠經過getComputedStyle
獲取窗口的寬高：window.innerWidth、window.innerHeight
獲取文檔的寬高：document.documentElement.clientWidth/Height、

6.原生ajax
get請求和post請求

function getRequest(url, success) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open('GET', url);
    xhr.onreadystatechange = function () {
        if (xhr.readyState > 3 && xhr.status == 200) success(xhr.responseText);
    };
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.send();
    return xhr;
}
function postRequest(url, data, success) {
    var params = typeof data == 'string' ? data : Object.keys(data).map(
        function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }
    ).join('&');
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open('POST', url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); }
    };
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(params);
    return xhr;
}
複製代碼

異步加載js，async或者defer關鍵字也能夠異步

//1.經過動態插入script標籤異步加載
let scriptNode = document.createElement('script'),
  htmlNode = document.getElementsByTagName('script')[0];
scriptNode.src = url;
scriptNode.parentNode.insertBefore(scriptNode, htmlNode);
//2.經過async和defer屬性來異步加載
<script src="" async defer></script>
複製代碼

7.原生事件
阻止冒泡：

window.event? window.event.cancelBubble = true : e.stopPropagation();
複製代碼

阻止默認事件：

window.event? window.event.returnValue = false : e.preventDefault();
複製代碼

獲取鍵盤點擊：

var key = window.event ? event.keyCode : event.which;
console.log(key);
複製代碼

獲取鼠標點擊位置：

function handler(event) {
    event = event || window.event;
    let pageX = event.pageX;
    let pageY = event.pageY;
    // IE 8
    if (pageX === undefined) {
        pageX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        pageY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    return {
        pageX:pageX,
        pageY:pageY
    }
}
複製代碼

事件綁定和解綁:

//添加事件
function addEvent(node, type, handler) {
    if (node.attachEvent) {
        node.attachEvent('on'+type, handler);
    } else {
        node.addEventListener(type, handler);
    }
}
//解除綁定
function removeEvent(node, type, handler) {
    if (node.detachEvent) {
        node.detachEvent('on'+type, handler);
    } else {
        node.removeEventListener(type, handler);
    }
}
複製代碼

文檔加載事件：

//對應於$(document).ready()的原生實現
document.addEventListener('DOMContentLoaded', function(){});
複製代碼

（end）

​