Introduction to jQuery

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

 The jQuery library contains the following features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX, Utilities
 In addition, jQuery has plugins for almost any task out
there.

 There are two ways to start using jQuery on
your web site
 You can:
 Download the jQuery library from jQuery.com
 Include jQuery from a CDN, like Google

 There are two versions of jQuery available for downloading:
 Production version - this is for your live website because it has been
minified and compressed
 Development version - this is for testing and development
(uncompressed and readable code)
 Both versions can be downloaded from jQuery.com.

 The jQuery library is a single JavaScript file,
and you reference it with the HTML <script>
tag
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>

 jQuery CDN
 If you don't want to download and host jQuery yourself, you can include it from a
CDN (Content Delivery Network).
 Both Google and Microsoft host jQuery.
 To use jQuery from Google or Microsoft, use one of the following:
 Google CDN:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 Microsoft CDN:
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>

 The jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s)
 Basic syntax is: $(selector).action()
 A $ sign to define/access jQuery
 A (selector) to "query (or find)" HTML elements
 A jQuery action() to be performed on the element(s)
 Examples:
 $(this).hide() - hides the current element.
 $("p").hide() - hides all <p> elements.
 $("#test").hide() - hides the element with id="test".

 All jQuery methods are usually inside a document ready
event:
 $(document).ready(function(){
//jQuery methods go here...
});
 OR
 $(function(){
// jQuery methods go here...
});
 This helps to prevent any jQuery code from running before
the document is finished loading (is ready)

 jQuery selectors are used to "find" (or select) HTML
elements based on their id, classes, types ….
 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
 selects elements based on the element name.
 to select all <p> elements on a page like this:
 $("p")
 The #id Selector
 uses the id attribute of an HTML tag to find the specific element.
 to find an element with a specific id, write a hash character, followed by the id of the
HTML element:
 $("#test")
 The .class Selector
 finds elements with a specific class.
 to find elements with a specific class, write a period character, followed by the name
of the class:
 $(".test")

• Other jQuery Selectors
 $("*"): Selects all elements
 $("p.intro"): Selects all <p> elements with class="intro"
 $("ul li:first"): Selects the first <li> element of the first <ul>
 $("ul li:first-child"): Selects the first <li> element of every <ul>
 $("[href]"): Selects all elements with an href attribute
 $("a[target='_blank']"): Selects all <a> elements with a target attribute value equal to "_blank"
 $("a[target!='_blank']"): Selects all <a> elements with a target attribute value NOT equal to "_blank"
 $(":button"): Selects all <button> elements and <input> elements of type="button"
 $("tr:even"): Selects all even <tr> elements

 jQuery is tailor-made to respond to events in an HTML page
 jQuery Syntax For Event Methods
 To assign a click event to all paragraphs on a page, you can do this:
 $("p").click();
 The next step is to define what should happen when the event fires. You must pass a function
to the event:
 $("p").click(function(){
// action goes here!!
});
 Using the on() Method
 $("p").on("click", function(){
//action goes here
});
Example:
$("p").click(function(){
$(this).hide();
});

 Used to hide and show HTML elements
 Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
 The optional speed parameter specifies the speed of the hiding/showing, and
can take the following values: "slow", "fast", or milliseconds.
 The optional callback parameter is a function to be executed after the hide() ,
show() or toggle() method completes

 With jQuery you can fade an element in and out of visibility.
 jQuery has the following fade methods:
 fadeIn(speed,callback) is used to fade in a hidden element.
 fadeOut(speed,callback) is used to fade out a visible element
 fadeToggle(speed,callback) toggles between the fadeIn() and fadeOut()
methods
 fadeTo(speed,callback) allows fading to a given opacity (value between 0 and
1)

 With jQuery you can create a sliding effect on
elements.
 jQuery has the following slide methods:
 slideDown(speed, callback) is used to slide down an
element
 slideUp(speed, callback) is used to slide up an element
 slideToggle()

 jQuery offers the follwing methods for DOM
manipulation:
 text() - Sets or returns the text content of selected elements
 html() - Sets or returns the content of selected elements
(including HTML markup)
 val() - Sets or returns the value of form fields
 attr() – Sets or returns attribute values

 With jQuery, it is easy to add new elements/content.
 Four jQuery methods that are used to add new content:
 append() - Inserts content at the end of the selected elements
 prepend() - Inserts content at the beginning of the selected
elements
 after() - Inserts content after the selected elements
 before() - Inserts content before the selected elements

 To remove elements and content, there are two jQuery
methods:
 remove() - Removes the selected element (and its child
elements)
 also accepts one parameter, which allows you to filter the elements to
be removed.
 The parameter can be any of the jQuery selector syntaxes.
 empty() - Removes the child elements from the selected
element

 jQuery has several methods for CSS manipulation. We will look at the
following methods:
 addClass() - Adds one or more classes to the selected elements
 removeClass() - Removes one or more classes from the selected elements
 toggleClass() - Toggles between adding/removing classes from the selected
elements
 css() - Sets or returns one or more style properties for the selected elements
 Syntax: css("propertyname"); & css("propertyname","value");

 With jQuery, you can chain together actions/methods
 Chaining allows us to run multiple jQuery methods (on the same
element) within a single statement
 This way, browsers do not have to find the same element(s) more than once
 To chain an action, you simply append the action to the previous
action using a dot

Introduction to jQuery

More Related Content

What's hot (20)

Similar to Introduction to jQuery (20)

More from Seble Nigussie (9)

Recently uploaded (20)

Introduction to jQuery