ACADGILD Webinar - Get your feet wet with Business Analytics
Getting Your Feet Wet With jQuery
-
Upload
benjamin-sterling -
Category
Technology
-
view
1.470 -
download
2
description
Transcript of Getting Your Feet Wet With jQuery
![Page 1: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/1.jpg)
Getting your feet wet with jQuery
Benjamin Sterling
Twitter: bmsterling | AIM: thekenzoco | Skype: benjamin.sterling
![Page 2: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/2.jpg)
Why jQuery?
•DOM scripting without thinking•Cross browser support•A philosophy that makes sense•Small footprint•A great community•Everyone is doing it
![Page 3: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/3.jpg)
Our Focus•Selecting•Caching•Traversing
![Page 4: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/4.jpg)
Selectors
![Page 5: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/5.jpg)
Basic SelectorsDo you know what CSS is? Well, that is all there is to basic selectors.
Examples:•$('.ClassName')•$('#ID')•$('HtmlElement')
![Page 6: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/6.jpg)
Hierarchy Selectors•ancestor descendant •parent > child•prev + next•prev ~ siblings
![Page 7: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/7.jpg)
Custom Selectors:first:last:not(selector) :even:odd:eq(index):gt(index) :lt(index):header:animated:contains(text):empty
:input:text:password:radio:checkbox:submit:image:reset:button:file
:has(selector):parent:hidden:visible:nth-child(N):first-child:last-child:only-child:enabled:disabled:checked:selected
![Page 8: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/8.jpg)
Caching
![Page 9: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/9.jpg)
Caching•Local storage of remote data designed to reduce network transfers.•Saving information learned during a previous operation to be used in future operations.
![Page 10: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/10.jpg)
Cachingvar jqMainMenu = $('#mainmenu');
var $mainMenu = $('#mainmenu');
![Page 11: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/11.jpg)
Traversing
![Page 12: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/12.jpg)
Traversing•22 built in traversing methods•The ones we'll focus on
•.eq()•.is()•.hasClass()•.not()•.children()•.parent()•.parents()•.siblings()•.next()/.prev()•.end()
![Page 13: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/13.jpg)
.eq(N)<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li> <a href="#">Link 4</a> <ul> <li><a href="#">Sub Link 1</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li> <a href="#">Link 3</a> <ul> <li><a href="#">Sub Link 3</a></li> <li><a href="#">Sub Link 4</a></li> </ul> </li></ul>
$('#nav a').eq(1); returns <a href="#">Link 2</a>
$('#nav a').eq(4) returns <a href="#">Sub Link 1</a>
![Page 14: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/14.jpg)
.is(expr)<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li> <a href="#">Link 4</a> <ul> <li><a href="#" class="active">Sub Link 1</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li> <a href="#">Link 3</a> <ul> <li><a href="#">Sub Link 3</a></li> <li><a href="#">Sub Link 4</a></li> </ul> </li></ul>
$('#nav a').eq(1).is('a'); returns true
$('#nav a').eq(1).is(':odd'); returns false
$('#nav a').eq(1).is(':only-child'); returns false
$('#nav a').eq(4).is('.active') returns true
![Page 15: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/15.jpg)
.hasClass(expr)<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li> <a href="#">Link 4</a> <ul> <li><a href="#" class="active">Sub Link 1</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li> <a href="#">Link 3</a> <ul> <li><a href="#">Sub Link 3</a></li> <li><a href="#">Sub Link 4</a></li> </ul> </li></ul>
$('#nav a').eq(1).hasClass('active'); returns false
$('#nav a').eq(4).hasClass('active') returns true
![Page 16: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/16.jpg)
.not(expr)<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li> <a href="#">Link 4</a> <ul> <li><a href="#" class="active">Sub Link 1</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li> <a href="#">Link 3</a> <ul> <li><a href="#">Sub Link 3</a></li> <li><a href="#">Sub Link 4</a></li> </ul> </li></ul>
$('#nav a').eq(1).not('.active'); returns true
$('#nav a').eq(4).not('a') returns false
![Page 17: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/17.jpg)
My Family DOM
![Page 18: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/18.jpg)
.children(expr)<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li> <a href="#">Link 4</a> <ul> <li><a href="#" class="active">Sub Link 1</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li> <a href="#">Link 3</a> <ul> <li><a href="#">Sub Link 3</a></li> <li><a href="#">Sub Link 4</a></li> </ul> </li></ul>
$('#nav').children() returns ????
$('#nav').children('li') returns ????
![Page 19: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/19.jpg)
.children(expr)<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li> <a href="#">Link 4</a> <ul> <li><a href="#" class="active">Sub Link 1</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li> <a href="#">Link 3</a> <ul> <li><a href="#">Sub Link 3</a></li> <li><a href="#">Sub Link 4</a></li> </ul> </li></ul>
$('#nav').children() returns five child LI
$('#nav').children('li') returns five child LI
![Page 20: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/20.jpg)
.parent() vs .parents()
![Page 21: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/21.jpg)
.parent(expr)<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li> <a href="#">Link 4</a> <ul> <li><a href="#" class="active">Sub Link 1</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li> <a href="#">Link 3</a> <ul> <li><a href="#">Sub Link 3</a></li> <li><a href="#">Sub Link 4</a></li> </ul> </li></ul>
$('.active').parent() returns LI
$('.active').parent().parent() returns UL
$('.active').parent().parent().parent() returns LI
$('.active').parent().parent().parent().parent() returns UL#nav
![Page 22: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/22.jpg)
.parents(expr)<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li> <a href="#">Link 4</a> <ul> <li><a href="#" class="active">Sub Link 1</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li> <a href="#">Link 3</a> <ul> <li><a href="#">Sub Link 3</a></li> <li><a href="#">Sub Link 4</a></li> </ul> </li></ul>
$('.active').parents() returns LI, UL, LI, UL#nav, BODY, HTML
$('.active').parents('#nav') returns UL#nav
![Page 23: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/23.jpg)
.siblings()
![Page 24: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/24.jpg)
.siblings(expr)<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li> <a href="#">Link 4</a> <ul> <li><a href="#" class="active">Sub Link 1</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li> <a href="#">Link 3</a> <ul> <li><a href="#">Sub Link 3</a></li> <li><a href="#">Sub Link 4</a></li> </ul> </li></ul>
$('li:eq(2)').siblings() returns 4 LI
$('li:eq(2)').siblings(':not(:has(a.active))') returns 3
$('li:eq(2)').siblings(':not(:has(a.active))').andSelf() returns 4 LI (includes the third LI also)
![Page 25: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/25.jpg)
.prev() / .next() / .end()
![Page 26: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/26.jpg)
.prev() / .next() / .end()<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li> <a href="#">Link 4</a> <ul> <li><a href="#" class="active">Sub Link 1</a></li> <li><a href="#">Sub Link 2</a></li> </ul> </li> <li> <a href="#">Link 3</a> <ul> <li><a href="#">Sub Link 3</a></li> <li><a href="#">Sub Link 4</a></li> </ul> </li></ul>
$('li:eq(2)').next() returns forth LI under #nav
$('li:eq(2)').prev() returns second LI under #nav
$('li:eq(2)').next().end().prev() returns second LI under #nav
![Page 27: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/27.jpg)
closing
![Page 28: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/28.jpg)
http://docs.jquery.com/
![Page 29: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/29.jpg)
http://remysharp.com/jquery-api/
![Page 30: Getting Your Feet Wet With jQuery](https://reader034.fdocuments.us/reader034/viewer/2022051816/5477181fb4af9fff4e8b4592/html5/thumbnails/30.jpg)
Questions?
Twitter: bmsterlingSkype: benjamin.sterlingAIM: thekenzocoEmail: [email protected]: http://benjaminsterling.com