jQuery Bare Bones

A bare bones jQuery application with no attempt to structure the code.

Sample Text

test01.js

// Test 01 Bare Bones

$( document ).ready(function() {
    var  $pp = $( "#pp" ),     // A Paragraph
         $b1 = $( "#b1" ),     // A Button
         $b2 = $( "#b2" ),     // Another Button
        $nav = $( "#nav" );    // The Navigation Links

    $nav.load( "nav.htm" );    // Fetch navigation bar using Ajax

    // Code to handle buttone-one clicks
	$b1.click(function(){
        $pp.text( "Hello World!" );
    });

    // Code to handle buttone-two clicks
    $b2.click(function() {
        $pp.text( "Bye!" );
    });
});

test01.php

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="../../js/jquery-2.1.1.js"><\/script>')</script>
  <script src="test01.js"></script>
  <title>jQuery Bare Bones</title>
</head>

<body>
<h1>jQuery  Bare Bones</h1>

<p id="nav">Navigation Bar</p>

<p>A bare bones jQuery application with no attempt to structure the code.</p>

<p id="pp">Sample Text</p>

<p><button id="b1">Hello</button> <button id="b2">Bye</button></p>

<?php include "code.php";    // Only needed for this tutorial
      codeDump("test01.js", '#ffffdd');
      codeDump("test01.php", '#ddffff'); ?>

</body>
</html>