Example 1
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Method Chaining</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
/* Some custom styles to beautify this example */
p {
width: 200px;
padding: 40px 0;
font: bold 24px sans-serif;
text-align: center;
background: #aaccaa;
border: 1px solid #63a063;
box-sizing: border-box;
}
</style>
<script>
$(document).ready(function(){
$(".start").click(function(){
$("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
});
$(".reset").click(function(){
$("p").removeAttr("style");
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button type="button" class="start">Start Chaining</button>
<button type="button" class="reset">Reset</button>
</body>
</html>Example 2
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Method Chaining</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
/* Some custom styles to beautify this example */
p {
width: 200px;
padding: 40px 0;
font: bold 24px sans-serif;
text-align: center;
background: #aaccaa;
border: 1px solid #63a063;
box-sizing: border-box;
}
</style>
<script>
$(document).ready(function(){
$(".start").click(function(){
$("p")
.animate({width: "100%"})
.animate({fontSize: "46px"})
.animate({borderWidth: 30});
});
$(".reset").click(function(){
$("p").removeAttr("style");
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button type="button" class="start">Start Chaining</button>
<button type="button" class="reset">Reset</button>
</body>
</html>Example 3
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Method Chaining Exceptions</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.test{
padding: 15px;
background: yellow;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
// This will work
$("h1").html("Hello World!").addClass("test").fadeOut(1000);
// This will NOT work
$("p").html().addClass("test");
});
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<button type="button">Start Chaining</button>
</body>
</html>