JavaScript Tutorial


<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>children demo</title>
  body {
    font-size: 16px;
    font-weight: bolder;
  div {
    width: 130px;
    height: 82px;
    margin: 10px;
    float: left;
    border: 1px solid blue;
    padding: 4px;
  #container {
    width: auto;
    height: 105px;
    margin: 0;
    float: none;
    border: none;
  .hilite {
    border-color: red;
  #results {
    display: block;
    color: red;
  p, span, em, a, b, button {
    border: 1px solid transparent;
  p {
    margin: 10px;
  span {
    color: blue;
  input {
    width: 100px;
  <script src=""></script>
    <div id="container">
        <p>This <span>is the <em>way</em> we</span>
          write <em>the</em> demo,</p>
        <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
        the</button> demo,
        This <span>the way we <em>write</em> the <em>demo</em> so</span>
        <input type="text" value="early"> in
        <span>t</span>he <span>m</span>orning.
        <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
        $( "#container" ).click(function ( event ) {
          $( "*" ).removeClass( "hilite" );
          var kids = $( ).children();
          var len = kids.addClass( "hilite" ).length;
          $( "#results span:first" ).text( len );
          $( "#results span:last" ).text( );