Here is a way to select element with multiple classes in jquery.
$(’table.cl1.cl2′).addClass(’abc’);
And to select the element which has one class
but not the other. This, does that:
$(’table.cl1:not(table.cl2)’).addClass(’xyz’);
Second one is pretty interesting which works like if clause.
we can fire custom events in jquery and set an event handler for each event .
This enables loose coupling and code reuse . This can be used to achieve the observer design pattern .
$(’#txtAddress’).keyup(function() {
$(document).trigger(’ADDRESS_CHANGE’);
});
$(’#txtCity’).keyup(function() {
$(document).trigger(’CITY_CHANGE’);
});
to now bind the event :
$(document).bind(’ADDRESS_CHANGE’, function(e) {
UpdateName();
UpdateOtherText(e);
});
Hack Away 
Sometimes while using jquery we need to get the javascript object of a dom element to call javascript functions on them.
For eg suppose we want to find the scrollHeight of a div. In case this div is given an id then it can be very easily done using
var divObj = document.getElementById(”myid”);
var sH = divObj.scrollHeight;
but what if we want to find the scrollHeight of tbody element inside a table inside the div#myid
in jquery we traverse it using $(”#myid>table>tbody”)
var sH = $(”#myid>table>tbody”)[0].scrollHeight;
This will return us the 1st element of the array. If there is only one such tbody, it will give us the required Object to call the function
hide(),show(),empty()…this are predefined functions of jquery.
So, to add your own function , you just have to write small piece of code :
$.fn.myFunction = function() {
return $(this).addClass(’changed’);
}
And now, use it like this:
$(’.changePlease’).myFunction();
All jQuery plugins code is wrapped in this anonymous function.So what exactly this function do ??
Well,my little research shows that this allows the use of $ within this function without conflicting with other JavaScript libraries who are using it. Basically, since we are setting $ as a parameter, $ will overwrite any globally defined variables/references of $ in that particular anonymous function.
// Assume “$” is a prototype reference
(function ($) {
// Here “$” is a jQuery reference
})(jQuery)
Many times we use jquery’s .serializeArray function to send form field values by $.post or $.ajax methods. Suppose we want to send some other data besides serialized form data, it can be done by pushing additional objects into the array returned by .serializeArray as follows
var data = $(”#my-form”).serializeArray();
data.push({ ‘name’:'category_id’ , ‘value’:this.categoryId });
data.push({ ‘name’:'entity_id’, ‘value’:this.entityId });
the elements returned by serializeArray are objects with properties ‘name’ and ‘value’ .. Once the post request is sent these can be accessed on the server side as $_POST['category_id'] and $_POST['entity_id'] just like the other parameters.
This method is better over hidden input field method particularly when dynamic values are needed to be set to the hidden form fields using javascript.
Unfortunately JQuery doesn’t have function to toggle text of a given element 
. But here is a trick by which you can add toggleText function to your jQuery.
jQuery.fn.toggleText = function(a, b) {
return this.each(function() {
jQuery(this).text(jQuery(this).text() == a ? b : a);
});
};
code:
$(element).toggleText('Preview','Back');
If you want to add a relatively large chunk of html code to the DOM using javascript, and if you find it annoying to write the markup as a string in js, here is a simple trick!
write the mark up normally in the html and use inline display:none to hide it
[html]
….
[html]
now in js (using jquery)
//for inserting dynamic html, insert all the required values in the dummy div first and then assign the inner content to a variable
$(”.htmltoadd>p”).html(’Hello World’);
var myhtml = $(”.htmltoadd”).html();
$(”#required-container”).html(myhtml’);
suppose there are 2 buttons with id’s of “test” and “test4″
we want to bind the function with name as “getmember” on click of “test” and mouseout of “test4″ then
$(’#test’)['click'](getmember);
$(’#test4′)['mouseout'](getmember);
Hope this is useful 
For a lot of forms we need to switch off autocomplete by the browser . This should be done for payment details forms .
This can be easily done by a jquery one liner .
$(’input,select’).attr(”autocomplete”,”off”);
We at kodeplay like to share knowledge. With Kodetricks, even you can join us. All you need to do is post a programming related trick if you have one or rate a trick if you like someone else's.