Scribd
Upload
107 views

What Is Jquery?

jQuery is a JavaScript library that simplifies HTML document traversal, event handling, animating, and Ajax interactions. It takes common tasks in JavaScript that require many lines of code and wraps them into single line methods. jQuery also simplifies DOM manipulation and AJAX calls. To use jQuery, include the jQuery library file in an HTML document with a script tag and then select and interact with elements using jQuery methods and selectors.

Uploaded by

Rajesh Vhadlure
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
107 views

What Is Jquery?

jQuery is a JavaScript library that simplifies HTML document traversal, event handling, animating, and Ajax interactions. It takes common tasks in JavaScript that require many lines of code and wraps them into single line methods. jQuery also simplifies DOM manipulation and AJAX calls. To use jQuery, include the jQuery library file in an HTML document with a script tag and then select and interact with elements using jQuery methods and selectors.

Uploaded by

Rajesh Vhadlure
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

What is jQuery?

 jQuery is a fast and concise JavaScript Library that simplifies HTML document
traversing, event handling, animating, and Ajax interactions for rapid web
development.
 jQuery is a library of JavaScript functions.
 It takes a lot of common task that require many lines of JavaScript code to
accomplish, and wraps them into methods that can call with a single line of code.
 It simplifies complicated things from JavaScript, AJAX calls and DOM
manipulation.

What is the difference between JavaScript and jQuery?


JavaScript jQuery
JavaScript is a language. It is the most jQuery is a framework. It is a fast and
popular scripting language on internet which concise JavaScript Library that
works on all major browser. simplifies HTML document
For use JavaScript, you need to write own For use jQuery, you need not write
script which may take long time. much scripting which already exists in
libraries.
JavaScript is the combination of ECMA jQuery has DOM (Document Object
script and DOM element. Module)
In JavaScript it cannot possible to use jQuery allows easily to use animation.
animation.
JavaScript was designed to add interactivity jQuery implements high level
with HTML pages. interface to do AJAX Requests.
Example : Example :
JavaScript ID selector: jQuery ID selector:
var el = document.querySelector(“#hello”); var el = $(“#hello”)
JavaScript class selector: jQuery ID selector:
var el = document.querySelector(“.test”); var el = $(“.test”)

jQuery Features
Here are some of the things you can do with jQuery:
 jQuery makes JavaScript programming faster and more efficient
 jQuery is open source and has a large user community, meaning it is consistently
supported and added-on to.
 Select HTML elements in various ways, easing access to the elements to be
enhanced.
 Style the HTML elements dynamically, by manipulating their CSS properties or
classes.
 Manipulate the DOM (Document Object Model) of your page
 Animate the DOM elements, e.g. fading in / out, sliding, change color, change
size etc.
 Respond to events like mouse-over, mouse-out, change etc.
 AJAX enable your web pages using jQuery's smart AJAX features.
 Use the many jQuery plugins (incl. jQuery UI), which contains all kinds of smart
widgets.
 Create advanced web application user interfaces, which resemble desktop user
interfaces.

How to install/add jQuery?

1. Downloading jQuery
To use jQuery, you need to download the jQuery library (explained below), and
include it on the pages you wish to use it.
The jQuery library is a single JavaScript file, and you reference to it using the HTML
<script> tag:
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

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

jQuery Syntax:-
The jQuery syntax is made for selecting HTML elements and perform some action on
the element(s).
Syntax : $(selector).action()
 $ sign to define/access jQuery
 (selector) to "query (or find)" HTML elements
 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


The document ready event signals that the DOM of the page is now ready, so you can
manipulate it without worrying that parts of the DOM has not yet been created. The
document ready event fires before all images etc. are loaded, but after the whole
DOM itself is ready.
$(document).ready(function () {
$('#hello').text('Hello, World!');
});
You call jQuery's $ function, passing to it the document object. The $ function
returns an enhanced version of the document object. This enhanced object has
a ready() function you can call, to which you pass a JavaScript function. Once the
DOM is ready, the JavaScript function is executed.
Inside the function passed to the ready() method, you can execute all the jQuery and
JavaScript code you need
Example :-
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready(function () {
$('#hello').text('Hello, World!');
});
</script>
</head>
<body>
<p id="hello"></p>
</body>
</html>
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).
With jQuery selectors you can find elements based on their 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 type of selectors in jQuery, start with the dollar sign and parentheses: $().

