jQuery zaawansowany

Profesjonalne strony internetowe korzystają z jQuery, dzięki temu zwykłe strony upodabniają się do aplikacji .

[spacer]

Metody pomocnicze

each()  przykład $.each(numbers,function(index,value){
		alert("Indeks: " + index + " " + "Wartość: " + value);
	})

map() tworzy nową tablicę na podstawie istniejącej oraz pozwala na modyfikację danych.

toUpperCase() - zmiana liter małych na duże
isArray(n) - sprawdza czy element n jest tablicą  wynik true/false
isFunction(n) - sprawdza czy element n jest funkcją true/false
isEmptyOblect(n) - sprawdza czy element n jest pusty true/false
isPlainObject(n) - sprawdza czy element jest obiektem standardowym czyli np. var n = { } lub stworzony przy pomocy operatora new
extend() - metoda rozszerzanie - przykład $.extend(o1,o2,o3); modyfikowany jest o1 i rozszerzany zawartością z obiektów o2 i o3
makeArray(zmienna) - tworzy tablice z podanej zmiennej 'zmienna'
reverse() - odwraca kolejność elementów w tablicy
data('nazwa', 'dowolny tekst') - przypisanie dowolnych danych do elementu HTLM np. body, div, p zapisywanych jako para 'klucz', 'wartość' przykład $('body').data('nazwa ', 'dowolna wartość');
removeData('nazwa klucza') - usuwa wartość dla danego klucza 'nazwa klucza'
$('.info')clone() - klonuje obiekt z klasą info. przykład $('.info').clon(true).appendTo('.info2'); obiekt z info jest kopiowany i dołączane do .info2, jeśli metoda clon(true) to kopiowana jest obsługa zdarzeń.
push() metoda dodaje do tablicy kolejne elementy items.push("<li>" + v + "</li>");
join() metoda dołączająca np. var ul = $("<ul></ul>"); ul.html(items.join(''));
detach() metoda odpina wskazany węzeł nie usuwając danych związanych z tym węzłem inaczej niż remove();
get() pobieranie danego elementu np. $('li').get(); pobrane zostaną wszystkie elementy <li>
not() metoda wykluczająca  przykład $('li').not(':first'); z listy li wykluczony zostaje pierwszy element (pseudo klasa :first)
filter() $('li').filter(':last');  z listy li wykluczone zostają wszystkie elementy poza wskazanym  (pseudo klasa :last), działanie odwrotne niż metoda not().
slice() metoda wycinająca dany element przykład $('li').slice(3).addClass('text-warning'); elementy z indeksem 0,1,2 bez klasy 'text-warning'

więcej o pseudo klasach http://css-tricks.com/pseudo-class-selectors/

Przykłady

Rozdział 3

Tworzenie nowego elementu  DOM, przykład z tworzeniem znacznika <a></a>

$(document).ready(function() {

	var link = $("<a></a>",{
		href: "http://z-robot.pl",
		id: "link-glowny",
		"class": "przycisk",
		title: "Profesjonalne strony internetowe",
		text: "Profesjonalne strony internetowe"
	});
	$('#info').append(link);

});

Generowanie z tablicy i wstawianie listy punktowanej ul

$(document).ready(function() {

	var products = ['kurs js','kurs php','kurs jquery','kurs mysql','kurs joomla'];
	var ul = $("<ul></ul>");
	var items = [];

	$.each(products,function(i,v){
		items.push("<li>" + v + "</li>");
	});
	ul.html(items.join(''));

	$('#miejsce1').append(ul);
})

Wykorzystanie elementu kontener (fragment kodu) przy pomocy funkcji javaScript ->  document.createDocumentFragment();

$(document).ready(function() {
	var f = document.createDocumentFragment();
	f.appendChild(document.createElement('div'));
	f.appendChild(document.createElement('div'));
	f.appendChild(document.createElement('div'));
	$('#wrapper').append(f);
});

Usuwanie węzłów

$(document).ready(function() {
	var art = $('#wezel').detach();
	art.appendTo('#wrapper');
});

$('#wezel').click(function(){
	$(this).toggleClass('alert alert-info');
});

Skrócony zapis funkcji warunkowej

a > b to zwracana jest wartość 1, inaczej jest -1
	function sortItems(a,b){
		return a.innerHTML > b.innerHTML ? 1 : -1;
	};

Zwracane posortowanej alfabetycznie  listy ul

$(document).ready(function() {
	function sortItems(a,b){
		return a.innerHTML < b.innerHTML ? 1 : -1;
	};

	$('ul li').sort(sortItems).appendTo('ul');
});

$('ul li').sort(sortItems).appendTo('ul');
Na początku jest odwołanie do pozycji li w liście ul, wywołanie za pomocą funkcji sort z własnym parametrem czyli funk. sortItems. Wynik jest dołączany jest do elementu ul.

Odwołanie do nie istniejącego elementu w tym przypadku <input> w wyniku jest zwracana wartość -1.

<div id="wrapper">

    <ul id="list">
    	<li>Php</li>
        <li>Jquery</li>
        <li>JavaScript</li>
        <li>Ajax</li>
        <li>MySQL</li>
    </ul>

</div>

<script>

$(document).ready(function() {
	var items = $('input');
	alert(items.index());
});

</script>

Rozdział 4 Ajax w jQuery   (przykłady na serwerze lokalnym localhost/jquery/