jQuery - odc.1

Aby wygodnie i szybko tworzyć aplikacje HTML5 nie wystarczy znajomość tylko HTML5, także w szerokim ujęciu z CSS3 i nowym API JS. Dobrze jest również znać parę bibliotek dla Java Script. Pozwoliłem sobie zacząć od jQuery. W tym odcinku trochę notatek na temat podstawowych jej właściwości, a konkretnie informacje wprowadzające, zdarzenie ready dla strony, selektory i manipulacje na drzewie DOM.

Wprowadzenie

• Cross-browser
• Selektory
• Atrybuty
• Traversing
• Manipulacje
• CSS
• Zdarzenia
• Animacje
• AJAX
• UI
• Pluginy

Intellisense w Visual Studio 2010

Na swoim serwerze lub jako CDN (z serwera Microsoft lub Google). Wersję z naszego serwera możemy też pobierać jeśli pobranie z CDN nie udało się.

Wykrywanie momentu załadowania strony

$(document).ready() - wywoływane raz, kiedy hierarchia DOM jest załadowana i gotowa do użycia (ale zanim obrazki zostaną załadowane)

$ - jQuery wrapper

<script type=”text/javascript”>

$(document).ready(function(){  …

});

</script>

 

Selektory

Po tagach

$(‘a’) - wszystkie elementy typu <a>, kolekcja

$(‘a,p’) - wszystkie elementy typów <a> lub <p>

$(‘table tr’) - wszyscy następcy <tr> elementu <table>

$(‘div’).css(‘background-color’, ‘Green’) - ustawienie zielonego tła dla wszystkich <div>

$(‘div’).each(function() {

alert($(this).html());

}) ;

$(‘div, span’).css(‘property’,’value’);

Po ID

$(‘#myID’) - wybiera element o id = ‘myID’

Po klasach

$(‘.myClass’) - wszystkie elementy z class = “myClass”

$(‘.class1, .class2’)

$(‘a.myClass’) - wszystkie tagi <a> z class = “myClass”

$(‘div.myDiv1, div.myDiv2’).css(‘border’, ‘2px solid orange’);

Po atrybutach

$(‘a[title]’) - wszystkie elementy <a>, które mają atrybut title

$(‘a[title=“xxx”]’) - wszystkie elementy <a>, których atrybut title ma wartość xxx

$(‘input[type=“text”]’).css(‘background-color’, ‘orange’);

Wybieranie elementów wejścia

$(‘:input’) - wybiera wszystkie elementy wejścia m.in input, select, textarea, button, image, radio itd

$(‘:input[type=”radio”]’)

var inputs = $(‘:input’);  alert($(inputs[1]).val());

$(‘:input’).each(function() {

var elem = $(this);

alert(elem.val());   //val  - zwraca value, wartość tekstowa tagu, wartość zaznaczonej pozycji <option> w <select>

});

val(‘xxx’) - ustawia wartość tam, gdzie się da

:image, :hidden itd.

$(‘#form1 :input’)

Dodatkowe możliwości

$(‘div:contains(“aaa”)’) - wszystkie <div>, które zawierają w sobie napis “aaa”, wielkość liter ma znaczenie

$(‘tr:odd’), $(tr:even’) - nieparzyste (1,3,5, …)/parzyste(0,2,4,…) wiersze

$(‘#table1 tr:odd’).css(‘background-color’, ‘yellow’);

$(‘span:first-child’) - pierwsze dziecko każdej grupy elementów <span> (np. zawartych w <div>)

$(‘input[value^=”aaa”]’) - wszystkie elementy <input>, których wartość atrybutu value zaczyna się od “aaa”

$(‘input[value$=”aaa”]’) - wszystkie elementy <input>, których wartość atrybutu value kończy się na “aaa”

$(‘input[value*=”aaa”]’) - wszystkie elementy <input>, których wartość atrybutu value zawiera napis “aaa”

html(‘bbb’) - aktualizacja html wewnątrz elementu

 http://codylindley.com/jqueryselectors/

 

Interakcja z DOM

Iteracja po węzłach

$(‘div’).each(function(index) {

alert(index + ‘=’ + $(this).text());

});

$(‘div’).each(function(index, elem) {

alert(index + “=” + $(elem).text());

});

var html = ‘’;

$(‘div.a, div.b’).each(function(index) {

html += “<br/>” + index + “  “ + $(this).text());

});

var output = $(‘#Output’);

output.html(html);

Modyfikowanie properties

$(‘div’).each(function(i){

this.title = i;

});

Jeśli property nie istnieje, to zostanie dodane

Dostęp do atrybutów:

var val = $(‘#myDiv’).attr(‘title’);

Modyfikowanie atrybutów:

$(‘img’).attr(‘title’, ‘aaa’);

Modyfikowanie wiele atrybutów - przekazanie obiektu JSON:

$(‘img’).attr({

title: ‘aaa’,

style: ‘border:2px solid red;’

});

$(‘div.a, div.b’)

.attr( {

     title: ‘aaa’

     }

).css(‘background-color’, ‘yellow’);  //chaining

Wstawianie i usuwanie węzłów

• .append() //na końcu
• .appendTo()

$(‘<span>aaa</span>’).appendTo(‘.aClass’);

$(‘.aClass’).append(‘<span>aaa</span>’);

• .prepend() //na początku
• .prependTo()

$(‘<span>aaa:</span>’).prependTo(‘.aClass’);

$(‘.aClass’).prepend(‘<span>aaa:</span>’);

Otaczanie:

$(‘.state’).wrap(‘<div class=”bbb”/>’);

• .remove()

$(‘.a, .b’).remove() - usuwa elementy z klasami a lub b

Modyfikacja stylów

$(“div”).css(“color”, “red”);

$(‘div’).css({

‘color’: ‘red’,

‘font-weight’: ‘bold’

});

.text(‘aaa’) - ustawienie tekstu

Modyfikacja klas

$(‘p’).addClass(‘class1’); - dodaje nazwę lub nazwy klas do pasujących elementów

$(‘p’).addClass(‘class1 class2’);

if($(‘p’).hasClass(‘class1’)) { … }

$(‘p’).removeClass(‘class1 class2’); - usuwa jedną lub więcej klas

$(‘p’).removeClass(); - usuwa wszystkie atrybuty klas

$(‘#myDiv’).toggleClass(‘class1’); - dodaje lub usuwa klasę w zależności od jej aktualnej nieobecności/obecności

<input id=”text1” type=”text” onfocus=”FocusBlur(this)” onblur=”FocusBlur(this)”/>  //focus lub jego utrata

function FocusBlur(tb) { … }