jQuery Tips and Tricks

 

Syntax

  • Shorthand for the ready-event by roosteronacid
  • Line breaks and chainability by roosteronacid
  • Nesting filters by Nathan Long
  • Cache a collection and execute commands on the same line by roosteronacid
  • Contains selector by roosteronacid
  • Defining properties at element creation by roosteronacid
  • Access jQuery functions as you would an array by roosteronacid
  • The noConflict function - Freeing up the $ variable by Oli
  • Isolate the $ variable in noConflict mode by nickf
  • No-conflict mode by roosteronacid

    • Data Storage

  • The data function - bind data to elements by TenebrousX
  • HTML5 data attributes support, on steroids! by roosteronacid
  • The jQuery metadata plug-in by Filip Dupanović

    • Optimization

  • Optimize performance of complex selectors by roosteronacid
  • The context parameter by lupefiasco
  • Save and reuse searches by Nathan Long
  • Creating an HTML Element and keeping a reference, Checking if an element exists, Writing your own selectors by Andreas Grech

    • Miscellaneous

  • Check the index of an element in a collection by redsquare
  • Live event handlers by TM
  • Replace anonymous functions with named functions by ken
  • Microsoft AJAX framework and jQuery bridge by Slace
  • jQuery tutorials by egyamado
  • Remove elements from a collection and preserve chainability by roosteronacid
  • Declare $this at the beginning of anonymous functions by Ben
  • FireBug lite, Hotbox plug-in, tell when an image has been loaded and Google CDN by Colour Blend
  • Judicious use of third-party jQuery scripts by harriyott
  • The each function by Jan Zich
  • Form Extensions plug-in by Chris S
  • Asynchronous each function by OneNerd
  • The jQuery template plug-in: implementing complex logic using render-functions by roosteronacid

    • This one goes out to Kobi.

    Consider the following snippet of code: 

    // hide all elements which contains the text "abc"
$("p").each(function ()
{
    var that = $(this);

    if (that.text().indexOf("abc") > -1) that.hide();
});

    Here's a shorthand... which is about twice as fast: 

    $("p.value:contains('abc')").hide();

    Add a selector for elements above the fold

    As a jQuery selector plugin 

     $.extend($.expr[':'], {
 "aboveFold": function(a, i, m) {
   var container = m[3],
   var fold;
  if (typeof container === "undefined") {
     fold = $(window).height() + $(window).scrollTop();
  } else {
     if ($(container).length == 0 || $(container).offset().top == null) return false;
     fold = $(container).offset().top + $(container).height();
  }
  return fold >= $(a).offset().top;
 } 
});

    Usage: 

    $("p:aboveFold").css({color:"red"});

    Thx to scottymac

    (This is a shamless plug)

    Instead of writing repetitive form handling code, you can try out this plugin I wrote that adds to the fluent API of jQuery by adding form related methods: 

    // elementExists is also added
if ($("#someid").elementExists())
  alert("found it");

// Select box related
$("#mydropdown").isDropDownList();

// Can be any of the items from a list of radio boxes - it will use the name
$("#randomradioboxitem").isRadioBox("myvalue");
$("#radioboxitem").isSelected("myvalue");

// The value of the item selected. For multiple selects it's the first value
$("#radioboxitem").selectedValue();

// Various, others include password, hidden. Buttons also
$("#mytextbox").isTextBox();
$("#mycheck").isCheckBox();
$("#multi-select").isSelected("one", "two", "three");

// Returns the 'type' property or 'select-one' 'select-multiple'
var fieldType = $("#someid").formElementType();
    链接地址: http://www.djcxy.com/p/95402.html

    上一篇: Jquery手风琴关闭然后打开

    下一篇: jQuery提示和技巧