Jquery
Download as PPTX, PDF0 likes438 views
This document provides an overview of jQuery, a popular JavaScript library. It defines jQuery as a lightweight JavaScript library that makes it easier to use JavaScript on websites. It describes how jQuery works by selecting HTML elements and performing actions on them using simple syntax. It also provides examples of common jQuery methods for manipulating DOM elements, handling events, and animating effects. Finally, it lists some advantages of jQuery like being lightweight, open source, and easy to learn.
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. JavaScript Library jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
- 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 jQuery available for downloading Production version Development version
- 6. 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)
- 7. 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> jQuery Selectors
- 8. 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 jQuery Events
- 9. 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 jQuery Effects
- 10. Example <!DOCTYPE html> <html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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> </body> </html>
- 11. Advantages Lightweight and fast Open source library Easy to learn and flexible
- 12. THANK YOU...
- 13. 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.
- 14. 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
- 15. 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