Scribd
Upload
18 views

Jqueryin 38 BM

Uploaded by

maheshwaramjagadheesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Jqueryin 38 BM

Uploaded by

maheshwaramjagadheesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

JQUERY

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 1


JQuery

• jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS
document, or more precisely the Document Object Model (DOM), and JavaScript.

Motto: Write less, do more

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 2


Why Jquery?

• Short selectors
• Variety of animation functions
• Easy DOM traversing
• It helps us to manipulate HTML and CSS
• It helps us to manipulate DOM (Document Object Model) elements
• Provides event methods to trigger and respond to an events on a html page such as mouse click, keypress etc.
• Implements AJAX calls.
Example:
Java script DOM element access statement

JQuery DOM element access statement

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 3


Why Jquery?

Example:

Java script DOM element access statement


JQuery DOM element access statement

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 4


Using Jquery on HTML

• Use the Google-hosted/Microsoft-hosted content delivery network (CDN) to include a version. Or

• Download it from official website jQuery.com and host it on your server or local filesystem.

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 5


Steps to implement Jquery in HTML

1. Download Jquery.js file


2. Include Jquery.js file in HTML file
3. Do Jquery code in <script> tag

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 6


Advantages of Jquery

• Browser independent
• Wide range of plug-ins that allows developers to create plug-ins on top of the JavaScript library.
• Large development community.
• It is a lot easier to use compared to standard javascript and other javascript libraries.
• It lets users develop Ajax templates with ease. Ajax enables a sleeker interface where actions can
be performed on pages without requiring the entire page to be reloaded.
• Being Light weight and a powerful chaining capabilities makes it more strong.

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 7


Disadvantages of Jquery

• While jQuery has an impressive library in terms of quantity, depending on how much
customization you require on your website. The functionality may be limited thus using raw
javascript may be inevitable in some cases.
• The JQuery javascript file is required to run the commands, while the size of this file is relatively
small (25-100KB depending on the server). It is still a strain on the client computer and maybe
your web server as well if you intend to host the script on your own web server.

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 8


Jquery

$(selector).action()
• A $ sign is to define/access jQuery
• A (selector) is to “query (or find)” HTML elements in html page
• A jQuery action() is the action to be performed on the selected element(s)

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 9


Jquery
<!DOCTYPE html>
<html> <body>
<center>
<head> <h2 style="color: green;">
<script GeeksforGeeks
src="https://ajax.googleapis.com/ajax/libs/jque </h2>
ry/3.5.1/jquery.min.js"> </center>
</script> </body>
<script>
$(document).ready(function () { </html>
$("h2").click(function () {
$(this).hover();
});
});
</script>
</head>

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 10


Jquery Syntax

• $(this).hide() ---- Used to hide the current element


• $("p").hide() ---- Used to hide all <p> elements
• $(".test").hide() --- Used to hide all elements with class=”test”.
• $("#test").hide() --- Used to hide the element with id=”test”.

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 11


Jquery Selectors

• jQuery selectors are used to select the HTML element(s) and allows you to manipulate the
HTML element(s) in a way we want. It selects the HTML elements on a variable parameter
such as their name, classes, id, types, attributes, attribute values, etc. All selectors in jQuery
are selected using a special sign i.e. dollar sign and parentheses:
• $("selector-name")

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 12


Jquery Selectors

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 13


Jquery Events
• A jQuery Event is the result of an action that can be detected by jQuery (JavaScript). When these
events are triggered, you can then use a custom function to do pretty much whatever you want
with the event. These custom functions are called Event Handlers.
• The jQuery library provides methods to handle all the DOM events and make complete event
handling considerably easier than what we have available in JavaScript.

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 14


Jquery Events

• In jQuery, most DOM events have an equivalent jQuery method.


• Commonly Used jQuery Event Methods:

Method Description

$(document).ready() allows us to execute a function when the document is fully


loaded.
Click() attaches an event handler function to an HTML element. The
function is executed when the user clicks on the HTML element.
Dbclick() attaches an event handler function to an HTML element. The
function is executed when the user double-clicks on the HTML
element
mouseenter() attaches an event handler function to an HTML element. The
function is executed when the mouse pointer enters the HTML
element:
Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 15
Jquery Events

Method Description

Mouseleave() attaches an event handler function to an HTML element. The


function is executed when the mouse pointer leaves the HTML
element
Mousedown() attaches an event handler function to an HTML element. The
function is executed, when the left, middle or right mouse button
is pressed down, while the mouse is over the HTML element
Mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse
button is released, while the mouse is over the HTML element
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
Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 16
Jquery Events
Method Description

