Interactive Lab: jQuery Selectors

Toggle Button = $('selector').addClass('highlight').animate({ marginLeft: 10}, 'fast');

Download These Files

This sentence is in <div id="myid">. It is followed by a horizontal rule.

This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>.

  • This is the first list item (<li>) in an unordered list (<ul>).
  • This is the second list item. It has a link in it.
  • This is the third list item. It has a class of "myclass otherclass"
  • This is the fourth list item. It has strong text and emphasized text.
    • second-level list item 1. This is a link to my blog.
    • second-level list item 2
  • This is the 5th list item.
  • This is the 6th list item. It has strong text and emphasized text with addtional
    emphasized text within an <div>-Tag.
    .
    With an embedded <div> which contains an <ul>.
    • second-level list item 1
    • second-level list item 2

<p class="myclass">This is another paragraph. It has class="myclass" Otherwise, nothing special about it at all.

This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>.

Instructions

    Please answer the questions below with the jQuery expression only. For example: for $('selector') just enter selector. Then press the check button to see the result. If your answer is right the text field will appear in green color.

Basics

  • Find every element (including head, body, etc) in the document
  • Find every code-element in the document (<code>)
  • Find all element that have (<...class="myclass">)
  • Find element with (<...id="myid">)

Hierarchy

  • Find all direct child <ul>-elements within an <li> elements
  • Find the next <em> elements to the <strong> elements
  • Find all <em> elements that are siblings after the <strong> element

Basic Filters

  • Find the first list item (<li>)
  • Find the last list item (<li>)
  • Find all list items excluding first list item.
  • Find even list items, matching the first, third and so on (index 0, 2, 4 etc.).
  • Find odd list items, matching the second, fourth and so on (index 1, 3, 5 etc.).
  • Find the second <li> on the page. Reminder: the indexing starts at 0.
  • Find the 4. <li> and higher on the page. Reminder: the indexing starts at 0.
  • Find the 1st, 2nd and 3rd <li> on the page
  • Find all headers on the page.

Content Filters

  • Find all (<li>)s containing "unordered" text.
  • Find all elements that are empty - they don't have child elements or text.
  • Find all <li>s that have a link inside of them
  • Finds all <p>s with children.

Visibility Filters

  • Select all hidden elements.
  • Select all elements that are visible.

Attribute Filters

  • Find list items that have a class attribute.
  • Find all <A> elements with the attribute rel-value="self".
  • Find all <A> elements that don't have a attrribute rel-value="nofollow"
  • Find all elements with class attribute values starting with "my".
  • Find all <A> elements with title attribute values ending with "blog".
  • Find all <A> elements with href attribute values containing "zip"
  • Find all <A> elements with a rel and a href attribute and a title ends with "blog"

Child Filters

  • Find the second <li> in each <ul>.
  • Find each second <li>.
  • Find the first-child <li> in each <ul>.
  • Find each <code> element that is the only child of its parent

Forms

  • Find all input, textarea, select and button elements.
  • Find all elements of type text .
  • Find all elements of type password.
  • Find all elements of type radio.
  • Find all elements of type checkbox.
  • Find all elements of type submit.
  • Find all images.
  • Find all elements of type reset.
  • Find all buttons.
  • Find all elements of type file.

Form Filters

  • Find all input elements that are enabled.
  • Find all disabled elements
  • Find all elements that are checked

(c) 2012 by Matthias Fischer