<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Pamaya - Web Design &#38; Development North Wales - Software Development, Graphic Design and Branding &#187; Reference</title>
	<atom:link href="http://www.pamaya.com/tags/reference/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.pamaya.com</link>
	<description>Web Design and Development North Wales</description>
	<lastBuildDate>Wed, 30 Mar 2011 14:45:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>jQuery selectors and attribute selectors reference and examples</title>
		<link>http://www.pamaya.com/jquery-selectors-and-attribute-selectors-reference-and-examples/</link>
		<comments>http://www.pamaya.com/jquery-selectors-and-attribute-selectors-reference-and-examples/#comments</comments>
		<pubDate>Tue, 31 Mar 2009 23:44:40 +0000</pubDate>
		<dc:creator>Maja Williams</dc:creator>
				<category><![CDATA[Blogs]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Technical]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[Reference]]></category>

		<guid isPermaLink="false">http://www.pamaya.com/?p=287</guid>
		<description><![CDATA[jQuery selectors and attribute selectors are some of the best features jQuery has to offer when it comes to DOM manipulation. Read this article to view a full table with examples.]]></description>
			<content:encoded><![CDATA[<p>jQuery selectors and attribute selectors are some of the best features jQuery has to offer when it comes to DOM manipulation. They allow you to quickly select all elements or groups of element of a given tag name, attribute name or their contents and allow you to manipulate them as a group or a single node. This article can be used as a beginners guide to selectors or as a cheahsheet or reference</p>
<p>The following table lists the different methods you have available to you to select nodes when using jQuery. All of the listed selectors should be wrapped in the following to stop your jQuery scripts conflicting with other libraries:</p>
<pre name="code" class="javascript">
    (function ($) {
        //Your code here
    })(jQuery);
</pre>
<h2>jQuery selectors and examples</h2>
<div class="table-wrapper">
<table border="0" summary="jQuery selectors and examples">
<caption>
  jQuery Selectors and Attribute Selectors<br />
  </caption>
<thead>
<tr>
<th scope="col">Selector</th>
<th scope="col">Example</th>
<th scope="col" width="40%">Description</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">List accurate as of jQuery 1.3</td>
</tr>
</tfoot>
<tbody>
<tr class="odd">
<td>*</td>
<td>$(&#8216;*&#8217;);</td>
<td>This selector is a wild card method and will select all elements in a document.</td>
</tr>
<tr>
<td>#id</td>
<td>$(&#8216;#id&#8217;);</td>
<td>This selector selects an element with the given ID.</td>
</tr>
<tr class="odd">
<td>.class</td>
<td>$(&#8216;.class&#8217;)</td>
<td>The class selector will gather all elements in the document with the given class name</td>
</tr>
<tr>
<td>element</td>
<td>$(&#8216;element&#8217;)</td>
<td>This selector will collect all elements in a document with the given tag name i.e. table, ul, li, a etc.</td>
</tr>
<tr class="odd">
<td>a, b, c. &#8230; n</td>
<td>$(&#8216;th, td, .class, #id&#8217;)</td>
<td>This method can use multiple selection patterns to collect elements.</td>
</tr>
<tr>
<td>parent child</td>
<td>$(&#8216;li a&#8217;)</td>
<td>This will select all &#8220;a&#8221; elements that are a descendant of &#8220;li&#8221;</td>
</tr>
<tr class="odd">
<td>a &gt; b</td>
<td>$(&#8216;table &gt; tr&#8217;);</td>
<td>This will select all b elements which are a child element of a or in our example all tr elements in a table or tables.</td>
</tr>
<tr>
<td>a + b</td>
<td>$(&#8216;li + a&#8217;);</td>
<td>This will select all &#8220;a&#8221; elements that are an immediate descendant of &#8220;li&#8221; in our example.</td>
</tr>
<tr class="odd">
<td>a ~ b</td>
<td>$(&#8216;p ~ ul&#8217;);</td>
<td>This selector will select all &#8220;ul&#8221; elements that are a sibling of &#8220;p&#8221;</td>
</tr>
<tr>
<td>:first</td>
<td>$(&#8216;ul li:first&#8217;);</td>
<td>Returns the first element in a result set</td>
</tr>
<tr class="odd">
<td>:first-child</td>
<td>$(&#8216;ul li:first-child&#8217;);</td>
<td>Returns the first child element of the parent element.</td>
</tr>
<tr class="odd">
<td>:last</td>
<td>$(&#8216;ul li:last&#8217;);</td>
<td>Returns the last element in a result set</td>
</tr>
<tr>
<td>:last-child</td>
<td>$(&#8216;ul li:last-child&#8217;);</td>
<td>Returns the last child element of the parent element.</td>
</tr>
<tr class="odd">
<td> <img src='http://www.pamaya.com/wp-includes/images/smilies/icon_surprised.gif' alt=':o' class='wp-smiley' /> nly-child</td>
<td>$(&#8216;div p:only-child&#8217;);</td>
<td>Returns elements which are the only child of the parent element.</td>
</tr>
<tr>
<td>:not(a)</td>
<td>$(&#8216;input:not(:checked)&#8217;);</td>
<td>Returns all elements that are <strong>not</strong> &#8220;a&#8221; on in our example all input elements that are not checked</td>
</tr>
<tr class="odd">
<td>:has(a)</td>
<td>$(&#8216;div:has(p)&#8217;);</td>
<td>Returns all elements with a descendant that matches a in out example a &#8220;div&#8221; that contains a &#8220;p&#8221;.</td>
</tr>
<tr>
<td> <img src='http://www.pamaya.com/wp-includes/images/smilies/icon_surprised.gif' alt=':o' class='wp-smiley' /> dd</td>
<td>$(&#8216;ul li:odd&#8217;);</td>
<td>Returns all <strong>odd</strong> elements in a result set (zero based)</td>
</tr>
<tr class="odd">
<td>:even</td>
<td>$(&#8216;ul li:even&#8217;);</td>
<td>Returns all <strong>even</strong> elements in a result set (zero based)</td>
</tr>
<tr>
<td>:eq(n)</td>
<td>$(&#8216;ul li:eq(n)&#8217;);</td>
<td>Returns a numbered element identified by n (zero based)</td>
</tr>
<tr class="odd">
<td>:gt(n)</td>
<td>$(&#8216;ul li:gt(n)&#8217;);</td>
<td>Returns all elements in a result set greater than n (zero based)</td>
</tr>
<tr>
<td>:lt(n)</td>
<td>$(&#8216;ul li:lt(n)&#8217;);</td>
<td>Returns all elements in a result set less than n (zero based)</td>
</tr>
<tr class="odd">
<td>:nth-child(n)</td>
<td>$(&#8216;ul li:nth-child(n)&#8217;);</td>
<td>Returns the nth child in a result set (one based)</td>
</tr>
<tr>
<td>:nth-child(odd)</td>
<td>$(&#8216;ul li:nth-child(odd)&#8217;);</td>
<td>Returns all <strong>odd</strong> numbered elements in a result set (one based)</td>
</tr>
<tr class="odd">
<td>:nth-child(even)</td>
<td>$(&#8216;ul li:nth-child(even)&#8217;);</td>
<td>Returns all <strong>even</strong> numbered elements in a result set (one based)</td>
</tr>
<tr>
<td>:nth-child(formula)</td>
<td>$(&#8216;ul li:nth-child(3n)&#8217;);</td>
<td>Returns every nth child in a result set. In our example every third child (one based)</td>
</tr>
<tr class="odd">
<td>:header</td>
<td>$(&#8216;:header&#8217;);</td>
<td>Returns all heading elements e.g. h1, h2, etc.</td>
</tr>
<tr>
<td>:animated</td>
<td>$(&#8216;ul:animated&#8217;);</td>
<td>Returns elements with an animation currently in progress</td>
</tr>
<tr class="odd">
<td>:contains(text)</td>
<td>$(&#8216;:contains(hello)&#8217;);</td>
<td>Returns all elements containing the passed string</td>
</tr>
<tr>
<td>:empty</td>
<td>$(&#8216;:empty&#8217;);</td>
<td>Returns all elements that contain no child nodes</td>
</tr>
<tr class="odd">
<td>:parent</td>
<td>$(&#8216;li:parent&#8217;);</td>
<td>Returns all elements that a parent nodes to any other DOM element including text nodes.</td>
</tr>
<tr>
<td>:hidden</td>
<td>$(&#8216;ul:hidden&#8217;);</td>
<td>Returns all hidden elements that are hidden with CSS or input fields of the type &#8220;hidden&#8221;</td>
</tr>
<tr class="odd">
<td>:visible</td>
<td>$(&#8216;ul:visible&#8217;);</td>
<td>Returns all visible elements</td>
</tr>
<tr>
<td>[attribute]</td>
<td>$(&#8216;[href]&#8216;);</td>
<td>Returns all elements that contain the passed attribute in our example any element with a &#8220;href&#8221; attribute</td>
</tr>
<tr class="odd">
<td>[attribute=value]</td>
<td>$(&#8216;[rel=external]&#8216;);</td>
<td>Returns all elements that the passed attribute value is equal to the passed value. In our example ant element with a &#8220;rel&#8221; attribute equal to &#8220;external&#8221;</td>
</tr>
<tr>
<td>['attribute!=value']</td>
<td>$(&#8216;[rel!=external]&#8216;);</td>
<td>Returns all elements that the passed attribute value is not equal to the passed value. In our example ant element with a &#8220;rel&#8221; attribute that is not equal to &#8220;external&#8221;</td>
</tr>
<tr class="odd">
<td>[attribute!=value]</td>
<td>$(&#8216;[class^=open]&#8216;);</td>
<td>Returns all elements that the passed attribute value start with the passed value. In our example any element thats &#8220;class&#8221; attribute value begins with &#8220;open&#8221;</td>
</tr>
<tr>
<td>[attribute$=value]</td>
<td>$(&#8216;[id$=-wrapper]&#8216;);</td>
<td>Returns all elements that the passed attribute value ends with the passed value. In our example any element whos &#8220;id&#8221; ends with &#8220;-wrapper&#8221;</td>
</tr>
<tr class="odd">
<td>[attribute*=value]</td>
<td>$(&#8216;[class*=offer]&#8216;);</td>
<td>Returns all elements that the passed attribute value contains the passed value. In our example any element whos &#8220;class&#8221; contains the string &#8220;offer&#8221;</td>
</tr>
<tr>
<td>:input</td>
<td>$(&#8216;:input&#8217;);</td>
<td>Returns only input elements of the tag name input, select, textarea and button</td>
</tr>
<tr class="odd">
<td>:text</td>
<td>$(&#8216;:text&#8217;);</td>
<td>Returns only input elements of the type &#8220;text&#8221;</td>
</tr>
<tr>
<td>:password</td>
<td>$(&#8216;:password&#8217;);</td>
<td>Returns only input elements of the type &#8220;password&#8221;</td>
</tr>
<tr class="odd">
<td>:radio</td>
<td>$(&#8216;:radio&#8217;);</td>
<td>Returns only input elements of the type &#8220;radio&#8221;</td>
</tr>
<tr>
<td>:checkbox</td>
<td>$(&#8216;:checkbox&#8217;);</td>
<td>Returns only input elements of the type &#8220;checkbox&#8221;</td>
</tr>
<tr class="odd">
<td>:submit</td>
<td>$(&#8216;:submit&#8217;);</td>
<td>Returns only input elements of the type &#8220;submit&#8221;</td>
</tr>
<tr>
<td>:image</td>
<td>$(&#8216;:image&#8217;);</td>
<td>Returns only input elements of the type &#8220;image&#8221;</td>
</tr>
<tr class="odd">
<td>:reset</td>
<td>$(&#8216;:reset&#8217;);</td>
<td>Returns only input elements of the type &#8220;reset&#8221;</td>
</tr>
<tr>
<td>:file</td>
<td>$(&#8216;:file&#8217;);</td>
<td>Returns only input elements of the type &#8220;file&#8221;</td>
</tr>
<tr class="odd">
<td>:button</td>
<td>$(&#8216;:button&#8217;);</td>
<td>Returns only input elements of the type &#8220;button&#8221;</td>
</tr>
<tr>
<td>:enabled</td>
<td>$(&#8216;:enabled&#8217;);</td>
<td>Returns all enabled input elements</td>
</tr>
<tr class="odd">
<td>:selected</td>
<td>$(&#8216;:selected&#8217;);</td>
<td>Returns the <strong>selected</strong> element in a select list.</td>
</tr>
<tr>
<td>:disabled</td>
<td>$(&#8216;:disabled&#8217;);</td>
<td>Returns disabled input elements</td>
</tr>
<tr class="odd">
<td>:checked</td>
<td>$(&#8216;:checked&#8217;);</td>
<td>Returns checked input elements of the type radio or checkbox.</td>
</tr>
</tbody>
</table>
</div>
<p>Hopefully this reference table will help you on your way with jQuery selectors and attribute selector. Hope this helps.</p>
<p>For information on how to use the returned jQuery object from any of the selectors above please read this aticle: <a  title="jQuery Object to Dom Element" href="http://www.pamaya.com/jquery-object-to-jquery-dom-element/">jQuery Object to jQuery DOM Element</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.pamaya.com/jquery-selectors-and-attribute-selectors-reference-and-examples/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>

