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

　　我们为什么使用jQuery库呢？原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行。

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!");// Animatingelem.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 waylog($('#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 calledvar 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+'
');//}// Goodvar 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 placevar 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 firsttimer('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 = $('

25.给html元素分配一个名为JS的class。

　　现代的web apps非常的依赖js，这里的一个技巧就是只有当js可用时才能显示特定的元素。看下面的代码。

$(document).ready(function(){    $('html').addClass('JS');});  html.JS #message { display:block; } #message {display:none;}

这样，只有js可用的时候id为message的元素才会显示；如果不支持js，则该元素不会显示。

 

26.监听不存在的元素上的事件。

　　jQuery拥有一个先进的事件处理机制，通过on()方法可以监听还不存在的事件。 这是因为on方法可以传递一个元素的子元素选择器作为参数。看下面的例子：

     
 
      
Old
 
      
Old
 
      
Old
 
      
Old
 
     
var list = $('#testList');// Binding an event on the list, but listening for events on the li items:list.on('click','li',function(){    $(this).remove();});// This allows us to create li elements at a later time,// while keeping the functionality in the event listenerlist.append('
New item (click me!)
');

这样，即使li是后创建的，也可以通过on()方法来监听。

 

27.只使用一次事件监听。

　　有时，我们只需要绑定只运行一次的事件处理程序。那么one()方法是一个不错的选择，通过它你就可以高枕无忧了。

　　

Press me!var press = $('#press');// There is a method that does exactly that, the one():press.one('click',function(){    alert('This alert will pop up only once');});// What this method does, is call on() behind the scenes,// with a 1 as the last argument:// press.on('click',null,null,function(){alert('I am the one and only!');}, 1);

28.模拟触发事件。

　　我们可以通过使用trigger模拟触发一个click事件。

Press me!var press = $('#press');// Just a regular event listener:press.on('click',function(e, how){    how = how || '';    alert('The buton was clicked ' + how + '!');});// Trigger the click eventpress.trigger('click');// Trigger it with an argumentpress.trigger('click',['fast']);

29.使用触摸事件。

　　使用触摸事件和相关的鼠标事件并没有太多不同，但是你得有一个方便的移动设备来测试会更好。看下面这个例子。

// Define some variablesvar ball = $('<div id="ball"></div>').appendTo('body'),startPosition = {}, elementPosition = {};// Listen for mouse and touch eventsball.on('mousedown touchstart',function(e){    e.preventDefault();    // Normalizing the touch event object    e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e;    // Recording current positions    startPosition = {x: e.pageX, y: e.pageY};    elementPosition = {x: ball.offset().left, y: ball.offset().top};    // These event listeners will be removed later    ball.on('mousemove.rem touchmove.rem',function(e){        e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e;        ball.css({            top:elementPosition.y + (e.pageY - startPosition.y),            left: elementPosition.x + (e.pageX - startPosition.x),        });    });});ball.on('mouseup touchend',function(){    // Removing the heavy *move listeners    ball.off('.rem');});

30.更好地使用on()/off()方法。

　　在jQuery1.7版本时对事件处理进行了简化，看看下面的例子吧。

     
 
      1 
      2 
      3 
      4 
      Clear 
     
// Lets cache some selectorsvar button1 = $('#button1'),    button2 = $('#button2'),    button3 = $('#button3'),    button4 = $('#button4'),    clear = $('#clear'),    holder = $('#holder');// Case 1: Direct event handlingbutton1.on('click',function(){    log('Click');});// Case 2: Direct event handling of multiple eventsbutton2.on('mouseenter mouseleave',function(){    log('In/Out');});// Case 3: Data passingbutton3.on('click', Math.round(Math.random()*20), function(e){    // This will print the same number over and over again,    // as the random number above is generated only once:    log('Random number: ' + e.data);});// Case 4: Events with a namespacebutton4.on('click.temp', function(e){    log('Temp event!');});button2.on('click.temp', function(e){    log('Temp event!');});// Case 5: Using event delegation$('#holder').on('click', '#clear', function(){    log.clear();});// Case 6: Passing an event mapvar t; // timerclear.on({    'mousedown':function(){        t = new Date();    },    'mouseup':function(){        if(new Date() - t > 1000){            // The button has been held pressed            // for more than a second. Turn off            // the temp events            $('button').off('.temp');            alert('The .temp events were cleared!');        }    }});

31.更快地阻止默认事件行为。

　　我们知道js中可以使用preventDefault()方法来阻止默认行为，但是jQuery对此提供了更简单的方法。如下：

Go To Google$('#goToGoogle').click(false);

32.使用event.result链接多个事件处理程序。

　　对一个元素绑定多个事件处理程序并不常见，而使用event.result更可以将多个事件处理程序联系起来。看下面的例子。

点击  

这样，控制台会输出Hip Hop!

 

33.创建你自己习惯的事件。

　　你可以使用on()方法创建自己喜欢的事件名称，然后通过trigger来触发。举例如下：

Jump Punch Click Clear 
     
          

持续更新中...

 

注：原创文章，如需转载，请注明出处。博客地址：http://www.cnblogs.com/zhuzhenwei918/p/6181760.html