【译】jQuery的50个使用技巧

1.当document文档就绪时执行JavaScript代码。

2.使用route。

3.使用JavaScript中的AND技巧。

使用&&操作符的特点是如果操作符左边的表达式是false，那么它就不会再判断操作符右边的表达式了。所以：

// Instead of writing this:
if($('#elem').length){
    // do something
}

// You can write this:

$('#elem').length && log("doing something");

4. is()方法比你想象的更为强大。

下面举几个例子，我们先写一个id为elem的div。js代码如下：

// First, cache the element into a variable:
var elem = $('#elem');

// Is this a div?
elem.is('div') && log("it's a div");

// Does it have the bigbox class?
elem.is('.bigbox') && log("it has the bigbox class!");

// Is it visible? (we are hiding it in this example)
elem.is(':not(:visible)') && log("it is hidden!");

// Animating
elem.animate({'width':200},1);

// is it animated?
elem.is(':animated') && log("it is animated!");

其中判断是否为动画我觉得非常不错。

5.判断你的网页一共有多少元素。

通过使用$("*").length属性可以判断网页的元素数量。

// How many elements does your page have?
log('This page has ' + $('*').length + ' elements!');

6.使用length()属性很笨重，下面我们使用exist()方法。

/ Old way
log($('#elem').length == 1 ? "exists!" : "doesn't exist!");

// Trickshot:

jQuery.fn.exists = function(){ return this.length > 0; }

log($('#elem').exists() ? "exists!" : "doesn't exist!");

7.jQuery方法$()实际上是拥有两个参数的，你知道第二个参数的作用吗？

// Select an element. The second argument is context to limit the search
// You can use a selector, jQuery object or dom element

$('li','#firstList').each(function(){
    log($(this).html());
});

log('-----');

// Create an element. The second argument is an
// object with jQuery methods to be called

var div = $('
',{
    "class": "bigBlue",
    "css": {
        "background-color":"purple"
    },
    "width" : 20,
    "height": 20,
    "animate" : {   // You can use any jQuery method as a property!
        "width": 200,
        "height":50
    }
});

div.appendTo('#result');

8.使用jQuery我们可以判断一个链接是否是外部的，并来添加一个icon在非外部链接中，且确定打开方式。

这里用到了hostname属性。

   
The previous tip
   
The next tip
   
Google


// Loop through all the links
$('#links a').each(function(){

    if(this.hostname != location.hostname){
        // The link is external
        $(this).append('')
               .attr('target','_blank');
    }

});

9.jQuery中的end()方法可以使你的jQuery链更加高效。

 
 
 
No
 
No
 
No
 
 
 
// Here is how it is used:

var breakfast = $('#meals .breakfast');

breakfast.find('.eggs').text('Yes')
                      .end() // back to breakfast
                      .find('.toast').text('Yes')
                      .end()
                      .find('.juice').toggleClass('juice coffee').text('Yes');

breakfast.find('li').each(function(){
    log(this.className + ': ' + this.textContent)
});

10.也许你希望你的web 应用感觉更像原生的，那么你可以阻止contextmenu默认事件。

11.一些站点可能会使你的网页在一个bar下面，即我们所看到在下面的网页是iframe标签中的，我们可以这样解决。

// Here is how it is used:

if(window != window.top){
    window.top.location = window.location;
}
else{
    alert('This page is not displayed in a frame. Open 011.html to see it in action.');
}

12.你的内联样式表并不是被设置为不可改变的，如下：

// Make the stylesheet visible and editable
$('#regular-style-block').css({'display':'block', 'white-space':'pre'})
                         .attr('contentEditable',true);

这样即可改变内联样式了。

13.有时候我们不希望网页的某一部分内容被选择比如复制粘贴这种事情，我们可以这么做：

In certain situations you might want to prevent text on the page from being selectable. Try selecting this text and hit view source to see how it is done.

这样，内容就不能被选择啦。

14.从CDN中引入jQuery，这样的方法可以提高我们网站的性能，并且引入最新的版本也是一个不错的主意。

下面会介绍四种不同的方法。

15.保证最小的DOM操作。

我们知道js操作DOM是非常浪费资源的，我们可以看看下面的例子。

