jQuery
jQuery



                                      jQuery
    •   Browsere
    •   Librării
    •   jQuery
    •   DOM
    • ...
jQuery



                                      Browsere
                        function returnTarget(e){
    Firefox    ...
jQuery



                          Librării javaScript
    • Te concentrezi mai mult pe funcţionalitate şi
      mai puţi...
jQuery



                     Popularitea librăriilor




    Prototype                                  Yahoo UI
    jQu...
jQuery



                                      jQuery
    jQuery.com
    John Resig – Ian 2006
    Licenţă duală MIT si G...
jQuery



                              De ce jQuery?
    • Poate fi folosită cu alte librării
    • Codul pur javaScript ...
jQuery



                jQuery – funcţii de bază
    $('')                             – returnează obiecte jQuery

    ...
jQuery



                            DOM - Selectori
    $('#nr')                  -   id
    $('.item')                -...
jQuery



                            jQuery – Iterare
    $('.menuItem').each(function(div){
         //stuff
    })
    ...
jQuery



                            DOM - Selectori
    $('a[title]') – ancorele cu atributul titlu
    $('a[alt="main"]...
jQuery



                             DOM - Atribute
    $('a').attr('href')
    $('a').attr('href','http://google.com')
...
jQuery



                        DOM - Traversare
    .children(exp)                    - copii selecţiei curente
    .si...
jQuery



                        DOM - Manipulare
    .html()
    .text()

    $('a').append('</b>').prepend('<b>')
     ...
jQuery



                                      CSS
    .css('width')
    .css('width','100px')
    .css('background-color...
jQuery



                                DOM - Altele
    Q: Cum se accesează elementul DOM dintr-un
      obiect jQuery?...
jQuery



                                 Evenimente
    $('div').mouseover(function(){
       $(this).css('background-co...
jQuery



                                 Evenimente
    onload


    $(document).ready(function(){
      alert('dom read...
jQuery



                                      Efecte
    .show([speed[,callback]])            toggle(…)
    .hide([speed...
jQuery



                                      AJAX
    $('#menu').load('menu.php');

    $.get(url,[data],[callback],[ty...
jQuery



                                      Pluginuri
    jQuery.fn.slowHighlight = function(background, time)
    {
 ...
jQuery




                                Întrebări?




Mihai Oaida <mihai.oaida@gmail.com>          21
Upcoming SlideShare
Loading in …5
×

jQuery - GeekMeet Timisoara

1,111 views

Published on

Libraria jQuery. Utilitatea ei. Selectori, modul de manipulare al elementelor si evenimentelor, construirea unui plugin si multe altele.

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
1,111
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery - GeekMeet Timisoara

  1. 1. jQuery
  2. 2. jQuery jQuery • Browsere • Librării • jQuery • DOM • Evenimente • Animaţii • Ajax Mihai Oaida <mihai.oaida@gmail.com> 01
  3. 3. jQuery Browsere function returnTarget(e){ Firefox var targ; if (!e) var e = window.event; IE 6 | 7 if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; Opera if (targ.nodeType == 3) //defeat Safari bug Safari targ = targ.parentNode; return targ; } elem.onclick=function(e){ elem=returnTarget(e) } http://infoeducatie.ro/order.js Mihai Oaida <mihai.oaida@gmail.com> 02
  4. 4. jQuery Librării javaScript • Te concentrezi mai mult pe funcţionalitate şi mai puţin pe buguri şi hack-uri • Lucrurile se fac mai repede • Este mai simplu de garantat funcţionalitatea cross browser Mihai Oaida <mihai.oaida@gmail.com> 03
  5. 5. jQuery Popularitea librăriilor Prototype Yahoo UI jQuery DOJO Mihai Oaida <mihai.oaida@gmail.com> 04
  6. 6. jQuery jQuery jQuery.com John Resig – Ian 2006 Licenţă duală MIT si GNU Avantaje Dom query – (css 1 – 3 ,xpath) Inlănţuirea obiectelor Mărime mică 15Kb (Comprimată) Cross browser IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ Mihai Oaida <mihai.oaida@gmail.com> 05
  7. 7. jQuery De ce jQuery? • Poate fi folosită cu alte librării • Codul pur javaScript funcţionează • Scris sa fie intuitiv (write less do more) • Documentată bine + exemple • Multe plugin-uri, documentate • Multe tutoriale • Se învaţă usor Google • Usor extensibilă Amazon • Unobtrusive javascript Digg Mihai Oaida <mihai.oaida@gmail.com> 06
  8. 8. jQuery jQuery – funcţii de bază $('') – returnează obiecte jQuery jQuery.fn.extend – pluginuri jQuery.noConflict() – foloseşte jQuery în loc de $ Majoritatea operaţiunilor 1 găseşte elemente 2 aplică/scoate stiluri, handlere,etc Mihai Oaida <mihai.oaida@gmail.com> 07
  9. 9. jQuery DOM - Selectori $('#nr') - id $('.item') - clasă $('a') - element $('span,p') - elemente $('*') - toate elementele $('li a') - descendent indirect $('li > a') - descendent direct $('a:first')- prima ancoră $('td:even')- poziţii pare $('a:eq(4)')- a 4-a ancoră Mihai Oaida <mihai.oaida@gmail.com> 08
  10. 10. jQuery jQuery – Iterare $('.menuItem').each(function(div){ //stuff }) $('a').size() Mihai Oaida <mihai.oaida@gmail.com> 09
  11. 11. jQuery DOM - Selectori $('a[title]') – ancorele cu atributul titlu $('a[alt="main"]') $('input[type="text"]') = $('input:text') $(':file') $(':password') $(':radio') $(':checkbox') Mihai Oaida <mihai.oaida@gmail.com> 10
  12. 12. jQuery DOM - Atribute $('a').attr('href') $('a').attr('href','http://google.com') $('a').removeAttr('title') $('.item').addClass('item2').removeClass('item') $('#item').hasClass('marked') $('#mainMenu').html() – conţinutul html Mihai Oaida <mihai.oaida@gmail.com> 11
  13. 13. jQuery DOM - Traversare .children(exp) - copii selecţiei curente .siblings(exp) - fraţi .next(exp) - fraţii următori .prev(exp) - fraţii precedenţi .parents(exp) - toţi părinţii .parent(exp) - părintele Mihai Oaida <mihai.oaida@gmail.com> 12
  14. 14. jQuery DOM - Manipulare .html() .text() $('a').append('</b>').prepend('<b>') - wrap la conţinut $('a').before('<p>').after('</p>') - wrap la elemente $('a').wrap('<div></div>') Mihai Oaida <mihai.oaida@gmail.com> 13
  15. 15. jQuery CSS .css('width') .css('width','100px') .css('background-color','red') .height() .width() .offset() Mihai Oaida <mihai.oaida@gmail.com> 14
  16. 16. jQuery DOM - Altele Q: Cum se accesează elementul DOM dintr-un obiect jQuery? R: $('#mainMenu').get(0) document.getElementByid('mainMenu') Mihai Oaida <mihai.oaida@gmail.com> 15
  17. 17. jQuery Evenimente $('div').mouseover(function(){ $(this).css('background-color','red') }).mouseout(function(){ $(this).css('background-color','blue') }) $('.click').click(function(){ $(this).hide() }) Mihai Oaida <mihai.oaida@gmail.com> 16
  18. 18. jQuery Evenimente onload $(document).ready(function(){ alert('dom ready'); }) $(function(){ console.log('dom ready'); }) Mihai Oaida <mihai.oaida@gmail.com> 17
  19. 19. jQuery Efecte .show([speed[,callback]]) toggle(…) .hide([speed[,callback]]) slideToggle(…) .slideUp(…) animate() – animaţii .slideDown(…) custom .fadeIn(…) .fadeOu(…) $('div').click(function(){ $(this).hide(100,function(){ alert('m-am ascuns'); }) }) Mihai Oaida <mihai.oaida@gmail.com> 18
  20. 20. jQuery AJAX $('#menu').load('menu.php'); $.get(url,[data],[callback],[type]) $.ajax callback function(data,textStatus){ } Mihai Oaida <mihai.oaida@gmail.com> 19
  21. 21. jQuery Pluginuri jQuery.fn.slowHighlight = function(background, time) { original = this.css('background-color'); startColor = 'white'; this.css('backgroundColor', background).animate({ backgroundColor: startColor }, time, function(){ $(this).css('backgroundColor', original); }); } Mihai Oaida <mihai.oaida@gmail.com> 20
  22. 22. jQuery Întrebări? Mihai Oaida <mihai.oaida@gmail.com> 21

×