• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
120
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
  • 2. jQuery Atheendrh Kakkothh atheendrh@gmail.com www.facebook.com/atheend rhkakkoth twitter.com/username in.linkedin.com/in/atheendr h kakkoth 9633734876
  • 3. What is jQuery? • JavaScript Library • Functionality – DOM scripting & event handling – Ajax – User interface effects – Form validation
  • 4. Why jQuery? • Lightweight – 14kb (Minified and Gzipped) • Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) • CSS-like syntax – easy for developers/non- developers to understand • Active developer community • Extensible - plugins
  • 5. JQuery • Powerful JavaScript library – Simplify common JavaScript tasks – Access parts of a page • using CSS or XPath-like expressions – Modify the appearance of a page – Alter the content of a page – Change the user’s interaction with a page – Add animation to a page – Provide AJAX support – Abstract away browser quirks
  • 6. A Few Examples • Forms • Chatboxes • Menus • Dropdowns • Sliders • Tabs • Slideshows • Games
  • 7. jQuery Enhanced Forms
  • 8. Using jQuery • Download the .JS file (23KB otal, minified) • Use the jQuery file hosted on Google’s Code servers <html> <head> <script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript"> </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>
  • 9. Basic JQuery • Selecting part of document is fundamental operation • A JQuery object is a wrapper for a selected group of DOM nodes • $() function is a factory method that creates JQuery objects • $(“dt”) is a JQuery object containing all the “dt” elements in the document
  • 10. Basic JQuery • .addClass() method changes the DOM nodes by adding a ‘class’ attribute – The ‘class’ attribute is a special CSS construct that provides a visual architecture independent of the element structures • $(“dt”).addClass(“emphasize”) will change all occurrences of <dt> to <dt class=“emphasize”> • See also .removeClass()
  • 11. Basic JQuery • To make this change, put it in a function and call it when the document has been loaded and the DOM is created function doEmph(),$(“dt”).addClass(“emphasize”)- <body onLoad=“doEmph()”> • We had to alter the HTML (bad) • Structure and appearance should be separated! • Also, onLoad waits until all images etc are loaded. Tedious.
  • 12. JQuery Selectors • CSS p element name #ididentifier .class classname p.class element with class p aanchor as any descendant of p p > a anchor direct child of p
  • 13. JQuery Events • bind(eventname, function) method – ‘click’ – ‘change’ – ‘resize’ • $(“a*@href+”).bind(‘click’,function(){ $(this).addClass(‘red’);-);
  • 14. jQuery Animations • Animations • Built in – fadeIn() – fadeOut() – hide() – show() – slideDown() – slideUp() – toggle() – slideToggle() – fadeTo() – animate() • See also: – Easing Plug-in – jQuery User Interface: http://ui.jquery.com
  • 15. Who’s using jQuery? • Google • Dell • Bank of America • Mozilla • Drupal • NetFlix • NBC • Digg
  • 16. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
  • 17. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com