Getting your feet wet
                 with jQuery
                                    Benjamin Sterling




Twitter: @bms...
Why jQuery?

•DOM scripting without thinking
•Cross browser support
•A philosophy that makes sense
•Small footprint
•A gre...
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/javascriptqu...
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...
Readable
$(„#mine‟)
.addClass(„active‟)
.find(„ul‟)
.slideDown()
   .children()
       .fadeIn()
       .eq(0)
           ...
Not All Appends Are
  Created Equal
Append Wrong
$(„tr‟)
       .append(„<td></td>‟)
       .append(„<td></td>‟)
       .append(„<td></td>‟)
       .append(„<...
Append Right
varstruct =   [];
Vari = 0;
struct[ i++   ]   =   „<td></td>‟;
struct[ i++   ]   =   „<td></td>‟;
struct[ i++...
Don’t Query
 Be Happy
varmyFuncs = {
       mypage1 :{
              init : function(){}
       },
       mypage2 :{
              init : functi...
Markup-based unobtrusive comprehensive DOM-ready
                        execution
http://paulirish.com/2009/markup-based-...
Selectors
Basic Selectors
Do you know what CSS is?
  Well, that is all there is to basic selectors.

Examples:
  •$('.ClassName')
  ...
Hierarchy Selectors
• ancestor descendant
• parent > child
•prev + next
•prev ~ siblings
Custom Selectors
:first            :has(expr)      :input
:last             :parent         :text
:not(selector)    :hidde...
Combining Selectors
$('a[href^=quot;http://quot;]:not([href^=“http://mysite.comquot;])‟)

    • Selects all “a” tags
    •...
Traversing
Traversing
•22 built in traversing methods
•The ones we'll focus on
   •.eq()
   •.is()
   •.hasClass()
   •.not()
   •.ch...
.eq(N)
<ul id=quot;navquot;>                         $('#nav a').eq(1);
<li><a href=quot;#quot;>Link 1</a></li>        ret...
.is(expr)
<ul id=quot;navquot;>                         $('#nav a').eq(1).is('a');
<li><a href=quot;#quot;>Link 1</a></li>...
.hasClass(expr)
<ul id=quot;navquot;>                         $('#nav a').eq(1).hasClass('active');
<li><a href=quot;#quot...
.not(expr)
<ul id=quot;navquot;>                         $('#nav a')
<li><a href=quot;#quot;>Link 1</a></li>            .n...
Family Methods
My Family DOM

                     MOM

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     Chase      Dest...
$(‘Mom’)

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     Chase      Destiny  ...
$(‘Mom’).children()

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     Chase    ...
$(‘me’)

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     Chase      Destiny   ...
$(‘me’).siblings()

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     Chase     ...
$(‘me’).siblings().eq(2)

                       Mom

Jim     Bern      Me      Quinn        Terry   Ian

         Amber  ...
$(‘me’).siblings().andSelf()

                    Mom

Jim   Bern      Quinn      Terry   Ian      Me

      Amber      De...
$(‘me’).parent().children()

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     C...
$(‘me’).next()

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     Chase      Des...
$(‘me’).nextAll()

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     Chase      ...
$(‘me’).prev()

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     Chase      Des...
$(‘me’).prevAll()

                    Mom

Jim   Bern     Me         Quinn      Terry   Ian

      Amber    Chase       D...
$(‘me’).next().end()

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

       Amber    Chase   ...
$(‘me’).children()

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     Chase     ...
$(‘chase’).parent()

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

      Amber     Chase    ...
$(‘chase’).parents()

                     Mom

Jim   Bern      Me      Quinn        Terry   Ian

       Amber    Chase   ...
.parent() vs .parents()
<table>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<input type=quot;checkboxquot;/>
</td>
</tr>
</tbody>
...
$(‘chase’).closest(‘Mom’)
                      Mom.grandmom




                        Mom.mom




Jim   Bern       Me  ...
parents() v. closest()
<table>
<tr>
<td>
<table>
<tr>
<td>
<input type=quot;checkboxquot;/>
</td>
</tr>
</table>
</td>
</t...
$(‘chase’).offsetParent()

                            Mom{position:relative;}
                     Mom

Jim   Bern      M...
Questions?

Twitter: bmsterling
Skype: benjamin.sterling
AIM: thekenzoco
Email: benjamin.sterling@kenzomedia.com
Blog: htt...
Upcoming SlideShare
Loading in...5
×

Getting Your Feet Wet With jQuery

677

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
677
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Name: Benjamin SterlingGive some background on why you are important to listen to.
  • The methods just make sense, .css manages styles, .attr manages attributes, and so onCross browser support: Works in all major browsers FF 1.3 IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome and with support for Safari, you automatically have support for Adobe AIR, and TitaniumA philosophy that makes sense, select something, so something with itSmall footprint: With gzip on on the server, the files size is about 19kb. If you use the Google code base, which I will show you shortly, it could already be cached from a previous site the end user vistited.The community is great! Either via the mailing list, the IRC channel, and Twitter, everyone is willing to helpEveryone is doing it: peer pressure will make you do anything.
  • My first tip is not so as a “have to do” tip but is probably pretty useful.
  • The benefit to using this is two fold, 1) if everyone is using it that means that your end user will have it cached which will improve load time, 2) keeps load off your server. The file size my be small, but if you have a high traffic site, things could add up.End user may already have it cachedKeeps the load off your server
  • Saving information learned during a previous operation to be used in future operations.Why do you do this? Well, it’s just good practice, especially if you will be making that same call more then once.First two examples are your basic selecting of an itemThe last is a DOM element that you are appending to the body for more manipulations later
  • jQuery has made it easy to lump a bunch of functions togetherjQuery has also made us make bad looking code
  • Why is this better, other then because I say so and my word is gold?So in our first example you are looking at 96 or so function calls and in the second you are looking at 36 function calls which is the difference of about 3 milli-seconds, which is not a whole lot but can add up.
  • This is not just a cute statement. With the beauty that is the .ready() method, we can become complacent and just add all selections – that may not be site wide – to a core file and a singe .ready() call. I found in building my Web based training framework that I was making many queries that did not need to be made for each page and in turn, slowed down that app unnecessarily. How do you fix this you ask?
  • :nth-child() selects more then a single item unlike eq()
  • Combining selectors will become second nature to you and should be.:gt() Matches all elements with an index above the given one.
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • End with: So, what if you wanted to select all my bros, sisters and myself in the correct order?Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Points to make:$(‘chase’).closest(‘mom’)Imagine a checkbox that is in a td that is in a table that is nested with in a table, closest is beneficial if you need to select the immediate parent table of the checkbox but there is no real distinguishable attributes of said table.
  • Points to make:$(‘mom’) selects mom$(‘mom’).children() selects jim, bern, me, quinn, terry ian$(‘me’) selects me$(‘me’).siblings() selects jim, bern, quinn, terry, ian.andSelf() adds me to the end of the list$(‘me’).prev() selects bern.prevAll() selects bern, jim (will be in reversed order)$(‘me’).next() selects quin$(‘me’).nextAll()$(‘me’).children() selects chase$(‘chase’).parent() selects me$(‘chase’).parents() selects me, mom$(‘chase’).offsetParent() selects the first parent that has a position of relative or absolute
  • Getting Your Feet Wet With jQuery

    1. 1. Getting your feet wet with jQuery Benjamin Sterling Twitter: @bmsterling | AIM: thekenzoco | Skype: benjamin.sterling
    2. 2. Why jQuery? •DOM scripting without thinking •Cross browser support •A philosophy that makes sense •Small footprint •A great community •Everyone is doing it
    3. 3. Our Focus • Things You Should Know • Selecting • Caching • Traversing
    4. 4. Things to know
    5. 5. 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/
    6. 6. Cold HardCache varjqmyDiv = $(„#myDiv‟); // or var $myDiv = $(„#myDiv‟); // and VarjqUL = $(„<ul>‟).appendTo(„body‟);
    7. 7. Chaining is good, Making it readable is better
    8. 8. Not Readable $(„#mine‟).addClass(„active‟).find(„ul‟).slideDown() .children().fadeIn().eq(0).find(„a‟).click().end() .end().removeAttr(„style‟).end() .addClass(„highlight‟,1000);
    9. 9. Readable $(„#mine‟) .addClass(„active‟) .find(„ul‟) .slideDown() .children() .fadeIn() .eq(0) .find(„a‟) .click() .end() .end() .removeAttr(„style‟) .end() .addClass(„highlight‟,1000);
    10. 10. Not All Appends Are Created Equal
    11. 11. Append Wrong $(„tr‟) .append(„<td></td>‟) .append(„<td></td>‟) .append(„<td></td>‟) .append(„<td></td>‟) .append(„<td></td>‟) .append(„<td></td>‟);
    12. 12. 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(„‟) );
    13. 13. Don’t Query Be Happy
    14. 14. varmyFuncs = { mypage1 :{ init : function(){} }, mypage2 :{ init : function(){} } } $(document).ready(function(){ var id = $('body').attr('id'); myFuncs[id].init(); }); <body id=quot;mypage1quot;>
    15. 15. 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()
    16. 16. Selectors
    17. 17. Basic Selectors Do you know what CSS is? Well, that is all there is to basic selectors. Examples: •$('.ClassName') •$('#ID') •$('HtmlElement')
    18. 18. Hierarchy Selectors • ancestor descendant • parent > child •prev + next •prev ~ siblings
    19. 19. 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
    20. 20. 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
    21. 21. Traversing
    22. 22. Traversing •22 built in traversing methods •The ones we'll focus on •.eq() •.is() •.hasClass() •.not() •.children() •.parent() •.parents() •.closest() •.siblings() •.next()/.prev() •.end()
    23. 23. .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>
    24. 24. .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>
    25. 25. .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>
    26. 26. .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>
    27. 27. Family Methods
    28. 28. My Family DOM MOM Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    29. 29. $(‘Mom’) Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    30. 30. $(‘Mom’).children() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    31. 31. $(‘me’) Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    32. 32. $(‘me’).siblings() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    33. 33. $(‘me’).siblings().eq(2) Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    34. 34. $(‘me’).siblings().andSelf() Mom Jim Bern Quinn Terry Ian Me Amber Destiny Kieran Chase Skylar Brianna Declan
    35. 35. $(‘me’).parent().children() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    36. 36. $(‘me’).next() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    37. 37. $(‘me’).nextAll() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    38. 38. $(‘me’).prev() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    39. 39. $(‘me’).prevAll() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    40. 40. $(‘me’).next().end() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    41. 41. $(‘me’).children() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    42. 42. $(‘chase’).parent() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    43. 43. $(‘chase’).parents() Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    44. 44. .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'); });
    45. 45. $(‘chase’).closest(‘Mom’) Mom.grandmom Mom.mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    46. 46. 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 });
    47. 47. $(‘chase’).offsetParent() Mom{position:relative;} Mom Jim Bern Me Quinn Terry Ian Amber Chase Destiny Kieran Skylar Brianna Declan
    48. 48. Questions? Twitter: bmsterling Skype: benjamin.sterling AIM: thekenzoco Email: benjamin.sterling@kenzomedia.com Blog: http://benjaminsterling.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×