jQuery kickstart

jQuery kickstart

Bartek Zdanowski

blog.bartekzdanowski.pl
@bartekzdanowski

O czym będzie

Javascript

Zmienne

var name = 'Bartek'

function test() {
var a = 1;
b = 2;

console.log(a);
console.log(b);
console.log(name);
}

Zmienne/scope

var name = 'Bartek'

function test() {
var a = 1;
b = 2;
}
test()
console.log(a);
console.log(b);
console.log(name);
                

Funkcje

function(a, b) {
return a + b;
}

function addTwoNumbers(a, b) {
return a + b;
}

var addTwoNumbers = function(a, b) {
return a + b;
};
                

Obiekty

Jedyne prymitywy

* string (text)
* boolean (true/false)
* number
* undefined
* null
                

Obiekty

Mapy

var map = {
    ala: 'ma kota',
    julek: 'ma pieska'
}

console.log(map.ala)
console.log(map['ala'])
                

Obiekty

var map = {
    ala: 'ma kota',

    foo : function(name) {
        return name + ' ' + this.ala
    }
}

console.log(map.foo('Bartek')
                

Obiekty

Tablice

var simpleArray = [ 'a', 'b', 'c' ];
var len = simpleArray.length;
console.log(len)
                

Logika - prawdziwość

Jedyne wartości, które zwracają false

DOM

DOM

Document Object Model

DOM

  • jeden
  • dwa

Trochę tekstu boldem

div
|----
ul
|------
li
|------
li
|----
p
|------
strong

jQuery

Czym jest jQuery

Biblioteką unifikującą dostęp do zawartości bieżącej strony

Wsparcie dla IE6+ dla jQ 1.x oraz 9+ dla jQ 2.x

Bieżąca i poprzednia wersja: Chrome, Firefox, Safari, Opera

Czym jest jQuery

Zaczynamy

jQuery.com



        

jQuery('selektor').operacja1().operacja2()...
        

$('selektor').operacja1().operacja2()...
        

Zaczynamy

<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('button').click(function(){
            alert('Wzywałeś Milordzie?')
        })
    })
</script>
</head>
<body>
<button>Przycisk</button>
</body>
</html>

Selektory

Selektory

Selektory

Zgodne z CSS3

Selektory

Zgodne z CSS3

Selektory

Rozszerzenie jQuery

Uwaga na wydajność!

Selektory

demo

Selektory

$('selektor') == obiektJQuery

Modyfikacja obiektu jQuery z pustą kolekcją nie powoduje błędów

Przemierzanie drzewa

Przemierzanie drzewa

Traverse

$('li').even()
$('p').prev()
$('ul').next()
$('strong').parent()
$('ul').children()
$('div').find()
        sdfsd
    

Znacznie szybsze od pseudoselektorów

Manipulacja

Manipulacja

Manipulacja

zmiana atrybutów


$('img').attr('src', 'images/bzd-tlab2.png')
    

Manipulacja

zmiana styli


$('button').addClass('btn-danger');
$('button').removeClass('btn-success');
$('button').toggleClass('btn-warning');
$('button').hasClass('btn-success');
$('button').css('border', '5 solid red');
    

Manipulacja

zmiana wartości - znacznik statyczny


$('span').text('Tralla <strong>la!</strong>');
    
Tu jest span

Manipulacja

zmiana html


$('span').html('Tralla <strong>la!</strong>');
    
Tu jest span

Manipulacja

zmiana wartości - pole tekstowe


$('input').val('Tralla la!');
    

Manipulacja


    
    

Manipulacja


    
    

Zdarzenia

Zdarzenia

$('button').on('click',
    function(event) {
        alert(event);   //zdarzenie
        alert(this);    //cel zdarzenia
    } );
    

Zdarzenia

Obiekt Event

właściwości

metody

Zdarzenia

$('button').click(function(event) {
    alert(event);
    var $elem = $(event.target)
    var $elem = $(this)
    $(this).toggleClass('btn-success')
});
    

Zdarzenia

$('button').mouseover(function(event) {
        $(this).toggleClass('btn-info')
    });
    

Zdarzenia

$('button').on('mouseover mouseleave',
    function(event) {
        $(this).toggleClass('btn-info')
    });
    

Zdarzenia

$('button').change(function(){
    var $elem = $(this)
    $elem.next()
        .append($elem.val()).show()
})
    
Akuku! Wartość zmieniona!

Ajax

Ajax

AJAX = Asynchronous JavaScript and XML
JSON = JavaScript Object Notation


["mama_tata",true,123]
        

{{"name":"Bartek","lang":"groovy"},{"name":"Stefan","lang":"javascript"}}
    

Ajax

var json_object = {};
var http_req = new XMLHttpRequest();
http_req.open("GET", address, true);
http_req.onreadystatechange = function () {
    var done = 4, ok = 200;
    if (http_req.readyState == done
        && http_req.status == ok) {
    json_object = JSON.parse(http_req.responseText);
    }
};
http_req.send(null);
    

Ajax

$.ajax({
    url: address,
    success: function(respData) {
        alert(respData);
        }
    );
    

Ajax

$.ajax({
    url: address,
    type: 'GET',
    data: {id: 1, param: true},
    success: function(respData) {
        alert(respData);
        },
    error: function(xhr) {
        alert('failed!');
        }
    );
    

Ajax

$.ajax({
    url: address,
    success: function(respData) {
        alert(respData);
        },
    404: function() {
        alert('NotFound!');
        },
    500: function() {
        alert('Server Error!');
        }
    );
    

Animacja

Animacja


$('img').hide()
$('img').show()
$('img').fadeIn()
$('img').fadeOut()
$('img').fadeToggle()
$('img').slideDown()
$('img').slideUp()
$('img').slideToggle()
    

Animacja


Animacja


Niespodzianka

Jeżyk

Dobre rady

Co dalej?

Pytania?

Dziękuję!

/

#