0% found this document useful (0 votes)

7 views

Chapter 5

Uploaded by

sandilya23panda

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

7 views

Chapter 5

Uploaded by

sandilya23panda

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 54

Introduction to JQuery 1

Chapter 5

Introduction to jQuery

Introduction

 JavaScript is the most popular and the only scripting language for the front-end
development.
 Before jQuery’s emergence, many routine tasks required several lines of code in
JavaScript.
 After introduction of jQuery, those huge lines of JavaScript code were encompassed into
callable methods.
 jQuery is an open-source JavaScript library.
 jQuery is cross-platform and supports different types of browsers.
 jQuery is a small, light-weight, cross-platform and feature-rich JavaScript library.
 jQuery is designed to simplify the client-side scripting of HTML.
o The main purpose of jQuery is to provide an easy way to use JavaScript on the
website, so that the website is more interactive and attractive.
 jQuery is a lightweight, "write less, do more", JavaScript library.
o jQuery takes a lot of common tasks that require many lines of JavaScript code to
accomplish, and wraps them into methods that can be called with a single line of
code whenever needed.
 The jQuery library contains the following features:
o It helps us to manipulate HTML and CSS
o It helps us to manipulate DOM (Document Object Model) elements.
o HTML event methods
 Provides event methods to trigger and respond to an events on a html page
such as mouse click, keypress etc.
o Implements AJAX calls.
o JSON Parsing
o used to add Effects and Animations
o jQuery has plugins for almost any task out there.

Configuration of jQuery
 There are two basic approaches for incorporating the jQuery library on your website.
o Approach 1: Download the jQuery
o Approach 2: Include jQuery

 Approach 1: Download the jQuery

 The jQuery library can be downloaded from jQuery.com.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 2

 There are two versions of jQuery available for downloading:

o Development Version: This is used for development and testing purposes.
o Production Version: This is used for live websites. It is different from the
development version due to its state of being compressed and minified, that is, its
code is optimized and minimized greatly for better performance.
 The jQuery library is a single JavaScript file, and it is specified in the <script> tag of
the HTML
 Since it is metadata for the HTML, hence it must be placed in the <head> tag.
 For example
<head>
<script src=“jQuery-3.3.1.min.js”></script>
</head>
 Note: the downloaded file has to be put in the same directory which contains the
other HTML pages.

 Approach 2: Include jQuery

o Include jQuery from a Content Delivery Network (CDN) like Microsoft or
Google.
 For Microsoft’s jQuery integration, write the following code:

 For Google’s jQuery integration, write the following code:

Syntax
 The jQuery syntax is tailor-made for selecting HTML elements and performing some
action on the element(s).
 The standard format for a jQuery syntax is
$(selector).action()
o $ sign to define/access jQuery.
o selector that searches for the specified HTML elements.
o action() which executes a task on the selected elements.
 For examples:
o $(this).hide() - hides the current element.
o $("p").hide() - hides all <p> elements.
o $(".test").hide() - hides all elements with class="test".
o $("#test").hide() - hides the element with id="test".

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 3

The Document Ready Event

 All jQuery methods will be defined inside a document-ready event.
 The purpose of this approach is to block the execution of the jQuery code until the
document is loaded or “ready”.
 This wait is recommended because it allows the complete document to be shown before
jQuery performs any task.
 Here are some examples of actions that can fail if methods are run before the document is
fully loaded:
o jQuery can attempt to hide an HTML element which is not loaded yet on the
webpage.
o jQuery can attempt to alter an image’s size before it is loaded.
 Additionally, this allows for JavaScript code to be defined in the head tag, before the
HTML body.
 Generally, this event looks like the following:

$(document).ready(function(){
// Any jQuery method will be defined here
});

Alternatively, there is a comparatively easier and more concise method:

$(function(){
// Any jQuery method will be defined here
});

Selectors

 HTML elements are manipulated through selectors in jQuery.

 They “select” or search for elements via their id, classes, types, attributes, or simply by
their name.
 Selectors begin with “$” sign and a set of parentheses “( )”.

Element

 To find an HTML element, the element selector is used.

 For instance, to select a paragraph tag <p>, write $(“p”).
 For example

<!DOCTYPE html>
<html>
<head>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 4

<button id="btn">Click Here to Disappear the First Paragraph</button>

</body>
</html>

 How the jQuery code gets executed using above example

o Step 1: First, we have added a <script> tag to specify the jQuery source file.
 The browser then downloads this file and executes it.
 This gives the ability to render jQuery code.
 The browser can now know the jQuery tags it is going to encounter.
o Step 2: Then it reaches to $(document).ready(function() { line.
 This line tells the browser not to execute the code from this block until the
document is fully loaded.
 In other words, page Document Object Model (DOM) is ready for jQuery
to execute.
o Step 3: Once the execution pointer is inside the ready function, it comes to the
next line which is $(“button”).click(function() {.
 This code get executed when click event occurs on the button element.
o Step 4: When it detects the “click” event, it enters into the
$(“button”).click(function() { and finds $(“p1”).hide();.
 Here, use a selector on “p1” tag.
 Hence, jQuery find the p1 element and hide it.

#id Selector

 The jQuery id selector uses the id attribute of an HTML tag to find the specific element.
 An id is always unique (in a single webpage). Hence, the id selector is needed to search
for a unique element.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 5

 To use this selector, write a hash character before the element id.
 For example

<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#second").hide();
});
});
</script>
</head>
<body>
<h2>This Example Demonstrates ID Selector</h2>
<p1>
The first paragraph is about to disappear by using jQuery. <br>
</p1>
<p2 id="second">
The second paragraph which is not going to disappear.<br><br>
</p2>

<button>Click Here to Disappear the Second Paragraph</button>

</body>
</html>

Class Selector

 The jQuery use the class selector for finds any HTML element with a defined class.
 To find elements with a specific class, write a period character, followed by the name of
the class.
 For example

<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 6

$("button").click(function() {
$(".hd").hide();
});
});
</script>
</head>
<body>
<h2 class="hd">This Example Demonstrates Class Selector</h2>
<p1>The first paragraph is not going to disappear by using jQuery.
<br><br>
</p1>
<p2 class="hd">
The second paragraph is going to disappear.<br><br>
</p2>
<button>
Click Here to Disappear the Second Paragraph With Heading
</button>
</body>
</html>

