1、還有必要學(xué)習(xí) jQuery 嗎
首先必須肯定的回答：有必要。
雖然目前 MVVM 框架很流行，但 jQuery 依然占據(jù)一定地位。某些特定場(chǎng)景的項(xiàng)目 jQuery 依然是最好的選擇，jQuery幫助我們解決了太多的兼容性問(wèn)題，而且對(duì)于有一定JS基礎(chǔ)的人來(lái)說(shuō)學(xué)習(xí) jQuery 的成本很低，沒(méi)必要去掌握全部API，只要會(huì)查文檔就可以。雖然新項(xiàng)目中不一定會(huì)使用 jQuery ，但是學(xué)習(xí) jQuery ，尤其是去閱讀 jQuery 源碼，理解其設(shè)計(jì)思想、設(shè)計(jì)模式，你將會(huì)頗有收獲。
2、jQuery DOM 操作設(shè)計(jì)思想
jQuery 的基本設(shè)計(jì)思想和主要用法，就是”選擇某個(gè)網(wǎng)頁(yè)元素，然后對(duì)其進(jìn)行某種操作”。使用 jQuery 的第一步，往往就是將一個(gè)選擇表達(dá)式，放進(jìn)構(gòu)造函數(shù) jQuery()（簡(jiǎn)寫(xiě)為('div').find('h3').eq(2).html('Hello');`,將一系列操作連接在一起。它的原理在于每一步的jQuery操作，返回的都是一個(gè)jQuery對(duì)象，所以不同操作可以連在一起。
3、自己實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 jQuery
|
123456789101112131415161718192021222324252627282930313233
|
window.jQuery = function(nodeOrSelector) { var nodes = {}; if (typeof nodeOrSelector === 'string') { var nodeList = document.querySelectorAll(nodeOrSelector); nodeList.forEach(function(item,index){ nodes[index] = item; }); nodes.length = nodeList.length; } else if (nodeOrSelector instanceof Node) { nodes = { '1': nodeOrSelector, lenght: 1 }; } nodes.addClass = function(classNames){ for (var i=0; i<nodes.length; i++) { classNames.forEach(function(item){ nodes[i].classList.add(item); }); } }; nodes.setText = function(text) { for (var i=0; i<nodes.length; i++) { nodeList[i].innerHTML = text; } }; return nodes;};// aliaswindow.$ = jQuery// 使用$('ul>li').addClass(['red','blue']);$('ul>li').setText('Hello jQuery');
|
以上是本人實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的jQuery對(duì)象。該對(duì)象接收一個(gè)參數(shù)，可以是一個(gè)已經(jīng)獲取到的DOM對(duì)象，也可以是一個(gè)選擇器字符串。jQuery方法返回的是一個(gè)自定義的節(jié)點(diǎn)對(duì)象，該對(duì)象上定義了addClass、setText等一系列操作方法。
4、jQuery獲取DOM和JS選擇器獲取的DOM的區(qū)別與聯(lián)系
例如：
|
1
|
<div id='x'></div>
|
|
12
|
var div = document.getElementById('x')var $div = $('#x')
|
- div 是由原生API獲取的元素節(jié)點(diǎn)對(duì)象，
div.__proto__ === HTMLDivElement.prototype
div.__proto__.__proto__ === HTMLElement .prototype -
div.proto === jQuery.prototype
$div.proto .proto === Object.prototype` - div 變成
(div)`
-
div[0] === div`
