Your SlideShare is downloading. ×
0
Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
docu...
jQuery
Atheendrh Kakkothh
atheendrh@gmail.com
www.facebook.com/atheend
rhkakkoth
twitter.com/username
in.linkedin.com/in/a...
What is jQuery?
• JavaScript Library
• Functionality
– DOM scripting & event handling
– Ajax
– User interface effects
– Fo...
Why jQuery?
• Lightweight – 14kb (Minified and Gzipped)
• Cross-browser support (IE 6.0+, FF 1.5+, Safari
2.0+, Opera 9.0+...
JQuery
• Powerful JavaScript library
– Simplify common JavaScript tasks
– Access parts of a page
• using CSS or XPath-like...
A Few Examples
• Forms
• Chatboxes
• Menus
• Dropdowns
• Sliders
• Tabs
• Slideshows
• Games
jQuery Enhanced Forms
Using jQuery
• Download the .JS file (23KB otal, minified)
• Use the jQuery file hosted on Google’s Code
servers
<html>
<h...
Basic JQuery
• Selecting part of document is fundamental
operation
• A JQuery object is a wrapper for a selected
group of ...
Basic JQuery
• .addClass() method changes the DOM nodes by
adding a ‘class’ attribute
– The ‘class’ attribute is a special...
Basic JQuery
• To make this change, put it in a function and call it
when the document has been loaded and the DOM
is crea...
JQuery Selectors
• CSS
p element name
#ididentifier
.class classname
p.class element with class
p aanchor as any descendan...
JQuery Events
• bind(eventname, function) method
– ‘click’
– ‘change’
– ‘resize’
• $(“a*@href+”).bind(‘click’,function(){
...
jQuery Animations
• Animations
• Built in
– fadeIn()
– fadeOut()
– hide()
– show()
– slideDown()
– slideUp()
– toggle()
– ...
Who’s using jQuery?
• Google
• Dell
• Bank of America
• Mozilla
• Drupal
• NetFlix
• NBC
• Digg
If this presentation helped you, please visit our
page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.co...
Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, N...
J query
Upcoming SlideShare
Loading in...5
×

J query

166

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
166
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "J query"

  1. 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. 2. jQuery Atheendrh Kakkothh atheendrh@gmail.com www.facebook.com/atheend rhkakkoth twitter.com/username in.linkedin.com/in/atheendr h kakkoth 9633734876
  3. 3. What is jQuery? • JavaScript Library • Functionality – DOM scripting & event handling – Ajax – User interface effects – Form validation
  4. 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. 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. 6. A Few Examples • Forms • Chatboxes • Menus • Dropdowns • Sliders • Tabs • Slideshows • Games
  7. 7. jQuery Enhanced Forms
  8. 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. 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. 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. 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. 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. 13. JQuery Events • bind(eventname, function) method – ‘click’ – ‘change’ – ‘resize’ • $(“a*@href+”).bind(‘click’,function(){ $(this).addClass(‘red’);-);
  14. 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. 15. Who’s using jQuery? • Google • Dell • Bank of America • Mozilla • Drupal • NetFlix • NBC • Digg
  16. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×