jquery 学习

在面试的时候问的比较多的会是js原生代码及方法,但是当自己在公司使用时,还是jquery的方法方便很多。

下面是几篇推荐的文章~~作者是阮一峰大神,大神还有另一本一直在看的书是 《ES6入门》(附网址:http://es6.ruanyifeng.com/)


这第一篇是阮神的《jQuery设计思想》(网址:http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html)

这篇讲述了jquery的具体的设计路线,它是根据什么逻辑设计出了那么多对应的方法。

当然文章也不是特别软,还是有一些硬货在里面的,初学jquery的人可以仔细读一下,大概就能了解jquery的主要的方法及路线了。

第二篇是《jQuery最佳实践》(网址:http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html)

主要罗列一下本文中的几大观点:

1. 在正常情况下,同大版本的jQuery 新版本的表现普遍好于老版本。

2. 在jquery选择器的性能对比中,ID选择器遥遥领先,然后是标签选择器,第三是Class选择器,其他选择器都非常慢。

3. 在jquery的父子选择器中find()方法最快,原因是调用的是 原生 js中的getElementById,getElementByName,getElementByTagName等方法。

1. $('.child', $parent)              // jQuery会自动把这条语句转成$.parent.find('child'),这会导致一定的性能损失。它比最快的形式慢了5%-10%
2. $parent.find('.child')            // 这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName等等),所以速度较快
3. $parent.children('.child')        // 这条语句在jQuery内部,会使用$.sibling()和javascript的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%
4. $('#parent > .child')             // jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父元素#parent,这导致它比最快的形式大约慢70%
5. $('#parent .child')               // 这条语句与上一条是同样的情况。但是,上一条只选择直接的子元素,这一条可以于选择多级子元素,所以它的速度更慢,大概比最快的形式慢了77%
6. $('.child', $('#parent'))         // jQuery内部会将这条语句转成$('#parent').find('.child'),比最快的形式慢了23%

原先我以为在jquery中使用3、4的方式会比较快,因为在我脑海中默认认为3、4两种方式只要遍历一遍第一子元素就可以了,而find()是遍历所有子元素来着,默认就觉得find()会比较慢。所以事实证明还是需要多多学习的。我还是太弱了。/(ㄒoㄒ)/~~(ps:这里有不同意见,我也不清楚到底什么情况。)

4. 不要过度使用jQuery,以最简单的选择器为例,document.getElementById("foo")要比$("#foo")快10多倍。(很多东西该不使用jquery就不用,可是主要问题是我也不知道什么时候该用什么时候不该用。)(可以看个网站youmightnotneedjquery,你可能并不需要jquery,网站:http://youmightnotneedjquery.com/)

再来一例:

$('a').click(function(){
    alert($(this).attr('id'));
    alert(this.id);
});

// 两种方法一致,但是根据测试,this.id的速度比$(this).attr('id')快了20多倍。

5. 做好缓存。重复的选择器可以声明变量使用

jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');

var cached = jQuery('#top');
cached.find('p.classA');
cached.find('p.classB');

// 第二种方法可以比第一种快2~3倍

6. 使用链式写法。采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。根据测试,链式写法比(不使用缓存的)非链式写法,大约快了25%。

7. 事件的委托处理。

$(document).on("click", "td", function(){
    alert("a");
});
$(document).off("click", "td");

// 尽量写成如上格式(这里有不同意见,可自行斟酌,有人说应该就近绑定,也有人说应该绑在document上,我也不确定)

8. 少改动DOM结构

9. 正确处理循环

10. 尽量少生成jQuery对象

11. 选择作用域链最短的方法

12. 使用Pub/Sub模式管理事件

改用事件触发的形式:

function doSomething{
    $.trigger("DO_SOMETHING_DONE");
}
$(document).on("DO_SOMETHING_DONE", function(){
    doSomethingElse(); }
);

可以考虑使用deferred对象。

原文地址:https://www.cnblogs.com/neuscx/p/5459480.html