<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"><!-- Source is http://training.learningjquery.com/select-css.html -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Selectors</title>
<link rel="stylesheet" href="http://codylindley.com/jqueryselectors/select.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://codylindley.com/jqueryselectors/select.js" type="text/javascript"></script>
<script src="http://codylindley.com/jqueryselectors/jquery.DOMWindow.js" type="text/javascript"></script>
</head>
<body>
<div >
<div><input type="text" value="text input" /></div>
<div><input type="text" value="disabled text input" disabled="disabled" /></div>
<div><input type="password" name="password" value="password" /></div>
<div><select>
<option>select list w/ options</option>
<option>another option</option>
<option>a third option</option>
</select>
</div>
</div>
<textarea class="left" rows="5" cols="20">This is a textarea</textarea>
<div><select size="5" style="margin-left:10px">
<option>select list w/ options</option>
<option selected="selected">another option</option>
<option>a third option</option>
</select></div>
<div class="clear-left"><label for="radio1">
<input class="left" name="radiobtn" type="radio" />
</div>
<div class="example">
<h3>Basics</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">code</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/element#element" />
<div class="sample-code">$('<span class="querystring">#myid</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/id#id" />
<div class="sample-code">$('<span class="querystring">.myclass</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/class#class" />
<div class="sample-code">$('<span class="querystring">*</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/all" />
<div class="sample-code">$('<span class="querystring">code, #myid, .myclass</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/multiple#selector1selector2selectorN" />
</div>
</div>
<div class="example">
<h3>Hierarchy</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">div code</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/descendant#ancestordescendant" />
<div class="sample-code">$('<span class="querystring">li > ul</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/child#parentchild" />
<div class="sample-code">$('<span class="querystring">strong + em</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/next#prevnext" />
<div class="sample-code">$('<span class="querystring">strong ~ em</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/siblings#prevsiblings" />
</div>
</div>
<div class="example">
<h3>Basic Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">li:first</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/first" />
<div class="sample-code">$('<span class="querystring">li:last</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/last" />
<div class="sample-code">$('<span class="querystring">li:not(li:first)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/not#selector" />
<div class="sample-code">$('<span class="querystring">li:even</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/even" />
<div class="sample-code">$('<span class="querystring">li:odd</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/odd" />
<div class="sample-code">$('<span class="querystring">li:eq(1)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/eq#index" />
<div class="sample-code">$('<span class="querystring">li:gt(2)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/gt#index" />
<div class="sample-code">$('<span class="querystring">li:lt(2)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/lt#index" />
<div class="sample-code">$('<span class="querystring">:header</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/header" />
<div class="sample-code">$('<span class="querystring">:animated</span>')</div>
<input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/animated" />
</div>
</div>
<div class="example">
<h3>Content Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">li:contains(second-level)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/contains#text" />
<div class="sample-code">$('<span class="querystring">:empty</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/empty" />
<div class="sample-code">$('<span class="querystring">li:has(a)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/has#selector" />
<div class="sample-code">$('<span class="querystring">p:parent</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/parent" />
</div>
</div>
<div class="example">
<h3>Visibility Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">:hidden</span>')</div>
<input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/hidden" />
<div class="sample-code">$('<span class="querystring">:visible</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/visible" />
</div>
</div>
<div class="example">
<h3>Attribute Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">li[class]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeHas#attribute" />
<div class="sample-code">$('<span class="querystring">a[rel="self"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeEquals#attributevalue" />
<div class="sample-code">$('<span class="querystring">a[rel!="nofollow"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeNotEqual#attributevalue" />
<div class="sample-code">$('<span class="querystring">[class^="my"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeStartsWith#attributevalue" />
<div class="sample-code">$('<span class="querystring">a[title$="blog"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeEndsWith#attributevalue" />
<div class="sample-code">$('<span class="querystring">a[href*="zip"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeContains#attributevalue" />
<div class="sample-code">$('<span class="querystring">a[rel][href][title$="blog"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeMultiple#attributeFilter1attributeFilter2attributeFilterN" />
</div>
</div>
<div class="example">
<h3>Child Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">li:nth-child(even)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/nthChild#index" />
<div class="sample-code">$('<span class="querystring">li:nth-child(odd)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/nthChild#index" />
<div class="sample-code">$('<span class="querystring">li:nth-child(2)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/nthChild#index" />
<div class="sample-code">$('<span class="querystring">li:nth-child(2n)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/nthChild#index" />
<div class="sample-code">$('<span class="querystring">li:first-child</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/firstChild" />
<div class="sample-code">$('<span class="querystring">li:last-child</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/lastChild" />
<div class="sample-code">$('<span class="querystring">code:only-child</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/onlyChild" />
</div>
</div>
<div class="example">
<h3>Forms</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">:input</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/input" />
<div class="sample-code">$('<span class="querystring">:text</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/text" />
<div class="sample-code">$('<span class="querystring">:password</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/password" />
<div class="sample-code">$('<span class="querystring">:radio</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/radio" />
<div class="sample-code">$('<span class="querystring">:checkbox</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/checkbox" />
<div class="sample-code">$('<span class="querystring">:submit</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/submit" />
<div class="sample-code">$('<span class="querystring">:image</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/image" />
<div class="sample-code">$('<span class="querystring">:reset</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/reset" />
<div class="sample-code">$('<span class="querystring">:button</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/button" />
<div class="sample-code">$('<span class="querystring">:file</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/file" />
<div class="sample-code">$('<span class="querystring">:hidden</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/hidden" />
</div>
</div>
<div class="example">
<h3>Form Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">input:enabled</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/enabled" />
<div class="sample-code">$('<span class="querystring">:disabled</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/disabled" />
<div class="sample-code">$('<span class="querystring">:checked</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/checked" />
<div class="sample-code">$('<span class="querystring">:selected</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/selected" />
</div>
</div>
</div> <!-- end of section -->
</div>
<div ></script>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-162561-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>