What is jQuery :
JQuery is a JavaScript library which is small, quick, with tons of features that makes things such as animation, event handling and manipulation in web browser easy to use and handle.
1-jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto -
2-Write less, do more.
3-jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
Following feature of jQuery :
1-DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
2-Event Handling : The jQuery offers an elegant way to capture a wide variety of events,such as click,over event,
3-Ajax Support :
jQuery support ajax technology,
4-Lightweight :he jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
5-Animations − The jQuery comes with plenty of built-in animation effects.
6-Cross Browser Support − The jQuery has cross-browser support, and works well in IE and all.
Demo link :
Code link :
parent() method to traverse all the way up to the document's root element, parent() method return direct parent element of selected element.
Syntax :
$(element).parent(filter);
Using this element to access particular div,tr td etc element.Given a jQuery object that represents a set of DOM elements.
Parent return current matched element of html element.
parent() and parents() method return same element.
Following image shows simple parent and child relation, all every one can understand jquery parent and child relation :
Following example of parent() mehtod:
Create file srtucture :
1-header.php.
2-footer.php,
3-index.php,
1-header.php :
Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery parent() function</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- start:header -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Free Teachnology</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only"></span></a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</br></br></br>
<!-- end:header -->
2-footer.php :
footer.php file include bootstrap css link
Code :
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Start::footer -->
<footer>
<div class="footer footer-bottom">
<div class="container">
<div class="text-muted ">
<a href="https://freeteachnology.blogspot.in/" >Free Teachnology</a>
</div>
<p class="pull-left"> Copyright © <?php echo date('Y');?>. Design and Develop by - Disuza Jen. </p>
<div class="pull-right">
<ul class="nav nav-pills payments">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-link"></i></li>
</ul>
</div>
</div>
</div>
<!--/.footer-bottom-->
</footer>
<!-- End::footer -->
<style type="text/css">
.footer-bottom {
margin-top:220px;
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
.footer-bottom p.pull-left {
padding-top: 6px;
}
</style>
</body>
</html>
3-index.php:
<?php include('header.php'); ?>
<body>
<br><br><br>
<div class="cleafix"></div>
<div class="container">
<div class="alert alert-info">
<strong>Hi..</strong> jQuery parent() fucntion.
</div>
<div class="alert alert-warning">
<a href="https://drive.google.com/open?id=0BxmTZPVcu72fSXN5bnhXWmtISE0" class="btn btn-xs btn-warning pull-right" target="blank();">Click</a>
<strong> Code download link-</strong>
</div>
<div class="container-fluid well span3 ">
<div class="row">
<div class="col-lg-3 parentClass">
<h3>Disuza Jen</h3>
<h6>Email: disuzajen@gmail.com</h6>
<h6>Country: India</h6>
</div>
</div>
</div>
</div>
</br>
<?php include('footer.php'); ?>
<script>
$('h3').parent('.parentClass').css( "background", " rgb(195, 217, 213)" );
</script>
Above code of index.php files find h3 html tag and check parent of ”parentClass” and apply css background color value.
Comments