Prowadzący: Michał Matulka
$('#mojeId');
$('.mojaKlasa');
$('div.mojaKlasa p');
$('div.mojaKlasa').last();
$('h1#mainTitle').parent();
$('body').children();
$('button#myButton').closest('div');
$('#menu li').first().next();
$('Witaj świecie!').appendTo('body');
$('#mojElement').css({
background: '#123456',
float: 'left'
});
$('button.option').on('click', function (e) {
console.log('yay!');
});
$.ajax({ url: '/mojUrl', success: function (data) { console.log(data); } });
$('#mojElement').hide();
$('#mojElemen').show();
$('#mojElemen').toggle();
$('#mojElemen').toggle();
var wrappedDivs = $('div');
var element = document.getElementById('mojeId');
var wrappedElement = $(element);
var newWrappedParagraph = $('');
$.ajax({
url: '/ajaxEndpoint',
success: function (data) {
console.log(data);
}
});
var wrapppedDiv = $('#myDiv');
wrappedDiv.hide(1000);
document.getElementById('myDiv').hide(1000); //ERROR XOXOXO
$('img').css({'border': '10px solid #987654'});
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...
console.log($('p')[0]);
console.log($('p')[1]);
Przy takim dostępie otrzymamy elementy DOM "nieopakowane" w obiekty jQuery!
$('p').each(function () {
console.log(this); //"Nieopakowany" obiekt DOM
console.log($(this)); //"Opakowany" obiekt DOM
});
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
var newDiv = $('Witaj świecie!');
newDiv.appendTo('body');
Po kliknięciu w przycisk dodaj do dokumentu następującą strukturę html
Jak
żyć
panie
premierze?
$('button#myButton').on('click', function (e) {
console.log('klikłem!');
});
Wywołując tylko raz funkcję .on() wyświetl komunikat typu alert po kliknięciu na dowolną pozycję w menu.
$('#menu button').on('click', function (e) {
console.log(this);
});
$('p').first().hide(1000);
Napisz kod, który po kliknięciu na dowolną pozycję w menu schowa ją.
$('#menu').on('click', function (e) { console.log(e.target); });
$('#menu li').last().on('click', function (e) { console.log('ostatni'); });