

♥













<script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
jQuery
<script>
$('body').fadeOut();
</script>
$
$('img').hide();
$(':link').attr('target', '_blank');
$('h1').css('font-size', '72px');
('selector').action();
$('selector').action();


body {font-family: serif;}
img.thumbnail {margin: 20px;}
#topHeading {font-size: xx-large;}
jQuery‫מאפשרת‬
document.g...
<body>
<ul>
<li><a href="http://google.com">Google</a></li>
<li><a href="details.pdf">Download PDF</a></li>
<li><a href="h...
<body>
<ul id="nav">
<li><a href="http://google.com">Google</a></li>
<li><a href="details.pdf">Download PDF</a></li>
<li><...
<body>
<ul id="nav">
<li><a href="http://google.com">Google</a></li>
<li><a href="details.pdf">Download PDF</a></li>
<li><...
$('selector').action();
‫המלאה‬ ‫הרשימה‬←
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$('h1').css('color', 'red'); // h1 tag doesn't ex...


$('table#Top100Bands').dataTable();
Var myFlux = $('#slider').flux({
autoplay: false,
transitions: ['warp', 'bars3d']
...
$('selector').action();
jQuery

 $('<div>Any HTML can go here</div>'); // Creates HTML elements
 $(document.getElementByTagName('p')); // Wrap...







jQuery

$('h1').css('color');
$('h1').css('color', 'red');


$(':password').addClass('error').val('').first().focu...
http://api.jquery.com/
http://try.jquery.com/
http://learnjquery.tutsplus.com/
http://www.unheap.com/
להכיר ולחשוב jQuery
להכיר ולחשוב jQuery
להכיר ולחשוב jQuery
להכיר ולחשוב jQuery
Upcoming SlideShare
Loading in …5
×

להכיר ולחשוב jQuery

1,323 views

Published on

מומלץ להוריד את הקובץ למחשב בשביל איכות טובה.
מתוך הרצאה בסדרת Open Academy, שנערכה ב-Campus TLV של Google ב-24 ביולי 2013.

וידאו של ההרצאה והתרגול כאן: http://www.isoc.org.il/openacademy/html5/lecturers.php?course_id=0&session_id=0&lecturer_id=7&v=1

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

  • Be the first to like this

No Downloads
Views
Total views
1,323
On SlideShare
0
From Embeds
0
Number of Embeds
819
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

להכיר ולחשוב jQuery

  1. 1.   ♥
  2. 2.    
  3. 3.    
  4. 4.     
  5. 5. <script> <script src="http://code.jquery.com/jquery-latest.js"></script> jQuery <script> $('body').fadeOut(); </script>
  6. 6. $ $('img').hide(); $(':link').attr('target', '_blank'); $('h1').css('font-size', '72px'); ('selector').action();
  7. 7. $('selector').action();
  8. 8.   body {font-family: serif;} img.thumbnail {margin: 20px;} #topHeading {font-size: xx-large;} jQuery‫מאפשרת‬ document.getElementById('myHeading') $('#topHeading')
  9. 9. <body> <ul> <li><a href="http://google.com">Google</a></li> <li><a href="details.pdf">Download PDF</a></li> <li><a href="http://reallygood.co.il">Really Good</a></li> </ul> <a href="#top">This link is unrelated</a> </body> ali -> ali a
  10. 10. <body> <ul id="nav"> <li><a href="http://google.com">Google</a></li> <li><a href="details.pdf">Download PDF</a></li> <li><a href="http://reallygood.co.il">Really Good</a></li> </ul> <ul><li>This list is unrelated</li></ul> </body> ul a#navul#nav aul #nav a
  11. 11. <body> <ul id="nav"> <li><a href="http://google.com">Google</a></li> <li><a href="details.pdf">Download PDF</a></li> <li><a href="http://reallygood.co.il">Really Good</a></li> </ul> </body> a:linkul > ali [href]
  12. 12. $('selector').action();
  13. 13. ‫המלאה‬ ‫הרשימה‬←
  14. 14. <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $('h1').css('color', 'red'); // h1 tag doesn't exist yet </script> <h1>Doing it wrong</h1> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $('h1').css('color', 'red'); }); </script> <h1>This is better</h1>
  15. 15.   $('table#Top100Bands').dataTable(); Var myFlux = $('#slider').flux({ autoplay: false, transitions: ['warp', 'bars3d'] }); 
  16. 16. $('selector').action();
  17. 17. jQuery   $('<div>Any HTML can go here</div>'); // Creates HTML elements  $(document.getElementByTagName('p')); // Wraps DOM elements with $  $([4, 8, 15, 16, 23, 42]); // Any array or object  $(function(){}); // Any function, same as $(document).ready(...)
  18. 18.     
  19. 19.   jQuery  $('h1').css('color'); $('h1').css('color', 'red');   $(':password').addClass('error').val('').first().focus(); ‫נראה‬ ‫זה‬ ‫ככה‬←
  20. 20. http://api.jquery.com/ http://try.jquery.com/ http://learnjquery.tutsplus.com/ http://www.unheap.com/

×