jQuery Events
 Whenever a visitor performs an action on an HTML page, there are pre-defined replies to
provide them with a response. This pre-defined reply is called as an event.
 jQuery is also used to create an “event” in a webpage.
 Event is like a response which is triggered by a user action. jQuery provides methods to
capture these user actions and reply to them.
 An event can be triggered when a user
o clicks on the submit button, or
o checks a radio-button, or
o even if they simply hover a mouse around an element.
 The triggering state of an event is often characterized by the term “fire”.
o The keypress event is fired, the moment user press a key.

click() method

 The click() function is executed whenever an HTML element is clicked by a user.

 The click() function fixes an event handler function with an HTML element.
 For example, the click method is assigned to HTML headings, when a user clicks on
them, the heading gets hidden.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 7

</script>

dblclick() method

 The dblclick() method attaches an event handler function to an HTML element.

 The function is executed when the user double-clicks on the HTML element.
 For example, the headings are only going to be hidden, when the user double-clicks on it.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 8

<h1>If click on First Heading, It will disappear.</h1>

<h2>If click on Second Heading, It will disappear.</h2>
<h3>If click on Third Heading, It will disappear.</h3>
<p> Use double-click on heading to hide it.</p>
</body>
</html>

mouseenter() method

 The mouseenter() method is used for integrating an event handling functionality with an
HTML element.
 The function is executed when the mouse pointer enters the HTML element.
 For example

mouseleave() method

 The mouseleave() method attaches an event handler function to an HTML element.

 The mouseleave() function is triggered when the cursor of a user leaves an HTML
element.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 9

jQuery Effects

 With jQuery, the various effects can be generated on the Webpages.

 Some visual effects for actions such as
o button click,
o popup window open and close,
o selecting a dropdown value,
o show or hide various elements such as text boxes, etc.

hide() and show() methods

 In jQuery, HTML elements can appear and disappear by using the hide() and show() methods.
 For example

/This captures the click event on element with id "b" /

$("#b").click(function(){

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 10

/This shows all the elements p /

$("p").show();
});
});
</script>
</head>
<body>
<h1>Example for hide() and show() methods</h1>
<p>If the Hide button is clicked, then the paragraph would disappear.</p>
<p>If the Show button is clicked, then the paragraph would appear
again.</p>
<button id="a">Hide</button>
<button id="b">Show</button>
</body>
</html>

 The parentheses of both hide() and show() function can take two optional arguments:
speed and callback.
 Syntax:
o $(selector).hide(speed,callback);
o $(selector).show(speed,callback);
 The speed parameter specifies the speed of the hiding/showing, and can be defined by
values: "slow", "fast", or milliseconds (digits).
 The callback argument performs its task when the show or hide method finishes.
 The following example illustrate that the HTML elements disappear after 3 seconds.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<h1 class ="a">The Hidden Heading </h1>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 11

<p class="a">These paragraphs and the single heading will hide 3 seconds
after:</p>
<p class="a">A user clicks on the button. </p>
</body>
</html>

toggle() methods

 The toggle() method is defined to toggle between hiding and showing HTML element.
 Here, the shown elements are hidden and hidden elements are shown by using same
button.
 For example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

jQuery Fading effects

 jQuery provides support to fade an element in and out of visibility.

 jQuery has the following fade methods:
o fadeIn() method
o fadeOut() method
o fadeToggle() method
o fadeTo() method

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 12

fadeIn() method

 This method is useful to change the opacity of an element from hidden to visible.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<button>Hit the button to get the fadingIn effect.</button><br><br>

<div id="1" style="width:40px;height:60px;display:none;background-

color:brown;"></div><br>

<div id="2" style="width:40px;height:60px;display:none;background-

color:yellow;"></div><br>

<div id="3" style="width:40px;height:60px;display:none;background-

color:orange;"></div>
</body>
</html>

fadeOut() method

 This method is useful to change the opacity of an element from visible to hidden.
 For example

<!DOCTYPE html>
<html>
<head>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 13

<div id="1" style="width:40px;height:60px;background-color:brown;">

</div><br>

<div id="2" style="width:40px;height:60px;background-color:yellow;">

</div><br>

<div id="3" style="width:40px;height:60px;background-color:orange;">

</div>
</body>
</html>

fadeToggle() method

 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.
 For example

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 14

});
});
</script>
</head>
<body>
<p>Applying fadeToggle effect on each box with different timing.</p>

<button>
Hit the button to get the fadingIn/fadingOut effect.
</button><br><br>

<div id="1" style="width:40px;height:60px;background-color:brown;">

</div><br>

<div id="2" style="width:40px;height:60px;background-color:yellow;">

</div><br>

<div id="3" style="width:40px;height:60px;background-color:orange;">

</div>
</body>
</html>

fadeTo() Method

 The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 15

<button>Hit the button to get the fadeTo effect.</button><br><br>

<div id="1" style="width:40px;height:60px;background-

color:brown;"></div><br>

<div id="2" style="width:40px;height:60px;background-

color:yellow;"></div><br>

<div id="3" style="width:40px;height:60px;background-

color:orange;"></div>
</body>
</html>

jQuery Sliding effects

 jQuery is often known for its beautiful and interactive sliders.

 It can create a sliding effect on elements.
 jQuery offers three basic slide methods: slideDown()
o slideDown()
o slideUp()
o slideToggle()

