Top 51 jQuery Examples FREE PDF Download

by

In this jQuery tutorial, I am going to explain to you on basic understanding of jQuery. What are the editors you can use to write jQuery code? And finally, I will show you 51 jQuery examples that will be helpful for web developers. You can also download a PDF version of jQuery examples for FREE.

Table of Contents

Basic Understanding of jQuery

JQuery is cross-platform and feature-rich JavaScript library that supports different browsers. It is fast and where you can write less and do more.

JQuery takes a lot of common task that JavaScript takes many lines of codes to execute. JQuery improves the performance of an application.

JQuery is the most popular frameworks out of lots of JavaScript frameworks.

There are two ways to add jQuery to your web page:

  • Download the jQuery library from jQuery.com
  • Include jQuery from a CDN

All the references should be with HTML <script> tag and inside the <head> tag.

Without downloading and hosting jQuery in our environment, you can use various content delivery networks known as CDN.

Google CDN:

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

Microsoft CDN:

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>

jQuery CDN:

<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

Read Display SharePoint list data in jQuery data table using Rest API

Editors for jQuery

Before starting with it’s necessary to know what rich text editors and where you can write your jQuery code. Below are some of the common editors, you can use to write jQuery code.

  • Notepad
  • Notepad++
  • Visual Studio
  • Visual Studio Code
  • CKEditor
  • TinyMCE
  • Summernote
  • Trumbowyg
  • Simditor

How to start with jQuery

As discussed above you can select any editors to write the code. You can put any number of scripts inside an HTML document, or else you can write all your jQuery code in an external file, save it with .js file extension and call that file inside our HTML Code.

It is recommended not to write all jQuery code inside the HTML file as the file. In a HTML file jQuery code are written inside <script> and </script> tags.

Here we will start with a small example of how to show an alert message using a button. Using the above both ways:

Read How to include jQuery in SharePoint

Putting script inside HTML document

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(“#btnDemo").click(function(){
alert(“Welcome to Top 51 jQuery Examples")
});
});
</script>
</head>

<body>
<input type = “button" id= “btnDemo" value="Click to Download"/>
</body>
</html>
jquery examples
jquery examples

Using two separate files and calling jQuery in a HTML file

The below code is stored in an external .js file named as (51jQueryExamples.js)

$(document).ready(function(){
$("#btnDemo").click(function(){
alert("Welcome to Top 51 jQuery Examples")
});
});

And then in the HTML file we can call the above js using reference as:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script scr="51jQueryExamples.js">
</script>
</head>
<body>
<input type = "button" id= "btnDemo" value="Click to Download"/>
</body>
</html>

Download FREE PDF on 51 jQuery Examples

51 Top jQuery Examples

Below you will see Top 51 examples in jQuery.

Example-1: Retrieve textbox value using jQuery and Display in alert message

We can retrieve the textbox values using JQuery. It is otherwise considered as part of DOM (Document Object Model). Here we will retrieve the textbox value and display it as an alert box when button is clicked using jQuery.

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

function textBoxValue(){
var textvalue = $("#txtDemo").val();
alert(textvalue);
}
</script>
</head>
<body>
<input type = "text" id= "txtDemo"/>
<input type = "button" id= "btnDemo" value="Display"/>
</body>
</html>

Read How to handle radio button checked and unchecked events using JavaScript and jQuery

Example-2: Prop() method in jQuery

The prop() method in jQuery sets or returns properties and values of the selected elements. prop() is CSS property of the matched element. Similarly, removeProp() to remove property from the elements. In this example, we will see how to use prop() and removeProp() simultaneously.

<!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(){
var $x = $("div");
$x.prop("color", "#ffccff");
$x.append("The color property has the following value: " + $x.prop("color"));
$x.removeProp("color");
$x.append("<br>Now the color property has the following value: " + $x.prop("color"));
});
});
</script>
</head>
<body>
<button>Add and remove a property</button><br><br>
<div></div>
</body>
</html>

Example-3: How to retrieve checkbox value using jQuery

Check box value can be retrieved using jQuery. You can retrieve multiple check box as well as single check box values.

Retrieving Multiple check box value using jQuery

Multiple check box values can be retrieved as comma-separated string using jQuery. Below is an example to retrieve multiple checkbox values using jQuery.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#btnMltChk").click(function(){
multipleCheckboxValue();
});
});

