jqueryexample.com jQuery selectors - How to Get Anything You Want - jqueryexample.com

jQuery selectors – How to Get Anything You Want by jqueryexample

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 <p> 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 <ul> that are children of an element matched by <li>

$(‘ul + p’): selects all elements by <p>  that immediately follow a sibling element matched by <ul>

$(‘p ~ ul’): selects all elements matched by <ul> that follow a sibling element matched by <p>

$(‘p, em, strong’): selects all elements matched by <p> or <em> or <strong>

$(‘li:first’): selects the first <li> element

$(‘li:last): selects the last <li> element

$(td:li’): selects all elements matched by <li> that are the parent of another element, including text

$(‘li:even’): selects all elements matched by <li> that have an even index value

$(‘li:odd’): selects all elements matched by <li> that have an odd index value

$(‘li:eq(1)’): selects the second <li> element

$(‘li:gt(1)’): selects all elements matched by <li> after the second one

$(‘li:nth-child(2)’): selects all elements matched by <li> that are the second child of their parent

$(‘li:first-child’): selects all elements matched by <li> that are the first child of their parent

$(‘li:last-child’): selects all elements matched by <li> 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 <li> 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 <li> that are visible

$(‘li:hidden): selects all elements matched by <li> 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 <a> that have a rel attribute

$(‘a[@href$=index.htm]’): selects all elements matched by <a> that have an href value ending with index.htm

custom jQuery selectors are: :header, :even, :odd, :animated, :contains(text), etc.

$(‘p:contains(hello)’): selects all elements matched by <p> that contain the text hello

 Basic Filters

  • :first
  • :even
  • :odd
  • :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
Did you like this? Share it:

Discussion

No comments yet, be the first.

Leave a Comment