jQuery kickstart

jQuery kickstart

Bartek Zdanowski

blog.bartekzdanowski.pl
@bartekzdanowski

O czym będzie

Javascript

Javascript

Zmienne

var name = 'Bartek'

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

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

Javascript

Zmienne/scope

var name = 'Bartek'

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

Javascript

Funkcje

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

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

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

Javascript

Obiekty

Jedyne prymitywy

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

Javascript

Obiekty

Mapy

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

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

Javascript

Obiekty

var map = {
    ala: 'ma kota',

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

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

Javascript

Obiekty

Tablice

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

Javascript

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ę!

    










←
→




	
	/
	








	
	
	
	




#