Scribd
Upload
10 views

jQuery

Uploaded by

vinisha wagh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

jQuery

Uploaded by

vinisha wagh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

 jQuery is a lightweight, "write less, do more", JavaScript library.

 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:
o HTML/DOM manipulation
o CSS manipulation
o HTML event methods
o Effects and animations
o AJAX
o Utilities
 jQuery is probably the most popular, and also the most extendable.
 Many of the biggest companies on the Web use jQuery, such as:
o Google
o Microsoft
o IBM
o Netflix
 The jQuery team knows all about cross-browser issues, and they have written this
knowledge into the jQuery library. jQuery will run exactly the same in all major
browsers.

Adding jQuery to Your Web Pages


There are several 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
Downloading jQuery
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
(notice that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-3.6.0.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).
Google is an example of someone who host jQuery:
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
Many users already have downloaded jQuery from Google when visiting another site. As a
result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN's will make sure that once a user requests a file from it, it will be served from
the server closest to them, which also leads to faster loading time.
With jQuery you select (query) HTML elements and perform "actions" on them.

jQuery Syntax
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)
 $(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".
$(document).ready(function(){

// jQuery methods go here...

});
This is to prevent any jQuery code from running before the document is finished loading (is
ready).
It is good practice to wait for the document to be fully loaded and ready before working with it.
This also allows you to have your JavaScript code before the body of your document, in the
head section.
Here are some examples of actions that can fail if methods are run before the document is fully
loaded:
 Trying to hide an element that is not created yet
 Trying to get the size of an image that is not loaded yet
Tip: The jQuery team has also created an even shorter method for the document ready event:
$(function(){

// 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 name, 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”)
The #id Selector $("#test")
The .class Selector
The jQuery .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")
$("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>

$("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"

Functions In a Separate File


<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
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


jQuery Syntax For Event Methods
In jQuery, most DOM events have an equivalent jQuery method.
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!!
});
$("p").dblclick(function(){
$(this).hide();
});
hover()
The hover() method takes two functions and is a combination of
the mouseenter() and mouseleave() methods.
The first function is executed when the mouse enters the HTML element, and the second
function is executed when the mouse leaves the HTML element:
Example
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus()
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus:
Example
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
blur()
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus:
Example
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
The on() Method
The on() method attaches one or more event handlers for the selected elements.
Attach a click event to a <p> element:
Example
$("p").on("click", function(){
$(this).hide();
});
Attach multiple event handlers to a <p> element:
Example
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Get Content - text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation are:
 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
Example
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
Get Attributes - attr()
The jQuery attr() method is used to get attribute values.
The following example demonstrates how to get the value of the href attribute in a link:
Example
$("button").click(function(){
alert($("#w3s").attr("href"));
});
Set Content - text(), html(), and val()
We will use the same three methods from the previous page to set content:
 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
The following example demonstrates how to set content with the jQuery text(), html(),
and val() methods:
Example
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
A Callback Function for text(), html(), and val()
All of the three jQuery methods above: text(), html(), and val(), also come with a callback
function. The callback function has two parameters: the index of the current element in the list
of elements selected and the original (old) value. You then return the string you wish to use as
the new value from the function.
The following example demonstrates text() and html() with a callback function:
Example
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
Set Attributes - attr()
The jQuery attr() method is also used to set/change attribute values.
The following example demonstrates how to change (set) the value of the href attribute in a
link:
Example
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
The attr() method also allows you to set multiple attributes at the same time.
The following example demonstrates how to set both the href and title attributes at the same
time:
Example
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
A Callback Function for attr()
The jQuery method attr(), also comes with a callback function. The callback function has two
parameters: the index of the current element in the list of elements selected and the original
(old) attribute value. You then return the string you wish to use as the new attribute value from
the function.
The following example demonstrates attr() with a callback function:
Example
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
jQuery css() Method
The css() method sets or returns one or more style properties for the selected elements.

Return a CSS Property


To return the value of a specified CSS property, use the following syntax:
css("propertyname");
The following example will return the background-color value of the FIRST matched element:
Example
$("p").css("background-color");
Set a CSS Property
To set a specified CSS property, use the following syntax:
css("propertyname","value");
The following example will set the background-color value for ALL matched elements:
Example
$("p").css("background-color", "yellow");
Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
Jquery Effects
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();
});
$(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).
The following example demonstrates the speed parameter with hide():
jQuery toggle()
You can also toggle between hiding and showing an element with the toggle() method.
Shown elements are hidden and hidden elements are shown:
Example
$("button").click(function(){
$("p").toggle();
});
$(selector).toggle(speed,callback);
jQuery has the following fade methods:
 fadeIn()
 fadeOut()
 fadeToggle()
 fadeTo()
jQuery fadeIn() Method
 The jQuery fadeIn() method is used to fade in a hidden element.
 Syntax:
 $(selector).fadeIn(speed,callback);
jQuery fadeOut() Method
 The jQuery fadeOut() method is used to fade out a visible element.
 Syntax:
 $(selector).fadeOut(speed,callback);
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
 If the elements are faded out, fadeToggle() will fade them in.
 If the elements are faded in, fadeToggle() will fade them out.
 Syntax:
 $(selector).fadeToggle(speed,callback);
jQuery slideDown() Method
 The jQuery slideDown() method is used to slide down an element.
 Syntax:
 $(selector).slideDown(speed,callback);
 jQuery slideUp() Method
The jQuery slideUp() method is used to slide up an element.
 Syntax:
 $(selector).slideUp(speed,callback);
jQuery slideToggle() Method
 The jQuery slideToggle() method toggles between
the slideDown() and slideUp() methods.
 If the elements have been slid down, slideToggle() will slide them up.
 If the elements have been slid up, slideToggle() will slide them down.
 $(selector).slideToggle(speed,callback);
jQuery Animations - The animate() Method
 The jQuery animate() method is used to create custom animations.
 Syntax:
 $(selector).animate({params},speed,callback);
 The required params parameter defines the CSS properties to be animated.
jQuery stop() Method
 The jQuery stop() method is used to stop an animation or effect before it is finished.
 The stop() method works for all jQuery effect functions, including sliding, fading and
custom animations.
 Syntax:
 $(selector).stop(stopAll,goToEnd);
A callback function is executed after the current effect is 100% finished.
jQuery Callback Functions
 JavaScript statements are executed line by line. However, with effects, the next line of
code can be run even though the effect is not finished. This can create errors.
 To prevent this, you can create a callback function.
 A callback function is executed after the current effect is finished.
 Typical syntax: $(selector).hide(speed,callback);
 Examples
 The example below has a callback parameter that is a function that will be executed after
the hide effect is completed:
 Example with Callback
 $("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});

You might also like