jQuery - odc. 6

Teraz bardziej zaawansowane funkcjonalności jQuery. Na początek trochę notatek o funkcjach narzędziowych.

Sprawdzenie typu obiektu

• $.isArray(array)
• $.isFunction(function)
• $.isEmptyObject(object)
• $.isPlainObject(object)
• $.isXmlDoc(doc)
• $.isNumeric(number)
• $.isWindow(window)
• $.type(object) –> boolean, number, string, function, array, date, regexp, object, undefined, null

Operacje na kolekcjach

• makeArray

                  $.makeArray($(“div”));

• inArray

             var array = [1, 2, 3, 3, 4, 4, 5];

             if($.inArray(3, array) != -1)

• unique

            $.unique(array);

            console.log(array);

• merge

            $.merge(array, array2);

• map

            var newArray = $.map(array, function(item, idx) {

                   return item * 3;

            });

• grep

            var newArray = $.grep(array, function(item) {

                  return item % 3 == 0;

            });

Inne

Funkcja getScript

$.getScript(“script.js”, function(data, textStatus){

//wywołanie po

});   //skrypt jest pobierany i wykonywany

Funkcja holdReady

$.holdReady(bool)   //true - opóźnia ready aż do wywołania z false (np. na czas ładowania pluginu)

Funkcja pushStack

Wrzuca nową tablicę obiektów DOM do stosu jQuery

$(“div”).children().hide().end().addClass(“class1”);   //end - koniec stosu, znowu odwołania do <div>

$.fn.everyThird = new function() {

var arr = [];

$.each(this, function(idx, item) {

         if (idx % 3 == 0)

                 arr.push(item);

});

return this.pushStack(arr, “everyThird”, “”);

}

$(“div”).everyThird().css(“color”, “Green”).end().css(“font-weight”, “bold”);  //co trzeci pokolorowany, ale każdy z bold

Funkcja each

tablica, selektor, obiekt

$.each(collection, callback(index, element));

$(selector).each(callback(index, element));

Możliwość opuszczenia pętli poprzez zwrócenie false w przekazanej funkcji callback

Funkcja parseJSON

var x = $.parseJSON(jsonString);

Funkcja extend

• Kopiuje składowe ze źródłowych obiektów do docelowego.
• Nie wykorzystuje dziedziczenia, jest to kopiowanie składowych w runtime.
• W razie konfliktów składowe są nadpisywane
• W przypadku wielu obiektów źródłowych rozwiązywanie konfliktów od lewej do prawej

var animal = {

eat: function() { … }

};

var dog = {

bark: function() { … }

}

var cat = {

meow: function() { … }

}

$.extend(dog, animal);

Przy zmianie definicji funkcji na źródle, na obiekcie docelowym nie ulega aktualizacji.

$.extend(true, dog, animal);  //deep extend np. gdy mamy złożoną składową

var catdog = {}

$.extend(catdog, cat, dog, animal);

Funkcja sub

Tworzy kopię jQuery dla bezpiecznej modyfikacji

var sub = $.sub();

sub.old_extend = sub.extend;

sub.extend = function(target, source) { return sub.old_extend(true, target, source);  };

Cały czas możemy wywołać oryginał  $.extend(…)

Funkcja proxy

$.proxy(handler, context);   //typowo do rejestracji event handlerów

var eventHandlers  = {

type: “xxx type”,

clickButtonHandler:  function(event) { …  this.type … }

}

$(“#button”).click($.proxy(eventHandlers.clickButtonHandler, eventHandlers));