bcgr3-jquery

514 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
514
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

bcgr3-jquery

  1. 1. jQuery JavaScript Made Easy
  2. 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. 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. 4. Find
Something,
 Do
Something • $(‘tbody
tr:nth‐child(even)’) .addClass(‘alt’);


  5. 5. Unobtrusive Behavior Content Presentation jquery.js index.html style.css custom.js
  6. 6. Designerly
Syntax • CSS • jQuery p
{
} $(‘p’) .menu
{
} $(‘.menu’) #content
{
} $(‘#content’)
  7. 7. Designerly
Syntax • CSS • jQuery a[rel=nofollow] $(‘a[rel=nofollow]’) #content
>
p
{
} $(‘#content
>
p’) tr:nth‐child(even)
{
} $(‘tr:nth‐child(even)’)

  8. 8. Example • Get
the
height
of
the
viewport…
  9. 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. 10. jQuery var x = $(window).width(); var y = $(window).height();
  11. 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. 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. 13. jQuery $('blockquote[cite]').each(function() { $('<p class="attribution"></p>') .append('<a href="' + $(this).attr('cite') + '">source</a>') .appendTo($(this)); });
  14. 14. Gekng
Started • Referencing
Scripts
in
HTML • Document
Ready
  15. 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. 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. 17. Document
Ready: Code $(document).ready(function() { // Stuff to do as soon as the DOM is ready; });
  18. 18. Document
Ready: VarieRes • $(document).ready(function() {/* */}); • $().ready(function() {/* */}); • $(function() {/* */}); • jQuery(function($) {/* /*});
  19. 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. 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. 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. 22. Document
Ready When
Not
to
Use • When
images
need
to
be
loaded
first $(window).bind('load', function() { // do something with images }
  23. 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. 24. The
Community • jQuery
“evangelism” • Google
Groups – jquery‐en – jquery‐dev – jquery‐ui • planet.jquery.com • IRC – freenode.net
#jquery • Twider – @jquery,
@jquery‐ui

×