Profesjonalne strony internetowe korzystają z jQuery, dzięki temu zwykłe strony upodabniają się do aplikacji .
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/