Getting Your Feet Wet With jQuery
Upcoming SlideShare
Loading in...5
×
 

Getting Your Feet Wet With jQuery

on

  • 1,287 views

 

Statistics

Views

Total Views
1,287
Views on SlideShare
1,281
Embed Views
6

Actions

Likes
0
Downloads
12
Comments
0

3 Embeds 6

http://www.linkedin.com 3
http://www.slideshare.net 2
http://localhost 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Getting Your Feet Wet With jQuery Presentation Transcript

  • 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