Presentation On JQuery

Prepared By

Rahul Jain Lexcis Solution

Agenda

• Basics of Jquery• Javascript vs Jquery  • Why to use Jquery• Concept of Jquery • Overview of jquery API• Jquery pros and cons• Jquery programs • Conclusion

What exactly is jQuery

jQuery is a JavaScript Library!

• Dealing with the DOM• JavaScript Events• Animations• Ajax interactions

jQuery Basics jQuery()This function is the heart of the jQuery libraryYou use this function to fetch elements using CSS selectorsand wrap them in jQuery objects so we can manipulatethem

There’s a shorter version of the jQuery() function: $()$("h1");$(".important");

Document Ready

$(document).ready(function(){// Your code here});jQuery has a simple statement that checks thedocument and waits until it's ready to be manipulated

What’s the problem with JavaScript?

JavaScript is a weakly typed,

classless, prototype based OO

language, that can also be

used outside the browser. It is

not a browser DOM.

It means no more of this

var tables = document.getElementsByTagName("table");for (vart = 0; t<tables.length; t++) {var rows = tables[t].getElementsByTagName("tr"); for (vari = 1; i<rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) {

rows[i].className += " odd"; } }};

Using jQuery we can do this

$("tabletr:nth-child(odd)").addClass("odd");

Using jQuery we can do this

jQuery("tabletr:nth-child(odd)").addClass("odd");

jQuery function

Using jQuery we can do this

jQuery("tabletr:nth-child(odd)").addClass("odd");

jQuery function

jQuery Selector (CSS expression)

Using jQuery we can do this

jQuery("tabletr:nth-child(odd)").addClass("odd");

jQuery function

jQuery Selector (CSS expression)

jQuery Wrapper Set

Using jQuery we can do this

jQuery("tabletr:nth-child(odd)").addClass("odd");

jQuery function

jQuery Selector (CSS expression)

jQuery MethodjQuery Wrapper Set

It really is the

“write less, do more”

JavaScript Library!

Why use jQuery

• Helps us to simplify and speed up web development• Allows us to avoid common headaches associated with browser development• Provides a large pool of plugins• Large and active community• Tested on 50 browsers, 11 platforms• Its for both coders and designers

Get > Act

Chainability

The $() function

Three Major Concepts of jQuery

Create HTML elements on the fly

var el = $(“<div/>”)

The Magic $() function

Manipulate existing DOM elements

$(window).width()

The Magic $() function

Selects document elements(more in a moment…)

$(“div”).hide();

$(“div”, $(“p”)).hide();

The Magic $() function

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

Fired when the document is ready for programming.

Better use the full syntax:

$(function(){…});

The Magic $() function

$(“div”).hide()

$(“<span/>”).appendTo(“body”)

$(“:button”).click()

jQuery’s programming philosophy is:

GET >> ACT

$(“div”).show() .addClass(“main”) .html(“Hello jQuery”);

Almost every function returns jQuery, which provides a fluent

programming interface and chainability:

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

jQuery()

each() map()size()lengthselectorcontextindex()get()

Overview of jQuery API

jQuery("#nav li.contact")

jQuery(":visible")

jQuery(":radio:enabled:checked")

jQuery("a[title]")

jQuery("a[title][href='foo']")

jQuery("a:first[href*='foo']")

jQuery("#header, #footer")

jQuery("#header, #footer").filter(":visible")

CoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

Overview of jQuery API

attr()removeAttr()

addClass()hasClass()toggleClass()removeClass()

val()

CoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

add()children()closest()find()next()nextAll()prev() prevAll() siblings()

parent() parents()

andSelf()end()

eq()filter()is()not()slice()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

html()text()

append()appendTo()prepend()prependTo()

after()insertAfter()before()insertBefore()

wrap()wrapAll()wrapInner()

replaceWith()replaceAll()

empty()remove()

clone()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

css()

offset()offsetParent()postion()scrollTop()scrollLeft()

height()width()innerHeight()innerWidth()outerHeight()outerWidth()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

blur()change()click()dbclick()error()focus()keydown()keypress()keyup()mousedown()mousenter()mouseleave()mouseout()mouseup()resize()scroll()select()submit()unload()

ready()

bind()one()trigger()triggerHandler()unbind()

live()die()

hover()toggle()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

show()hide()toggle()

slideDown()slideUp()slideToggle()

fadeIn()fadeOut()fadeTo()

animate()stop()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

jQuery.ajax()jQuery.get()jQuery.getJSON()jQuery,getScript() jQuery.post()

load()

ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()

jQuery.ajaxSetup() serialize()serializeArray()

Overview of jQuery APICoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities

jQuery.supportjQuery.boxModel

jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique()

jQuery.isArray(), jQuery,isFunction()

jQuery.trim()

jQuery.param()

A Few Examples

FormsChatboxesMenusDropdownsSlidersTabsSlideshowsGames

jQuery Enhanced Forms

Menus and Dropdowns

Sliders and Slideshows

Technical Implementation

Building Real-Time Form Validation Using jQuery

Pros:

• Large Community• Ease of use• Large library• Strong opensource community. (Several jQuery plugins available) • Great documentation and tutorials• Ajax support

Cons:• Regular updates that change existing behaviour• Overhead of adding extra javascript to page• Learning curve may not be short for some developers

Conclusions:• Conclusion In the end, jquery is popular for a reason. It will make your website easier to control and to access through any browser.• By using this library, you can create or include complex plug-ins in a matter of minutes. This will make your website easier to use and as long as you have imagination, the possibilities are endless.

Any Queries??...

Thank You