What is jQuery selectors

jQuery Selectors are one of the most important aspects to apply an effect on your page. jQuery makes it easy to select elements in a document by element name, attribute name or by content.

Selector	Description
*	It will select all the elements
#id	The element with id name myid will be selected
.class	The element with class name myclass will be selected
.class1.class2	It will select all the elements of class_first and class_second classes
element	All p elements will be selected
:first	The first li element will be selected
:last	The last li element will be selected
:even	All even tr elements will be selected
:odd	All odd tr elements will be selected
:eq(index)	The index starts at 0. The third element in a list will be selected.
:gt(no)	List elements with an index greater than 2 will be selected
:lt(no)	List elements with an index less than 2 will be selected
:header	All the header elements will be selected (ex. h1,h2,…)
sel1,sel2,sel3	All elements with matching selectors will be selected
:contains(text)	All elements which contains the text smartnetzone will be selected
:visible	All visible tables will be selected
:empty	All elements with no child elements will be selected
:hidden	All hidden p elements will be selected
:reset	All input elements with type=”reset” will be selected
:button	All input elements with type=”button” will be selected
:file	All input elements with type=”file” will be selected
:submit	All input elements with type=”submit” will be selected
:input	All input elements will be selected
:text	All input elements with type=”text” will be selected
:password	All input elements with type=”password” will be selected
:enabled	All enabled input elements will be selected
:disabled	All disabled input elements will be selected
:selected	All selected input elements will be selected
:radio	All input elements with type=”radio” will be selected
:checkbox	All input elements with type=”checkbox” will be selected
[attribute]	All elements with a href attribute will be selected
[attribute=value]	All elements with a href attribute value equal to “index.html” will be selected
[attribute!=value]	All elements with a href attribute value not equal to “index.html” will be selected
[attribute$=value]	All elements with a href attribute value ending with “.jpg” will be selected

jQuery Element Selectors
$(‘*’): selects all elements in the document
$(“div”) : selects all elements with a tag name of div in the document
$(“.myClass”) : selects all elements that have a class of myClass.
$(‘.myclass.otherclass’): selects all elements that have a class of myclass and otherclass
$(“#myId”) : selects the unique element with id=’myId’,
$(‘p#myId’): selects a single paragraph with an id of ‘myId.
Note: Each id value must be used only once within a document’
$(this) : selects Current HTML element
$(‘#container p’): selects all elements matched by
that are descendants of an element that has an id of container
$(“[href]“) select all elements with an href attribute.
$(‘li > ul’): selects all elements matched by

that are children of an element matched by
• 
  $(‘ul + p’): selects all elements by
    that immediately follow a sibling element matched by
  
  
  $(‘p ~ ul’): selects all elements matched by
  
  that follow a sibling element matched by
  $(‘p, em, strong’): selects all elements matched by
  or or
  $(‘li:first’): selects the first
  
  • element
    $(‘li:last): selects the last
  • element
    $(td:li’): selects all elements matched by
  • that are the parent of another element, including text
    $(‘li:even’): selects all elements matched by
  • that have an even index value
    $(‘li:odd’): selects all elements matched by
  • that have an odd index value
    $(‘li:eq(1)’): selects the second
  • element
    $(‘li:gt(1)’): selects all elements matched by
  • after the second one
    $(‘li:nth-child(2)’): selects all elements matched by
  • that are the second child of their parent
    $(‘li:first-child’): selects all elements matched by
  • that are the first child of their parent
    $(‘li:last-child’): selects all elements matched by
  • that are the last child of their parent
    $(‘:only-child’): selects all elements that are the only child of their parent
    $(‘li:not(:last-child)’): selects all elements matched by
  • that are not the last child of their parent element
    $(‘:empty’): selects all elements that have no children
    $(‘li:visible’): selects all elements matched by
  • that are visible
    $(‘li:hidden): selects all elements matched by
  • that are hidden
    Note: When you use the :visible and :hidden pseudo-selectors, jQuery tests the actual visibility of the element, not its CSS visibility or display
    $(‘a[@rel]‘): selects all elements matched by that have a rel attribute
    $(‘a[@href$=index.htm]‘): selects all elements matched by that have an href value ending with index.htm
    
    Basic Filters
    
    • :first
    • :even
    •   :dd
    • :not(selector)
    • :eq(index)
    • :gt(index)
    • :lt(index)
    • :header
    • :animated
    Hierarchy
    
    • ancestor descendant
    • parent > child
    • previous + next
    • previous ~ siblings
    Content Filters
    
    • :contains(text)
    • :empty
    • :has(selector)
    • :parent
    Visibility Filters
    
    • :hidden
    • :visible
    Forms
    
    • :hidden
    • :input
    • :text
    • :password
    • :image
    • :radio
    • :checkbox
    • :file
    • :submit
    • :button
    • :reset
    • :enabled
    • :disabled
    • :checked
    • :selected
    Child Filters
    
    • :nth-child(index | even | odd |equation)
    • :first-child
    • :last-child
    •   :only-child