jquery syntax / command

recently finished half of jquery programming book. These are the most important ( summary ) of jquery command / syntax.

Documentation is very important in programming world. If sometimes we forgot and need to use the syntax just open blog and we will remember suddenly...

:D


$(document).ready(function xxx(){});




document.getElementById();
document.getElementByTagName();   -> javascript way.


#('#banner').html('<h1> hello jquery </h1>');   // selector for id, same ass css

#('.banner').html('<h1> hello jquery </h1>'); // class

#('a').html('<h1> hello jquery </h1>'); // tag

#('#navBar a')                              //descendant of id a ( also accept multiple)

#('#navBar > a')                              //direct descendant of id a

$('input[type="text"]')                        // search for certain type

$('li:has(a)')                                  // if li contain a tag.

$('a:contains(Click Me!)')                     // contain spesific text!





var x = document.getElementById('demo');  -> javascript way
var x = $('#demo');   -> jq way




$('#popUp').width(300).height(300);   // set weight and height of div tab (jquery can chain method)



$('#popUp').width(300).height(300).text('Hi!').fadeIn(1000);  //  chaining method


$('#errors h2').text('No errors found');   // only change text, not html tag



$('#errors').prepend('<p>i was added at the beginning of child tag</p>');
$('#errors').append('<p>i was added at end of child tag');



$('#product101').replaceWith(<p>Added to cart</p>');  -> can be used in cart purchased. to change element to html code.




=================
** event

$('a').mouseover();
$('a').click();



$('#selector').hover(function1, function2);  // 1st parameter = move in. 2nd = move out

ex:

  $('#menu').hover(function() {
$('#submenu').show();
}, function() {
$('#submenu').hide();
  }); // end hover



$('#menu').toggle(showSubmenu, hideSubmenu);   // respond to click event.


===============

** event object.

$document.click(
function(evt){          //object that was clicked can be stored here.
// we can retreive information afterward.
// parameter contains object event information.
var x = evt.pageX;
var y = evt.pageY;
alert('x:' + x + ' Y : ' + y);

}
);




evt.preventDefault();   // prevent default action.


$('.tabButton').unbind('click');  // removing event