Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (10)
Similar to Jquery
Similar to Jquery (20)
Recently uploaded
Recently uploaded (20)
Jquery
- 3. 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
- 4. 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
- 5. 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
- 6. 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 .
- 7. Features • Select and manipulate HTML • Manipulate CSS • JavaScript Effects and animations • HTML DOM traversal and modification • AJAX • Utilities
- 8. 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)
- 9. 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"
- 10. 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
- 11. 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
- 12. Advantages • Cross Browser Compatibility • Lightweight and fast • Open sourse library • Easy to learn and flexible
- 13. Disadvantags • Functionality may be limited
- 14. 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>
- 15. End
- 16. 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.
- 17. 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
- 18. 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