function multipleCheckboxValue()
{
var favorite = [];
$.each($("input[name=’tutorial’]:checked"), function(){
favorite.push($(this).val());
});
alert("My favourite tutorials are: " + favorite);
}
</script>
</head>
<body>
<h3>Select your favorite tutorials:</h3>
<label><input type="checkbox" value="javaScript" name="tutorial"> javaScript</label>
<label><input type="checkbox" value="HTML" name="tutorial">HTML</label>
<label><input type="checkbox" value="SharePoint" name="tutorial"> SharePoint</label>
<label><input type="checkbox" value="jQuery" name="tutorial"> jQuery</label>
<label><input type="checkbox" value="AngularJS" name="tutorial"> AngularJS</label>
<label><input type="checkbox" value="Bootsstrap" name="tutorial"> Bootsstrap</label>
<br>
<button type="button" id= "btnMltChk">Get Values</button>
</body>
</html>

Below is the output for retrieving multiple checkbox values:

jQuery example get checkbox value
jQuery example get checkbox value

It returns the output like below:

jQuery example checkbox value
jQuery example checkbox value

Retrieve Single check box value using jQuery

Here we will see how to retrieve a single check box value using jQuery.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#btnMltChk").click(function(){
CheckboxValue();
});
});

function CheckboxValue()
{
var favorite = $("input[name=’tutorial’]:checked").val();
$(‘input[name="tutorial"]’).on(‘change’, function() {
$(this).siblings(‘input[name="tutorial"]’).not(this).prop(‘checked’, false);
});
alert("My favourite tutorials is: " + favorite);
}
</script>
</head>
<body>
<div>
<input type="checkbox"  name="tutorial" value="JavaScript"> JavaScript </input>
<input type="checkbox"  name="tutorial" value="C++">C++</input>
<input type="checkbox"  name="tutorial" value="SharePoint">SharePoint </input>
</div>
<button type="button" id= "btnMltChk">Get Values</button>
</body>
</html>

Below is the output for retrieving single checkbox value:

Retrieve checkbox checked value using jQuery
Retrieve checkbox checked value using jQuery

It returns:

jQuery example retrieve checkbox value
jQuery example retrieve checkbox value

Read Dropdown selected change event in jQuery Example

See also  How to use quick chart web part in SharePoint Online

Example-4:  append() method in jQuery

The append method in jQuery inserts specific content at the end of the selected elements. The append() and appendTo() methods in jQuery are used to perform the same task. Here we will see how to append a paragraph and an ordered list in below 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(){
$("#btn1").click(function(){
$("#ptext").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("#litem").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p id="ptext">This is a paragraph.</p>
<ol id="litem">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<button id="btn1″>Append text</button>
<button id="btn2″>Append list item</button>
</body>
</html>

Example-5: Date picker method in jQuery

datepicker() is attached to a standard form input field below is a normal date picker using jQuery. You can use CSS line added to make it more colorful and attractive. Below is an example of a simple date picker using jQuery

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Enter Date: <input type = "text" id = "datepicker">
</body>
</html>

Example-6: Retrieving radio button values using jQuery

You can use jQuery to retrieve radio button values using :checked selector. Below example, we will retrieve the button value and display on alert message.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("input[type=’button’]").click(function(){
var radioValue = $("input[name=’tutorials’]:checked").val();
if(radioValue){
alert("Your are a – " + radioValue);
}
});
});
</script>
</head>
<body>
<h4>Please select your favourite tutorials .</h4>
<p>
<label><input type="radio" name="tutorials" value="JavaScript">JavaScript</label>
<label><input type="radio" name="tutorials" value="HTML">HTML</label>
</p>
<p><input type="button" value="Get Value"></p>
</body>
</html>

Example-7: Examples on jQuery mouseenter()

Using JQuery mouseenter() method an event occurs when mouse enters the selected area or event. Here we will take a simple paragraph and will try mouseenter()  on a paragraph in jQuery.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color", "pink");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

Example-8:  JQuery mouseleave() event

The mouseleave event is just opposite of mouseenter event in jQuery . Mouseleave event occurs when the mouse pointer leaves the selected element. Both events are often used together in jQuery.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$("p").css("background-color", "silver");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

Example-9:  JQuery hover() event

This is a custom jQuery method using two events as mouseenter and mouseleave events. when the mouse pointer hovers over the selected elements the method triggers. Basically, it is a combination of above discussed two events.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
});
</script>
</head>
<body>
<p>Hover mouse over this paragraph.</p>
</body>
</html>

Example-10: Retrieving dropdown values using jQuery

