jQuery - Wprowadzenie

https://jquery.com/

Dołączanie pliku jQuery z serwera CDN

    
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.3.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.
js"></script>
    
    
    <script >
        $(document).ready(function() {
           // to jest miejsce na nasz kod
        });
    </script>

    

Pobieranie elementów stron

    
    $('selektor')
    $('#banner')
    $('.banner')
    $('#navBar a')
    
    
    $('#banner').html('

Byłem tu, JavaScript

');

Filtry

    
    $('tr:even')
    $('p:first')
    $('p:last')
    $('li:has(a)')
    $('div:hidden').show()
    

Dodawanie treści do stron


    .html()
    .text()
    .append()
    .prepend()
    .before()
    .after()

Zastępowanie i usuwanie wybranych elementów


    .remove()
    .replace()

Ustawianie i odczyt atrybutów znaczników


    .addClass()
    .removeClass()
    ..toggleClass()

Odczyt i modyfikacja właściwości CSS


    .css()
    var bgColor = $('#main').css('background-color');
    $('body').css('font-size', '200%');
    $('#highlightedDiv').css({
      'background-color' : '#FF0000',
      'border' : '2px solid #FE0037'
    });

Wykonanie akcji na każdym elemencie kolekcji

Funkcje anonimowe


    function() {
      // tu jest umieszczany kod funkcji
    }

each()


    $('selektor').each(function(){
        // tu jest umieszczony kod funkcji
    });

$(this)


    var i=1;
    $('p').each(function(){
  var tekst = $(this).text();
    tekst=tekst+i;
    i++;
  $(this).text(tekst)
});

Akcja i reakcja

Mysz

    
    .click()
    
    
    $("p").click(function(){
        $(this).hide();
    });
    

Mysz

    
    $("p").dblclick(function(){
        $(this).hide();
    });
        

Mysz

    
    $("#p1").mouseenter(function(){
        alert("You entered p1!");
    });
        

Mysz

    
    $("#p1").hover(function(){
    alert("You entered p1!");
    },
    function(){
        alert("Bye! You now leave p1!");
    });
        

Mysz

    
    $("p").on({
        mouseenter: function(){
            $(this).css("background-color", "lightgray");
        },
        mouseleave: function(){
            $(this).css("background-color", "lightblue");
        },
        click: function(){
            $(this).css("background-color", "yellow");
        }
    });
    

Animacje i efekty

    
        .hide()
        .show()
        .toggle()
        .fadeOut()
        .fadeIn()
        .fadeToggle()
    
    
        .slideDown()
        .slideUp()
        .slideToggle()
    

AJAX

Asynchronous JavaScript and XML

    
        load()
    
    
        $("body").load("http://rzonsol.pl/prezentacje/tresc-css.html");
    
    
        $("body").load("http://rzonsol.pl/zajecia-strony/technologie-webowe-2016-zaoczni.html #programZajec");
    
    
    $.get(url, data, callback)
    $.post(url, data, callback)
    
    
    $.get('/prezentacje/dane.json',function (data) {
         console.log(data)
        }).done(function() {
            console.log( "second success" );
          })
          .fail(function() {
            console.log( "error" );
          })
          .always(function() {
            console.log( "complete" );
          });

    
    
    $.getJSON('/prezentacje/dane.json',function (data) {
     alert(data.firstName);
    }).done(function() {
        console.log( "second success" );
      })
      .fail(function() {
        console.log( "error" );
      })
      .always(function() {
        console.log( "complete" );
      });
    

    
    $.getJSON('/prezentacje/dane2.json',function (data) {
      $.each(data, function (key, val) {
    console.log(val.firstName+":"+val.lastName);
    })
    }).done(function() {
        console.log( "second success" );
      })
      .fail(function() {
        console.log( "error" );
      })
      .always(function() {
        console.log( "complete" );
      });
    

Zadanie

Stwórzmy stronę która będzie wyświetlać dane(link) po kliknięciu w przycisk. Ma istnieć również przycisk zmieniający kolor tła co drugiego wiersza na dowolny kolor, a po drugim kliknięci będzie usuwać ten kolor. Po dziesięciu kliknięciach w przycisk od zmiany koloru ma pojawiać się komunikat który powie koniec zabawy a dane zostaną ukryte.