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.
children()
Get the children of each element in the set of matched elements.
1- Given a jQuery object that represents a set of DOM elements,
2- the .children() method allows us to search through the children of these elements in the DOM tree ,
3-construct a new jQuery object from the matching elements.
Syntax :
selector.children(selector)
selector is option provided element if selector not provided then all matched child element shows.
Demo link :
Code link :
Following file structure created :
1-header.php,
2-footer.php,
3-index.php,
1-header.php :
Header file include only link of bootstrap css and jquery link
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery children() 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 :
<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="http://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 children() fucntion.
</div>
<div class="alert alert-warning">
<a href="https://drive.google.com/open?id=0BxmTZPVcu72fclFkQlRjUkdWMUE" 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 class="container-fluid well child">
<div class="row">
<div class="col-lg-3 parentClass">
<h3>Disuza Jen Child</h3>
<h6>Email: disuzajen@gmail.com</h6>
</div>
</div>
</div>
</div>
</div>
</br>
<?php include('footer.php'); ?>
<script>
$('.span3').children('.child').css( "background", " rgb(231, 216, 228)" );
</script>
Above example that call children() jquery function, mail parent div of class “span3” and all include class is child of “span3” and apply color with color value code :
Script is :
<script>
$('.span3').children('.child').css( "background", " rgb(231, 216, 228)" );
</script>
Comments