To retrieve dropdown values you can use :selected selector in jQuery. Below example, from a country dropdown we will retrieve the values and display it in an alertbox using jQuery.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select.country").change(function(){
var selectedCountry = $(".country option:selected").val();
alert("You have selected the country – " + selectedCountry);
});
});
</script>
</head>
<body>
<form>
<label>Select Country:</label>
<select class="country">
<option value="india">India</option>
<option value="Pakistan">Pakistan</option>
<option value="US">United States</option>
</select>
</form>
</body>
</html>

Read How to implement expand/collapse in HTML table rows using jQuery

Example-11: How to use Keypress() event in jQuery

Here we will discuss on Key press event on jQuery event or a function when the keypress event is triggered. Keypress event is not fired for ALT, CTRL, SHIFT, ESC, and BACKSPACE.

The below example shows use of keypress function to get the count how many times key has been pressed.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var i = 0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i += 1);
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
<p>Keypresses: <span>0</span></p>
</body>
</html>

Example-12: Accordion() method in jQuery

Accordion in jQuery helps toggle in hiding and showing a large content. It helps in showing lots of different sections of data in a small amount of space. In the below example you can see we have used Accordion function with some styling CSS links.

You can use collapsible() in jQuery method to collapse the options. You can check the below example to understand about accordion method in jQuery.

<!doctype html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
});
</script>
</head>
<body>
<div id = "accordion">
<h3>Company News</h3>
<div>
<p>
Tsinfotechnologies, which is majority owned by its employees, is the only domestic firm to be featured among the top companies in the SharePoint
</p>
</div>
<h3>Development</h3>
<div>
<p>
Development team has expertise in custom webparts, SharePoint Add-in (Apps), Workflows, SharePoint Framework (SPFx) development, Nintex.
</p>
</div>
<h3>Team</h3>
<div>
<p>
Our team, lead by two Microsoft MVPs who has enough industry experience in various sectors. We have  skilled resources whose focus is to deliver high-quality work. We help organizations to build intranet to collaborate more effectively.
</p>
</div>
</div>
</body>
</html>

Example-13: Use jQuery tabs to display multiple subjects

Tabs in jQuery helps in displaying different subjects on a single web page. Below we have taken three tabs to display on same page.

<!doctype html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>

<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#divMain" ).tabs();
});
</script>
<style>
#tabs-1{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "divMain">
<ul>
<li><a href = "#divCompany">Company News</a></li>
<li><a href = "#divDevelopment">Development</a></li>
<li><a href = "#divTeam">Team</a></li>
</ul>
<div id = "divCompany">
<p>
Tsinfotechnologies, which is majority owned by its employees, is the only domestic firm to be featured among the top companies in the SharePoint.
</p>
</div>
<div id = "divDevelopment">
<p>
Development team has expertise in custom webparts, SharePoint Add-in (Apps), Workflows,
SharePoint Framework (SPFx) development, Nintex.
</p>
</div>
<div id = "divTeam">
<p>
Our team, lead by two Microsoft MVPs who has enough industry experience in various sectors. We have skilled resources whose focus is to deliver high-quality work. We help organizations to build intranet to collaborate more effectively.
</p>
</div>
</div>
</body>
</html>

Example-14: Using jQuery Popup method to display popup on a button click

Popups are a very useful widget when tapped it comes up with some useful content. Below is a nice example that shows a popup on a button click using jQuery.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}
.popup-inner {
max-width:700px;
width:90%;
padding:40px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
}
.popup-close {
width:30px;
height:30px;
padding-top:4px;
display:inline-block;
position:absolute;
top:0px;
right:0px;
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
background:rgba(0,0,0,0.8);
font-family:Arial, Sans-Serif;
font-size:20px;
text-align:center;
line-height:100%;
color:#fff;
}
.popup-close:hover {
-webkit-transform:translate(50%, -50%) rotate(180deg);
transform:translate(50%, -50%) rotate(180deg);
background:rgba(0,0,0,1);
text-decoration:none;
}
</style>

<script>
$(function() {
$('[data-popup-open]').on('click', function() {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
});
$('[data-popup-close]').on('click', function() {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});
</script>
</head>
<body>
<a class="btn" data-popup-open="popup-1" href="#">Open Popup</a>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>TSInfo Technologies</p>
<p>TSInfo Technologies is one the top SharePoint development & outsourcing company in India. Our team, lead by two Microsoft MVPs who has enough industry experience in various sectors. We have skilled resources whose focus is to deliver high-quality work. We help organizations to build intranet to collaborate more effectively.</p>
<p><a data-popup-close="popup-1" href="#">Close</a></p>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
</body>
</html>

Example-15: tooltip() method in jQuery

Tooltips are also useful for form elements in jQuery, to show some additional information in the context of each field. Below is a simple example to illustrate how tooltip works in jQuery.

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( document ).tooltip();
} );
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
</body>
</html>