1. The element Selector


The jQuery element selector selects elements based on their tag names.
You can select all elements on a page like this: $("p") Example When a user clicks on
a button, all elements will be hidden:
Example:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
2. The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific
element.
An id should be unique within a page, so you should use the #id selector when you
want to find a single, unique element. To find an element with a specific id, write a
hash character, followed by the id of the element: $("#test")
Example:
When a user clicks on a button, the element with id="test" will be hidden: $
(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
3. 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")
Example:
When a user clicks on a button, the elements with class="test" will be hidden:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

More Examples of jQuery Selectors Syntax Description


$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all 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 element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all elements with a target attribute value equal to
"_blank"
$("a[target!='_blank']") Selects all elements with a target attribute value NOT equal
to "_blank"
$(":button") Selects all elements and elements and <input> elements of
type="button"
$("tr:even") Selects all even elements
$("tr:odd") Selects all odd elements
jQuery Event Methods
JQuery makes it easy to respond to events in your HTML page. For instance,
executing some JavaScript code when the mouse enters (is above) a certain HTML
element, when the mouse leaves, when the mouse button is clicked etc.
The list of JQuery functions for attaching event handlers for the corresponding
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
mouseover
mousemove
mouseup

click()
The click() function attaches an event handler function to an HTML element, which
is executed when the user clicks the HTML element.
Example:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("p").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<h2>jQuery click event example</h2>
<p>This paragraph will be hidden when you click on it.</p>
</body>
</html>

dblclick()
The dblclick() function works just like the click() function, except it reacts to double
clicks instead of single clicks.

mouseenter()
The mouseenter() function attaches an event handler function to an HTML element,
which is executed when the mouse pointer enters the HTML elements area on the
page.
Example:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("#para").mouseenter(function () {
$(this).slideUp();
});
});
</script>
</head>
<body>
<h2>jQuery mouseenter event example</h2>
<p id="para"> This paragraph will be hidden with a slideup effect when mouse pointer
enters on this paragraph. </p>
</body>
</html>

mouseleave()
The mouseleave() function attaches an event handler function to an HTML element,
which is executed when the mouse pointer leaves the HTML elements. It is thus kind
of opposite in function to the mouseenter()
Example:
<script>
$(document).ready(function () {
$("#para").mouseenter(function () {
$(this).slideUp();
});
});
</script>

hover()
The hover() function is executed when the mouse enters the HTML element, and one
that is executed when the mouse leaves the HTML element.
Example:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
p{
padding: 20px;
font: 20px sans-serif;
background: #f2f2f2;
}
p.highlight {
background: yellow;
}
</style>
<script>
$(document).ready(function () {
$("p").hover(function () {
$(this).addClass("highlight");
}, function () {
$(this).removeClass("highlight");
});
});
</script>
</head>
<body>
<p>Place mouse pointer on me.</p>
<p>Place mouse pointer on me.</p>
</body>
</html>

keydown()
The keydown() function attaches an event handler to a form field, which is executed
when a key is pressed down, when the form field has focus. 

Example:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("input").keydown(function () {
$("input").css("background-color", "green");
});
});
</script>
</head>
<body>
<h2>jQuery keydown event example</h2>
Write anything here: <input type="text">
<p>The background color of input text field will change to green, when You press a key
inside the input field.</p>
</body>
</html>

keyup()
The keyup() function attaches an event handler to a form field, which is executed
when a key is released, when the form field has focus. In other words, it works
opposite of keydown().

keypress()
The keypress() function attaches an event handler to a form field, which is executed
when a key is pressed (pressed down and released), when the form field has focus.

change()
The jQuery change() method attach an event handler function to the  <input>,
<textarea> and <select> elements that is executed when its value changes. 

Example:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("textarea").change(function () {
alert("The text in textarea has been changed.");
});
});
</script>
</head>
<body>
<h2>jQuery change event example</h2>
<textarea type="text"></textarea>
<p> Write something in the textarea and then click outside of the textarea box. You will
see an alert message that the value of the textarea has been changed.</p>
</body>
</html>