slideDown() Method

 This method is useful to reveal an element slowly, from top to bottom.

 It animates the height of the element to reveal the lower part of the element.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 16

padding: 10px;
text-align: left;
background-color: dodgerblue;
border: solid 5px purple;
}

#panel {
padding: 60px;
display: none;
}
</style>
</head>
<body>
<div id="flip">When this area is clicked, a panel emerges.</div>
<div id="panel">The panel greets the user with Merry Christmas!</div>
</body>
</html>

slideUp() Method

 This method is useful to sliding up an element from bottom to top, which gives animated
effect of concealing.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 17

#panel {
padding: 60px;
}
</style>
</head>
<body>
<div id="flip">When this area is clicked, a panel emerges.</div>
<div id="panel">The panel greets the user with Merry Christmas!</div>
</body>
</html>

slideToggle() Method

 This method is useful to enable or disable sliding.

 If the element at its full height then it conceal it, and if it is concealed then it reveals the
element.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

#panel {
padding: 60px;
display: none;
}
</style>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 18

</head>
<body>
<div id="flip">When this area is clicked, a panel emerges.</div>
<div id="panel">The panel greets the user with Merry Christmas!</div>
</body>
</html>

jQuery Animation effects

 The jQuery animate() method is used to create custom animations.

 Syntax:
$(selector).animate({params},speed,callback);
o Params is short for parameter and references to CSS properties that require
animation.
o Speed refers to the time period for animation – “fast”, “slow”, and milliseconds
are arguments.
o The callback parameter runs after the completion of the animation.
 Note that by default, HTML elements are static which means it is not possible to move
them. To move them, you have to adjust the CSS property of that element to absolute,
fixed, or relative.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

 For more advanced animations, add multiple properties to our box.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 19

 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

 The hide, show, and toggle values can be used in the animate method.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 20

});
</script>
</head>
<body>
<p>Click the button repeatedly to check its impact.</p>
<button>Toggle the Animation</button><br><br>
<div style="background:dodgerblue;height:50px;width:50px;position:absolute;">
</div>
</body>
</html>

 jQuery supports queue functionality.

 If multiple calls are written in the animate() method, then jQuery builds a queue with
them, that is, calls animate step-by-step like a real-world queue.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

jQuery Stop Animations

 When an animation or effect is still in process, then the stop() method can halt it before
its completion.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 21

 This method is applicable to fading, sliding, custom animations, and any effect functions.
 Syntax
$(selector).stop(stopAll, goToEnd);
o These parameters are optional.
o The “stopAll” parameter is used to specify if the queue in the animation requires
to be cleared.
o By default, “stopAll” is false; therefore, only the animation which is active is
blocked, thereby permitting other animations in the queue to be executed.
o The “goToEnd” parameter defines if the current animation should be finished
quickly. By default, it is false.
 The stop() method stops any current animation, depending upon the element which is
selected.
 For example

$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel, #flip {
padding: 3px;
font-size: 50px;
text-align: left;
background-color: green;
color: black;
border: solid 1px #666;
}

#panel {
padding: 20px;
display: none;
}
</style>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 22

</head>
<body>
<button id="stop">Pause the sliding effect</button><br><br>
<div id="flip">Hit this area for sliding down the panel.</div>
<div id="panel">Hello User! </div>
</body>
</html>

jQuery Callback Function

 By default, JavaScript functions are executed and processed on a line-by-line basis.

 Sometimes, this is problematic as the next line of code is executed before the completion
of an effect. As a consequence, webpage may face errors.
 In order to avoid this, use a callback function.
 A callback function is executed after the current effect is completed.
 syntax:
$(selector).hide(speed,callback);
 The example below has a callback parameter that is a function that will be executed after
the hide effect is completed

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<h1>Callback Function</h1>
</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 23

jQuery Chaining

 Chaining is the “chain” of multiple jQuery methods.

 Chaining in jQuery refers to the execution of more than a single jQuery method with a
single element in one statement.
 This is useful for browsers because they do not have to search for an element repeatedly.
 For chaining, simply append the action to the previous action.
 The following example chains together the css(), slideUp(), and slideDown() methods.
o The "p1" element first changes to blue, then it slides up, and then it slides down:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Working with HTML

 jQuery contains powerful methods for changing and manipulating HTML elements and
attributes.
 This section, cover various such methods and explain with examples the use of those.

jQuery DOM Manipulation

 jQuery allows users to modify Document Object Model (DOM).

 DOM is a standard which is used to access HTML and XML documents.
 Properties and methods define DOM’s programming interface.
 Property is something the element has and method is something the element can do.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 24

 There are various DOM properties around but following are some of the more significant
ones. Let us say “n” is a node object.

o n.innerHTML: This property refers to the inner text value of an HTML element
“n”. However, note that it parses content as HTML so it takes longer to get value
compared to nodeValue property. For example, say “n” refers to <a> element like
<a href=“www.mayurramgir.com”>Mayur Ramgir</a>. In this case,
n.innerHTML will give “Mayur Ramgir”.

o n.nodeName: This is very straightforward property as it gives the name of the

node “n”.

o n.nodeValue: This property is similar to innerHTML in a sense as it gives the

inner text of node “n”. However, a major difference is it does not parse HTML
and gets the value in text format. Hence, it is faster than innerHTML.

o n.parentNode: This property gives access to the parent node of “n”.

o n.childNodes: This property gives access to the child node of “n”.

o n.attributes: This property gives all the attributes of node “n”.

Get Content

 The following are three basic and easy-to-use methods in jQuery for DOM manipulation:
o text() method: It is used to assign or return any piece of text for the selected
HTML elements.
o html() method: It is used to assign or return the content for the selected elements
(markup included).
o val() method: It is used to assign or return any value from the fields in the HTML
forms.

 The following example demonstrates how to get content with the jQuery text() and html()
methods:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 25

});

