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


$('
Witaj świecie!
').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 = $('

');

$ 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 = $('
Witaj świecie!
'); newDiv.appendTo('body');

Zadanie 3

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


Jak
żyć
panie
premierze?

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'); });