CODE
// Bad
//var elem = $('#elem');
//for(var i = 0; i < 100; i++){
//    elem.append('
element '+i+'
');
//}

// Good
var elem = $('#elem'),
    arr = [];

for(var i = 0; i < 100; i++){
    arr.push('
element '+i+'
');
}

elem.append(arr.join(''));

16.更方便的分解URL。

也许你会使用正则表达式来解析URL，但这绝对不是一种好的方法，我们可以借用a标签来实现它。

// You want to parse this address into parts:
var url = 'http://tutorialzine.com/books/jquery-trickshots?trick=12#comments';

// The trickshot:
var a = $('',{ href: url });

log('Host name: ' + a.prop('hostname'));
log('Path: ' + a.prop('pathname'));
log('Query: ' + a.prop('search'));
log('Protocol: ' + a.prop('protocol'));
log('Hash: ' + a.prop('hash'));

17.不要害怕使用vanilla.js。

jQuery背负的太多，这便是原因，你可以用一般的js。

// Print the IDs of all LI items
$('#colors li').each(function(){

    // Access the ID directly, instead
    // of using jQuery's $(this).attr('id')

    log(this.id);

});

18.最优化你的选择器

// Let's try some benchmarks!

var iterations = 10000, i;

timer('Fancy');

for(i=0; i < iterations; i++){
    // This falls back to a SLOW JavaScript dom traversal
    $('#peanutButter div:first');
}

timer_result('Fancy');


timer('Parent-child');

for(i=0; i < iterations; i++){
    // Better, but still slow
    $('#peanutButter div');
}

timer_result('Parent-child');


timer('Parent-child by class');

for(i=0; i < iterations; i++){
    // Some browsers are a bit faster on this one
    $('#peanutButter .jellyTime')

19.缓存你的selector。

// Bad:
// $('#pancakes li').eq(0).remove();
// $('#pancakes li').eq(1).remove();
// $('#pancakes li').eq(2).remove();

// Good:
var pancakes = $('#pancakes li');

pancakes.eq(0).remove();
pancakes.eq(1).remove();
pancakes.eq(2).remove();

// Alternatively:
// pancakes.eq(0).remove().end()
//           .eq(1).remove().end()
//           .eq(2).remove().end();

20.对于重复的函数只定义一次

如果你追求代码的更高性能，那么当你设置事件监听程序时必须小心，只定义一次函数然后把它的名字作为事件处理程序传递是不错的方法。

$(document).ready(function(){
    function showMenu(){
        alert('Showing menu!');
        // Doing something complex here
    }

    $('#menuButton').click(showMenu);
    $('#menuLink').click(showMenu);

});

21.像对待数组一样地对待jQuery对象

由于jQuery对象有index值和长度，所以这意味着我们可以把对象当作普通的数组对待。这样也会有更好地性能。

var arr = $('li'),
    iterations = 100000;

timer('Native Loop');

for(var z=0;z

22.当做复杂的修改时要分离元素。

修改一个dom元素要求网页重绘，这个代价是高昂的，所以如果你想要再提高性能，就可以尝试着当对一个元素进行大量修改时先从页面中分离这个元素，修改完之后再添加到页面。

// Modifying in place
var elem = $('#elem');

timer('In place');

for(i=0; i < iterations; i++){

    elem.width(Math.round(100*Math.random()));
    elem.height(Math.round(100*Math.random()));

}

timer_result('In place');

var parent = elem.parent();

// Detaching first
timer('Detached');

elem.detach();

for(i=0; i < iterations; i++){

    elem.width(Math.round(100*Math.random()));
    elem.height(Math.round(100*Math.random()));

}

elem.appendTo(parent);

timer_result('Detached');

23.不要一直等待load事件。

我们已经习惯了把我们所有的代码都放在ready的事件处理程序中，但是，如果你的html页面很庞大，decument ready恐怕会被延迟了，所以对于一些我们不希望ready后才可以触发的事件可以放在html的head元素中。

24.当使用js给多个元素添加样式时更好的做法是创建一个style元素。

我们之前提到过，操作dom是非常慢的，所以当添加多个元素的样式时创建一个style元素并添加到document中是更好的做法。

 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 
Item
 

var style = $('