tag and class vs class

Benchmark created on July 20, 2011

Description

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<fieldset>
  <h3>
    Your details (optional)
  </h3>
  <div>
    <label for="author">
      Name
    </label>
    <input type="text" name="author" id="author">
  </div>
  <div>
    <label for="author-email">
      E-mail
    </label>
    <label class="inline">
      <input type="email" name="author-email" id="author-email">
      (won’t be displayed; might be used for Gravatar)
    </label>
  </div>
  <div>
    <label for="author-url">
      URL
    </label>
    <input type="url" name="author-url" id="author-url">
  </div>
</fieldset>
<fieldset>
  <h3>
    Test case details
  </h3>
  <div>
    <label for="title">
      Title
      <em title="This field is required">
        *
      </em>
    </label>
    <input type="text" name="title" id="title" required>
  </div>
  <div>
    <label for="slug">
      Slug
      <em title="This field is required">
        *
      </em>
    </label>
    <input type="text" name="slug" id="slug" pattern="[a-z0-9](?:-?[a-z0-9])*" required>
    <p class="preview">
      Test case URL will be
      <samp>
        http://jsperf.com/
        <mark>
          slug
        </mark>
      </samp>
    </p>
  </div>
  <div>
    <label for="visible">
      Published
    </label>
    <label class="inline">
      <input type="checkbox" value="y" name="visible" id="visible" checked>
      (uncheck if you want to fiddle around before making the page public)
    </label>
  </div>
  <div>
    <label for="info">
      Description
      <span>
        (in case you feel further explanation is needed)
      </span>
      <span>
        (Markdown syntax is allowed)
      </span>
    </label>
    <textarea name="info" id="info">
    </textarea>
  </div>
  <div class="question">
    <label for="question">
      Are you a spammer?
      <span>
        (just answer the question)
      </span>
    </label>
    <input type="text" name="question" id="question">
  </div>
  <fieldset>
    <h3>
      Preparation code
    </h3>
    <div>
      <label for="prep-html">
        Preparation code HTML
        <span>
          (this will be inserted in the
          <code>
            &lt;body>
          </code>
          of a valid HTML5 document in standards mode)
        </span>
        <span>
          (useful when testing DOM operations or including libraries)
        </span>
      </label>
      <textarea name="prep-html" id="prep-html">
      </textarea>
      <p id="add-libraries">
        Include JavaScript libraries as follows:
        <code>
          &lt;script src="//cdn.ext/library.js">&lt;/script>
        </code>
      </p>
    </div>
    <div>
      <label for="prep-js">
        Preparation code JavaScript
        <span>
          (variables, functions, arrays or other objects that will be used in the tests)
        </span>
      </label>
      <textarea name="prep-js" id="prep-js">
      </textarea>
    </div>
    <div id="show-advanced">
      <a href="#show-advanced">Show advanced fields: define <code>setup</code> and <code>teardown</code> methods</a>
    </div>
    <fieldset id="advanced">
      <div>
        <label for="setup">
          Define
          <code>
            setup
          </code>
          for all tests
          <span>
            (runs before each clocked test loop, outside of the timed code region)
          </span>
          <span>
            (e.g. define local test variables, reset global variables, clear
            <code>
              canvas
            </code>
            , etc.)
          </span>
          <span>
            (
            <a href="/faq#setup-teardown">see FAQ</a>
            )
          </span>
        </label>
        <textarea name="setup" id="setup">
        </textarea>
      </div>
      <div>
        <label for="teardown">
          Define
          <code>
            teardown
          </code>
          for all tests
          <span>
            (runs after each clocked test loop, outside of the timed code region)
          </span>
          <span>
            (
            <a href="/faq#setup-teardown">see FAQ</a>
            )
          </span>
        </label>
        <textarea name="teardown" id="teardown">
        </textarea>
      </div>
    </fieldset>
  </fieldset>
  <fieldset id="tests">
    <h3>
      Code snippets to compare
    </h3>
    <fieldset>
      <h4>
        Test 1
      </h4>
      <div>
        <label for="test[1][title]">
          Title
          <em title="This field is required">
            *
          </em>
        </label>
        <input type="text" name="test[1][title]" id="test[1][title]" required>
      </div>
      <div>
        <label for="test[1][defer]">
          Async
        </label>
        <label class="inline">
          <input type="checkbox" value="y" name="test[1][defer]" id="test[1][defer]">
          (check if this is an
          <a href="/faq#async">asynchronous test</a>
          )
        </label>
      </div>
      <div>
        <label for="test[1][code]">
          Code
          <em title="This field is required">
            *
          </em>
          <span>
            (No need for loops in the test code; we’ll take care of that for you)
          </span>
        </label>
        <textarea name="test[1][code]" id="test[1][code]" class="code-js" required>
        </textarea>
      </div>
    </fieldset>
    <fieldset>
      <h4>
        Test 2
      </h4>
      <div>
        <label for="test[2][title]">
          Title
          <em title="This field is required">
            *
          </em>
        </label>
        <input type="text" name="test[2][title]" id="test[2][title]" required>
      </div>
      <div>
        <label for="test[2][defer]">
          Async
        </label>
        <label class="inline">
          <input type="checkbox" value="y" name="test[2][defer]" id="idtofind" class="classtofind">
          (check if this is an
          <a href="/faq#async">asynchronous test</a>
          )
        </label>
      </div>
      <div>
        <label for="test[2][code]">
          Code
          <em title="This field is required">
            *
          </em>
        </label>
        <textarea name="test[2][code]" id="test[2][code]" class="code-js" required>
        </textarea>
      </div>
    </fieldset>
  </fieldset>
  <div class="buttons">
    <input type="submit" class="submit" value="Save test case" title="Save and view test case">
  </div>
</fieldset>

Test runner

$(".classtofind");

$("input.classtofind");

$("input")

$("#idtofind");

$("[id$=tofind]");

$("input[id$=tofind]");

$(".classtofind[id$=tofind]");

$(".classtofind").filter("[id$=tofind]");

Revisions

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

• Revision 1: published on July 20, 2011