Your SlideShare is downloading. ×
J query
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
155
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
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

×