Selecting an DOM element
$('element')
Ex: $('div') – selects <div> elements
Selecting descending elements of an element
$('parent_element_selector').find('child_element_selector')
Ex: $('div').find('p') – selects <p> elements inside <div> elements
$('child_element',$('parent_element'))
Ex: $('p',$('div')) - selects <p> elements inside <div> elements
Selecting an element which has a particular element as its descendent's
$('element:has(descendant_element)')
Ex: $('div:has(h1)') – selects all <div> elements which contains <h1> elements
Selecting the first child of an element
$('element child_element:first')
Ex: $('ul li:first') – selects the first <li> element in each <ul> element
Selecting the last child of an element
$('element_selector child_element:last')
Ex: $('ul li:last') – selects the last <li> element in each <ul> element
Selecting children or immediate descending elements of an element
$('parent_element'_selector).children()
Ex: $('div').children() - selects all direct children of <div> elements
$('parent_element_selector').children('child_element_selector')
Ex: $('div').children('p') – selects set of <p> elements which are direct children of <div> elements
Selecting the parent of an element
$('element_selector').parent()
Ex: $('div').parent() - selects the parent element of each div element
Selecting adjacent siblings of an element
$('element_selector + sibling_element_selector')
Ex: $('h1 + h2') – selects <h2> elements which are adjacent to <h1> elements
Selecting all the siblings of an element
$('element_selector').siblings('sibling_element_selector')
Ex: $('h1').siblings('h2') – selects all the <h2> elements which are siblings of <h1> elements
Selecting all the siblings beyond an element
$('element_selector').nextAll('sibling_element_selector')
Ex: $('div').nextAll('h1') – selects all sibling <h1> elements after each <div> element
Selecting the first sibling beyond an element
$('element_selector').next('sibling_element_selector')
Ex: $('div').next('h1') – selects first <h1> sibling after each <div> element
Selecting the first element which is located before a particular element
$('element_selector').prev('sibling_element_selector')
Ex: $('div').prev('h1') – selects first <h1> element before each <div> element
Selecting all siblings which are located before a particular element
$('element_selector').prevAll('sibling_element_selector')
Ex: $('div').prevAll('h1') – selects all <h1> elements before each <div> element
Selecting elements based on their attributes
$('element_selector[attr_name=”attr_value”]')
Ex: $('a[href=”http://www.example.com”]') - selects all <a> elements with “href=http://www.example.com”
$('div[class*=”test”]') - selects all <div> elements that contains “test” as part of their class attribute value
$('div[class|=”test”]') – selects all <div> elements in which their class attribute is either equal or starts with “test”
$('[class!=”test”]') - selects all elements whose class is not equal to “test”
Selecting Form elements of a particular type
$(':type_name')
Ex: $(':text') – selects all text input element
Ex: $(':radio') – selects all radio button input elements
Selecting elements using CSS selectors
$('#id')
Ex: $('#myid') – selects the element with the id='myid'
$('.classname')
Ex: $('.myclass') -selects the set of elemtns with attribute class='myclass'
Ex:$('div p a') – selects the set of <a> elements which are inside <p> elements and those <p> elements are contained inside <div> elements
Similarly all the other CSS selectors can be used for selection.
Note- Either CSS selectors or DOM element names can be used as selectors. Further Jquery provides filtering capability to filter the selections.
