15个值得开发人员关注的jQuery开发技巧和心得

1、.：.；15个值得开发人员关注的jQuery开发技巧和心得很多jQuery开发人员能够不知道开发技巧，下面笔者总结了15个值得开发人员关注的jQuery开发技巧和心得，供大家学习和参考，希望对开发人员有所协助 ： 1. 尽量运用最新版本的jQuery类库jQuery工程中运用了大量的创新。最好的方法来提高性能就是运用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说独一要干的就是修正tag，何乐而不为呢？我们也可以运用免费的CDN效力，例如， Google来存放jQuery类库。 2. 运用简单的选择器直到最近，前往DOM元素的方式都是解析选择器字符串，javascri

2、pt循环和内建的javascript API例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三种方式的整合运用。但是现代阅读器都开场支持querySelectorAll()，这个方法可以了解CSS查询器，而且能带来显著的性能提升。然而，我们应该防止运用复杂的选择器前往元素。更不用说很多用户运用老版本的阅读器，强迫jQuery去处置DOM树。这个方式非常慢。$(lidata-selected=true a) / Fancy, but slow $(li.selected a) / Better $(#elem)

3、 / Best 选择id是最快速的方式。假设他需求运用class称号， 那么他最好带上tag称号，这样会更快些。特别是在老阅读器和挪动设备上。访问DOM是javascript运用最慢的方式 ，因此尽量少运用。运用变量去保管选择器，这样会运用cache来保管。性能更好。var buttons = $(#navigation a.button); / Some prefer prefixing their jQuery variables with $: var $buttons = $(#navigation a.button); 另外一个值得做的是jQuery给了他很多的额外便利选择器 ，例如

4、，:visible，:hidden，:animated还有其它，这些不是合法的CSS3选择器。结果是他运用这些类库就不能有效地利用querySelectorAll()方法。为了弥补这个问题，他需求先选择元素，再过滤，如下：$(a.button:animated); / Does not use querySelectorAll() $(a.button).filter(:animated); / Uses it 3. 数组方式运用jQuery对象运转选择器的结果是一个jQuery对象。然而，jQuery类库让他觉得他正在运用一个定义了index和长度的数组。/ Selecting all th

5、e navigation buttons: var buttons = $(#navigation a.button); / We can loop though the collection: for(var i=;ibuttons.length;i+) console.log(buttonsi); / A DOM element, not a jQuery object / We can even slice it: var firstFour = buttons.slice(,4); 假设性能是他关注的，那么运用简单for或者while循环来处置，而不是$.each()，这样能使他的代码

6、更快。检查长度也是一个检查他的collection能否含有元素的方式。if(buttons) / This is always true / Do something if(buttons.length) / True only if buttons contains elements / Do something 4. 选择器属性jQuery提供了一个属性，这个属性显示了用来做链式的选择器。$(#container li:first-child).selector / #container li:first-child $(#container li).filter(:first-child

7、).selector / #container li.filter(:first-child) 虽然上面的例子针对同样的元素，选择器那么完全不一样。第二个实践上是非法的，他不可以运用它来创建一个对象。只能用来显示filter方法是用来减少collection。5. 创建一个空的jQuery对象创建一个新的jQuery空间能极大的减小开销。有时候，他能够需求创建一个空的对象，然后运用add()方法添加对象。var container = $(); container.add(another_element); 这也是quickEach方法的根底，他可以运用这种更快的方式而非each()。6. 选

8、择一个随机元素上面我提到过，jQuery添加它本人的选择器过滤。除了类库，他可以添加本人的过滤器。只需求添加一个新的方法到$.expr:对象。一个非常棒的运用方式是Waldek Mastykarz的博客中提到的：创建一个用来前往随机元素的选择器。他可以修正下面代码：(function($) var random = ; $.expr:.random = function(a, i, m, r) if (i = ) random = Math.floor(Math.random() * r.length); return i = random; ; )(jQuery); / This is ho

9、w you use it: $(li:random).addClass(glow); 7. 运用CSS HooksCSS hooks API是提供开发人员得到和设置特定的CSS数值的方法。运用它，他可以隐藏阅读器特定的执行并且运用一个一致的界面来存取特定的属性。$.cssHooksborderRadius = get: function(elem, computed, extra) / Depending on the browser, read the value of / -moz-border-radius, -webkit-border-radius or border-radius

10、, set: function(elem, value) / Set the appropriate CSS3 property ; / Use it without worrying which property the browser actually understands: $(#rect).css(borderRadius,5); 更好的在于，人们曾经创建了一个支持CSS hooks类库8. 运用自定义的缓动方法他能够听到过jQuery的缓动插件，它可以允许他给他的动画添加特效。独一的缺陷是他的访问者需求加载另外一个javascript文件。侥幸的是，他可以简单的从插件拷贝效果，并且

11、添加到jQuery.easing对象中，如下：$.easing.easeInOutQuad = function (x, t, b, c, d) if (t/=d/2) 1) return c/2*t*t + b; return -c/2 * (-t)*(t-2) - 1) + b; ; / To use it: $(#elem).animate(width:200,slow,easeInOutQuad); 9. $.proxy()运用callback方法的缺陷之一是当执行类库中的方法后，context被设置到另外一个元素，例如： Close 执行下面代码：$(#panel).fadeIn(f

12、unction() / this points to #panel $(#panel button).click(function() / this points to the button $(this).fadeOut(); ); ); 他将遇到问题，button会消逝，不是panel。运用$.proxy方法，他可以这样书写代码：$(#panel).fadeIn(function() / Using $.proxy to bind this: $(#panel button).click($.proxy(function() / this points to #panel $(this).

13、fadeOut(); ,this); ); 这样才正确的执行。$.proxy方法接受两个参数，他最初的方法，还有context。这里阅读更多$.proxy in the docs.。10. 判别页面能否太过复杂一个非常简单的道理，约复杂的页面，加载的速度越慢。他可以运用下面代码检查一下他的页面内容：console.log( $(*).length ); 以上代码前往的数值越小，网页加载速度越快。他可以思索经过删除无用多余的元素来优化他的代码11. 将他的代码转化成jQuery插件假设他要花一定得时间去开发一段jQuery代码，那么他可以思索将代码变成插件。这将可以协助 他重用代码，并且可以有效

14、的协助 他组织代码。创建一个插件代码如下：(function($) $.fn.yourPluginName = function() / Your code goes here return this; ; )(jQuery); 他可以在这里阅读更多开发教程。12. 设置全局AJAX为缺省假设他开发ajax程序的话，他一定需求有加载中“之类的显示告知用户，ajax正在进展，我们可以运用如下代码一致管理，如下：/ ajaxSetup is useful for setting general defaults: $.ajaxSetup( url : /ajax/, dataType : json

15、 ); $.ajaxStart(function() showIndicator(); disableButtons(); ); $.ajaxComplete(function() hideIndicator(); enableButtons(); ); /* / Additional methods you can use: $.ajaxStop(); $.ajaxError(); $.ajaxSuccess(); $.ajaxSend(); */ 13. 在动画中运用delay()方法链式的动画效果是jQuery的强大之处。但是有一个忽略了的细节就是他可以在动画之间加上delays，如下：

16、/ This is wrong: $(#elem).animate(width:200,function() setTimeout(function() $(#elem).animate(marginTop:100); ,2000); ); / Do it like this: $(#elem).animate(width:200).delay(2000).animate(marginTop:100); jQuery动画帮了我们大忙，否那么我们得本人处置一堆的细节，设置timtout，处置属性值，跟踪动画变化等等。大家可以参考这个文章：jQuery animations14. 合理利用HTML

17、5的Data属性HTML5的data属性可以协助 我们插入数据。特别适宜前后端的数据交换。jQuery近来发布的data()方法，可以有效的利用HTML5的属性，动得到数据。下面是个例子： 为了存取数据他需求调用如下代码：$(#d1).data(role); / page $(#d1).data(lastValue); / 43 $(#d1).data(hidden); / true; $(#d1).data(options).name; / John; data()的jQuery文档：data() in the jQuery docs15. 本地存储和jQuery本地存储是一个超级简单的API。简单的添加他的数据到localStorage全局属性中:/ Check if key exists in the storage var value = $.jStorage.get(key); if(!value) / if not - load the data from the server value = load_data_f