Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Getting Your Feet Wet With jQuery
1. Getting your feet wet
with jQuery
Benjamin Sterling
Twitter: @bmsterling | AIM: thekenzoco | Skype: benjamin.sterling
2. Why jQuery?
•DOM scripting without thinking
•Cross browser support
•A philosophy that makes sense
•Small footprint
•A great community
•Everyone is doing it
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. Cold HardCache
varjqmyDiv = $(„#myDiv‟);
// or
var $myDiv = $(„#myDiv‟);
// and
VarjqUL = $(„<ul>‟).appendTo(„body‟);
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
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