理解 jQuery

1、还有必要学习 jQuery 吗

首先必须肯定的回答：有必要。
虽然目前 MVVM 框架很流行，但 jQuery 依然占据一定地位。某些特定场景的项目 jQuery 依然是最好的选择，jQuery帮助我们解决了太多的兼容性问题，而且对于有一定JS基础的人来说学习 jQuery 的成本很低，没必要去掌握全部API，只要会查文档就可以。虽然新项目中不一定会使用 jQuery ，但是学习 jQuery ，尤其是去阅读 jQuery 源码，理解其设计思想、设计模式，你将会颇有收获。

2、jQuery DOM 操作设计思想

jQuery 的基本设计思想和主要用法，就是”选择某个网页元素，然后对其进行某种操作”。使用 jQuery 的第一步，往往就是将一个选择表达式，放进构造函数 jQuery()（简写为('div').find('h3').eq(2).html('Hello');`,将一系列操作连接在一起。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

3、自己实现一个简单的 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; ili').addClass(['red','blue']);$('ul>li').setText('Hello jQuery');

|

以上是本人实现的一个简单的jQuery对象。该对象接收一个参数，可以是一个已经获取到的DOM对象，也可以是一个选择器字符串。jQuery方法返回的是一个自定义的节点对象，该对象上定义了addClass、setText等一系列操作方法。

4、jQuery获取DOM和JS选择器获取的DOM的区别与联系

例如：

|

1

|

|

|

12

|

var div = document.getElementById('x')var $div = $('#x')

|

• div 是由原生API获取的元素节点对象，
  div.__proto__ === HTMLDivElement.prototype
div.__proto__.__proto__ === HTMLElement .prototype
• div.proto === jQuery.prototype$div.proto .proto === Object.prototype`
• div 变成 (div)`
• div[0] === div`