Code Carrots

jQuery

Prowadzący: Michał Matulka

Co to takiego jQuery?

Selektory

$('#mojeId');
$('.mojaKlasa');
$('div.mojaKlasa p');
					

Nawigacja po drzewie DOM

$('div.mojaKlasa').last();
$('h1#mainTitle').parent();
$('body').children();
$('button#myButton').closest('div');
$('#menu li').first().next();
					

Operacje na drzewie DOM

$('<div style="width: 100px; height: 100px; background: #ff0000">Witaj świecie!</div>').appendTo('body');
					

Wsparcie css

$('#mojElement').css({
	background: '#123456',
	float: 'left'
});
					

Zdarzenia

$('button.option').on('click', function (e) {
	console.log('yay!');
});
					

Ajax

$.ajax({ url: '/mojUrl', success: function (data) { console.log(data); } });
					

Efekty graficzne

$('#mojElement').hide();
$('#mojElemen').show();
$('#mojElemen').toggle();
$('#mojElemen').toggle();
					

jQuery UI!

Wtyczki!

Trochę konkretów

Magiczny '$'

"Alias" dla jQuery

$ jest funkcją

var wrappedDivs = $('div');
var element = document.getElementById('mojeId');
var wrappedElement = $(element);
var newWrappedParagraph = $('<p></p>');
					

$ jest obiektem

$.ajax({
    url: '/ajaxEndpoint',
    success: function (data) {
        console.log(data);
    }
});
					

"Otaczanie" elementów

var wrapppedDiv = $('#myDiv');
wrappedDiv.hide(1000);
document.getElementById('myDiv').hide(1000); //ERROR XOXOXO
					

Kolekcja elementów

$('img').css({'border': '10px solid #987654'});
					

Zadanie 1

W załączonym kodzie po kliknięciu w przycisk zmień kolor czcionki dla wszystkich akapitów w tekście:

pierwsze kliknięcie: czerwony

drugie kliknięcie: zielony

trzecie kliknięcie: niebieski

czwarte kliknięcie: czerwony

piąte kliknięcie: zielony

etc...

Kolekcja jako tablica

console.log($('p')[0]);
console.log($('p')[1]);
					

Przy takim dostępie otrzymamy elementy DOM "nieopakowane" w obiekty jQuery!

Prosta iteracja po kolekcji elementów

$('p').each(function () {
    console.log(this); //"Nieopakowany" obiekt DOM
    console.log($(this)); //"Opakowany" obiekt DOM
});
					

Zadanie 2

W załączonym kodzie po kliknięciu w przycisk zmień kolor czcionki dla wszystkich akapitów w tekście:

pierwsze kliknięcie: 1 czerwony 2 zielony 3 niebieski

drugie kliknięcie: 1 zielony 2 niebieski 3 czerwony

trzecie kliknięcie: 1 niebieski 2 czerwony 3 zielony

Tworzenie elementów DOM na podstawie kodu HTML

var newDiv = $('<div style="width: 100px; height: 100px; background: #ff0000">Witaj świecie!</div>');
newDiv.appendTo('body');
					

Zadanie 3

Po kliknięciu w przycisk dodaj do dokumentu następującą strukturę html

<div>
    <div style="float: left; margin-right: 5px;">Jak</div>
    <div style="float: left; margin-right: 5px;">żyć</div>
    <div style="float: left; margin-right: 5px;">panie</div>
    <div style="float: left;">premierze?</div>
</div>
						

Zdarzenia

$('button#myButton').on('click', function (e) {
    console.log('klikłem!');
});
					

Zadanie 4

Wywołując tylko raz funkcję .on() wyświetl komunikat typu alert po kliknięciu na dowolną pozycję w menu.

This w zdarzeniach

$('#menu button').on('click', function (e) {
    console.log(this);
});
					

Efekty animowane

$('p').first().hide(1000);
					

Zadanie 5

Napisz kod, który po kliknięciu na dowolną pozycję w menu schowa ją.

Cel zdarzenia

$('#menu').on('click', function (e) { console.log(e.target); });
					

Propagacja zdarzeń (bubbling - "bąbelkowanie")

$('#menu li').last().on('click', function (e) { console.log('ostatni'); });