jQuery provides selectors based on CSS 1-3 and it’s custom selectors.
CSS selectors for common tasks:
- Class selector: For class myDiv the selector is $(‘.myDiv’)
- ID selector : For selecting a div with ID myPanel the selector will be $(‘#myPanel’)
- Tag name: to select all paragraph nodes use $(‘p’)
- Attribute selectors like
- contains prefix [name|=”value”]
- contains [name*=”value”]
- contains word[name~=”value”]
- ends with[name$=”value”]
- not equal[name!=”value”],
- starts with[name^=”value”],
- has attribute [“name”] selector.
- Parent child selector like “parent > child” for example to select all child li elements under div with id myPanel use $(‘div#myPanel > li’)
- Custom selectors: jQuery have a number of custom selectors like animated, button, checked, contains(), disabled, empty, enabled, eq(), even, file, first-child, first, focus, gt(), has(), header, , hidden, image, input, last-child, last, lt(), not(), nth-child(), odd, only-child, parent, password, radio, reset, selected, submit, text, visible which can be used like $(‘div span:last-child’) to select all last span child of divs.
- Descendant selector (“ancestor descedant”) selects all the elements that are descendants of a given ancestor
- Next Adjacent selector (“prev + next”) Selects all next elements matching “next” that are immediately preceded by a sibling “prev”
- Next siblings selector (“prev ~ siblings”) Selects all sibling elements that follow after the “prev” element, have the same parent, and match the filtering “siblings” selector.