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 • Things You Should Know • Selecting • Caching • Traversing

Things to know

Google AJAX Libraries API <script src=quot;http://www.google.com/jsapiquot;></script> <script type=quot;text/javascriptquot;> google.load(quot;jqueryquot;, quot;1.3.2quot;); google.load(quot;jqueryuiquot;, quot;1.7.1quot;); </script> More info @ http://code.google.com/apis/ajaxlibs/documentation/

Cold HardCache varjqmyDiv = $(„#myDiv‟); // or var $myDiv = $(„#myDiv‟); // and VarjqUL = $(„<ul>‟).appendTo(„body‟);

Chaining is good, Making it readable is better

Not Readable $(„#mine‟).addClass(„active‟).find(„ul‟).slideDown() .children().fadeIn().eq(0).find(„a‟).click().end() .end().removeAttr(„style‟).end() .addClass(„highlight‟,1000);

Readable $(„#mine‟) .addClass(„active‟) .find(„ul‟) .slideDown() .children() .fadeIn() .eq(0) .find(„a‟) .click() .end() .end() .removeAttr(„style‟) .end() .addClass(„highlight‟,1000);

Not All Appends Are Created Equal

Append Wrong $(„tr‟) .append(„<td></td>‟) .append(„<td></td>‟) .append(„<td></td>‟) .append(„<td></td>‟) .append(„<td></td>‟) .append(„<td></td>‟);

Append Right varstruct = []; Vari = 0; struct[ i++ ] = „<td></td>‟; struct[ i++ ] = „<td></td>‟; struct[ i++ ] = „<td></td>‟; struct[ i++ ] = „<td></td>‟; struct[ i++ ] = „<td></td>‟; struct[ i++ ] = „<td></td>‟; $(„tr‟).append( struct.join(„‟) );

Don’t Query Be Happy

varmyFuncs = { mypage1 :{ init : function(){} }, mypage2 :{ init : function(){} } } $(document).ready(function(){ var id = $('body').attr('id'); myFuncs[id].init(); }); <body id=quot;mypage1quot;>

Markup-based unobtrusive comprehensive DOM-ready execution http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready- execution/ FOO = { common : { init : function(){ ... }, finalize : function(){ ... } }, shopping : { init : function(){ ... }, cart : function(){ ... }, category : function(){ ... } } } <body id=quot;cartquot; class=quot;shoppingquot;> UTIL.fire is calling: FOO.common.init() UTIL.fire is calling: FOO.shopping.init() UTIL.fire is calling: FOO.shopping.cart() UTIL.fire is calling: FOO.common.finalize()

Selectors

Basic Selectors Do 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 :has(expr) :input :last :parent :text :not(selector) :hidden :password :even :visible :radio :odd :nth-child(N) :checkbox :eq(index) :first-child :submit :gt(index) :last-child :image :lt(index) :only-child :reset :header :enabled :button :animated :disabled :file :contains(text) :checked :empty :selected

Combining Selectors $('a[href^=quot;http://quot;]:not([href^=“http://mysite.comquot;])‟) • Selects all “a” tags • That has a “href” attribute that starts with “http://” • And does NOT have a “href” starts with “http://mysite.com” $(':header:not(h1):gt(0)‟) • Selects all headers on the page (h1 – h6) • That are NOT an h1 tag • And only the ones after the first one

Traversing

Traversing •22 built in traversing methods •The ones we'll focus on •.eq() •.is() •.hasClass() •.not() •.children() •.parent() •.parents() •.closest() •.siblings() •.next()/.prev() •.end()

.eq(N) <ul id=quot;navquot;> $('#nav a').eq(1); <li><a href=quot;#quot;>Link 1</a></li> returns <a href=quot;#quot;>Link 2</a> <li><a href=quot;#quot;>Link 2</a></li> <li><a href=quot;#quot;>Link 3</a></li> <li> $('#nav a').eq(4) <a href=quot;#quot;>Link 4</a> returns <a href=quot;#quot;>Sub Link 1</a> <ul> <li><a href=quot;#quot;>Sub Link 1</a></li> <li><a href=quot;#quot;>Sub Link 2</a></li> </ul> </li> <li> <a href=quot;#quot;>Link 3</a> <ul> <li><a href=quot;#quot;>Sub Link 3</a></li> <li><a href=quot;#quot;>Sub Link 4</a></li> </ul> </li> </ul>

.is(expr) <ul id=quot;navquot;> $('#nav a').eq(1).is('a'); <li><a href=quot;#quot;>Link 1</a></li> returns true <li><a href=quot;#quot;>Link 2</a></li> <li><a href=quot;#quot;>Link 3</a></li> $('#nav a').eq(3).is(':odd'); <li> returns false <a href=quot;#quot;>Link 4</a> $('#nav a').eq(5).is(':only-child'); <ul> returns true <li><a class=“active” href=quot;#quot;>Sub Link 1</a></li> $('#nav a').eq(4).is('.active') <li><a href=quot;#quot;>Sub Link 2</a></li> returns true </ul> </li> <li> <a href=quot;#quot;>Link 3</a> <ul> <li><a href=quot;#quot;>Sub Link 3</a></li> <li><a href=quot;#quot;>Sub Link 4</a></li> </ul> </li> </ul>

.hasClass(expr) <ul id=quot;navquot;> $('#nav a').eq(1).hasClass('active'); <li><a href=quot;#quot;>Link 1</a></li> returns false <li><a href=quot;#quot;>Link 2</a></li> <li><a href=quot;#quot;>Link 3</a></li> $('#nav a').eq(4).hasClass('active') <li> returns true <a href=quot;#quot;>Link 4</a> <ul> <li><a class=“active” href=quot;#quot;>Sub Link 1</a></li> <li><a href=quot;#quot;>Sub Link 2</a></li> </ul> </li> <li> <a href=quot;#quot;>Link 3</a> <ul> <li><a href=quot;#quot;>Sub Link 3</a></li> <li><a href=quot;#quot;>Sub Link 4</a></li> </ul> </li> </ul>

.not(expr) <ul id=quot;navquot;> $('#nav a') <li><a href=quot;#quot;>Link 1</a></li> .not('.active,:odd,:only-child') <li><a href=quot;#quot;>Link 2</a></li> <li><a href=quot;#quot;>Link 3</a></li> $('#nav a') <li> .not(':eq(1),:even') <a href=quot;#quot;>Link 4</a> <ul> <li><a class=“active” href=quot;#quot;>Sub Link 1</a></li> <li><a href=quot;#quot;>Sub Link 2</a></li> </ul> </li> <li> <a href=quot;#quot;>Link 3</a> <ul> <li><a href=quot;#quot;>Sub Link 3</a></li> <li><a href=quot;#quot;>Sub Link 4</a></li> </ul> </li> </ul>

Family Methods

My Family DOM MOM Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘Mom’) Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘Mom’).children() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘me’) Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘me’).siblings() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘me’).siblings().eq(2) Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘me’).siblings().andSelf() Mom Jim Bern Quinn Terry Ian Me Amber Destiny Kieran Chase Skylar Brianna Declan

