jquery basic

JQuery: basic
JQuery UI: component for composing sophisticated UI

The following is a shortcut for the $(document).ready(callback) notation:
$(function() {
});




$(document).ready(function(){

   $("a").click(function() {

       //do something on a tag a
       alert( $(this).attr("href") );
   });


   //add class to tag with id=orderlist
   $("#orderlist").addClass("red");


   //add and remove the class when the user hovers the li element, but only on the last element in the list.
   $("#orderlist li:last").hover(function() {
       $(this).addClass("green");
   },function(){
       $(this).removeClas("green");
   });


});




To log to console for debugging
console.log('blah blah blah');

To call event handler once

$("#myButton").one('click', function(event){   });

Event Object properties: https://api.jquery.com/category/events/event-object/

e.g. 

event.pageX, event.pageY contains the X/Y mouse coordinates relative to the client area

event.keyCode contains the key code for the pressed key, event.altKey, event.shiftKey & event.crtlKey return true if alt /ctrl / shift key is pressed. 

To capture keystroke

$("#target").bind('keyup', function(event){

    var keyPressed = String.fromCharCode(event.keyCode);

});

Looping with object 

var obj = { one:1, two:2, three:3, four:4, five:5 };

$.each(obj, function(i, val) {

   console.log('property ' + i + ' contains ' +val);

});

To determine browser type

$.each($.browser, function(i, val){

   console.log(i + ' is '+ val);

});

if( $.browser.safari ) console.log(' you are using safari');

Sample output:

safari is false

msie is true 

version is 6.0 

....

To check browser support for specific features

$.support.xxx

To create array and manipulation

$.makeArray(document.getElementsByTagName("p"));

array.reverse();

$(array).appendTo(document.body);

To search in array

var array = ['searhThis', 'searchThat', 'searchTerm'];

$.inArray('searchTerm', array); 

it will return the zero-based index value in the array at which the first match on the search term was found.

To fiter an array

var array = [1,2,3,4,5,6,7,8,9];

var array2 = $.grep(array, function(n, i){

   return (i>4);

});

//array2 will be [5,6,7,8,9]

To eliminate duplicate elements in array

var array = $("p").get();

array = array.concat( $("p").get() );

console.log('array length='+array.length);

array = $.unique(array);

console.log('array length='+array.length);

To test if object is an array

var array = [1, 2, 3];

if($.isArray(array)) console.log('it is an array');

To loop and modify an array
var array = [1, 2, 3, 4];
$.map(array, function(i){
   return i*2;   //multiply each element by 2
});

To pass FORM data to server
$("#div1").load("poster.php", $("myForm").serializeArray());
//#div1 will show the server response

Use $.post to send data to server
$.post( "some.php", {data:1}, function(data){
   //callback function
});
//$.get is similar

AJAX
$.ajax({
  type: 'GET',
  url: 'xxxx.txt',
  success: function(data, status){

  }
});

More $.ajax() option: http://api.jquery.com/jquery.ajax/

Handling XML returned from AJAX
$.ajax({
  type: "GET",
  url: "....",
  dataType: "xml",
  success: function(data, status){
      var element = data.getElementByTagName("someTag");
  }
});

Handling AJAX events globally
$("#starting").bind("ajaxStart", function(){ $(this).show(); });

//other ajax events: ajaxSend, ajaxSuccess, ajaxComplete, ajaxError, etc.

jquery Widget
Accordion
$("#someDiv").accordion();

Datepicker
$("#someDiv").datepicker();

ProgressBar
$("#progress").progressbar('value', 80);

Slider
$("#slider").slider({min:0, max:10, slide: function(event, ui){
   console.log('slider value becomes '+ $("#slider").slider('value') );
});

Tab
$("#tab").tabs();

To get data from Dialog
//say, someDiv contain a input element of id "text"
$("#someDiv").dialog({
    buttons: {"ok": function(){  $(this).dialog("close"); } },
    beforeclose: function(event, ui){
       console.log("your input:"+ $("#text").val() );  
    }
});