15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

$('li[data-selected="true"] a')  // Fancy, but slow
$('li.selected a')  // Better
$('#elem')  // Best

var buttons = $('#navigation a.button');
// Some prefer prefixing their jQuery variables with $:
var $buttons = $('#navigation a.button');

$('a.button:animated');  // Does not use querySelectorAll()
$('a.button').filter(':animated');  // Uses it

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');
// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
  console.log(buttons[i]);  // A DOM element, not a jQuery object
}
// We can even slice it:
var firstFour = buttons.slice(0,4);

if(buttons){ // This is always true
  // Do something
}
if(buttons.length){ // True only if buttons contains elements
  // Do something
}

$('#container li:first-child').selector
// #container li:first-child
$('#container li').filter(':first-child').selector
// #container li.filter(:first-child)

var container = $([]);
container.add(another_element);

(function($){
  var random = 0;
  $.expr[':'].random = function(a, i, m, r) {
    if (i == 0) {
      random = Math.floor(Math.random() * r.length);
    }
    return i == random;
  };
})(jQuery);
// This is how you use it:
$('li:random').addClass('glow');

$.cssHooks['borderRadius'] = {
    get: function(elem, computed, extra){
      // Depending on the browser, read the value of
      // -moz-border-radius, -webkit-border-radius or border-radius
    },
    set: function(elem, value){
      // Set the appropriate CSS3 property
    }
};
// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

$.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');

<div id="panel" style="display:none">
  <button>Close</button>
</div>

$('#panel').fadeIn(function(){
  // this points to #panel
  $('#panel button').click(function(){
    // this points to the button
    $(this).fadeOut();
  });
});

$('#panel').fadeIn(function(){
  // Using $.proxy to bind this:
  $('#panel button').click($.proxy(function(){
    // this points to #panel
    $(this).fadeOut();
  },this));
});

console.log( $('*').length );

(function($){
  $.fn.yourPluginName = function(){
    // Your code goes here
    return this;
  };
})(jQuery);

// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
  url      : '/ajax/',
  dataType  : 'json'
});
$.ajaxStart(function(){
  showIndicator();
  disableButtons();
});
$.ajaxComplete(function(){
  hideIndicator();
  enableButtons();
});
/*
  // Additional methods you can use:
  $.ajaxStop();
  $.ajaxError();
  $.ajaxSuccess();
  $.ajaxSend();
*/

// 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});

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"
  data-options='{"name":"John"}'>
</div>

$("#d1").data("role"); // "page"
$("#d1").data("lastValue"); // 43
$("#d1").data("hidden"); // true;
$("#d1").data("options").name; // "John";