JQUERY BASICS – Part 2

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

2016-01-16_16-33-35

each()

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

2016-01-16_16-34-27

slideToggle()

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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s