load()
Using load method we can load other page’s full content or other page’s particular control inner HTML
Ex. Below code will load the MainDiv inner HTML. so inside the load method we need to pass page URL as a parameter if you want load full other source page or if you want to load particular element’s inner HTML then after the URL parameter give one space then enter the selector, here I’ve passed div id as selector (#MainDiv)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>main page</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>HTML from another page:</b>
<div id="new-projects"></div>
<script>
$("#new-projects").load("anotherpage.html #MainDiv");
</script>
</body>
</html>
This is the other source page
<!doctype html> <html lang="en"> <head> <title>another page</title> </head> <body> full HTML contents From another page <div id="MainDiv"> <h3 style="color:green">div inner html from another page</h3> </div> </body> </html>
OutPut
each() will take collection from selector and loop the items, this is same as Foreach in c#.
Ex. Below code will loop the all div elements and elements inner HTML append into one p tag.
<!DOCTYPE html>
<html>
<head>
<title>For Each</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () { $('div').each(function () { $('.ptag').append($(this).html()); }); });
</script>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<p class="ptag"></p>
</body>
</html>
Output
The jQuery library provides several techniques for adding animation to a web page, slideToggle will hide and show the targeted element,
Ex, below code will hide and show the all div elements
</pre>
<!DOCTYPE html>
<html>
<head>
<title>Show Hide</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<input type="button" id="button" value="click here" />
<script>
$('#button').click(function () { $('div').slideToggle(1500); });
</script>
</body>
</html>
Ravichandran Blog 