$("#b2").click(function(){
alert("HTML: " + $("#par").html());
});
});
</script>
</head>
<body>
<p id="par">
This is line is part of a paragraph <b>and contains bold text.</b>
</p>

<button id="b1">Display Text</button>

<button id="b2">Display HTML code</button>

</body>
</html>

 The following example demonstrates how to get the value of an input field with the
jQuery val() method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<button id ="button1">Check the Value</button>

</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 26

Get Attributes

 To receive the value of HTML attributes, 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 by
using the jQuery attr() method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#go").attr("href"));
});
});
</script>
</head>
<body>
<p>
<a href="https://www.soa.ac.in" id="go">SOA Deemed to be
University</a>
</p>

<button>Show href Value</button>

</body>
</html>

Set Content

 The above-mentioned methods can also be used for setting content.

 The following example demonstrates how to set content with the jQuery text(), html(),
and val() methods.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 27

$("#par1").text("Hi User!");
});

$("#b2").click(function(){
$("#par2").html("<b>Hello World!</b>");
});

$("#b3").click(function(){
$("#par3").val("Shane");
});
});
</script>
</head>
<body>
<p id="par1">This is our first paragraph.</p>

<p id="par2">This is our second paragraph.</p>

<p>Input field: <input type="text" id="par3" value="Rick"></p>

<button id="b1">Setting any textual information</button>

<button id="b2">Setting any HTML data</button>

<button id="b3">Setting any value</button>

</body>
</html>

Set Attributes

 To change or modify the values of an attribute, the jQuery attr() method is used.
 The following example demonstrates how to change (set) the value of the href attribute in
a link, so that the modified the value of href is redirect a user to another website.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 28

});
});
</script>
</head>
<body>
<p id="par1">
<a href="https://www.google.com" id="w3s">Google.com</a>
</p>

<button id="b1">Click to change the href value</button>

<p>After clicking the link, place your cursor on the hyperlink and check
the link address or click it to go to other website.</p>
</body>
</html>

Addition of Elements

 For the addition of fresh contents in HTML elements, jQuery provides four methods:
o append() method
o prepend() method
o after() method
o before() method

append() method

 The append() method is used, in order to insert any piece of content at the extreme end of
the element.
 In the following example, demonstrate to appended text at the end of the paragraphs as
well attached one more list item to the end of the list.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

$("#b2").click(function(){

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 29

$("ul").append("<li>Soup</li>");
});
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
</ul>

<button id="b1">Append content at the end of paragraph.</button>

<button id="b2">Append item at the end of the list.</button>
</body>
</html>

prepend() method

 The prepend() method is used to add content at the starting of an element.

 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

$("#b2").click(function(){
$("ol").prepend("<li>Nuggets</li>");
});
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 30

<p>This is the second paragraph.</p>

<ol>
<li>Pizza</li>
<li>Burger</li>
<li>Sandwich</li>
</ol>

<button id="b1">Prepend content at the end of paragraph.</button>

<button id="b2">Prepend item at the end of the list.</button>
</body>
</html>

after() method and before() Methods

 The jQuery after() method inserts content AFTER the specified HTML elements.
 The jQuery before() method inserts content BEFORE the specified HTML elements.
 The following example demonstrates to add content before and after an image.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

$("#b2").click(function(){
$("img").after("<br><br>the above image is beautiful.");
});
});
</script>
</head>
<body>
<img src="photography.jpg" alt="jQueryimg" width="150"
height="100"><br><br>

<button id="b1">Adding text before the image.</button>

<button id="b2">Adding text after the image.</button>
</body>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 31

</html>

Deleting HTML Elements

 jQuery allows to delete elements from the HTML.

 There are mainly two jQuery methods:
 remove()
 empty()

remove() method

 jQuery remove() method, delete any selected single element or set of elements.
 It also deletes the child elements of those elements.
 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<br>
<button>Delete the div element from the page.</button>
</body>
</html>

 The remove() method can also take one parameter for filtering of elements and remove.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 32

 The parameter can be any of the jQuery selector syntaxes.

 The following example demonstrates to removes all the paragraphs elements with “b”
class.

empty() Method

 In order to delete an element’s child elements, the empty() method is used.

 For example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 33

$("button").click(function(){
$("#d").empty();
});
});
</script>
</head>
<body>
<div id="d" style="height:500px;width:500px;border:3px solid green;
background-color:orange;">
We are using div element in our example.
<p>A button is used for deletion.</p>
<p>The button calls out the remove() method to delete the element.</p>
</div>

<br>
<button>Delete the div element from the page.</button>
</body>
</html>

jQuery with CSS

 In addition to HTML, jQuery can also manipulate CSS elements.
 jQuery has several methods for CSS manipulation.:
o addClass() - Adds one or more classes to the selected elements.
o removeClass() - Removes one or more classes from the selected elements.
o toggleClass() - Toggles between adding/removing classes from the selected
elements.
o css() - Sets or returns the style attribute.

addClass() method

 By using addClass(), CSS class attributes can be added in various HTML elements.
 You can pick a single or multiple elements and assign a class with it.
 In the following example, assigned a CSS class “green” to change color of first heading
and paragraph. Similarly, by using a “size” class, modified the size of div element.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 34

$(document).ready(function(){
$("#b1").click(function(){
$("h1, p").addClass("green");
$("div").addClass("size");
});
});
</script>
<style>
.size {
font-size: xx-large;
}

.green {
color: green;
}
</style>
</head>
<body>
<h1>The is the first heading!</h1>

<h2>The is the second heading!</h2>

<p>This is the first paragraph.</p>

<p>This is the second paragraph.</p>

<div>This is a piece of vital information.</div><br>

<button id ="b1">Push classes in elements</button>

</body>
</html>

removeClass() method

 To delete any selected class attribute from multiple elements, use the removeClass()
method.
 The following example shows how to remove a specific class attribute from different
elements.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 35

