jQuery
jQuery Introduction
▪The purpose of jQuery is to make it much easier to use JavaScript on your website.
▪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.
▪It is most widely used JS Library
▪Cross browser compatibility
▪Open source and free to use
What is jQuery?
jQuery is a fast,small,and feature-rich 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.
❖jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM
manipulation.
❖The jQuery library contains the following features:
1. HTML/DOM manipulation
4. HTML event methods
2. CSS manipulation 5. Effects and animations
3. Utilities 6. AJAX
Why jQuery?
There are lots of other JavaScript libraries out there, but jQuery
is probably the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:
Google
Microsoft
IBM
Netflix
jQuery Syntax
❖With jQuery you select (query) HTML elements and perform "actions" on them.
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 all elements with class="test".
❖$("#test").hide() - hides the element with id="test".
The Document Ready Event
You might have noticed that all jQuery methods in our examples, are inside a document ready
event:
$(document).ready(function(){ $(function(){
// jQuery methods go here... // jQuery methods go here...
or
}); });
This is to prevent any jQuery code from running before the document is finished loading (is
ready).
jQuery Selectors
✔jQuery selectors are one of the most important parts of the jQuery library.
✔jQuery selectors allow you to select and manipulate HTML element(s).
✔jQuery selectors are used to "find" (or select) HTML elements based on their
name, id, classes, types, attributes, values of attributes and much more.
✔All selectors in jQuery start with the dollar sign and parentheses: $().
More Examples of jQuery Selectors
Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <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
$("tr:odd") Selects all odd <tr> elements
Functions In a Separate File
If your website contains a lot of pages, and you want your jQuery functions to be easy to
maintain, you can put your jQuery functions in a separate .js file.
Example
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
jQuery Event Methods
jQuery is tailor-made to respond to events in an HTML page.
All the different visitors' actions that a web page can respond to are called
events.
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
The term "fires/fired" is often used with events. Example: "The keypress event
is fired, the moment you press a key".
Here are some common DOM events:
Mouse Events Keyboard Events Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur Unload
Commonly Used jQuery Event Methods
$(document).ready():-
The $(document).ready() method allows us to execute a function when the document is fully
loaded.
click():-The click() method attaches an event handler function to an HTML element.
dblclick():-The dblclick() method attaches an event handler function to an HTML element.
mouseenter():- method attaches an event handler function to an HTML element.
The on() Method
The on() method attaches one or more event handlers for the selected elements.
Example
Example
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow"); } });
jQuery Effects - Hide and Show
Hide, Show, Toggle, Slide, Fade, and Animate.
jQuery hide() and show()
With jQuery, you can hide and show HTML elements with the hide() and show()
methods.
Example
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Syntax:
$(selector).hide(speed,callback);
$(selector).show(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() or show() method completes (you will learn more about
callback functions in a later chapter).
jQuery toggle()
You can also toggle between hiding and showing an element with the toggle() method.
Syntax:
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or
milliseconds.
The optional callback parameter is a function to be executed after toggle() completes.
Example
$("button").click(function(){
$("p").toggle();
});
jQuery Effects - Fading
With jQuery you can fade elements in and out of visibility.
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()
Example
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
