With jQuery you select (query) HTML elements and perform "actions" on them.
$(selector).action()
A $ sign to define/access
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
$(this).hide(); // HIDES THE CURRENT ELEMENT.
$("p").hide(); // HIDES ALL ELEMENTS.
$(".test").hide(); // HIDES ALL ELEMENTS WITH class="test".
$("#test").hide(); // HIDES THE ELEMENT WITH id="test".
The Document Ready Event
$(document).ready(function(){
// jQuery METHODS GO HERE...
$("p").click(function(){
$(this).hide();
});
});
// THE FOLLOWING IS A SHORTHAND
$(function(){
// jQuery METHODS GO HERE...
$("p").click(function(){
$(this).hide();
});
});
Element Selection
$("p") // SELECTS ALL <p> ELEMENTS
$(".className") // SELECTS ALL ELEMENTS WITH A CLASS OF className
$("p.className") // SELECTS ALL <p> ELEMENTS WITH A CLASS OF className
$("#idName") // SELECTS THE ELEMENT WITH AN ID idName
Element Selector List
Selector
Example
Selects
*
$("*")
All elements
#id
$("#lastName")
The element with id="lastname"
.class
$(".intro")
All elements with class="intro"
.class,.class
$(".intro,.demo")
All elements with the class "intro" or "demo"
element
$("p")
All <p> elements
el1,el2,el3
$("h1,div,p")
All <h1>, <div> and <p> elements
Pseudo Element Selector List
Selector
Example
Selects
:first
$("p:first")
The first <p> element
:last
$("p:last")
The last <p> element
:even
$("tr:even")
All even <tr> elements
:odd
$("tr:odd")
All odd <tr> elements
Specific Pseudo Element Selector List
Selector
Example
Selects
:first-child
$("p:first-child")
All <p> elements that are the first child of their parent
:first-of-type
$("p:first-of-type")
All <p> elements that are the first <p> element of their parent
:last-child
$("p:last-child")
All <p> elements that are the last child of their parent
:last-of-type
$("p:last-of-type")
All <p> elements that are the last <p> element of their parent
:nth-child(n)
$("p:nth-child(2)")
All <p> elements that are the 2nd child of their parent
:nth-last-child(n)
$("p:nth-last-child(2)")
All <p> elements that are the 2nd child of their parent, counting from the last child
:nth-of-type(n)
$("p:nth-of-type(2)")
All <p> elements that are the 2nd <p> element of their parent
:nth-last-of-type(n)
$("p:nth-last-of-type(2)")
All <p> elements that are the 2nd <p> element of their parent, counting from the last child
:only-child
$("p:only-child")
All <p> elements that are the only child of their parent
:only-of-type
$("p:only-of-type")
All <p> elements that are the only child, of its type, of their parent
Relative Selectors
Selector
Example
Selects
parent > child
$("div > p")
All <p> elements that are a direct child of a <div> element
parent descendant
$("div p")
All <p> elements that are descendants of a <div> element
element + next
$("div + p")
The <p> element that are next to each <div> elements
element ~ siblings
$("div ~ p")
All <p> elements that are siblings of a <div> element
List Selectors
Selector
Example
Selects
:eq(index)
$("ul li:eq(3)")
The fourth element in a list (index starts at 0)
:gt(no)
$("ul li:gt(3)")
List elements with an index greater than 3
:lt(no)
$("ul li:lt(3)")
List elements with an index less than 3
:not(selector)
$("input:not(:empty)")
All input elements that are not empty
Semantic Selectors
Selector
Example
Selects
:header
$(":header")
All header elements <h1>, <h2> ...
:animated
$(":animated")
All animated elements
:focus
$(":focus")
The element that currently has focus
:contains(text)
$(":contains('Hello')")
All elements which contains the text "Hello"
:has(selector)
$("div:has(p)")
All <div> elements that have a <p> element
:empty
$(":empty")
All elements that are empty
:parent
$(":parent")
All elements that are a parent of another element
:hidden
$("p:hidden")
All hidden <p> elements
:visible
$("table:visible")
All visible tables
:root
$(":root")
The document's root element
:lang(language)
$("p:lang(de)")
All <p> elements with a lang attribute value starting with "de"
Attribute Selectors
Selector
Example
Selects
[attribute]
$("[href]")
All elements with a href attribute
[attribute=value]
$("[href='default.htm']")
All elements with a href attribute value equal to "default.htm"
[attribute!=value]
$("[href!='default.htm']")
All elements with a href attribute value not equal to "default.htm"
[attribute$=value]
$("[href$='.jpg']")
All elements with a href attribute value ending with ".jpg"
[attribute|=value]
$("[title|='Tomorrow']")
All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
[attribute^=value]
$("[title^='Tom']")
All elements with a title attribute value starting with "Tom"
[attribute~=value]
$("[title~='hello']")
All elements with a title attribute value containing the specific word "hello"
[attribute*=value]
$("[title*='hello']")
All elements with a title attribute value containing the word "hello"