JQuery Code Snippets
AJAX
file sample.php
<?php
   date_default_timezone_set('America/New_York');   // set timezone before calling date()
?>
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
  <div>
    <h4>Server Time: 
        <div id="timeclock-server-time"><?= date("M d, Y, g:i:s a") ?></div>
      </h4>
  </div>
  <div>
    <h4>Local Time: 
        <div id="timeclock-client-time"><?= date("M d, Y, g:i:s a") ?></div>
    </h4>
  </div>        
...
<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="./lib/ie10-viewport-bug-workaround.js"></script>
 
    <!-- Our Utils routines -->
    <script src="./utils.js"></script>
 
    <!-- Initialize timers -->
    <script type="text/javascript">
      // Get server time
      $( document ).ready(function() {
          if (window.console) { console.log( "Getting server & local time..." ); }
          var timerLocalTime  = setInterval(function(){ getLocalTimeTimer() }, 1000);    // update every 1 sec
          var timerServerTime = setInterval(function(){ getServerTimeTimer() }, 1000);   // update every 1 secs
      });
    </script>
</body>
</html>
file utils.js
//---------------------------------------------------------------
// Get local time
//---------------------------------------------------------------
function getLocalTimeTimer() 
{
    var curDate = new Date();
    //curDate.toLocaleFormat('%b-%d-%Y'); // Dec-30-2011
    var localTime = curDate.toLocaleTimeString();
    //document.getElementById("timeclock-server-time").innerHTML = curDate + " " + localTime;
    document.getElementById("timeclock-client-time").innerHTML = "Local time: " + localTime;
}
 
//---------------------------------------------------------------
// Get server time
//---------------------------------------------------------------
function getServerTimeTimer() 
{    
    $.ajax({
        // Controller method to call
        //url: 'http://localhost:8080/catalog/site/build.php',
        url: 'lib-get-ajax-data.php',
 
        // Parameter data to pass in
        data: {
            cmd: 'get-server-time'
        },
 
        type: 'POST',
        cache: false,
        dataType : "json",
 
        // Code to run if the request succeeds;
        // the response is passed to the function
        success: function(data) {
          // process data
          //console.log('data: respStatus: [' + data.respStatus + '], error: [' + data.error + '], timestamp: [' + data.timestamp + '], output: [' + data.output + ']');
 
          var results = '';
          if (data.respStatus == "ok") {
              results = data.output;
          } else {
              results = '<div class="alert alert-danger" role="alert">' + 
                        'Error: ' + data.error + '<br/>' + 
                        (data.output.length > 0 ? '<pre>' + data.output + '</pre>' : '') +
                     '</div>'; 
          }
          $('#timeclock-server-time').html(results);
        },
 
        // Code to run if the request fails; 
        // the raw request and status codes are passed to the function
        error: function( xhr, status, errorThrown ) {
            //alert('Sorry, there was a problem! Error: ' + errorThrown + 'Status: ' + status + xhr);
            //console.log('Error: ' + errorThrown );
            //console.log('Status: ' + status );
            console.dir( xhr );
        },
 
        // Code to run regardless of success or failure
        complete: function( xhr, status ) {
            //alert('The request is complete!');
        }
    });
}
file lib.php
<?php
//-------------------------------------------------------------------------------------------------
// Main routine
//-------------------------------------------------------------------------------------------------
 
if (!empty($_POST['cmd'])) {
    switch($_POST['cmd']) {
        case 'get-server-time': ajaxGetServerTime(); break;
        ...
    }
} else {
    ajaxNoData();
}
?>
 
<?php
//-------------------------------------------------------------------------------------------------
// description: Get server time.
// parameters : $dataType ("html", "text", "json")
// return     : void
//-------------------------------------------------------------------------------------------------
function ajaxGetServerTime($dataType="json")
{
    date_default_timezone_set('America/New_York');
    //$curDateTime = date("h:i:s a");          // 04:32:54 pm
    //$curDateTime = date("M d, Y, h:i:s a");  // Jul 14, 2015, 04:32:54 pm
    $curDateTime = date("M d, Y, g:i:s a");    // Jul 14, 2015, 4:32:54 pm
    $timestamp = time();  
 
    switch($dataType) {
        case "json":
            echo '{ '. 
                 ' "respStatus": "ok", ' .
                 ' "error": "Success", ' .
                 ' "timestamp": "' . $timestamp . '",' .
                 ' "output": ["' . $curDateTime . '"]' . 
                 '}' ;
            break;
 
        case "html":
        case "text":
        default:
            echo $curDateTime;
            break;
    }
}
 
//-------------------------------------------------------------------------------------------------
// description: Display 'No Data' message.
// parameters : void
// return     : void
//-------------------------------------------------------------------------------------------------
function ajaxNoData()
{
    echo '<div class="alert alert-danger" role="alert">No data</div>';  
}
?>
Get Input Values

Combobox / Listbox (single select)

var selValue = $('#catalog-lang option:selected').val();
var selText  = $('#catalog-lang option:selected').text();

Eg: 

<label>Language</label>
<select id="catalog-lang" class="form-control" multiple>
   <option value="en" selected>English</option>
   <option value="es">Spanish</option>
</select>

Listbox (muti-select)

var realvalues = [];
var textvalues = [];
$('#catalog-products :selected').each(function(i, selected) {
    realvalues[i] = $(selected).val();
    textvalues[i] = $(selected).text();
});

When using select-option controls, option:selected can be used: 

$('#catalog-products option:selected').each(function(i, selected) {
   ...
}

Eg: 

<label>Products</label>
<select id="catalog-products" class="form-control" multiple>
   <option value="green" selected>Green Car</option>
   <option value="red">Red Car</option>
   <option value="blue">Blue Car</option>
</select>
DOM Manipulation

Get Javascript element: 

$( "#foo" )[ 0 ]; // Equivalent to document.getElementById( "foo" )

Visibility on an input element and its label: 

<label for="myInput">Query Type</label>
<input id="myInput" type=...>
$('#myInput').hide();
$('label[for=\"myInput\"]').hide();