Example-16:  Dialog() method in jquery

A dialog box is a floating window with a title and content area. The jQuery Dialog window can be moved, resized, and closed using “X” icon by default.

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Tsinfotechnologies">
<p>Welcome to Tsinfotechnologies Home. The dialog window can be moved, resized and closed with the ‘x’ icon.</p>
</div>
</body>
</html>

Example-17: Using jQuery spinner to create a numeric stepper

The jQuery Spinner is a number stepper widget. It is perfect for handling all kinds of numeric input. Below example, we have taken two spinners with two sets of values one is with limit from-10 to 10 and another set of step of 100 intervals.

<!doctype html>
<html>
<head>
<title>jQuery Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type = "text/css">
#spinner-2,#spinner-3 input {width: 100px}
</style>
<script>
$(function() {
$( "#spinner1" ).spinner({
min: -10,
max: 10
});
$(‘#spinner2’).spinner({
step: 100,
min: -10000,
max: 10000
});
});
</script>
</head>
<body>
<div id = "example">
Spinner Min, Max value set:
<input type = "text" id = "spinner1" value = "0" /><br><br>
Spinner increments/decrements in step of of 100:
<input type = "text" id = "spinner2" value = "0" />
</div>
</body>
</html>

Example-18:  Creating a data table using jQuery datatable() method

jQuery Datatables work on plain HTML. Datatable plugins are useful in table listing and interacting with the table. Below we have taken a data table on employee details.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.jqueryui.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.jqueryui.min.js"></script>

<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bibhu</td>
<td>System Architect</td>
<td>Hydrabad</td>
<td>26</td>
<td>2014/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Lakshmi</td>
<td>System Engineer</td>
<td>Bangalore</td>
<td>26</td>
<td>2014/07/25</td>
<td>$470,750</td>
</tr>
<tr>
<td>Debiprasanna</td>
<td>Junior Technical Author</td>
<td>Bangalore</td>
<td>26</td>
<td>2016/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Padmini</td>
<td>Senior Javascript Developer</td>
<td>Bangalore</td>
<td>22</td>
<td>2018/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>preeti</td>
<td>Accountant</td>
<td>Bangalore</td>
<td>23</td>
<td>2018/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Bijay</td>
<td>Integration Specialist</td>
<td>Bangalore</td>
<td>31</td>
<td>2018/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Bhawana</td>
<td>Sales Assistant</td>
<td>Bangalore</td>
<td>29</td>
<td>2019/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rohan</td>
<td>Integration Specialist</td>
<td>Hydrabad</td>
<td>75</td>
<td>2017/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Rakesh</td>
<td>Integration Specialist</td>
<td>Hydrabad</td>
<td>35</td>
<td>2017/10/14</td>
<td>$327,900</td>
</tr>  <tr>
<td>Narayan</td>
<td>Integration Specialist</td>
<td>Hydrabad</td>
<td>20</td>
<td>2017/10/14</td>
<td>$327,900</td>
</tr>  <tr>
<td>Shruti</td>
<td>Integration Specialist</td>
<td>Hydrabad</td>
<td>24</td>
<td>2017/10/14</td>
<td>$327,900</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>

Read Simple HTML form design examples with code

See also  SharePoint redirect to another page

Example-19:  clone() method in jQuery

Clone() method in jQuery is used to copy selected elements, including child nodes, text, and attributes. Here in this JQuery example on clone() we will clone a paragraph element.

<!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(){
$("#cloned").clone().appendTo("body");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Clone</button>
<p id="cloned">This is cloned</p>
</body>
</html>

Example-20: hide() and show() method in jQuery

Hide and show method in jQuery helps in selecting elements to hide or show. hide() method hides the selected elements. Whereas the show() method in jQuery shows the hidden, selected elements. Below is an example to on hide and show methods in jQuery.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnhide").click(function(){
$("p").hide();
});
$("#btnshow").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="btnhide">Hide</button>
<button id="btnshow">Show</button>
</body>
</html>

Example-21: Toggle method in jQuery

