" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
 - Mahatma Gandhi

  1. Home
  2. JavaScript Performance Tips
  3. Basic JQuery syntax

Basic JQuery syntax

Basic jQuery syntax and simplified AJAX
How to use DOM equivalent code withe JQuery.
How to get HTML fields value.
Text field: $(‘#name’).val();
Drop Down: $(‘#category option:selected’).val();
Radio Or Check Box: $(‘#checkid’).attr(‘checked’); // return true if checked other wise false;
HTML content : $(‘#div’).html(); // same as innerHTML of DOM
How to set value of HTML fields.

Text field: $(‘#name’).val(‘test’);
Drop Down: $(‘#category option:selected’).val(‘ABC’);
Radio Or Check Box: $(‘#checkid’).attr(‘checked’,true); or $(‘#checkid’).attr(‘checked’,false);
HTML content : $(‘#div’).html(‘<table><tr><td>Test</td></tr></table>’);
Suppose we have to add some event to more than one element then we can do that by element id one by one otherwise we can do that by class name. we give same class to those elements and write just one line JQuery to add an event to multiple elements.
 
<a href="#" title="Auto-Notify" class="basic1" id="test1">
<a href="#" title="Send to a Friend" class="basic1" id="test2">
    
$(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');
 });
}
How to controll CSS
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(‘subranild@mindfiresolutions.com’); // 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.
 });
Subranil Dalal , JavaScript Programmer, Mindfire Solutions.
Related Tags: JavaScript, jQuery
Author : Subranil Dalal

Leave a Reply