javascript - jQuery Tips and Tricks -

syntax

• shorthand ready-event roosteronacid
• line breaks , chainability roosteronacid
• nesting filters nathan long
• cache collection , execute commands on same line roosteronacid
• contains selector roosteronacid
• defining properties @ element creation roosteronacid
• access jquery functions array roosteronacid
• the noconflict function - freeing $ variable oli
• isolate $ variable in noconflict mode nickf
• no-conflict mode roosteronacid

data storage

• the data function - bind data elements tenebrousx
• html5 data attributes support, on steroids! roosteronacid
• the jquery metadata plug-in filip dupanović

optimization

• optimize performance of complex selectors roosteronacid
• the context parameter lupefiasco
• save , reuse searches nathan long
• creating html element , keeping reference, checking if element exists, writing own selectors andreas grech

miscellaneous

• check index of element in collection redsquare
• live event handlers tm
• replace anonymous functions named functions ken
• microsoft ajax framework , jquery bridge slace
• jquery tutorials egyamado
• remove elements collection , preserve chainability roosteronacid
• declare $this @ beginning of anonymous functions ben
• firebug lite, hotbox plug-in, tell when image has been loaded , google cdn colour blend
• judicious use of third-party jquery scripts harriyott
• the each function jan zich
• form extensions plug-in chris s
• asynchronous each function onenerd
• the jquery template plug-in: implementing complex logic using render-functions roosteronacid

creating html element , keeping reference

var newdiv = $("<div />");  newdiv.attr("id", "mynewdiv").appendto("body");  /* whenever want append new div created,     can reference "newdiv" variable */ 

checking if element exists

if ($("#somediv").length) {     // exists... } 

writing own selectors

$.extend($.expr[":"], {     over100pixels: function (e)     {         return $(e).height() > 100;     } });  $(".box:over100pixels").click(function () {     alert("the element clicked on 100 pixels height"); });