Toggle method in jQuery is a combination of two methods that toggles between hide() and show() for the selected elements. This method checks the visibility for selected elements.

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#toggle").click(function(){
$(".target").toggle( );
});
});
</script>
<style>
p {background-color:silver; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on the following button:</p>
<button id = "toggle"> Toggle </button>
<div class = "target">
<p>Toggle in jQuery</p>
</div>
</body>
</html>

Read Registration form design in HTML and CSS with code

Example-22: fading method in jQuery

Fading method comes up with visibility where you can fade in or fade out an element. You can also use speed parameter to specify the duration of the effect.  jQuery has the following fade methods:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Using fadeIn() method in jQuery with speed and other parameters

The following jQuery example shows fade-in effect with different parameters:

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#divfadein").fadeIn();
$("#divfadeinslow").fadeIn("slow");
$("#divwithspeed").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button><br><br>
<div id="divfadein" style="width:80px;height:80px;display:none;background-color:pink;"></div><br>
<div id="divfadeinslow" style="width:80px;height:80px;display:none;background-color:blue;"></div><br>
<div id="divwithspeed" style="width:80px;height:80px;display:none;background-color:silver;"></div>
</body>
</html>

fadeOut() method in jQuery

The following jQuery example shows fade-out effect with different parameters:

<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(){
$("#fadeout").fadeOut();
$("#fadeoutfast").fadeOut("fast");
$("#fadeoutspeed").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button><br><br>
<div id="fadeout" style="width:80px;height:80px;background-color:pink;"></div><br>
<div id="fadeoutfast" style="width:80px;height:80px;background-color: blue;"></div><br>
<div id="fadeoutspeed" style="width:80px;height:80px;background-color:silver;"></div>
</body>
</html>

fadeToggle() method in jQuery

fadeToggle() method toggles between the fadeIn() and fadeOut() methods. The following jQuery example shows fadeToggle effect with different parameters:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#divfadeToggle").fadeToggle();
$("#divfadeToggleslow").fadeToggle("slow");
$("#divfadeTogglespeedparameter").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<div id="divfadeToggle" style="width:80px;height:80px;background-color:pink;"></div>
<br>
<div id="divfadeToggleslow" style="width:80px;height:80px;background-color:blue;"></div>
<br>
<div id="divfadeTogglespeedparameter" style="width:80px;height:80px;background-color:silver;"></div>
</body>
</html>

fadeTo() method in jQuery

fadeTo() method allows fading to a given opacity value between 0 and 1 where it according to value it fades or looks trance lucent. The following jQuery example shows fadeTo effect with different values:

<!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(){
$("#fadeto").fadeTo("slow", 0);
$("#fadetoslow").fadeTo("slow", 0.4);
$("#fadetofast").fadeTo("fast", 0.7);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeTo() with different parameters.</p>
<button>Click to fade boxes</button><br><br>
<div id="fadeto" style="width:80px;height:80px;background-color:pink;"></div><br>
<div id="fadetoslow" style="width:80px;height:80px;background-color:blue;"></div><br>
<div id="fadetofast" style="width:80px;height:80px;background-color:silver;"></div>
</body>
</html>

Read JavaScript – Difference between Var, Let, and Const Keyword

Example-23: jQuery remove() method in jQuery to remove elements

Remove method in jQuery removes the selected element. Below is the jQuery example how remove method is used:

<!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(){
$(“#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:silver;">
This is text in the div.
<p>This is a paragraph in the div.</p>
</div>
<br>
<button>Remove div</button>
</body>
</html>

Example-24: empty() method in jQuery

Whereas Empty method Removes the child elements from the selected element. Below is the jQuery example how empty method is used:

<!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(){
$(“#div1").empty();
});
});

</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:silver;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
</div>
<br>
<button>Empty the div element</button>
</body>
</html>

Example-25: wrap() method in jQuery

jQuery wrap() method is used to wrap specified HTML elements around each selected element. The wrap () function accepts any string or object. In the below example, we will wrap two paragraphs with a div tag 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(){
$("p").wrap("<div></div>");
});
});
</script>
<style>
div{background-color: silver;}
</style>
</head>
<body>
<p>welcome to 51 examples on jQuery</p>
<p>Tsinfotechnologies.</p>
<button>Wrap a div element around each p element</button>
</body>
</html>

Read How to call a javascript function when a checkbox is checked unchecked

Example-26: jQuery traversing with filter() method

The jQuery filter() provides traversing methods to filter out matched. Elements that do not match the criteria are removed from the selection, and those that match are returned.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".filter_class").css("background-color", "pink");
});
</script>
</head>
<body>
<p>Welcome To.</p>
<p class="filter_class">51 Examples on jQuery</p>
<p >We love coding.</p>
<p class="filter">Ts infotechnologies.</p>
</body>
</html>

