$ will do everything for us

Naga HaRISHShareOurIdeas.com

Agenda

$ Few words about jQuery$ Why we need it$ Optimization tips

# Load jQuery# Using Selectors# And more

…more worth is waiting…!

$(jQuery)

$ this is a new kind of JavaScript Library.$ It is a lightweight cross-browser (FF,GC,IE,OP,SF).$ And it is the most popular JS library in use

today.$ It was released in 2006 1st Half and current

version is 1.7.1

$.Next()

Each( features )

$ LESS CODE DO MORE$ We can do Element Styling, Events Handling,

DOM manipulation, Animations and Ajax. $ We can develop site rapidly. Because it was

ready with cool stuff.$ It is most popular and many awesome plugins.$ Having good Support and Documentation.

$(“.Tips”) - Load jQuery Script

$ Load minified file, because it small in size (31k < 229k)

$ It is best to use Content Delivery Network(CDN) URL

$ Let’s Google or Microsoft host jQuery file for U# Google src http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

# Microsoft src http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js

$ Forget About this if you work for local apps

Content Delivery Network

DEMO

jQuery.noConflict()

$ Use no conflict method when you using other Libraries.

$ Eg:-jQuery.noConflict()jQuery(“#Slide6”).next()(Or)var $j=jQuery.noConflict()$j(“#Slide6”).next()

DEMO

Start method

$ Best to use jQuery ready method.$ Because we can use it more times, where javascript page

onload is only once.

$(document).ready(function() { //write your code here}

(or)

$(function(){//write your code here});

DEMO

Optimize performance, using selectors

$ Optimize selectors to descend from an ID, if possible. E.g:- $(“#id ul li”).hide()

$ Use tag names when selecting classes E.g:- $(“p.class”).show()

$ We can use comma(,) for multiple selectors E.g:- $(“p, ul li,div).css(‘color’,’#000’)

More here http://api.jquery.com/?s=selector

DEMO

Use Chaining

$ Take advantage of Chaining$ Apply multiple effects and DOM manipulation

@ a timeWithout Chaining$(document).ready(function () { $('#id').css('color', #143'); $('#id').html(' Request'); $('#id').click(function () { //something });});

With Chaining$(document).ready(function () { $('#id').css('color', #200').html(' Response') .click(function () { //something });});

“.css(), .html(…) and more” functions return a jQuery object that can be worked on instantly. So we use it right away to set the other properties like click event handler.

DEMO

Use Caching

$ Caching is a great way to limit the number of times we need to traverse the DOM to find elements matched by the selectors.

Without Caching$(document).ready(function () { $('#id').css('color', #143');

:If(isOk) $('#id').html(' Request');

:If(isEnable) $('#id').click(function () { //something }); });

With Caching$(document).ready(function () {var id=$('#id');id.css('color', #143');

:If(isOk) id.html(' Request');

:If(isEnable) id.click(function () { //something }); });

DEMO

Click vs Bind vs Live

$ Click is to handle click event on element$('#target').click(function() { alert('Handler for .click() called.');});

$ Bind is used to like same way, to add events. But not only click event. We can create our custom events too.

$('#foo').bind('click', function() { $(this).toggleClass('entered'); }); or $('#foo').bind('valid', function() { //Todo}); and we can fire this event like this $(‘#foo’).bind()

Click vs Bind vs Live

$ Live, will work same like Bind.$ But, Bind can’t add event handler to run time

add elements.$ Live will automatically adds handlers for new

elements.

Event delegation

$ Bind handler only once to the parent element containing all the children meant to have handlers.

$ Advantage of this is it will automatically bind click event for new(runtime add) element too.

Normal way$(document).ready(function () {$('ul li').click(function () {

$(this).toggleClass('highlight');}); });

Using Event delegation$(document).ready(function () {$('ul').delegate('click', 'li', function (e) { // if ($(e.target).is('li')) $(e.target).toggleClass('highlight'); });});

DEMO

Minimize DOM manipulation

$ We have to minimize DOM operations (.append() .prepend() .after() .wrap() and ..)

Without temp variable (full DOM):-var myNumbers = $('#Numbers'); for (i=0; i<1000; i++){ myNumbers.append('Number ' + i); }

Without temp variable :-var myNumbers = $('#Numbers'); var myString= ''; for (i = 0; i < 1000; i++) { mystring += '<li>Number ' + i + '</li>'; } myList.html(myNumbers);

Minimize DOM manipulation(cont..)

$ Use template for array items$ !dea from Microsoft$ jQuery add in documentation $ More http://api.jquery.com/jQuery.template/$ http://api.jquery.com/jquery.tmpl/

DEMO

Use $(this) and this

$ $(this) is jQuery object$ this is traditional HTML object

$(document).ready(function () {$('ul li').click(function () {

$(this).toggleClass('highlight');alert(this.innerHTML);});});

DEMO

Use data

$ Useful. It allows you to bind data to DOM elements without modifying the DOM.

$ For example:-# $("div").data("message", "Done!");# $("div").data("message");

OR# <div data-error=“Error! :(“>…</div># $("div").data("error");

DEMO

$(‘#Thanks’).show();

Thank you

By Naga HaRISHShareOurIdeas.comMore you share, more you gain