City of Ottawa: “Getting Our Feet Wet” Low Impact Development
getting your feet wet with jquery
-
Upload
benjamin-sterling -
Category
Documents
-
view
1.332 -
download
3
description
Transcript of getting your feet wet with jquery
Getting your feet wet with jQuery
Benjamin Sterling
Twitter: bmsterling | AIM: thekenzoco | Skype: benjamin.sterling
Why jQuery?
•DOM scripting without thinking•Cross browser support•A philosophy that makes sense•Small footprint•A great community•Everyone is doing it
Our Focus•Selecting•Caching•Traversing
Selectors
Basic SelectorsDo you know what CSS is? Well, that is all there is to basic selectors.
Examples:•$('.ClassName')•$('#ID')•$('HtmlElement')
Hierarchy Selectors•ancestor descendant •parent > child•prev + next•prev ~ siblings
Custom Selectors:first:last:not(selector) :even:odd:eq(index):gt(index) :lt(index):header:animated:contains(text):empty
:input:text:password:radio:checkbox:submit:image:reset:button:file
:has(selector):parent:hidden:visible:nth-child(N):first-child:last-child:only-child:enabled:disabled:checked:selected
Caching
Caching•Local storage of remote data designed to reduce network transfers.•Saving information learned during a previous operation to be used in future operations.
Cachingvar jqMainMenu = $('#mainmenu');
var $mainMenu = $('#mainmenu');
Traversing
Traversing•22 built in traversing methods•The ones we'll focus on
•.eq()•.is()•.hasClass()•.not()•.children()•.parent()•.parents()•.siblings()•.next()/.prev()•.end()
.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>
.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
.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
.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
My Family DOM
.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 ????
.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
.parent() vs .parents()
.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
.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
.siblings()
.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)
.prev() / .next() / .end()
.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
closing
http://docs.jquery.com/
http://remysharp.com/jquery-api/
Questions?
Twitter: bmsterlingSkype: benjamin.sterlingAIM: thekenzocoEmail: [email protected]: http://benjaminsterling.com