JQuery Selectors for GEOG 458

Original lab by Karl Swedberg Enhanced by Cody Lindley. Revised by Bo Zhao for Geog 458: Web Mapping at Oregon State University

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

Download This Lab

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
    • 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>.

Enter Your Own Selectors ( example: li:nth-child(2) )

Basics

$('code')
$('#myid')
$('.myclass')
$('*')
$('code, #myid, .myclass')

Hierarchy

$('div code')
$('li > ul')
$('strong + em')
$('strong ~ em')

Basic Filters

$('li:first')
$('li:last')
$('li:not(li:first)')
$('li:even')
$('li:odd')
$('li:eq(1)')
$('li:gt(2)')
$('li:lt(2)')
$(':header')
$(':animated')

Content Filters

$('li:contains(second-level)')
$(':empty')
$('li:has(a)')
$('p:parent')

Visibility Filters

$(':hidden')
$(':visible')

Attribute Filters

$('li[class]')
$('a[rel="self"]')
$('a[rel!="nofollow"]')
$('[class^="my"]')
$('a[title$="blog"]')
$('a[href*="zip"]')
$('a[rel][href][title$="blog"]')

Child Filters

$('li:nth-child(even)')
$('li:nth-child(odd)')
$('li:nth-child(2)')
$('li:nth-child(2n)')
$('li:first-child')
$('li:last-child')
$('code:only-child')

Forms

$(':input')
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':submit')
$(':image')
$(':reset')
$(':button')
$(':file')
$(':hidden')

Form Filters

$('input:enabled')
$(':disabled')
$(':checked')
$(':selected')