focus() attaches an event handler function to an HTML form field.

The function is executed when the form field gets focus


Blur() attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus
On() The on() method attaches one or more event handlers for the
selected elements.

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 17


Jquery Events
Hover example:
function(){
<!DOCTYPE html>
alert("Bye! You now leave p1!");
<html> });
<head> });
<script </script>
src="https://ajax.googleapis.com/ajax/li </head>
bs/jquery/3.6.4/jquery.min.js"></script> <body>
<script>
$(document).ready(function(){ <p id="p1">This is a paragraph.</p>
$("#p1").hover(function(){
</body>
alert("You entered p1!");
</html>
},

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 18


Jquery Events
Focus-blur example: $("input").blur(function(){
<!DOCTYPE html> $(this).css("background-color", "green");
<html> });
<head> });
<script </script>
src="https://ajax.googleapis.com/ajax/libs/j </head>
query/3.6.4/jquery.min.js"></script>
<script> <body>
$(document).ready(function(){
$("input").focus(function(){ Name: <input type="text"
name="fullname"><br>
$(this).css("background-color", "yellow"); Email: <input type="text" name="email">
});
</body>
</html>

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 19


Jquery Event

On event: attaches one or more event handlers for the mouseleave: function(){
selected elements. $(this).css("background-color", "lightblue");
Example: },
<!DOCTYPE html> click: function(){
<html> $(this).css("background-color", "yellow");
<head> }
<script });
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/j });
query.min.js"></script> </script>
<script> </head>
$(document).ready(function(){ <body>
$("p").on({ <p>Click or move the mouse pointer over this paragraph.</p>
mouseenter: function(){ </body>
$(this).css("background-color", "lightgray"); </html>
},

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 20


Jquery Effects

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 21


Jquery Effects

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 22


Jquery Effects

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 23


Jquery Effects

Fadein example <p>Demonstrate fadeIn() with different


<!DOCTYPE html> parameters.</p>
<html>
<head> <button>Click to fade in
<script boxes</button><br><br>
src="https://ajax.googleapis.com/ajax/libs
/jquery/3.6.4/jquery.min.js"></script> <div id="div1"
<script> style="width:80px;height:80px;display:none;b
$(document).ready(function(){ ackground-color:red;"></div><br>
$("button").click(function(){ <div id="div2"
$("#div1").fadeIn(); style="width:80px;height:80px;display:none;b
$("#div2").fadeIn("slow"); ackground-color:green;"></div><br>
$("#div3").fadeIn(3000); <div id="div3"
}); style="width:80px;height:80px;display:none;b
}); ackground-color:blue;"></div>
</script>
</head> </body>
Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 24
<body> </html>
Jquery Effects
slidedown example
<!DOCTYPE html> #panel {
<html> padding: 50px;
<head> display: none;
<script }
src="https://ajax.googleapis.com/ajax/libs/j </style>
query/3.6.4/jquery.min.js"></script> </head>
<script> <body>
$(document).ready(function(){
$("#flip").click(function(){ <div id="flip">Click to slide down panel</div>
$("#panel").slideDown("slow"); <div id="panel">Hello world!</div>
});
}); </body>
</script> </html>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 25
}
Jquery DOM methods

• jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements
and attributes.

• 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

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 26


Jquery DOM methods
<script>
• Example: $(document).ready(function(){
<!DOCTYPE html> $("#b1").click(function(){
<html> alert($("#w3s").attr("href"));
<head> });
<script });
src="https://ajax.googleapis.com/ajax/libs/jquery/3 </script></head>
.6.4/jquery.min.js"></script> <body>
<script> <p><a href="https://www.w3schools.com"
$(document).ready(function(){ id="w3s">W3Schools.com</a></p>
$("#b2").click(function(){ <button id='b1'>Show href Value</button>
alert("Value: " + $("#test").val()); <br/>
}); <hr/>
}); <p>Name: <input type="text" id="test" value="Mickey
</script> Mouse"></p>
<button id='b2'>Show Value</button>
</body></html>
Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 27
jQuery Manipulating CSS

• 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 the style attribute

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 28


References:

• https://learn.jquery.com/
• https://www.w3schools.com/jquery/default.asp
• https://www.tutorialspoint.com/jquery/index.htm
• https://www.javatpoint.com/jquery-tutorial

Prepared by: E.Swathi, Assistant Prof.,CSE,CBIT 29

You might also like