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

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 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(„‟) );

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()

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
•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> $('#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>
</ul>
</li>
<li>
<a href=quot;#quot;>Link 3</a>
<ul>
</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 3</a></li> $('#nav a').eq(3).is(':odd');
<li> returns false
$('#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>
<ul>
</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 3</a></li> $('#nav a').eq(4).hasClass('active')
<li> returns true
<ul>
href=quot;#quot;>Sub Link 1</a></li>
</ul>
</li>
<li>
<ul>
</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 3</a></li> $('#nav a')
<li> .not(':eq(1),:even')
<ul>
href=quot;#quot;>Sub Link 1</a></li>
</ul>
</li>
<li>
<ul>
</ul>
</li>
</ul>

My Family DOM

MOM

Jim Bern Me Quinn Terry Ian

Amber Chase Destiny Kieran

Skylar Brianna Declan

$(‘Mom’)

Mom




$(‘Mom’).children()

Mom




$(‘me’)

Mom




$(‘me’).siblings()

Mom




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

Mom




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

Mom

Jim Bern Quinn Terry Ian Me

Amber Destiny Kieran Chase


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

Mom




$(‘me’).next()

Mom




$(‘me’).nextAll()

Mom




$(‘me’).prev()

Mom




$(‘me’).prevAll()

Mom




$(‘me’).next().end()

Mom




$(‘me’).children()

Mom




$(‘chase’).parent()

Mom




$(‘chase’).parents()

Mom




.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




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




Questions?

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

Getting Your Feet Wet With jQuery

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (17)

En vedette

En vedette (8)

Getting Your Feet Wet With jQuery

Notes de l'éditeur