focus()
The focus() function attaches an event handler function to a form field, which is
executed when the form field gets focus.
Example:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("input").focus(function () {
$(this).css("background-color", "#444");
});
});
</script>
</head>
<body>
<h2>jQuery focus event example</h2>
Your Name: <input type="text" name="name"> <br />
Your Age: <input type="text" name="age">
</body>
</html>

blur()
The blur() function attaches an event handler function to a form field, which is
executed when the form field loses focus. In other words, the opposite of
the focus() function.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("input").blur(function () {
$(this).css("background-color", "#FF0000");
});
});
</script>
</head>
<body>
<h2>jQuery focus event example</h2>
Your Name: <input type="text" name="name"> <br />
Your Age: <input type="text" name="age">
</body>
</html>

jQuery Effects
JQuery enables you to apply certain standard effects to HTML elements in your page.
Each effect is carried out by calling a special effect function in JQuery.
The most common of these effect functions are:
jQuery show(), hide() and toggle()
You can hide and show HTML elements with the hide() and show().
The JQuery toggle() function toggles the visibility state of an HTML element. In
other words, if the element is hidden, it will be shown. If it is shown, it will be
hidden. Again, you can set the speed of the toggling via a parameter.
Example:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide();
});
$("#show").click(function () {
$("p").show();
});
});
</script>
</head>
<body>
<h2>jQuery show and hide example</h2>
<p>This is example of hide and show.</p>
<button id="hide">hide</button>
<button id="show">show</button>
</body>
</html>
You can pass a speed to the show() and hide() method which tells JQuery how fast to
show the element.
Example:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
p{
padding: 15px;
background: #F0E68C;
}
</style>
<script>
$(document).ready(function () {
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function () {
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(50);
$("p.very-slow").hide(2000);
});

// Show hidden paragraphs with different speeds


$(".show-btn").click(function () {
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(50);
$("p.very-slow").show(2000);
});
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function () {
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>
</head>
<body>
<button type="button" class="hide-btn">Hide Paragraphs</button>
<button type="button" class="show-btn">Show Paragraphs</button>
<button type="button" class="toggle-btn">Toggle Paragraphs</button>
<p class="very-fast">This paragraph will show/hide/toggle with very fast speed.</p>
<p class="normal">This paragraph will show/hide/toggle with default speed.</p>
<p class="fast">This paragraph will show/hide/toggle with fast speed.</p>
<p class="slow">This paragraph will show/hide/toggle with slow speed.</p>
<p class="very-slow">This paragraph will show/hide/toggle with very slow speed.</p>
</body>
</html>

jQuery fadeIn(), fadeOut() and fadeToggle()


The fadeIn() function fades in a hidden HTML element.
The fadeOut() function fades out a visible HTML element.
The fadeToggle() function shows an HTML element if it is hidden, or hides it if
visible. It does so by fading the HTML element in and out. 
You can set the speed as a parameter to fadeIn(), fadeOut() and fadeToogle()
function. 
Example:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
p{
padding: 15px;
background: #DDA0DD;
}
</style>
<script>
$(document).ready(function () {
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function () {
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function () {
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function () {
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>
</head>
<body>
<button type="button" class="out-btn">Fade Out Paragraphs</button>
<button type="button" class="in-btn">Fade In Paragraphs</button>
<button type="button" class="toggle-btn">Fade Toggle Paragraphs</button>
<p class="very-fast">This paragraph will fade in/out/toggle with very fast speed.</p>
<p class="normal">This paragraph will fade in/out/toggle with default speed.</p>
<p class="fast">This paragraph will fade in/out/toggle with fast speed.</p>
<p class="slow">This paragraph will fade in/out/toggle with slow speed.</p>
<p class="very-slow">This paragraph will fade in/out/toggle with very slow speed.</p>
</body>
</html>

fadeTo()
The fadeTo() function enables you to fade an HTML element partially in or out,
making it transparent. You pass parameter between 0 and 1 which tells how much to
fade the element. 0 is fully transparent (hidden), and 1 is fully opaque (shown). You
can set the speed as a parameter to the function. 
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").fadeTo("slow", 0.25);
$("h2").fadeTo("slow", 0.10);
$("button").fadeTo("fast", 0.80);
});
});
</script>
</head>
<body>
<h2>jQuery fadeTo effect example</h2>
<p>We have adjusted the opacity of different html elements on this page in the script
part,
lets see how they look after the button click event.</p>
<button>FadeTo</button>
</body>
</html>

jQuery slideUp(), slideDown() and slideToggle()  Methods


The jQuery slideUp() and slideDown() methods is used to hide or show the HTML
elements by gradually decreasing or increasing their height (i.e. by sliding them up or
down). you can optionally specify the duration or speed parameter for
the slideUp() and slideDown() methods.
The slideToggle() function shows an HTML element if it is hidden, or hides it if
visible. It does so by sliding the HTML element up and down.
Example:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
p{
padding: 15px;
background: #B0C4DE;
}
</style>
<script>
$(document).ready(function () {
// Sliding up displayed paragraphs with different speeds
$(".up-btn").click(function () {
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});

// Sliding down hidden paragraphs with different speeds


$(".down-btn").click(function () {
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});

// Slide Toggles paragraphs with different speeds


$(".toggle-btn").click(function () {
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>
</head>
<body>
<button type="button" class="up-btn">Slide Up Paragraphs</button>
<button type="button" class="down-btn">Slide Down Paragraphs</button>
<button type="button" class="toggle-btn">Fade Toggle Paragraphs</button>
<p class="very-fast">This paragraph will fade in/out/toggle with very fast speed.</p>
<p class="normal">This paragraph will fade in/out/toggle with default speed.</p>
<p class="fast">This paragraph will fade in/out/toggle with fast speed.</p>
<p class="slow">This paragraph will fade in/out/toggle with slow speed.</p>
<p class="very-slow">This paragraph will fade in/out/toggle with very slow speed.</p>
</body>
</html>

Assignment No 2 - jQuery
1. Write a program to demonstrate jQuery ID selector with Click event.
2. Write a program to demonstrate jQuery class selector with Click event.
3. Enable or Disable Button based on condition using jQuery
https://www.aspsnippets.com/Articles/Enable-or-Disable-Button-based-on-condi
tion-using-jQuery.aspx
4. Clear TextBox on Focus using jQuery
https://www.aspsnippets.com/Articles/Clear-TextBox-on-Focus-using-jQuery.aspx

5. Set the background color red of the following elements after button click using
jQuery.

6. Toggle (Show Hide) DIV on Button Click using JavaScript and jQuery.
https://www.aspsnippets.com/Articles/Toggle-Show-Hide-DIV-on-Button-Click-using-J
avaScript-and-jQuery.aspx
7. PAN Card Number validation using jQuery and Regular Expression.
https://www.aspsnippets.com/Articles/PAN-Card-Number-validation-using-jQuery-and-
Regular-Expression.aspx
8. Create a paragraph element with some text and append it to the end of the
document body using jQuery.
https://www.aspsnippets.com/Articles/Toggle-Show-Hide-DIV-on-Button-Click-using-J
avaScript-and-jQuery.aspx
9. Using jQuery add the class " w3r_font_color " to the last paragraph element.
<p>PHP</p>
<p>Java</p>
<p>Python</p>
p{
margin: 8px;
font-size: 16px;
}
.w3r_font_color{
color: red;
}
.w3r_background {
background: yellow;
}
10. Scroll to the top of the page with jQuery.
https://www.w3resource.com/jquery-exercises/part1/jquery-practical-exercise-2.php
11. Create a paragraph element with some text and add the class to change text color
red after click on button using jquery.
12. jQuery Form Validation Example in Asp.net
https://www.aspsnippets.com/Articles/jQuery-Form-Validation-Example-in-ASP
Net.aspx
https://www.c-sharpcorner.com/UploadFile/ee01e6/jquery-validation-with-Asp-
Net-web-form/
13. Show Calendar Icon (Image) next to TextBox using jQuery DatePicker
(Calendar)
https://www.aspsnippets.com/Articles/Show-Calendar-Icon-Image-next-to-Text
Box-using-jQuery-DatePicker-Calendar.aspx
14. Set dd-MMM-yyyy Date format in jQuery DatePicker
https://www.aspsnippets.com/Articles/Set-dd-MMM-yyyy-Date-format-in-jQuer
y-DatePicker.aspx

You might also like