Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Save to My Library
Look up keyword
Like this
1Activity
0 of .
Results for:
No results containing your search query
P. 1
jQuery Selectors Quick Reference

jQuery Selectors Quick Reference

Ratings: (0)|Views: 4 |Likes:
Published by jReplyIDE
A quick reference card/cheatsheet designed to help developers easily locate the right jQuery selector pattern to use.
A quick reference card/cheatsheet designed to help developers easily locate the right jQuery selector pattern to use.

More info:

Published by: jReplyIDE on May 23, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

08/19/2013

pdf

text

original

 
 jQuery Selectors Quick Reference
Introduction
In order to manipulate the contents of an HTML document it is necessary to first identify the DOM element(s) tobe modified. This can be done with raw Javascript which provides four useful methods for handling the task1.
document.getElementById
2.
document/node.getElementsByTagName
3.
document.node.getElementsByClassName
4.
document.node.querySelector(All)
While it is certainly possible to work with just these methods they, with the exception of the first method, suffer from the fact that they are often too broad in their scope. The result is that sooner or later it becomes necessaryto write custom filters that take the output from these methods and home in on the precise DOM element(s) youwant. Why bother reinventing the wheel when there probably is a jQuery selector variant that caters to your precise needs? This document provides a concise summary of some of the more frequently used jQueryselector syntaxes.
Basics
id
 
$('#ID')
- Selects the element bearing the HTML
id
attribute of “
ID
”.
Universal
 
$('*')
- Selects all the elements in the DOM. This selector can return a very large volume of data and can, by consequence, be slow. Use with caution!
classA
 
$('.classA')
– Selects all DOM elements that use the class “
classA
”.
Union:classA OR classB:
 
$('.classA,.classB')
– Selects all DOM elements that use the classes “
classA
or “
classB
”.
Intersection:classA AND classB:
 
$('.classA.classB')
– Selects all DOM elements that use classes
classA
” and “
classB
”.
classA but NOT classB:
 
$('.classA:not(.classB)')
– Selects all DOM elements that use “
classA
” but not
classB
”.
Attribute Matching
classA withattribute = value
 
$('.classA[attr = “value”]')
- Selects all DOM elements that use “
classA
and have a
value
assignment of value for the attribute “
attr 
”.
classA with attribute
 
attr 
 
starting with
 
value:
 
$('.classA[attr^="value"]')
- Selects all DOM elementsthat use the class "
classA
" and value assignment starting with “
value
“ for the attribute "
attr 
".
classA with attribute
 
attr 
 
ending with
 
value:
 
$('.classA[attr$="value"]')
- Selects all DOM elementsthat use the class "
classA
" and value assignment ending with “
value
“ for the attribute "
attr 
"
classA with attributeattr 
 
starting with
 
valueA
 
AND ending with
 
valueB:
$('.classA[attr^="valueA"][attr$="valueB"]') - Selects all DOM elements that use the class "classA" and value assignment startingwith “
valueA
” and ending with “
valueB
” for the attribute "attr".
classA with attribute
 
attr 
 
containing
 
value:$('.classA[attr*="value"]')
- Selects all DOM elements thatuse the class "
classA
" and value assignment containing “
value
“ for the attribute "
attr 
".
classA with attribute
 
attr 
 
containing the word
 
value
 
$('.classA[attr*="value"]')
- Selects all DOMelements that use the class "
classA
" and value assignment containing the space delimited word “
value
for the attribute "
attr 
".
classA with attribute
 
attr != value:$('.classA[attr!="value"]')
- Selects all DOM elements that use theclass "
classA
" and the value assignment is NOT “
value
“ for the attribute "
attr 
".
 
 jQuery Selectors Quick Reference
classA with attributes
 
attrA
 
&
 
attrB
 
bearing values
 
valueA
 
&
 
valueB:
 
$('.classA[attrA="valueA"][attrB="valueB"]')
- Selects all DOM elements that use the class "
classA
" and value assignments of 
valueA
“ & “
valueB
“ for the attributes "
attrA
" & "
attrB
" respectively.These selector patterns have two useful variants1.Leave out the
.classA
bit to look for ALL DOM elements matching the pattern in square brackets2.Wrap the pattern in square brackets in
:not(...)
to filter out elements that match those patternsNeedless to say, replacing
.classA
with an HTML tag, e.g.
input
would work too.
Children & Descendants
All Descendants of 
 
ID
 
$('#ID *'):
- Selects all descendants, i.e. children, grandchildren etc., of theelement bearing an id of "
ID
".
All Descendants of 
 
ID
 
NOT using
 
classA:
 
$('#ID *:not(.classA)')
- Selects all descendants, i.e.children, grandchildren etc., of the element bearing an id of "
ID
" but not those that use “
classA
”.
Children of 
 
ID:
 
$('#ID>*')
- Selects children, but not grandchildren etc., of the element bearing an id of "
ID
".
Children of IDNOT usingclassA:
 
$('#ID>*:not(.classA)')
- Selects children, but not grandchildrenetc., of the element bearing an id of "
ID
" but not those that use “
classA
”.
Descendants of classA:$('.classA *')
- Selects all descendants, i.e. children, grandchildren etc., of elements that use the class "
classA
".
Descendants of classA NOT usingclassB:$('.classA *:not(.classB)')
- Selects all descendants, i.e.children, grandchildren etc., of elements that use the class "
classA
" but not those that use “
classB
”.
Children of classA:
 
$('.classA>*')
- Selects all children, but not grandchildren etc., of elements that usethe class "
classA
".
Children of classAusingclassB:$('.classA>.classB')
- Selects all children, but not grandchildren etc.,of elements that use the class "
classA
" that use "
classB
".
Children of classANOT usingclassB:$('.classA>*:not(.classB)')
- Selects all children, but notgrandchildren etc., of elements that use the class "
classA
" but not those that use “
classB
”,
All Descendants of classAusingclassB:$('.classA>*').filter($('.classB'))
- Selects all descendantsof elements that use the class "
classA
" that use “
classB
”.
Qualifiers
First Occurrence:first
- returns the first match returned by the supplied selector. For instance
$('div:first')
would return the first
div
element.
Last Occurrence:last
- returns the last match returned by the supplied selector. For instance
$('div:last')
would return the last
div
element.
Only Visible Instances
 
:visible
- filters out matches returned by a selector if they are not currentlyvisible. For instance
$('div:visible')
would return those HTML
div
elements that are currently visible. Amore complex example
$('div,p').filter(':visible')
- would return all HTML
div
&
p
elements that arecurrently visible.
Inversion/Negation:not
- Inverts the effect of the previously applied condition(s). For instance
$('div,p').filter(':not(:visible)')
would return all HTML
div
&
p
elements that are currently hidden.

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->