$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").removeClass("green");
});
});
</script>

<p class="green">This paragraph is green.</p>

<p>This paragraph has no colour.</p>

<button>Delete the CSS class from the selected elements.</button>

</body>
</html>

toggleClass() method

 The jQuery toggleClass() method, toggles between adding/removing classes from the
selected HTML’s elements.
 The following example will show how to use the jQuery toggleClass() method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<style>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 36

.green{
color: green;
}
</style>

</head>
<body>
<h1>This is the first heading which is soon to be turned green!</h1>
<h2>This is the second heading which is going to remain the same!</h2>

<p>This is the first paragraph which is soon to be turned green.</p>

<p>This is the second paragraph which is soon to be turned green.</p>

<button>Use the toggleClass function</button>

</body>
</html>

css() method

 In order to set or return style properties for the specified elements, the css() method is
used.
 Syntax:
css("propertyname");

 In the following example, each paragraph has been assigned with a separate background
color. The css("background-color") method is used to show the RGB values of each
paragraph’s background color.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("#p1").css("background-color"));
alert("Background color = " + $("#p2").css("background-color"));
alert("Background color = " + $("#p3").css("background-color"));
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 37

<p id="p1" style="background-color:dodgerblue">

This is the first paragraph.
</p>
<p id="p2" style="background-color:orange">
This is the second paragraph.
</p>
<p id="p3" style="background-color:yellow">
This is the third paragraph.
</p>

<button>Show the background color of each paragraph.</button>

</body>
</html>

 The css() method is used to modify an already set property in CSS.

 The following syntax is used to set a specified CSS property:
css("propertyname","value");

 The following example will set the background-color value for ALL matched elements:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<p id="p1" style="background-color:dodgerblue">

This is the first paragraph.
</p>
<p id="p2" style="background-color:orange">
This is the second paragraph.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 38

</p>
<p id="p3" style="background-color:yellow">
This is the third paragraph.
</p>
<p>This paragraph is without any color.</p>

<button>Adjust the background color of the paragraphs.</button>

</body>
</html>

Traversing
 jQuery provides excellent traversing functionality.
 jQuery traversing, which means "move through", are used to "find" (or select) HTML
elements based on their relation to other elements.
 It starts with one selection and moves through that selection until to reach the intended
(desire) element.
 With jQuery traversing, you can easily move up (ancestors), down (descendants) and
sideways (siblings) in the tree, starting from the selected (current) element.
o An ancestor is a parent, grandparent, great-grandparent, and so on.
o A descendant is a child, grandchild, great-grandchild, and so on.
o The Siblings share the same parent.
 The Figure 5.1 shows an example of HTML page as a DOM tree.
o It has a root element named <html>.
o The <html> element contains two main elements <head> and <body>.
o The <head> contains header related information like page title, meta data, etc.
o The <body> contains all the elements which will be displayed on a browser
window.
o Every element has various attributes and most of the elements may also contain
text.
o See the following <button> element example which has attribute “type” and text
which can be specified by the developer.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 39

Ancestors

 Ancestor refers to an element which may be a parent or grandparent of a child element.

 jQuery helps in traversal of the DOM tree by searching any element.
 There are three methods
o parent()
o parents()
o parentsUntil().

parent() method

 The parent() method returns the direct parent element of the selected element.
 This method only traverses a single level up the DOM tree.
 The following example returns the direct parent element of each <span> element.

<!DOCTYPE html>
<html>
<head>
<style>
.outermost * {
display: block;
border: 2px solid lightgrey;
color: green;
padding: 6px;
margin: 20px;
}
</style>

$(document).ready(function(){
$("span").parent().css({"color": "blue", "border": "1px solid blue"});
});
</script>
</head>
<body>
<div class="outermost">
<div style="width:400px;">div (great-grandparent)
<ol>ol (grandparent)
<li>li (direct parent)
<span>rectangle 1</span>
</li>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 40

</ol>
</div>

<div style="width:400px;">div (grandparent)

<p>p (direct parent)
<span>rectangle 2</span>
</p>
</div>
</div>
</body>
</html>

parents() method

 The parents() method can be used to display all the ancestors of the selected element, all
the way up to the document's root element (<html>).
 The following example returns all ancestors of <span> element.

<!DOCTYPE html>
<html>
<head>
<style>
.outermost * {
display: block;
border: 3px solid orange;
color: green;
padding: 6px;
margin: 18px;
}
</style>

<body class="outermost">body (great-great-grandparent)

<div style="width:400px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>rectangle</span>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 41

</li>
</ul>
</div>
</body>
</html>

parentsUntil()

 The parentsUntil() method is used to search for all the ancestors till a specific point.
 The parentsUntil() method returns all ancestor elements between two given arguments.
 The following example returns all parents starting from the <span> tag and ending at the
<div> tag.

<!DOCTYPE html>
<html>
<head>
<style>
.outermost * {
display: block;
border: 2px solid orange;
color: lightgrey;
padding: 6px;
margin: 18px;
}
</style>

<body class="outermost"> body (great-great-grandparent)

<div style="width:400px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 42

</body>
</html>

Descendants

 jQuery helps to traverse down the DOM tree to find descendants of an element.
 A descendant is a child or grandchild or great-grandchild of an element.
 There are two main methods to find descendants:
o children() method
o find() method

children() method

 The children() method returns all direct children of the selected element.
 This method only traverses a single level down the DOM tree.
 The following example returns the direct child of the div tag and represent by blue-color.

