What is jQuery?
• 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.
Why jQuery?
•
There are lots of other JavaScript frameworks out there, but jQuery
seems to be the most popular, and also the most extendable.
• Many of the biggest companies on the
Web use jQuery, such as:
• Google
• Microsoft
• IBM
• Netflix
The jQuery library contains the following feature
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
jQuery Syntax
• Basic syntax is: $(selector).action()
• A $ sign to define/access jQuery
Examples:
• $(this).hide() - hides the current
element.
• $("p").hide() - hides all
<p> elements.
• $(".test").hide() - hides all
elements with class="test".
• $("#test").hide() - hides the
element with id="test".
Advantages of jQuery
• Ease of use
• jQuery uses a simple, clean, powerful syntax
• Makes a website
look more professional
• Strong open
source community
• Lots of
plugins available.
• Large library
• jQuery is highly
extensible
• Ajax support
Disadvantages of jQuery
• Functionality maybe limited
• JQuery javascript
file required
The Document Ready Event
• $(document).ready(function(){
// jQuery methods go here...
});
// jQuery methods go here...
});
• jQuery Selectors
– jQuery
selectors allow you to select and manipulate HTML element(s).
– jQuery selectors are used to
"find" (or select) HTML elements based on their id, classes, types,
attributes, values of attributes and much more. It's based on the existing CSS
Selectors, and in addition, it has some own custom selectors.
• All selectors in jQuery start
with the dollar sign and parentheses: $().
• The element Selector
– The jQuery element selector selects
elements based on the element name.
– You can select all <p> elements
on a page like this: $("p")
jQuery Effects - Hide and Show
•Syntax:
•$(selector).hide(speed);
–hide()
•$(selector).show(speed);
–show()
jQuery Stop Methods
•stop()
jQuery Fading Methods
• With jQuery you can fade an element in
and out of visibility.
• jQuery has the following fade methods:
• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()
jQuery Sliding Methods
• With jQuery you can create a sliding
effect on elements.
• jQuery has the following slide methods:
• slideDown()
• slideUp()
• slideToggle()