Hierarchy selector in jQuery

Basic jQuery selectors work the same as CSS selectors:

$('p');

Selects all the <p> elements in your page

$('*');

Selects all elements on the page

$('.status');

Selects all elements with the class status

$('#header');

Selects the element with the id header

	Note
	You should not use the same id for more than one element. If you do so and if you perform a selection by id, only the first matched element in the DOM will be returned

$('p, li, .status, #nav');

Selects all <p> and <li> elements, all elements with the status class, and the element with the id nav.

----------------------------------------------------------------------------------

jQuery hierarchical selectors also work the same as CSS selectors:

$('#footer span');

Selects the <span> elements that are descendants of the element with the id footer.

$('ul > li');

Selects the <li> elements that are immediate children of <ul> elements.

$('h2 + p');

Selects the <p> elements that are immediately preceded by an <h2> element.

$('h2 ~ p');

Selects all <p> elements following an <h2> element that have the same parent as the <h2> element. ----------------------------------------------------------------------------------

Another powerful selection type is selection by attribute:

$('a[href]');

Selects all <a> elements that have an href attribute.

$('a[href="http://mrkn.co/f/271"]');

Selects all <a> elements whose href attribute exactly matches "http://mrkn.co/f/271".

$('a[href*="goo.gl"]');

Selects all <a> elements whose href attribute contains "goo.gl". For example, this would match:

<a href="http://goo.gl/DeSyV" class="url">Interesting link</a>

$('a[href^="http://bit.ly"]');

Selects all <a> elements whose href attribute starts with "http://bit.ly". For example, this would match both of these elements:

<a href="http://bit.ly/eU3ccR" class="url">One link</a>
<a href="http://bit.ly/jqcon11SF" class="url">Another link</a>

$('a[href$=".pdf"]');

Selects all <a> elements whose href attribute ends with ".pdf". For example:

<a href="http://mrkn.co/docs/info.pdf" class="url">Download PDF version</a>

$('p[lang|="en"]');

Selects all <p> elements whose lang attribute matches either "en" or "en-\*", where * can be anything.

Note

A detailed explanation on selection by attribute can be found at the following URL: http://api.jquery.com/category/selectors/attribute-selectors/ ---------------------------------------------------------------------------------- jQuery also comes with useful selectors related to forms. $(':button'); , $(':checkbox'); , $(':file'); , $(':image'); , $(':password'); , $(':radio'); , $(':reset'); , $(':submit'); , $(':text'); Selects all <input> elements of the specified type. $(':input'); Selects all form elements, including <textarea> and <select> elements. $(':checked'); Selects all checkbox and radio elements that are checked. $(':selected'); For <option> elements, returns the selected option(s). $(':disabled'); , $(':enabled'); Selects all disabled/enabled form elements. Note It’s recommended to precede these selectors with a tag name or some other selector; otherwise, the universal selector (*) is implied (e.g., $(":checkbox") implies $("*:checkbox")). The following will serve as an example to demonstrate form selectors: <form name="foodieform"> <fieldset> <legend>Search a recipe:</legend> <label for="txt_recipe_name">Recipe name:</label> <input type="text" name="txt_recipe_name" id="txt_recipe_name" /> <label for="meal_type">Type of meal:</label> <select id="meal_type" name="meal_type"> <option value="Apetizer" selected>Apetizer</option> <option value="Entree">Entree</option> <option value="Drinks">Drinks</option> <option value="Desert">Desert</option> </select> </fieldset> <fieldset> <legend>Choose a type of food</legend> <input type="checkbox" name="food_type" value="French" checked>French</input> <input type="checkbox" name="food_type" value="Italian">Italian</input> <input type="checkbox" name="food_type" value="Mexican">Mexican</input> <input type="checkbox" name="food_type" value="Chinese">Chinese</input> </fieldset> <fieldset> <legend>Skills required</legend> <input type="radio" name="food_skills" value="1"/>Easy <input type="radio" name="food_skills" value="2"/>Medium <input type="radio" name="food_skills" value="3" checked/>Hard<br/> </fieldset> <input type="button" name="form-button" id="form-button" value="search"/> <input type="reset" name="form-reset" id="form-reset"/> </form> $(':checked'); would select: <input type="checkbox" name="food_type" value="French" checked>French</input> <input type="radio" name="food_skills" value="3" checked/>Hard<br/> $(':radio'); would select: <input type=​"radio" name=​"food_skills" value=​"1"> <input type=​"radio" name=​"food_skills" value=​"2">​ <input type=​"radio" name=​"food_skills" value=​"3" checked> $(':reset');:: Selects reset elements. In this case: <input type=​"reset" name=​"form-reset" id=​"form-reset"> $(':selected'); would select: <option value=​"Appetizer" selected>​Appetizer​</option> $(':text'); would select: <input type=​"text" name=​"txt_recipe_name" id=​"txt_recipe_name"> Note More information on form selectors is available here ⇒ http://api.jquery.com/category/selectors/form-selectors/