![Designerly
Syntax
• CSS • jQuery
a[rel=nofollow] $(‘a[rel=nofollow]’)
#content
>
p
{
} $(‘#content
>
p’)
tr:nth‐child(even)
{
} $(‘tr:nth‐child(even)’)](https://image.slidesharecdn.com/2619856/85/bcgr3-jquery-7-320.jpg)
![DOM
ScripRng
if (!document.getElementsByTagName) return false;
var quotes = document.getElementsByTagName("blockquote");
for (var i=0; i<quotes.length; i++) {
var source = quotes[i].getAttribute("cite");
if (source) {
var link = document.createElement("a");
link.setAttribute("href",source);
var text = document.createTextNode("source");
link.appendChild(text);
var para = document.createElement("p");
para.className = "attribution";
para.appendChild(link);
quotes[i].appendChild(para);
}
}](https://image.slidesharecdn.com/2619856/85/bcgr3-jquery-12-320.jpg)
![jQuery
$('blockquote[cite]').each(function() {
$('<p class="attribution"></p>')
.append('<a href="' + $(this).attr('cite') + '">source</a>')
.appendTo($(this));
});](https://image.slidesharecdn.com/2619856/85/bcgr3-jquery-13-320.jpg)
bcgr3-jquery
- 2. jQuery in the Wild • Bank of America • Trac • Intuit • mozdev • Google • Drupal • NBC • PEAR • Slashdot • Zend Framework • Sourceforge • WordPress • SPIP • Warner Bros. Records • Symfony • Newsweek
- 3. jQuery Benefits • From beginner to advanced • At its core, a simple concept • Unobtrusive from the ground up • Small file size(s) • Easy Plugin API • Excellent documentaRon • Thriving, Smart, Helpful Community
- 4. Find Something, Do Something • $(‘tbody tr:nth‐child(even)’) .addClass(‘alt’);
- 5. Unobtrusive Behavior Content Presentation jquery.js index.html style.css custom.js
- 6. Designerly Syntax • CSS • jQuery p { } $(‘p’) .menu { } $(‘.menu’) #content { } $(‘#content’)
- 7. Designerly Syntax • CSS • jQuery a[rel=nofollow] $(‘a[rel=nofollow]’) #content > p { } $(‘#content > p’) tr:nth‐child(even) { } $(‘tr:nth‐child(even)’)
- 9. DOM ScripRng var x,y; if (self.innerHeight) { // all except Explorer x = self.innerWidth; y = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode x = document.documentElement.clientWidth; y = document.documentElement.clientHeight; } else if (document.body) { // other Explorers x = document.body.clientWidth; y = document.body.clientHeight; }
- 10. jQuery var x = $(window).width(); var y = $(window).height();
- 11. Example • Find a blockquote with a cite adribute <blockquote cite=“hdp://cnn.com”> … • Create a link to the URL of the cite adribute <a href=“hdp://cnn.com”>source</a> • Place the link in a new paragraph at the end of the blockquote.
- 12. DOM ScripRng if (!document.getElementsByTagName) return false; var quotes = document.getElementsByTagName("blockquote"); for (var i=0; i<quotes.length; i++) { var source = quotes[i].getAttribute("cite"); if (source) { var link = document.createElement("a"); link.setAttribute("href",source); var text = document.createTextNode("source"); link.appendChild(text); var para = document.createElement("p"); para.className = "attribution"; para.appendChild(link); quotes[i].appendChild(para); } }
- 13. jQuery $('blockquote[cite]').each(function() { $('<p class="attribution"></p>') .append('<a href="' + $(this).attr('cite') + '">source</a>') .appendTo($(this)); });
- 15. Referencing Scripts in the <head> • Typical setup • jQuery file goes first <head> <!-- stuff --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script> <script src="custom.js" type="text/javascript"></script> <!-- more stuff --> </head>
- 16. Document Ready • Binds a funcRon to be executed as soon as the DOM has been successfully loaded... • Before images load • A.er stylesheets load (for now) • Usually beder than window.onload
- 17. Document Ready: Code $(document).ready(function() { // Stuff to do as soon as the DOM is ready; });
- 18. Document Ready: VarieRes • $(document).ready(function() {/* */}); • $().ready(function() {/* */}); • $(function() {/* */}); • jQuery(function($) {/* /*});
- 19. Document Ready: • MulRple document ready funcRons are fine. • Scope may be an issue. $(document).ready(function() { var mood = ‘happy’; }); $(document).ready(function() { try { alert(mood); // no alert } catch(err) { alert(err); // "ReferenceError: mood is not defined" } });
- 20. Document Ready: • MulRple document ready funcRons are fine. • Scope may be an issue. $(document).ready(function() { var $.mood = ‘happy’; }); $(document).ready(function() { try { alert($.mood); // "happy" } catch(err) { alert(err); // no alert } });
- 21. Document Ready: • When <script> is inside <body> (someRmes) <body> <!-- more stuff --> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> // no document ready here </script> </body>
- 22. Document Ready When Not to Use • When images need to be loaded first $(window).bind('load', function() { // do something with images }
- 23. DocumentaRon • Official DocumentaRon • Books – API: docs.jquery.com – Learning jQuery – FAQ – jQuery in AcRon – Tutorials – more in the works • Tutorial Sites – learningjquery.com – jqueryminute.com – jqueryfordesigners.com – many more!
- 24. The Community • jQuery “evangelism” • Google Groups – jquery‐en – jquery‐dev – jquery‐ui • planet.jquery.com • IRC – freenode.net #jquery • Twider – @jquery, @jquery‐ui