Scribd
Upload
3 views56 pages

jQuery Input Value Retrieval Examples

The document provides multiple examples of using jQuery for various tasks such as retrieving values from textboxes, checkboxes, radio buttons, and dropdowns, as well as manipulating elements with methods like append() and prop(). It also covers events like mouseenter, mouseleave, and keypress, along with creating UI components like accordions and tabs. Each example includes HTML and jQuery code snippets to demonstrate the functionality.

Uploaded by

harshpatel164566
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views56 pages

jQuery Input Value Retrieval Examples

The document provides multiple examples of using jQuery for various tasks such as retrieving values from textboxes, checkboxes, radio buttons, and dropdowns, as well as manipulating elements with methods like append() and prop(). It also covers events like mouseenter, mouseleave, and keypress, along with creating UI components like accordions and tabs. Each example includes HTML and jQuery code snippets to demonstrate the functionality.

Uploaded by

harshpatel164566
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

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="[Link]
.[Link]"></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>

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="[Link]
.[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var $x = $("div");
$[Link]("color", "#ffccff");
$[Link]("The color property has the following value: " +
$[Link]("color"));
$[Link]("color");
$[Link]("<br>Now the color property has the following value:
" + $[Link]("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="[Link]
<script>
$(document).ready(function() {
$("#btnMltChk").click(function(){
multipleCheckboxValue();
});
});

function multipleCheckboxValue()
{
var favorite = [];
$.each($("input[name=’tutorial’]:checked"), function(){
[Link]($(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>

Retrieve Single check box value using


jQuery
Here we will see how to retrieve single check box value
using jQuery.
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
<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(‘chec
ked’, 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>

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="[Link]
.[Link]"></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="[Link]
.[Link]"></script>
<script src = "[Link]
[Link]"></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
button value and display on alert message.
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
<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="[Link]
.[Link]"></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="[Link]
.[Link]"></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="[Link]
.[Link]"></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="[Link]
<script type="text/javascript">
$(document).ready(function(){
$("[Link]").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>

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="[Link]
.[Link]"></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 = "[Link]
lightness/[Link]" rel = "stylesheet">
<script
src="[Link]
.[Link]"></script>
<script src = "[Link]
[Link]"></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 = "[Link]
lightness/[Link]" rel = "stylesheet">
<script src =
"[Link]

<script src = "[Link]


[Link]"></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="[Link]
.[Link]"></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);
[Link]();
});
$('[data-popup-close]').on('click', function() {
var targeted_popup_class = jQuery(this).attr('data-popup-
close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
[Link]();
});
});
</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="//[Link]/ui/1.12.1/themes/base/[Link]">
<link rel="stylesheet" href="/resources/demos/[Link]">
<script
src="[Link]
<script src="[Link]
[Link]"></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="//[Link]/ui/1.12.1/themes/base/[Link]">
<link rel="stylesheet" href="/resources/demos/[Link]">
<script
src="[Link]
<script src="[Link]
[Link]"></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 = "[Link]
lightness/[Link]" rel = "stylesheet">
<script src =
"[Link]
<script src = "[Link]
[Link]"></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="[Link]
[Link]">
<link rel="stylesheet"
href="[Link]
[Link]">
<script
src="[Link]
<script
src="[Link]
[Link]"></script>
<script
src="[Link]
.[Link]"></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>

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="[Link]
.[Link]"></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="[Link]
.[Link]"></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 =
"[Link]
.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 =
"[Link]
.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="[Link]
.[Link]"></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="[Link]
.[Link]"></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="[Link]
.[Link]"></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="[Link]
.[Link]"></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="[Link]
.[Link]"></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 below example we
will wrap two paragraphs with a div tag background color:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
.[Link]"></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="[Link]
.[Link]"></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="[Link]
[Link]"></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="[Link]
[Link]"></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="[Link]
.[Link]"></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="//[Link]/ajax/libs/jquery/2.1.1/[Link].j
s"></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="[Link]
.[Link]"></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 occurs in the middle of the string are
preserved.
<!DOCTYPE html>
<html>
<head>
<title>Remove White Space from Strings</title>
<script
src="[Link]
<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="[Link]
.[Link]"></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. Below example
explains how to remove multiple style classes:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
.[Link]"></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. Below
example shows how to use toggle class method on a
paragraph tag:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
.[Link]"></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 uniform
background color on paragraph tags:
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
.[Link]"></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


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

 width() & height()


 innerWidth() & innerHeight()
 outerWidth() & outerHeight()
jQuery width() and height() method:
These two methods returns 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="[Link]
.[Link]"></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 returns 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="[Link]
.[Link]"></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 in below example you will see use of jQuery
autocomplete method for choosing country:
<!doctype html>
<html>
<head>
<title>jQuery UI Autocomplete functionality</title>
<link href = "[Link]
lightness/[Link]" rel = "stylesheet">
<script src =
"[Link]
<script src = "[Link]
[Link]"></script>
<script>
$(function() {
var countries =
["Afghanistan","Albania","Algeria","Andorra","Angola","Anguill
a","Antigua &
Barbuda","Argentina","Armenia","Aruba","Australia","Austria","
Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belar
us","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","B
osnia & 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","Gibralta
r","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey
","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong
Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","I
reland","Isle of
Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kaz
akhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","La
os","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenst
ein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar"
,"Malawi","Malaysia","Maldives","Mali","Malta","Marshall
Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldo
va","Monaco","Mongolia","Montenegro","Montserrat","Morocco","M
ozambique","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","P
uerto
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="[Link]
.[Link]"></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="[Link]
.[Link]"></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="//[Link]/ajax/libs/jquery/1.8.3/[Link].j
s"></script>
<script
src="//[Link]/ajax/libs/jqueryui/1.10.3/jquery-
[Link]"></script>
<link rel="stylesheet"
href="[Link]
[Link]" />
<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="[Link]
.[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
[Link]({left: ‘200px’}, "slow");
[Link]({fontSize: ‘3em’}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div
style="background:#98bf21;height:100px;width:200px;position:ab
solute;">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="[Link]
</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 () {
[Link]("div-1").innerHTML="You selected:
"+[Link]("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="[Link]
.[Link]"></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="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").position();
alert("Top position: " + [Link] + " Left position: " + [Link]);
});
});
</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?
[Link]() 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="[Link]
<script>
$(document).ready(function(){
$("button").click(function(){
[Link](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?
[Link]() 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="[Link]
.[Link]"></script>
<script type=’text/javascript’>
$(document).ready(function() {
$("#open_new_tab").click(function(){
var go_to_url = $("#websites").find(":selected").val();
[Link](go_to_url, ‘_blank’);
});
});
</script>
</head>
<body>
<div style="margin:200px 200px;">
<select id="websites" style="width:200px;">
<option value="[Link]
Technologies</option>
<option
value="[Link]
n>
<option
value="[Link]
<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 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="[Link]
.[Link]"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#open_same_window").click(function(){
var go_to_url = $("#websites").find(":selected").val();
[Link] = go_to_url;
});
});
</script>
</head>
<body>
<div style="margin:200px 200px;">
<select id="websites" style="width:200px;">
<option value="[Link]
Technologies</option>
<option
value="[Link]
n>
<option value="[Link]
<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="[Link]
.[Link]"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#open_home_page").click(function(){
[Link] = "/";
});
});
</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 [Link] 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="[Link]
<script>
[Link] = "[Link]
</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="[Link]
.[Link]"></script>
<script>
$.getJSON("[Link] function (data)
{
$("#retriveIP").html("IP: " + [Link] + "");
})
</script>
</head>
<body>
<p>Client’s information:</p>
<p id="retriveIP"></p>
</body>
</html>

You might also like