<div id="foo">
            <h6>Element</h6>
            <div class="bar">Class</div>
            <div id="bar">Sub-ID</div>
            <input type="text" value="FooBar">
            <span id="hidden" style="display:none;">Hidden</span>
            <ul id="ul" class="ul">
                <li class="li">One</li>
                <li class="li">Two</li>
                <li class="li">Three</li>
                <li class="li">Four</li>
                <li class="li">Five</li>
                <li class="li">Six</li>
            </ul>
        </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup JS

var testObj;
  
  (function($){
      testObj = {
          idTest		:   function ( test ) {
              switch ( test ) {
                  case 0:
                      return $('#foo');
                  case 1:
                      return document.getElementById('foo'); // Native ID
                  case 2:
                      return $('#bar'); // Straight to child (ID)
                  case 3:
                      return $('#foo').find('#bar'); // Grab top ID and find child ID
                  case 4:
                      return $('#bar', '#foo'); // Context
                  case 5:
                      return document.getElementById('bar'); // Native ID
                  case 6:
                      return document.querySelector('#foo'); // querySelector
                  case 7:
                      return document.querySelector('#bar');
                  default:
                      break;
              }
          },
          elemTest	:   function ( test ) {
              switch ( test ) {
                  case 0:
                      return $('span');
                  case 1:
                      return $('span#hidden'); // Span element with an ID of hidden
                  case 2:
                      return $('#foo').find('span'); // Find span of #foo
                  case 3:
                      return $('span', '#foo'); // Context
                  case 4:
                      return document.getElementsByTagName('span'); // Native
                  case 5:
                      return document.querySelector('span'); // querySelector
                  case 6:
                      return document.querySelectorAll('div'); // querySelectorAll
                  case 7:
                      return $('div'); // jQuery return all DIVs
                  default:
                      break;
              }
          },
          classTest	:   function ( test ) {
              switch ( test ) {
                  case 0:
                      return $('.bar'); // Straight to .bar, one level down from #foo
                  case 1:
                      return $('#foo').find('.bar'); // Grab #foo, find .bar
                  case 2:
                      return $('.bar', '#foo'); // Context
                  case 3:
                      return $('div.bar') // Div with a class of bar
                  case 4:
                      return $('div').filter('.bar'); // Filter class from elem
                  case 5:
                      return $('.li'); // Get all .li, two levels down from #foo
                  case 6:
                      return $('li.li'); // List item with a class of li
                  case 7:
                      return $('#ul').find('.li'); // id #ul, find class of li
                  case 8:
                      return $('li').filter('.li') // Get all list items and filter those with a class of .li
                  case 9:
                      return document.getElementsByClassName('bar'); // Native, doesn't work in old IE
                  case 10:
                      return document.querySelectorAll('.bar') // querySelectorAll
                  default:
                      break;
              }
          }
      };
  })(jQuery);

Teardown JS

Test cases

Test #1

Title *

Async

Code *testObj.elemTest(0); // $('span');

Test #2

Title *

Async

Code *testObj.elemTest(1); // $('span#hidden'); Span element with an ID of hidden

Test #3

Title *

Async

Code *testObj.elemTest(2); // $('#foo').find('span');

Test #4

Title *

Async

Code *testObj.elemTest(3); // $('span', '#foo');

Test #5

Title *

Async

Code *testObj.elemTest(4); // document.getElementsByTagName('span');

Test #6

Title *

Async

Code *testObj.elemTest(5); // document.querySelector('span'); Doesn't work in old browsers

Test #7

Title *

Async

Code *testObj.elemTest(6); // document.querySelectorAll('div'); Same usage restrictions as above. Get all div

Test #8

Title *

Async

Code *testObj.elemTest(7); // $('div');

Test case details

Preparation Code

Test cases

Test #1

Test #2

Test #3

Test #4

Test #5

Test #6

Test #7

Test #8