Basic JQuery syntax

    
$(document).ready(function () {
 $('.basic1').click(function (e) {
  e.preventDefault();
  alert('hi');
 });
}

Now alert will show clicking on both.
Through id we can do but then we have write two times like

$(document).ready(function () {
 $('#test1').click(function (e) {
  e.preventDefault();
  alert('hi');
 });
        $('#test2').click(function (e) {
  e.preventDefault();
  alert('hi');
 });
}

Suppose you want to change some style property of a class based upon some operation of GUI.

$(function()
 { 
 var _height=$('.contentArea').innerHeight();
 $('.leftCol').css('height',_height);
 $('.rightCol').css('height',_height);
 });

How use animated effects or simple show hide likedocument.getElementById().style.display=block; of DOM

$(‘#div’).hide(); $(‘#div’).show(); $(‘#div’).fadeIn();

$(‘#div’).fadeOut();

Or you can use lots of effects like Blind, Bounce, Clip, Drop, Explode, Fold, Highligh, Puff, Pulsate, Scale, Shake, Size, Slide, Transfer. These are inbuilt effects available with JQuery. Not necessary to use any plug-ins.

To use this effects

$(‘#div’)effect( effect, [options], [speed], [callback]);

How to use regular expression.

If you want remove blank space from a string

$(‘#title’).val().replace(/^\s+|\s+$/g, ”) == ”)

Check format through regular expression like email id validation.

var pattern = new RegExp(/^((“[\w-\s]+”)|([\w-]+(?:\.[\w-]+)*)|(“[\w-\s]+”)([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
pattern.test(‘[email protected]’); // return true or false.

Why AJAX is just a second job with JQuery.
For using AJAX you don’t need to create all XMLHttpRequest or ActiveXObject object.

You just need to determine which method you like GET or POST and you done with your AJAX .

$.post(
  'send-to-friend.php',
  {your_name:$('#your_name').val(),
                your_email:$('#your_email').val()
                comments:$('#comments').val()
                }
  ,function(result){
  $('#div').html(result);
                //here you call your function based upon ajax response.
 });
        
another way you can do this
 

function LoadCategoryToEdit(cat_id)
{
 $.post(
  'get_categories_page.php',
  {cat_id:cat_id}
  ,LoadCategoryCallback
 );
}
function LoadCategoryCallback(result) {
 $('#divCategoryForm').html(result);
 ShowCategoryForm();
}
 
If you send the result in JSON format then
 
$.get(
  'send-to-friend.php',
  {your_name:$('#your_name').val(),
                your_email:$('#your_email').val()
                comments:$('#comments').val()
                }
  ,function(result){
  result = JSON.decode(result);
                //here you call your function based upon ajax response.
 });