Getting Your Feet Wet With jQuery1. Getting your feet wet
with jQuery
Benjamin Sterling
Twitter: bmsterling | AIM: thekenzoco | Skype:
benjamin.sterling
2. Why jQuery?
•DOM scripting without thinking
•Cross browser support
•A philosophy that makes sense
•Small footprint
•A great community
•Everyone is doing it
5. Basic Selectors
Do you know what CSS is?
Well, that is all there is to basic selectors.
Examples:
•$('.ClassName')
•$('#ID')
•$('HtmlElement')
9. Caching
•Local storage of remote data
designed to reduce network
transfers.
•Saving information learned during
a previous operation to be used in
future operations.
12. Traversing
•22 built in traversing methods
•The ones we'll focus on
•.eq()
•.is()
•.hasClass()
•.not()
•.children()
•.parent()
•.parents()
•.siblings()
•.next()/.prev()
•.end()
13. .eq(N)
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
</ul>
</li>
</ul>
$('#nav a').eq(1);
returns <a href="#">Link 2</a>
$('#nav a').eq(4)
returns <a href="#">Sub Link 1</a>
14. .is(expr)
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#" class="active">Sub Link
1</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
</ul>
</li>
</ul>
$('#nav a').eq(1).is('a');
returns true
$('#nav a').eq(1).is(':odd');
returns false
$('#nav a').eq(1).is(':only-child');
returns false
$('#nav a').eq(4).is('.active')
returns true
15. .hasClass(expr)
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#" class="active">Sub Link
1</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
</ul>
</li>
</ul>
$('#nav a').eq(1).hasClass('active');
returns false
$('#nav a').eq(4).hasClass('active')
returns true
16. .not(expr)
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#" class="active">Sub Link
1</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
</ul>
</li>
</ul>
$('#nav a').eq(1).not('.active');
returns true
$('#nav a').eq(4).not('a')
returns false
18. .children(expr)
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#" class="active">Sub Link
1</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
</ul>
</li>
</ul>
$('#nav').children()
returns ????
$('#nav').children('li')
returns ????
19. .children(expr)
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#" class="active">Sub Link
1</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
</ul>
</li>
</ul>
$('#nav').children()
returns five child LI
$('#nav').children('li')
returns five child LI
21. .parent(expr)
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#" class="active">Sub Link
1</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
</ul>
</li>
</ul>
$('.active').parent()
returns LI
$('.active').parent().parent()
returns UL
$('.active').parent().parent().parent()
returns LI
$('.active').parent().parent().parent().parent()
returns UL#nav
22. .parents(expr)
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#" class="active">Sub Link
1</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
</ul>
</li>
</ul>
$('.active').parents()
returns LI, UL, LI, UL#nav, BODY, HTML
$('.active').parents('#nav')
returns UL#nav
24. .siblings(expr)
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#" class="active">Sub Link
1</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
</ul>
</li>
</ul>
$('li:eq(2)').siblings()
returns 4 LI
$('li:eq(2)').siblings(':not(:has(a.active))')
returns 3
$
('li:eq(2)').siblings(':not(:has(a.active))').andSelf
()
returns 4 LI (includes the third LI also)
26. .prev() / .next() / .end()
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#" class="active">Sub Link
1</a></li>
<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
</ul>
</li>
</ul>
$('li:eq(2)').next()
returns forth LI under #nav
$('li:eq(2)').prev()
returns second LI under #nav
$('li:eq(2)').next().end().prev()
returns second LI under #nav