$(‘me’).parent().children() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘me’).next() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘me’).nextAll() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘me’).prev() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘me’).prevAll() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘me’).next().end() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘me’).children() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘chase’).parent() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

$(‘chase’).parents() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

.parent() vs .parents() <table> <tr> <td> <table> <tbody> <tr> <td> <input type=quot;checkboxquot;/> </td> </tr> </tbody> </table> </td> </tr> </table> $(':checkbox') .change(function(){ $( this ).parent().parent().parent().parent().parent().parent(); $( this ).parents('tr:last'); });

$(‘chase’).closest(‘Mom’) Mom.grandmom Mom.mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

parents() v. closest() <table> <tr> <td> <table> <tr> <td> <input type=quot;checkboxquot;/> </td> </tr> </table> </td> </tr> </table> $(':checkbox') .change(function(){ $( this ).closest('tr'); // returns the closest tr parent $( this ).parents('tr'); // returns both tr parents });

$(‘chase’).offsetParent() Mom{position:relative;} Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan

Questions? Twitter: bmsterling Skype: benjamin.sterling AIM: thekenzoco Email: benjamin.sterling@kenzomedia.com Blog: http://benjaminsterling.com

Getting Your Feet Wet With jQuery

by Benjamin Sterling on May 22, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 3

Statistics

Getting Your Feet Wet With jQuery — Presentation Transcript

http://www.slideshare.net	2
http://localhost	1