jQuery kickstart
Bartek Zdanowski
blog.bartekzdanowski.pl
@bartekzdanowski
O czym będzie
-
Wstęp do Javascript
-
DOM - Document Object Model
-
jQuery
-
Niespodzianka
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
- undefined
- null
- NaN ("not a number")
- 0 (zero)
- '' (pusty string)
DOM
Document Object Model
Obiektowa reprezentacja strony
Drzewiasta
Reprezentuje strukturę z HTML
Jest "żywa" - ma podpięte zdarzenia
Można ją modyfikować z JavaScriptu
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
- wyszukiwanie elementów drzewa DOM
- modyfikacja drzewa i zawartości elementów
- zdarzenia
- komunikacja z backendem
- animacja
- pluginy
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
- Są punktem wejścia w jQuery
- Pozwalają wybrać elementy strony
- Są oparte o selektory CSS3
Selektory
Zgodne z CSS3
- *
- E
- E F
- E > F
- E:first-child
Selektory
Zgodne z CSS3
- E:link
- E + F
- E[foo]
- E[foo="warning"]
- E.styleClass
- E#myid
Selektory
Rozszerzenie jQuery
- E:button
- E:checkbox
- E:even
- E:odd
- E:eq(4)
- E:lt(3)
- E:gt(3)
Uwaga na wydajność!
Selektory
$('selektor') == obiektJQuery
- selektor wybiera wszystkie pasujące elementy
- obiekt jQuery zawiera w sobie kolekcję
- wieloelementową
- jednoelementową
- pustą
- obiekt jQuery opakowuje obiekt Element
Modyfikacja obiektu jQuery z pustą kolekcją nie powoduje błędów
Przemierzanie drzewa
Traverse
$('li').even()
$('p').prev()
$('ul').next()
$('strong').parent()
$('ul').children()
$('div').find()
sdfsd
Znacznie szybsze od pseudoselektorów
Manipulacja
- zmiana atrybutów
- zmiana klas (CSS)
- DOM - modyfikacja wnętrza
- DOM - opakowywanie
- DOM - doklejanie
- DOM - usuwanie i podmiana
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>');
Manipulacja
zmiana html
$('span').html('Tralla <strong>la!</strong>');
Manipulacja
zmiana wartości - pole tekstowe
$('input').val('Tralla la!');
Zdarzenia
$('button').on('click',
function(event) {
alert(event); //zdarzenie
alert(this); //cel zdarzenia
} );
- click
- mouseover
- change
- ...
Zdarzenia
Obiekt Event
właściwości
metody
- preventDefault()
- stopPropagation()
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()
})
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
$('img').hide()
$('img').show()
$('img').fadeIn()
$('img').fadeOut()
$('img').fadeToggle()
$('img').slideDown()
$('img').slideUp()
$('img').slideToggle()
Animacja
Animacja
$('img').animate({
width: '92'
}, 2000, function() {
$(this).attr('src', 'images/4developers-logo.png')
Dobre rady
- sprawdzaj ilość wybranych elementów $('selektor').length
- podglądaj console.log($('selector'))
- cache'uj wybrane elementy var $element = $('selektor')
- używaj zmiennej z $ aby zaznaczyć, że to obiekt jQuery
- używaj Chrome lub FireFox
Dziękuję!
←
→
/
#