Example-27: Prepond() method in jQuery

The prepend() method in jQuery inserts specified content at the beginning of the selected elements. Below example you will see prepend to a paragraph:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnClk").click(function(){
$("p").prepend("<b>Prepended text</b>. ");
});
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<button id="btnClk">Prepend text</button>
</body>
</html>

Example-28: detach() method in jQuery

The detach() method in jQuery is used to remove the selected elements. detach() method saves a copy of the removed elements to reinsert them whenever they are needed later. Here we will take an example to detach all paragraph elements:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").detach();
});
});
</script>
</head>
<body>
<p>Welcome to this tutorial</p>
<p>51 examples on jQuery</p>
<button>Click here to detach.</button>
</body>
</html>

Example-29: Replace method in jQuery

replaceWith() method is used to replace selected elements with new content. The following jQuery example shows use of replaceWith() on a <p>

<!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(){
$("p").replaceWith("Hello world!");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Replace the first p element with new text</button>
</body>
</html>

Example-30: Map() method in jQuery

map() method creates a new array with the results of calling a function for every array element, It translates all items in an array or array-like object to another array of items. The translated value, which will be mapped to the resulting array. It does not change the original array.

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
return alert(a – 45, index);
});
</script>
</head>
</html>

Example-31: jQuery delay method()

Delay method sets method a timer to delay the execution of the next item in the queue. The following jQuery example illustrates use of delay method on different elements.

<!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(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
$("#div3").delay(800).fadeIn();
});
});
</script>
</head>
<body>
<p>examples</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1″ style="width:90px;height:90px;display:none;background-color:pink;"><p>welcome  <p/></div><br>
<div id="div2″ style="width:90px;height:90px;display:none;background-color:blue;"><p>to 51 examples on jQuery <p/></div><br>
<div id="div3″ style="width:90px;height:90px;display:none;background-color:silver;"><p>From Tsinfotechnologies <p/></div><br>
</body>
</html>

Example-32: trim() method in jQuery

Trim function removes all spaces, newlines, and tabs from the beginning and end of the specified string. However, the whitespaces occur in the middle of the string are preserved.

<!DOCTYPE html>
<html>
<head>
<title>Remove White Space from Strings</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
var myStr = $(".original").text();
var trimStr = $.trim(myStr);
$(".trimmed").html(trimStr);
});
</script>
</head>
<body>
<h3>Original String</h3>
<pre class="original">         Paragraph of text with       multiple    white   spaces before and after.
</pre>
<br>
<h3>Trimmed String</h3>
<pre class="trimmed"></pre>
</body>
</html>

Example-33: on jQuery css  addClass()

This jQuery method is used to add one or more CSS classes to the selected elements. In the below example, you will see how it works on a paragraph and a div element.

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

$(document).ready(function(){
$("#addCSSclass").click(function(){
$("p").addClass("pink");
$("div").addClass("important");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: large;
}

.pink {
color: pink;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<div>This is some important text!</div><br>
<button id="addCSSclass">Add classes</button>
</body>
</html>

Example-34: jQuery css  removeClass()

removeClass method in jQuery removes one or more classes from the selected elements. The below example explains how to remove multiple style classes:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#removeCSSclass").click(function(){
$("p").removeClass("blue important");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: large;
}

.blue {
color: blue;
}
</style
</head>
<body>
<p class="blue">This is a paragraph.</p>
<p class="important">This is another paragraph.</p>
<button id="removeCSSclass">Remove class</button>
</body>
</html>

Example-35: jQuery css  toggleClass()

toggleClass method in jQuery toggles between adding/removing classes from the selected elements. The below example shows how to use the toggle class method on a paragraph tag:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleCSSClass").click(function(){
$("p").toggleClass("blue important");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: large;
}

.blue {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="toggleCSSClass">Toggle class</button>
</body>
</html>

Example-36: jQuery css() method

jQuery CSS() method returns or sets one or more style properties for selected elements. While returning CSS properties you can use alert to return the values of the styling. Below example you will see how to set a uniform background color on paragraph tags:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#CSSClass").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<p>This is a heading</p>
<p style="background-color:pink">This is a paragraph.</p>
<p style="background-color:blue">This is a paragraph.</p>
<p style="background-color:silver">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button id="CSSClass">Set background</button>
</body>
</html>

Example-37: jQuery dimensions elements

Dimensions elements in jQuery are used to retrieve various dimensions and properties. There are various methods come under Dimensions:

  • width() & height()
  • innerWidth() & innerHeight()
  • outerWidth() & outerHeight()
See also  SharePoint redirect to another page

jQuery width() and height() method:

These two methods return the width and height of an element excluding padding border and margin. Here we will retrieve the dimensions of the window (the browser viewport) as width and height

<!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(){
var txt = "";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
$("#widthAndheight").text(txt);
});
});
</script>
</head>
<body>
<p id="widthAndheight"></p>
<button>Display dimensions of window</button>
</body>
</html>

