Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Meenusoman meenusoman99@gmail.com www.facebook.com/meenusoman twitter.com/meenusoman in.linkedin.com/in/meenusoman Phonenumber JQUERY
  2. 2. 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
  3. 3. What is jQuery ? • jQuery is not a language, but it is a well written JavaScript code. • Easier to use JavaScript on website. • jQuery works like JavaScript where its used to help with interaction and effects with your development code
  4. 4. Why jQuery for Development? • The best featuring for jQuery is the effects you can accomplish, with less code than what it would take with JavaScript. • Most common jQuery effects are drop down menus, drag and drop elements, animations and form validation
  5. 5. Download the jquery Library  Download a package from jQuery.com and then install a library of scripts on your server. There are two versions of jQueryavailable for downloading: Production version Development version .
  6. 6. Features • Select and manipulate HTML • Manipulate CSS • JavaScript Effects and animations • HTML DOM traversal and modification • AJAX • Utilities
  7. 7. How jQuery Works • The jQuery syntax is used to select HTML elements and perform some action on those element(s). • Basic syntax: $(selector).action() – A dollar sign to define jQuery – A (selector) to find HTML elements – An action() to be performed on the element(s)
  8. 8. jQuery Selectors Syntax Description $(this) Current HTML element $("p") All <p> elements $("p.intro") All <p> elements with class="intro" $(".intro") All elements with class="intro" $("#intro") The first element with id="intro" $("ul li:first") The first <li> element of each <ul> $("div#intro .head") All elements with class="head" inside a <div> element with id="intro"
  9. 9. jQuery Events Event Method Description $(selector).click(function) Invokes a function when the selected elements are clicked $(selector).dblclick(function) Invokes a function when the selected elements are double-clicked $(selector).focus(function) Invokes a function when the selected elements receive the focus $(selector).mouseover(function) Invokes a function when the mouse is over the selected elements $(selector).keypress(function) Invokes a function when a key is pressed inside the selected elements
  10. 10. jQuery Effects Function Description $(selector).hide() Hide selected elements $(selector).show() Show selected elements $(selector).toggle() Toggle (between hide and show) selected elements $(selector).slideDown() Slide-down (show) selected elements $(selector).slideUp() Slide-up (hide) selected elements $(selector).slideToggle() Toggle slide-up and slide-down of selected elements $(selector).fadeIn() Fade in selected elements $(selector).fadeOut() Fade out selected elements $(selector).fadeTo() Fade out selected elements to a given opacity $(selector).fadeToggle() Toggle between fade in and fade out
  11. 11. Advantages • Cross Browser Compatibility • Lightweight and fast • Open sourse library • Easy to learn and flexible
  12. 12. Disadvantags • Functionality may be limited
  13. 13. Example <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body></html>
  14. 14. End
  15. 15. Want to learn more about programming or Looking to become a good programmer? Are you wasting time on searching so many contents online? Do you want to learn things quickly? Tired of spending huge amount of money to become a Software professional? Do an online course @ baabtra.com We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, good software professional out of anybody who holds a passion for coding.
  16. 16. Follow us @ twitter.com/baabtra Like us @ facebook.com/baabtra Subscribe to us @ youtube.com/baabtra Become a follower @ slideshare.net/BaabtraMentoringPartner Connect to us @ in.linkedin.com/in/baabtra 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 Cafit Square, Hilite Business Park, Near Pantheerankavu, Kozhikode Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com