chszs 发表于 2010-12-23 12:30:49

jQuery技巧集 《jQuery技巧集》
【版权声明】：本文属于原创，转载需征得作者chszs的同意！

jQuery技巧集

不管你是一个.NET Web开发者还是Java Web开发者，jQuery都在逐步成为你必须具备的技能。最近，我收集和整理了一些jQuery的使用技巧。掌握这些技巧，你不但可以写出高质量的jQuery代码，还能晋升到jQuery高手。

1、无冲突模式
如果Web页面引用了多种JavaScript库，那么为了防止这些JavaScript库与jQuery库中的函数发生冲突，你可以使用以下的jQuery方法，该方法使用了一个变量名来代替jQuery默认的$符号。

var $j = jQuery.noConflict();
$j('#myDiv').hide();


2、从Google Code中载入代码
Google Code上面有多种JavaScript库，而且访问Google Code的速度非常快，因为这些JavaScript库早已被Google的CDN缓存。因此，作为开发者，你可以让页面从Google Code加载JavaScript库，而不是从你部署的Web服务器上加载JavaScript库。这样，也能减轻你的Web服务器的带宽。当然，前提是加载的JavaScript库是开源的JS库，而非自定义的JS库。

<script src=""></script>
<script type="text/javascript">

    // Load jQuery
    google.load("jquery", "1.4.2");

    google.setOnLoadCallback(function() {
        // Your code goes here.
    });
      
</script>


或者直接引用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


Google目前代理的有效的JavaScript库有：

注：目前使用Google代理的JavaScript库，需要加入一个Google API key。

<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>

可以在： 申请Google API Key：


3、使用empty()取代html("")
如果你想让某个div或list为空，可以使用.html("")。但是，这种用法无法保证分配到子DOM元素的事件能绑定子元素。在jQuery手册上有叙述：
"To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves."
因此，最好是使用.empty() 来替代.html("")。

4、自定义选择器能使代码更整洁
如果你是反复不断地使用jQuery的选择器，那么，你该考虑创建一个自己的选择器来代替了。

$.extend($.expr[':'], {
    over100pixels:function(a) {
        return $(a).height() > 100;
    }
});



$('.box:over100pixels').click(function() {
    alert('点击后此元素的高度会大于100像素');
});


5、学习"data"方法并加以应用
以"在DOM中存储一些杂项数据"为例，很多开发者写出来的代码就像下面这样：

        $('.myselector').attr ('alt','orange');


从技术上来讲，这样写是不恰当的，其他人难以理解编程者的意图。
jQuery实际上为在DOM中存储数据提供了一个方法，名为data方法。如下所示：

        $('.myselector').data ('myfavcolor','orange');
        // then retrieved as simply as
        $('myselector').data ('myfavcolor');

此方法允许你为页面上的任意元素关联数据或存储数据，而且数据还有一个有意义的命名。

6、为选择器给定上下文
在缺省情况下，使用选择器比如$('.myDiv')，脚本会遍历整个DOM，这样的话，会白白增加页面的载入时间和系统开销。
在执行元素选择时，jQuery函数提供了一个快速选择的参数（第二个参数）。

jQuery( expression, context )

通过给选择器提供一个上下文，脚本搜索元素时不必再遍历整个DOM树了。
为了说明这一点，让我们以上面的代码块为例。它创建了一个包含1000个项的无序列表。每个项均有单独的class。每次要选择其中的项，都需要对1000个项进行遍历。通过class选择这1000个项，仅用了5秒。

        var selectedItem = $('#listItem'+ i);

如果我为选择器增加一个上下文，再次运行，就像这样：

var selectedItem = $('#listItem'+ i, $('.myList'));


此代码仍然花销了3818毫秒。尽管代码还不够高效，但是已经节省了25%的时间，而且代码的修改量很小。

7、为ready事件使用速记符
这是一个小技巧，但使用速记符来替代$(document).ready函数可以省下一些字符串

$(document).ready(function(){
    // 你的代码
});

你可以这么写：

$(function(){
    // 你的代码
});


8、JsFiddle标签
你要快速测试JavaScript代码吗？如果是，那么可以考虑JSFiddle。JsFiddle为HTML、CSS和JavaScript.提供了一个编辑界面。另外，jsFiddle允许你选择所有主流的JavaScript 框架，例如：Mootools、jQuery、Dojo、Prototype、YUI、Glow和Vanilla。JsFiddle最吸引人的特点是能够存储代码并通过指定的URL分享代码。假设如果某个好友的JavaScript代码存在故障，可以方便地远程解决。


[ 本帖最后由 chszs 于 2010-12-23 12:35 编辑 ]

justforregister 发表于 2010-12-23 23:55:06

nice job

jieforest 发表于 2010-12-24 22:34:08

好文，可以加精。

justforregister 发表于 2010-12-24 23:46:17

还没用过 jquery

dingjun123 发表于 2011-1-13 23:32:57

不错，收藏了

lithink 发表于 2012-3-10 12:37:27

哇塞，不错！

vicky987654321 发表于 2012-3-31 22:47:09

收藏了！

muqingren 发表于 2012-4-9 14:59:08

写的很好，顶楼主

页: [1]