jQuery innerWidth() & innerHeight() method:

These two methods return the width and height of an element with padding. Here we will retrieve the inner width and height of a div element which includes padding:

$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height() + "</br>";
txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height of div: " + $("#div1").innerHeight();
$("#div1").append(txt);
});
});
</script>
</head>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: pink;
}
</style>
<body>
<div id="div1″></div>
<br>
<button>Display dimensions of div</button>
</body>
</html>

jQuery outerWidth() & outerHeight() method:

The outerWidth and outerHeight method returns width and height of an element includes padding, border, and margin. Below example retrieves the div dimensions using outerWidth and innerWidth 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(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height() + "</br>";
txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height of div: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
});
</script>

<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 3px solid blue;
background-color: pink;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
</body>
</html>

Example-38: autocomplete() in jQuery

Autocomplete displays a list of suggestions and options when the user is typing in the input fields of the elements. Here below example, you will see the use of jQuery autocomplete method for choosing country:

<!doctype html>
<html>
<head>
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var countries  =  ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L’Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
$( "#autompleteDemo" ).autocomplete({
source: countries
});
});
</script>
</head>
<body>
<div>
<p>Start typing your country name</p>
Countries:<input id = "autompleteDemo">
</div>
</body>
</html>

Example-39: Scroll() method in jQuery

Scroll() method in jQuery helps in executes a function when the scroll event occurs or triggers the event. Syntax for using scroll() method is

$("selector").scroll();

Here we will take a simple example to count the scroll trigger:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
x = 0;
$(document).ready(function(){
$("div").scroll(function(){
$("#scrollCount").text( x+= 1);
});
});

</script>
</head>
<body>
<p>Try the scrollbar in the div</p>
<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">TSInfo Technologies is one the top SharePoint development & outsourcing company in India. Our team, lead by two Microsoft MVPs who has enough industry experience in various sectors. We have skilled resources whose focus is to deliver high-quality work. We help organizations to build intranet to collaborate more effectively.
</div>
<p>Scrolled <span id="scrollCount">0</span> times.</p>
</body>
</html>

Example-40: ScrollTop() animations in jQuery

jQuery scrollTop is commonly used as an animation effect where the scroll automatically comes up after the event is triggered attached to it.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$(‘html, body’).animate({
scrollTop: $("#div1").offset().top}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Scroll down to click on button
</div>
<button id="click">Click me</button>
</html>

Example-41: settimeout() method in jQuery

The setTimeout() method in jQuery calls a function after a specified delay in number of milliseconds. For example, you wished to display a popup after a visitor clicks on a button and it displays a popup or a text.

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script>
$(document).ready(function() {
$("#btnShow").click(function () {
$(‘#theDiv’).show(1000, function () {
setTimeout(function () {
$(‘#theDiv’).html(function () {
setTimeout(function () {
$(‘#theDiv’).html(‘Here is some replacement text’);
}, 0);
});
}, 2500);
});
});
});
</script>
</head>
<body>
setTimeout Method .<br><br>
<div id="theDiv" style="background-color:pink;display:none;width:30%;margin:0 auto;">
This is an example on setTimeout.
</div><br>
<br>
<input type="button" id="btnShow" value="Show DIV">
</body>
</html>

Example-42:  animation() method in jQuery

The jQuery animate() method is used to create custom animations with CSS properties. Speed parameters add more reliability to animate method. Here we will take a small example to display hello message with a div moving towards center from static left position.

