Browser Diet - jQuery Selectors (v7)

Revision 7 of this benchmark created by Scott on

Preparation HTML

<div id="advanced_options" class="">
  <fieldset>
    <legend>
      View Options
    </legend>
    <form method="get">
      <ul>
        <li>
          Sales Event:
          <select id="sales_event" name="sales_event" class="sales_event">
            <option value="-1">
              Choose Event
            </option>
            <option value="Generate">
              Generate
            </option>
            <option value="Contract">
              Contract
            </option>
            <option value="Close">
              Close
            </option>
            <option value="Lost">
              Lost
            </option>
          </select>
        </li>
        <li>
          Status:
          <select id="s_status" name="s_status" class="s_status">
            <option value="Cancelled">
              Cancelled
            </option>
            <option value="Completed">
              Completed
            </option>
            <option value="In Progress" selected="selected">
              In Progress
            </option>
          </select>
        </li>
        <li>
          Manager:
          <select id="sales_manager" name="sales_manager" class="sales_manager">
            <option value=" ">
              Choose Manager
            </option>
            <option value="Debbie DooDoo">
              Debbie DooDoo
            </option>
            <option value="Fred Franks">
              Fred Franks
            </option>
            <option value="Holly Happy">
              Holly Happy
            </option>
            <option value="Troy Trip">
              Troy Trip
            </option>
          </select>
        </li>
        <li>
          AE:
          <select id="sales_aes" name="sales_aes" class="sales_aes">
            <option value=" ">
              Choose AE
            </option>
          </select>
        </li>
        <li>
          Date Between:
          <br />
          <input type="text" class="short_input" id="date_from" name="date_from" value=""
          />
          -
          <input type="text" class="short_input" id="date_to" name="date_to" value="" />
        </li>
        <li>
          <input type="submit" class="updatebutton" value="Update" />
        </li>
      </ul>
      <input type="hidden" value="Tampa" name="division" />
      <input type="hidden" value="1" name="manager_level" />
      <input type="hidden" value="" name="manager" />
      <input type="hidden" value="" name="date_from" />
      <input type="hidden" value="" name="date_to" />
      <input type="hidden" value="In Progress" name="s_status" />
      <input type="hidden" value="" name="sales_event" />
    </form>
  </fieldset>
</div>
<script>
  toggleItem = function(id) {
    var item = document.getElementById(id);
    if (item.style.display == "block") {
      item.style.display = 'none';
    } else {
      item.style.display = 'block';
    }
  }
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Class Selector
var $test = $(".sales_manager").val();
ready
ID Selector
var $test = $("#sales_manager").val();
ready
Toggle Class JQuery
$('#advanced_options').toggleClass('hidden');
ready
Native Toggle
toggleItem('advanced_options');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.