JQuery Basics

JQuery Basics

The $ keyword

1. The $() function is an alias for the jQuery() function, and can be used to select DOM elements via selectors, or to create new DOM elements.

$(selector, context)

The first argument is a selector, this second argument(optional) denotes the context of the operation.

2. Serve as the namespace prefix for JQuery utility functions.

var trimmed = $.trim(someString) = jQuery.trim(someString);

Events

The document ready handler

window.onload = function() { ... };

The drawback of this approach is that it would wait until DOM tree is created, and until all external resources are fully loaded and the page is displayed in the browser window.

JQuery document ready handler

This would wait only until the document structure is fully parsed and the browser has converted the HTML into a DOM tree.

jQuery(document).ready(function() {..});

jQuery(function() {..});

$(function() {..});

jQuery(function($){alert('$ = '+ $);});

Binding event handlers

bind(eventType,data,handler), bind(eventMap), eventTypeName(listener)

one(eventType,data,listener) // one-short event

unbind(eventType,listener), unbind(event)

JQuery can group event handlers by assigning them to a namespace.

$('#thing1').bind('click.editMode',someListener);

$('*').unbind('click.editMode');

Proactively managing event handlers

JQuery allows us to seemingly proactively establish event handlers for elements that don’t even exist yet!

live(eventType,data,listener), die(eventType,listener)

Triggering event handlers

trigger(eventType,data), triggerHandler(eventType,data) // not propagation of event

eventName()

TOGGLING LISTENERS

toggle(listener1,listener2,...),hover(enterHandler,leaveHandler),hover(handler)

$('button.filterRemover').live('click',function(){

$(this).closest('div.filterItem').remove();

});

$('#addFilterButton').click();

Ajax with JQuery

load(url,parameters,callback) // Loading content

SERIALIZING FORM DATA

serializeArray(), serialize() // return formatted query string.

Making GET and POST requests

$.get(url,parameters,callback,type)

$.getJSON(url,parameters,callback)

$.post(url,parameters,callback,type)

$.ajax(options), $.ajaxSetup(options)

Energizing pages with animations and effects

hide|show|toggle|fadeIn|fadeOut|fadeTo|slideToggle(speed,callback), toggle(condition)

stop(clearQueue,gotoEnd) //Stopping animations

Creating custom animations

animate(properties,duration,easing,callback)

animate(properties,options)

Using other libraries with jQuery

$.noConflict(jqueryToo)

Once this function is executed, jQuery features will need to be invoked using the

jQuery identifier rather than the $ identifier.

This is implemented by at first store old $ before at first time JQuery function is called, on invocation of noConflict, revert to old $.

var $j = jQuery; // define our own shorter

(function($) { /* function body here */ })(jQuery);

Create an environment where the $ identifier is scoped to refer to the jQuery object, this is often used in JQuery plugins.

Create new DOM elements

$("p.appendToMe").append(someElement);

Manipulating element properties

attr(name,[value]), attr(attributes), removeAttr(name)

$("a[href^='http://']").attr("target","_blank"); // change link attribute: open all links in a new window

$("form").submit(function() {

$(":submit",this).attr("disabled", "disabled");

});

Storing custom data on elements

data(name,[value]), removeData(name)

Changing element styling

addClass|removeClass|toggleClass|hasClass(names)

Getting and setting styles

css(name,[value]), css(properties),width|height([value]), etc...

Setting element content

html|text([content]), append|prepend|before|after(content)

appendTo|prependTo|insertBefore|insertAfter(targets)

Wrapping and unwrapping elements

wrap|wrapAllwrapInner(wrapper), unwrap()

Changing elements

remove|detach(selector), empty()

clone(copyHandlers), replaceWith(content), replaceAll(selector)

Dealing with form element values

val([value]), val(values)

$('[name="radioGroup"]:checked').val()

JQuery utility functions

jQuery flags

$.fx.off—Enables or disabled effects

$.support—Details supported features

$.browser—Exposes browser details (officially deprecated)

$.trim(value)

$.each(container,callback), $.map(array,callback) //

$.grep(array,callback,invert)

$.inArray(value,array), $.makeArray(object), $.unique(array), $.merge(array1,array2)

Extending objects

$.extend(deep,target,source1,source2, ... sourceN)

Extends the object passed as target with the properties of the remaining passed objects.

Serializing parameter values

$.param(params,traditional)

Testing objects

$.isArray(o), $.isEmptyObject(o), $.isFunction(o), $.isPlainObject(o), $.isXMLDoc(node)

$.noop() // do nothing

$.contains(container,containee)

Tacking data onto elements

$.data(element,name,value), $.removeData(element,name)

$.parseJSON(json),

$.globalEval(code) // evaluate the passed JavaScript code in the global context.

Dynamically loading scripts

$.getScript(url,callback)

JQuery UI

Tabs

• Tab One
• Tab Two

... content ...

... content ...

tabs(options)

Transforms tabset markup (as specified earlier in this section) into a set of UI tabs.

$("#tabset").tabs();

Dialog boxes

JavaScript built-in tools

alert and window.open()(create modeless dialog)

Example

$('

').addClass('confirm').appendTo(_canvas).dialog({

width:400,hide:'clip',autoOpen: false, modal: true

});

function _confirm(msg,title,callback){

$('#confirm').text(msg).dialog('option',

{

'title':title?title:'Confirm',

'buttons':{

'NO':function(){$(this).dialog('close');},

'YES':function(){

if(callback)callback();

$(this).dialog('close');

}

}

}

).dialog('open');

}

Create a form dialog

 var form=$('<form>').attr('title','Edit a product').addClass('form'). 
css('display','none'); 
$('<input>').attr({name:'productId',type:"hidden"}).appendTo(form); 
$('<div>').attr('for','productName').html('Name:').appendTo(form); 
$('<input>').attr({name:'productName'}).val('').appendTo(form); 
... 
form.dialog({ 
  autoOpen: false, 
  modal: true, 
  show: 'slide', 
  buttons: { 
    'Cancel':function(){ 
      $(this).dialog('close'); 
    }, 
    'Submit':function(){ 
      _submitEditProduct.call(_self); 
    } 
  } 
}) 
function _submitEditProduct(){ 
  var outer=this; 
  $.ajax({type: "POST",dataType:'json', data:{productId:productId}, 
    url:"controllers/EditProduct.php", 
    success:function(data){ 
      _alert(data.msg); 
      if(data.success) {//..} 
    }, 
    error:function(){//..} 
  }); 
} 

Resources

jQuery in Action, Second Edition