<!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(){
var div = $("div");
div.animate({left: ‘200px’}, "slow");
div.animate({fontSize: ‘3em’}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

Example-43: change() method in jQuery

The jQuery change() method triggers the change event. The change event occurs when the value of an element has been changed or when the change method is attached to a function to run.

<!DOCTYPE html>
<html>
<head>
<style>
div {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<select id="ddl-1">
<option selected="selected">Java Script</option>
<option>HTML</option>
<option>BOOTSTRAP</option>
<option>jQuery</option>
</select>
<div id="div-1"></div>
<script>
$( "select" ).change(function () {
document.getElementById("div-1").innerHTML="You selected: "+document.getElementById("ddl-1").value;
});
</script>
</body>
</html>

Example-44: setinterval and  clearInterval() method in jQuery

The jQuery setInterval() method calls a function or an expression at specified intervals. clearInterval() method is used to stop the intervals. Here we will see a simple example on creating a stop watch timer.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
var timer = null,
interval = 1000,
value = 0;
$("#start").click(function() {
if (timer !== null) return;
timer = setInterval(function () {
$("#input").val(++value);
}, interval);
});
$("#stop").click(function() {
clearInterval(timer);
timer = null
});
});
</script>
</head>
<body><input type="number" id="input" />
<input id="stop" type="button" value="stop"/>
<input id="start" type="button" value="start"/>
</body>
</html>

Example-45: positions()on jQuery

The jQuery position () method helps to retrieve the current position of an element. This method returns the object with top and left position in pixels.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").position();
alert("Top position: " + x.top + " Left position: " + x.left);
});
});
</script>
</head>
<body>
<p>Retrive position</p>
<button>Click to return p element position</button>
</body>
</html>

Example-46: How to refresh a page using jQuery?

location.reload() method is used to refresh or reload the page. This method accepts Boolean parameters as true or false. If parameter true is specified it reloads the page from server. If false or if not specified the browser may reload the page from cache.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8″>
<title>Reload the Page Using jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
location.reload(true);
});
});
</script>
</head>
<body>
<button type="button">Reload page</button>
</body>
</html>

Example-47: How to redirect or open a page to another page selecting a value from the dropdown list and button click?

window.open() method is used to opens a new browser window page in jQuery. Below is code can be used to redirect to another page or website when a user selected a value from a dropdown list.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type=’text/javascript’>
$(document).ready(function() {
$("#open_new_tab").click(function(){
var go_to_url = $("#websites").find(":selected").val();
window.open(go_to_url, ‘_blank’);
});
});
</script>
</head>
<body>
<div style="margin:200px 200px;">
<select id="websites" style="width:200px;">
<option value="https://www.tsinfotechnologies.com/">TSinfo Technologies</option>
<option value="https://www.enjoysharepoint.com">EnjoySharePoint</option>
<option value="http://spguides.com">SharePointSky</option></select>
<input type="button" value="Open In New Tab" id="open_new_tab" />
</div>
</body>
</html>

Example-48: How to open or redirect to a page selecting a value from the dropdown list?

In this we will example using the below code you can redirect to a page in jQuery. Here when you will select a value from dropdown and then click on a button.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#open_same_window").click(function(){
var go_to_url = $("#websites").find(":selected").val();
document.location.href = go_to_url;
});
});
</script>
</head>
<body>
<div style="margin:200px 200px;">
<select id="websites" style="width:200px;">
<option value="https://www.tsinfotechnologies.com/">TSinfo Technologies</option>
<option value="https://www.enjoysharepoint.com">EnjoySharePoint</option>
<option value="http://spguides.com">SPGuides</option></select>
<input type="button" value="Open In Same Window" id="open_same_window" />
</div>
</body>
</html>

Example-49: How to redirect to homepage in jQuery?

In this example, we will see how to redirect to home page of a page using a button in jQuery.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#open_home_page").click(function(){
document.location.href = "/";
});
});
</script>
</head>
<body>
<div>
<input type="button" value="Go to home Page" id="open_home_page" />
</div>
</body>
</html>

Example-50: How to jQuery redirect to other webpage on page load?

Using jQuery window.location.href object to redirect from one web page to another page immediately after your website is opened. Can check the below code which will redirect to google search page once website is opened.

<!DOCTYPE html>
<html>
<head>
<p>Redirecting to another URL ..</p>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
window.location.href = "https://www.google.com";
</script>
</head>
</html>

Example-51: Retrieve Client IP address using jQuery

With the help of jQuery we can create server-side languages to find public IP address request. Here we will retrieve ipify service with help of simple Ajax call.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$.getJSON("https://api.ipify.org?format=json", function (data) {
$("#retriveIP").html("IP: " + data.ip + "");
})
</script>
</head>
<body>
<p>Client’s information:</p>
<p id="retriveIP"></p>
</body>
</html>

Conclusion:

This PDF contains Top 51 jQuery examples which you should know as a web developer.

    • >