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: benjamin.sterling@kenzomedia.comBlog: http://benjaminsterling.com