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
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