jQuery笔记

jQuery有多厉害～

2006年发布，是目前 前端中最长寿的库 还是世界上使用最广泛的库，全球至少80%的网站在使用

jQuery的设计模式

• 可以不用 new 来构造函数
• $ 支持多种参数，这个模式叫做 重载
• 用闭包来隐藏细节
• $div.text() 既可读也可写，getter / setter
• $.fn 是 $.prototype 的别名
• jQuery 针对不同浏览器使用不同的代码

基本知识

window.jQuery 是全局函数, 全局函数可以省略 window window.$ = window.jquery = $ = jquery jQuery(选择器) 用于获取对应的元素，但是却不返回这些元素 相反，返回一个对象，jQuery 构造出来的对象，这个对象可以操作对应的元素 dom 原生对象和 jquery 选择器得到的对象 是两种不同的对象类型，两者不等价 js 原生获取的是一个对象

用对选择器

jQuery 中可以使用多种选择器，每种选择器的性能是不一样的；

1. 最快：id 选择器和元素标签选择器 $('#id'); 和 #('div');
2. 较慢：class 选择器 $('.className') 的性能取决于不同浏览器，在Firefox/safari/chrome中都有原生的 getElementByClassName 所以并不慢，IE中会相当慢；
3. 最慢： 伪类选择器和属性选择器 找出网页中所有的隐藏元素，就要用到伪类选择器：   $(‘:hidden’) 属性选择器的例子则是：   $(‘[attribute=value]’) 这两种语句是最慢的，因为浏览器没有针对它们的原生方法。但是，一些浏览器的新版本，增加了querySelector()和querySelectorAll()方法，因此会使这类选择器的性能有大幅提高。

不要过度的使用 jQuery

jQuery 速度再快，也无法和原生 js 方法相比。 有原生方法可以使用的场合，尽量避免使用jQuery。 以最简单的选择器为例，document.getElementById(“foo") 要比 $(“#foo") 快10多倍。 每使用一次选择器，就会生成一个jQuery对象，很庞大，带有很多属性和方法，会占用不少内存，所以尽量少使用jQuery对象。

使用链式写法

jQuery的一大特点，就是允许使用链式写法。 $(‘div’).find(‘h3’).eq(2).html(‘Hello’); 使用链最短的办法，读取变量的时候，先在当前作用域寻找该变量，如果找不到就往上一层的作用域中寻找该变量。这样读取局部变量比全局变量快很多。 第一段：

let a = 0;
function x() {
	a += 1;
}

第二段：

function y() {
	let a = 0;
	a += 1;
}

第二段代码读取变量a不用前往上一层作用域，所以比第一段块。 同理调用对象方法的时候，闭包 比 prototype 更快。 prototype模式：

  var X = function(name){ this.name = name; }
  X.prototype.get_name = function() { return this.name; };

闭包模式：

var Y = function(name) {
  var y = { name: name };
  return { ‘get_name’: function(){return y.name;}};
};