<!DOCTYPE html>
<html>
<head>
<style>
.innermost * {
display: block;
border: 1px solid green;
color: lightgreen;
padding: 6px;
margin: 18px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<body>
<div class="innermost" style="width:300px;">div (current element)
<p>p (child)
<span> rectangle 1 (grandchild)</span>
</p>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 43

<p>p (child)
<span> rectangle 2 (grandchild)</span>
</p>
</div>
</body>
</html>

find() method

 The find() method returns descendant elements of the selected element, all the way down
to the last descendant.
 The following example returns all <span> elements which are child to <div> element and
css color properties.

<!DOCTYPE html>
<html>
<head>
<style>
.innermost * {
display: block;
border: 3px solid green;
color: lightgreen;
padding: 6px;
margin: 18px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<p>p (child)
<span>rectangle 2 (grandchild)</span>
</p>
</div>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 44

</body>
</html>

 The following example returns all descendants of <div> element.

<!DOCTYPE html>
<html>
<head>
<style>
.innermost * {
display: block;
border: 3px solid green;
color: lightgreen;
padding: 6px;
margin: 18px;
}
</style>

<p>p (child)
<span>rectangle 2 (grandchild)</span>
</p>
</div>
</body>
</html>

Siblings

 Siblings elements are the ones who share the same parent.
 jQuery allows to traverse horizontally to search an element’s siblings.
 To check a sibling, there are multiple methods for traversing sideways in the DOM tree.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 45

o siblings() method
o next() method
o nextAll() method
o nextUntil() method
o prev() method
o prevAll() method
o prevUntil() method

siblings() method

 The siblings() method returns all sibling elements of the selected element.
 The following example returns all sibling elements of <h2> element.

<!DOCTYPE html>
<html>
<head>
<style>
.s * {
display: block;
border: 3px solid yellow;
color: orange;
padding: 6px;
margin: 18px;
}
</style>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 46

</div>
</body>
</html>

next() method

 The next() method returns the next sibling element of the selected element.
 The following example returns the next sibling of <h2> and <h3> element.

<!DOCTYPE html>
<html>
<head>
<style>
.s * {
display: block;
border: 3px solid green;
color: green;
padding: 6px;
margin: 18px;
}
</style>

<span>rectangle</span>
<h2>h2</h2>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 47

</body>
</html>

nextAll() method

 The nextAll() method returns all next sibling elements of the selected element.
 The following example returns all next sibling elements of <h2> element.

<!DOCTYPE html>
<html>
<head>
<style>
.s * {
display: block;
border: 3px solid green;
color: green;
padding: 6px;
margin: 18px;
}
</style>

<body class="s">
<div>div (parent)
<p>para 1</p>

<span>rectangle</span>

<span>rectangle</span>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 48

</div>
</body>
</html>

nextUntil() method

 The nextUntil() method is used to view the next siblings of element till a given point is
reached.
 The following example started searching for the next siblings of <h1> till <h5> element.

<!DOCTYPE html>
<html>
<head>
<style>
.s * {
display: block;
border: 3px solid green;
color: lightgrey;
padding: 6px;
margin: 18px;
}
</style>

<body class="s">
<div>div (parent)
<p>para</p>
<span>rectangle</span>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<h6>h7</h6>
</div>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 49

</body>
</html>

prev() method

 The prev() method is used to check the previous elements of a sibling.

 The following example checks the immediate previous sibling of <h5> element.

<!DOCTYPE html>
<html>
<head>
<style>
.s * {
display: block;
border: 3px solid green;
color: lightgrey;
padding: 6px;
margin: 18px;
}
</style>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 50

prevAll() method

 The prevAll() method is used to check all the previous elements of a sibling.
 The following example checks all the previous siblings of <h5> element.

<!DOCTYPE html>
<html>
<head>
<style>
.s * {
display: block;
border: 3px solid green;
color: lightgrey;
padding: 6px;
margin: 18px;
}
</style>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 51

prevUntil() method

 The prevUntil() method is used to view the next previous of element to till a given point
is reached.
 The following example started searching for the previous siblings of <h5> to till <span>
element.

<!DOCTYPE html>
<html>
<head>
<style>
.s * {
display: block;
border: 3px solid green;
color: lightgrey;
padding: 6px;
margin: 18px;
}
</style>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 52

Filtering

 Traversing can be performed through filtering.

 The filtering technique allows selecting a specific element based on its position in a
group of elements.
 The most basic filtering methods are
o first() method
o last() method
o eq() method

first() method

 The first() method returns the first element of the specified elements.
 The following example selects the first <div> element.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 53

</html>

last() method

 The last() method returns the ending element of the selected elements.
 The following example selects the last <div> element.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

eq() method

 The eq() method is used to select a specific element.

 The eq() method takes the index number as an argument for the defined elements.
 The index begins with 0.
 For example

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to JQuery 54

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Learn JavaScript in 24 Hours
From Everand
Learn JavaScript in 24 Hours
Alex Nordeen
3.5/5 (5)
A BIM Data Mining Integrated Digital Twin Framework For Advance Project Management
100% (1)
A BIM Data Mining Integrated Digital Twin Framework For Advance Project Management
15 pages
Jquery Notes W3schools
100% (2)
Jquery Notes W3schools
8 pages
Jquery: What You Should Already Know
No ratings yet
Jquery: What You Should Already Know
44 pages
JQuery Tutorial
50% (2)
JQuery Tutorial
51 pages
DOC_LM_unit2 (3)
No ratings yet
DOC_LM_unit2 (3)
22 pages
FALLSEM2024-25 BITE304L TH VL2024250103505 2024-09-10 Reference-Material-I
No ratings yet
FALLSEM2024-25 BITE304L TH VL2024250103505 2024-09-10 Reference-Material-I
52 pages
Web Programming
No ratings yet
Web Programming
21 pages
Jquery Introduction: What You Should Already Know
No ratings yet
Jquery Introduction: What You Should Already Know
26 pages
fdsfdsfds
No ratings yet
fdsfdsfds
15 pages
jQuery_print
No ratings yet
jQuery_print
16 pages
J Query F
No ratings yet
J Query F
73 pages
10.introduction To JQuery
No ratings yet
10.introduction To JQuery
17 pages
jQueryNotes PDF
No ratings yet
jQueryNotes PDF
40 pages
J Query 1
No ratings yet
J Query 1
5 pages
Jquery Notes Course Tutorial
No ratings yet
Jquery Notes Course Tutorial
40 pages
Jquery 170413145400
No ratings yet
Jquery 170413145400
208 pages
Jquery Presentation
No ratings yet
Jquery Presentation
24 pages
Jquery Introduction: Previous Next Chapter
No ratings yet
Jquery Introduction: Previous Next Chapter
11 pages
What Is Jquery?
No ratings yet
What Is Jquery?
16 pages
J Query Tutorial
No ratings yet
J Query Tutorial
76 pages
CHAPTER - 3 - LECTURE NOTES - ON - Jquery
No ratings yet
CHAPTER - 3 - LECTURE NOTES - ON - Jquery
43 pages
jQuery
No ratings yet
jQuery
55 pages
3.2 Usage of Jquery
No ratings yet
3.2 Usage of Jquery
28 pages
jQuery
No ratings yet
jQuery
9 pages
Jquery
No ratings yet
Jquery
54 pages
Element of Commercial portal Unit III
No ratings yet
Element of Commercial portal Unit III
25 pages
Unit 1 JQuery
No ratings yet
Unit 1 JQuery
11 pages
Module 4.2
No ratings yet
Module 4.2
27 pages
Jquery
No ratings yet
Jquery
11 pages
J Query
No ratings yet
J Query
30 pages
Unit 4 JQuery
No ratings yet
Unit 4 JQuery
80 pages
Unit 3 Wad
No ratings yet
Unit 3 Wad
31 pages
Jquery Presentation Final
No ratings yet
Jquery Presentation Final
37 pages
What Is Jquery?: Example
No ratings yet
What Is Jquery?: Example
3 pages
06 - jQuery
No ratings yet
06 - jQuery
17 pages
Lecture 18
No ratings yet
Lecture 18
17 pages
Unit 6 Jquery
No ratings yet
Unit 6 Jquery
63 pages
jQuery
No ratings yet
jQuery
33 pages
INTRODUCTION TO Jquery
No ratings yet
INTRODUCTION TO Jquery
5 pages
Unit 2
No ratings yet
Unit 2
30 pages
Lecture 1
No ratings yet
Lecture 1
12 pages
JQuery Tutorial
No ratings yet
JQuery Tutorial
5 pages
DHTML, Ajax, XML
No ratings yet
DHTML, Ajax, XML
7 pages
Web Application Development: Jquery
No ratings yet
Web Application Development: Jquery
41 pages
Unit 2 - JQuery
No ratings yet
Unit 2 - JQuery
25 pages
Jquery Refrence
No ratings yet
Jquery Refrence
39 pages
JQuery Ver 1.2
No ratings yet
JQuery Ver 1.2
32 pages
AWP Module1 Jquery
No ratings yet
AWP Module1 Jquery
13 pages
Jquery: Ia Lab
No ratings yet
Jquery: Ia Lab
18 pages
JQuery
No ratings yet
JQuery
13 pages
Lecture 9ABC JQuery
No ratings yet
Lecture 9ABC JQuery
65 pages
JQUERY
No ratings yet
JQUERY
125 pages
The Ultimate Jquery Guide
No ratings yet
The Ultimate Jquery Guide
8 pages
Module 1 PDF
No ratings yet
Module 1 PDF
32 pages
Query and Ajax
No ratings yet
Query and Ajax
35 pages
jquery
No ratings yet
jquery
37 pages
Quick JavaScript Learning In Just 3 Days: Fast-Track Learning Course
From Everand
Quick JavaScript Learning In Just 3 Days: Fast-Track Learning Course
Vijay K.R.
No ratings yet
jQuery For Beginners: jQuery JavaScript Library Guide For Developing Ajax Applications, Selecting DOM Elements, Creating Animations
From Everand
jQuery For Beginners: jQuery JavaScript Library Guide For Developing Ajax Applications, Selecting DOM Elements, Creating Animations
Joseph Joyner
No ratings yet
WordPress 3.0 jQuery
From Everand
WordPress 3.0 jQuery
Tessa Blakeley Silver
No ratings yet
JavaScript Introduction
From Everand
JavaScript Introduction
Lisa Saldivar
No ratings yet
Chapter 6
No ratings yet
Chapter 6
66 pages
Chapter 3
No ratings yet
Chapter 3
29 pages
8_Graph_SPP
No ratings yet
8_Graph_SPP
23 pages
6_GraphTraversal
No ratings yet
6_GraphTraversal
82 pages
5_heapsort
No ratings yet
5_heapsort
41 pages
7_Graph_MST
No ratings yet
7_Graph_MST
29 pages
4_sorting
No ratings yet
4_sorting
23 pages
Ansys Act Customization Guide For Designmodeler
No ratings yet
Ansys Act Customization Guide For Designmodeler
28 pages
Software Requirements Specification For - Lawyer Finding Website
No ratings yet
Software Requirements Specification For - Lawyer Finding Website
9 pages
2.5.5 Packet Tracer - Configure Initial Switch Settings
No ratings yet
2.5.5 Packet Tracer - Configure Initial Switch Settings
5 pages
uMMORPG Remastered Documentation
No ratings yet
uMMORPG Remastered Documentation
4 pages
Guc 437 59 30794 2023-03-27T09 24 46
No ratings yet
Guc 437 59 30794 2023-03-27T09 24 46
54 pages
Richpeace Electric Control Model III User Manual- (2)
No ratings yet
Richpeace Electric Control Model III User Manual- (2)
228 pages
EKramer BA
No ratings yet
EKramer BA
11 pages
New One Python Notes
No ratings yet
New One Python Notes
162 pages
College Library Management System Entity Relationship Diagram Tables
No ratings yet
College Library Management System Entity Relationship Diagram Tables
3 pages
74LS Series Digital Logic Tester PDF
No ratings yet
74LS Series Digital Logic Tester PDF
8 pages
Metadata Submission Guidelines V1 Final
No ratings yet
Metadata Submission Guidelines V1 Final
35 pages
Priya - Experience Resume 3.5
No ratings yet
Priya - Experience Resume 3.5
3 pages
Constant-Therapy-Patient-Brochure
No ratings yet
Constant-Therapy-Patient-Brochure
1 page
WA-22NCC-588!11!2020 Liberty Technology (Final)
No ratings yet
WA-22NCC-588!11!2020 Liberty Technology (Final)
90 pages
i3LEARNHUB ENG
No ratings yet
i3LEARNHUB ENG
12 pages
Operator Handbook OSINT
80% (10)
Operator Handbook OSINT
437 pages
Search ID card - Canva
No ratings yet
Search ID card - Canva
1 page
IT
No ratings yet
IT
36 pages
How To Install 2048 On Debian 11 - Installati - One
No ratings yet
How To Install 2048 On Debian 11 - Installati - One
3 pages
Bit Bake
No ratings yet
Bit Bake
32 pages
Unit 4
No ratings yet
Unit 4
57 pages
Data Types in Java: Multiple Choice Questions (Tick The Correct Answers)
100% (1)
Data Types in Java: Multiple Choice Questions (Tick The Correct Answers)
12 pages
GHT-200030 How To Start The ControlST Documentation Global Search
No ratings yet
GHT-200030 How To Start The ControlST Documentation Global Search
6 pages
Production Readiness Checklist
No ratings yet
Production Readiness Checklist
31 pages
Hsslive Xii Cs Key Dec 2024
No ratings yet
Hsslive Xii Cs Key Dec 2024
9 pages
Class 4
No ratings yet
Class 4
35 pages
BVBS-Guideline-Data-Exchange-Reinforcement-Data-3.1-Engl_20210614
No ratings yet
BVBS-Guideline-Data-Exchange-Reinforcement-Data-3.1-Engl_20210614
32 pages
1998_1000_DOC_AI-Powered Code Generation
No ratings yet
1998_1000_DOC_AI-Powered Code Generation
5 pages
Eq Re Manual 1.0.12
No ratings yet
Eq Re Manual 1.0.12
4 pages

Uploaded by

Uploaded by

Introduction to JQuery 1

 Approach 1: Download the jQuery

Lecturer Notes Prepared by Dr. Sangram Panigrahi

 There are two versions of jQuery available for downloading:

 Approach 2: Include jQuery

 For Google’s jQuery integration, write the following code:

Lecturer Notes Prepared by Dr. Sangram Panigrahi

The Document Ready Event

Alternatively, there is a comparatively easier and more concise method:

 HTML elements are manipulated through selectors in jQuery.

 To find an HTML element, the element selector is used.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

<button id="btn">Click Here to Disappear the First Paragraph</button>

 How the jQuery code gets executed using above example

Lecturer Notes Prepared by Dr. Sangram Panigrahi

<button>Click Here to Disappear the Second Paragraph</button>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

 The click() function is executed whenever an HTML element is clicked by a user.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

 The dblclick() method attaches an event handler function to an HTML element.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

<h1>If click on First Heading, It will disappear.</h1>

 The mouseleave() method attaches an event handler function to an HTML element.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

 With jQuery, the various effects can be generated on the Webpages.

hide() and show() methods

/*This captures the click event on element with id "b" */

Lecturer Notes Prepared by Dr. Sangram Panigrahi

/*This shows all the elements p */

<h1 class ="a">The Hidden Heading </h1>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

jQuery Fading effects

 jQuery provides support to fade an element in and out of visibility.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

<button>Hit the button to get the fadingIn effect.</button><br><br>

<div id="1" style="width:40px;height:60px;display:none;background-

<div id="2" style="width:40px;height:60px;display:none;background-

<div id="3" style="width:40px;height:60px;display:none;background-

Lecturer Notes Prepared by Dr. Sangram Panigrahi

<div id="1" style="width:40px;height:60px;background-color:brown;">

<div id="2" style="width:40px;height:60px;background-color:yellow;">

<div id="3" style="width:40px;height:60px;background-color:orange;">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

<div id="1" style="width:40px;height:60px;background-color:brown;">

<div id="2" style="width:40px;height:60px;background-color:yellow;">

<div id="3" style="width:40px;height:60px;background-color:orange;">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

<button>Hit the button to get the fadeTo effect.</button><br><br>

<div id="1" style="width:40px;height:60px;background-

<div id="2" style="width:40px;height:60px;background-

<div id="3" style="width:40px;height:60px;background-

jQuery Sliding effects

 jQuery is often known for its beautiful and interactive sliders.

 This method is useful to reveal an element slowly, from top to bottom.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Lecturer Notes Prepared by Dr. Sangram Panigrahi

 This method is useful to enable or disable sliding.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

jQuery Animation effects

 The jQuery animate() method is used to create custom animations.

 For more advanced animations, add multiple properties to our box.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Lecturer Notes Prepared by Dr. Sangram Panigrahi

 jQuery supports queue functionality.

jQuery Stop Animations

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Lecturer Notes Prepared by Dr. Sangram Panigrahi

jQuery Callback Function

 By default, JavaScript functions are executed and processed on a line-by-line basis.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

 Chaining is the “chain” of multiple jQuery methods.

Working with HTML

jQuery DOM Manipulation

 jQuery allows users to modify Document Object Model (DOM).

Lecturer Notes Prepared by Dr. Sangram Panigrahi

o n.nodeName: This is very straightforward property as it gives the name of the

o n.nodeValue: This property is similar to innerHTML in a sense as it gives the

o n.parentNode: This property gives access to the parent node of “n”.

/This captures the click event on element with id "b" /

/This shows all the elements p /