In This Blog, you are going to learn 5 very important methods of jQuery, which is very beneficial in your jQuery development because these methods are very useful methods for jQuery developers.
jQuery wrap() method
jQuery wrap() method is used to wrap specified HTML elements around each selected element.
jQuery unwrap() method
The unwrap() method is an built-in method in jQuery which is used to remove the parent element from the selected element.
jQuery wrapInner() method
The wrapInner() method wraps specified HTML element(s) around the content (innerHTML) of each selected element.
jQuery wrapAll() method
The wrapAll() method wraps specified HTML element(s) around all selected elements.
Source Code Of ALL 4 Methods In jQuery
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#div1
{
height:200px;
width:200px;
border:10px black double;
background-color: orange;
}
</style>
</head>
<body>
<p id="p1">This is my Paragraph 1</p>
<p id="p2">This is my Paragraph 2</p>
<p id="p3">This is my Paragraph 3</p>
<br>
<input type="button" value="Wrap" id="btn1">
<input type="button" value="UnWrap" id="btn2">
<input type="button" value="Wrap All" id="btn3">
<input type="button" value="Wrap Inner" id="btn4">
<input type="button" value="Un Wrap Inner" id="btn5">
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").wrap("<div id='div1'></div>");
});
$("#btn2").click(function(){
$("p").unwrap();
});
$("#btn3").click(function(){
// $("p").wrapAll("<div id='div1'></div>");
$("#p1, #p2").wrapAll("<div id='div1'></div>");
});
$("#btn4").click(function(){
$("#p1").wrapInner("<b><i></i></b>");
});
$("#btn5").click(function(){
$("#p1 > b,i").contents().unwrap();
});
});
</script>
</body>
</html>
jQuery Each( ) Method
jQuery’s each() function is used to loop through each element of the target jQuery object, an object that contains one or more DOM elements.
Source Code Of jQuery Each Method
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<!--
<p>Welcome To Html</p>
<p>Welcome To CSS</p>
<p>Welcome To JavaScript</p>
<p>Welcome To JQuery</p>
-->
<ul>
<li>Pakistan</li>
<li>Canada</li>
<li>USA</li>
<li>Greece</li>
</ul>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("li").each(function(index, element){
var country = $(element).text();
alert("Index is = " + index + " Element is = " + country);
});
// $("p").each(function(){
//
// var para = $(this).text();
// alert(para);
//
// });
});
</script>
</body>
</html>
Click Below Link to Download Notes & Source Code Of This Blog
https://www.mediafire.com/file/8y5ea8cr6bwpan8/EACH+AND+WRAP+METHODS+IN+JQUERY.rar/file
No responses yet