jQuery 101: Basic examples

Simple examples of selecting based on class and id of elements, binding a function to the click event, and changing css through jQuery.

by Phil

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
<script src="https://raw.githubusercontent.com/jonthornton/Datepair.js/master/dist/jquery.datepair.min.js"></script>
<table id="workTimesEntry">
  <tr>
    <th>Work Date:</th>
    <td>
      <input type="text" id="itemStartDate" class="date start form-control" value="@System.DateTime.Today.ToShortDateString()" />
    </td>
  </tr>
  <tr>
    <th>Start Time:</th>
    <td>
      <input id="StartTime" type="text" class="time start form-control" value="8:00 AM" /> to</td>
  </tr>
  <tr>
    <th>End Time:</th>
    <td>
      <input id="EndTime" type="text" class="time end form-control" value="8:00 AM" />
      <input type="hidden" id="itemEndDate" class="date end" hidden="" />
    </td>
  </tr>
</table>
<a href="#" id="Calculate">Calculate</a>
<br/>
<a href="#" id="Reset">Reset</a>


<p id="jqueryExample">
    <input type="text" class="date start" />
    <input type="text" class="time start" /> to
    <input type="text" class="time end" />
    <input type="text" class="date end" />
</p>

CSS

body {
  background-color: #eef;
  padding: 5px;
}

JavaScript

$("#Calculate").click(function() {
  alert("Calculate");
});


$("#StartTime").timepicker();
$("#EndTime").timepicker();


    $('#jqueryExample .time').timepicker({
        'showDuration': true,
        'timeFormat': 'g:ia'
    });

    $('#jqueryExample .date').datepicker({
        'format': 'm/d/yyyy',
        'autoclose': true
    });

    // initialize datepair
    $('#jqueryExample').datepair();