jQuery trzon - metoda jQuery()

Podręcznik referencyjny jQuery

Przykład

Znajdź wszystkie elementy p będące dziećmi elementu div i ustaw ich atrybut ramki:

$("div > p").css("border", "1px solid gray");

Spróbuj sam

Definicja i użycie

Metoda jQuery() akceptuje ciąg znaków, który zawiera selektor CSS do dopasowania zbioru elementów.

Funkcja jQuery() ma trzy gramatyki:

Gramatyka 1

Akceptuje ciąg znaków, który zawiera selektor CSS do dopasowania zbioru elementów:

jQuery(selektor, [kontekst]

Szczegółowe użycie

Gramatyka 2

Tworzenie elementów DOM za pomocą ciągów znaków HTML:

jQuery(html,ownerDocument]

Szczegółowe użycie

Gramatyka 3

Przypisanie funkcji do wykonania po załadowaniu dokumentu DOM:

jQuery( callback )

Szczegółowe użycie

jQuery( selector, [ kontekst ] )

Ta składnia ma kilka zastosowań:

Użycie 1: Ustawienie środowiska selektora

Gramatyka

jQuery(selektor, [kontekst]

Domyślnie, selektor przeszukuje DOM od korzenia dokumentu. Można jednak ustawić dodatkowy parametr kontekstu dla $().

Jeśli chcemy wyszukać element w callback, możemy określić poniższą wyszukiwarkę:

Przykład

$("div.foo").click(function() {
  $("span", this).addClass("bar");
);

Ponieważ już ograniczyliśmy selektor span do środowiska this, tylko span w klikniętym elemencie otrzyma dodany klas.

Wewnętrzne środowisko wyboru jest realizowane przez metodę .find(), więc $("span", this) jest równoważne $(this).find("span").

Każda funkcjonalność jQuery jest realizowana przez tę funkcję. Wszystko w jQuery opiera się na tej funkcji, lub jest używane w jakiś sposób tę funkcję. Najprostszym użyciem tej funkcji jest przekazanie do niej wyrażenia (zwykle skryptora CSS), a następnie wyszukiwanie wszystkich elementów pasujących do tego wyrażenia.

Domyślnie, jeśli nie został podany parametr kontekstu, $() będzie szukał elementów DOM w bieżącym dokumencie HTML; jeśli podano parametr kontekstu, np. zestaw elementów DOM lub obiekt jQuery, to będzie szukane w tym kontekście. Od jQuery 1.3.2, kolejność zwróconych elementów jest równa kolejności ich występowania w kontekście.

Użycie 2: Użycie elementu DOM

Gramatyka

jQuery(element)

Ta funkcja pozwala nam tworzyć obiekty jQuery, używając innych znalezionych elementów DOM. Zwykle jest używana do wywoływania metod jQuery na elemencie, który został przekazany do funkcji callback za pomocą klucza słówka this:

Przykład

$("div.foo".click(function() {
  $(this).slideUp();
);

Ten przykład używa animacji przesuwania do ukrycia elementu przy kliknięciu. Ponieważ handler przyjmuje element kliknięty w kluczowym słowie this jako czysty element DOM, musimy opakować ten element jako obiekt jQuery przed wywołaniem jego metod.

Funkcja ta może również przyjmować dokument XML i obiekt Window (chociaż nie są to elementy DOM) jako ważne parametry.

Gdy dane XML są zwracane z wywołania Ajax, możemy użyć funkcji $() do opakowania tych danych za pomocą obiektu jQuery. Po zakończeniu możemy używać metod .find() i innych metod przeszukiwania DOM, aby uzyskać pojedyncze elementy struktury XML.

Użycie 3: Klonowanie obiektu jQuery

Gramatyka

jQuery(obiekt jQuery)

Gdy przekazujemy obiekt jQuery jako parametr do funkcji $(), tworzy się kopia tego obiektu. Nowy obiekt jQuery odnosi się do tych samych elementów DOM, jak oryginalny obiekt.

Użycie 4: Zwróć pustą kolekcję

Gramatyka

jQuery()

Dla jQuery 1.4, wywołanie metody jQuery() bez parametrów zwraca pustą kolekcję jQuery. W wcześniejszych wersjach jQuery, zwraca kolekcję zawierającą węzeł document.

jQuery( html, [ ownerDocument ] )

Ta składnia ma kilka zastosowań:

Użycie 1: Tworzenie nowych elementów

Gramatyka

jQuery(html,ownerDocument]

Możesz przekazać ręcznie napisany ciąg HTML, ciąg znaków utworzony przez pewne silniki szablonów lub wtyczki, lub ciąg znaków załadowany przez AJAX. Ale istnieją ograniczenia przy tworzeniu elementów input, można się odnosić do drugiego przykładu.

Oczywiście ciąg znaków może zawierać ukośnik (np. adres obrazu) oraz backslash. Kiedy tworzymy pojedynczy element, używajmy zamkniętych etykiet lub formatu XHTML. Na przykład, aby utworzyć element span, można użyć $("<span/>") lub $("<span></span>"), ale nie zaleca się używania $("<span>"). W jQuery ta składnia jest równoważna $(document.createElement("span")).

Jeśli przekazujemy ciąg znaków jako parametr do $(), jQuery sprawdzi, czy ciąg znaków jest HTML (np. istnieją etykiety w pewnych miejscach ciągu). Jeśli nie, ciąg znaków jest interpretowany jako wyrażenie selektora, patrz powyższy wyjaśnienie. Ale jeśli ciąg znaków jest fragmentem HTML, jQuery próbuje stworzyć element DOM opisany przez ten fragment HTML. Następnie tworzy i zwraca obiekt jQuery odnoszący się do tych elementów DOM:

Przykład

$("<p id="test">My <em>new</em> text</p>").appendTo("body");

Jeśli fragment HTML jest bardziej złożony niż prosty etykieta bez atrybutów, tak jak w powyższym przykładzie HTML, to rzeczywisty proces tworzenia elementu jest zakończony przez mechanizm innerHTML przeglądarki. Konkretnie rzecz biorąc, jQuery tworzy nowy element <div>, a następnie ustawia atrybut innerHTML elementu na przekazany fragment HTML. Gdy parametr to prosty etykieta, np. $("<img/>") lub $("<a></a>"), jQuery tworzy elementy za pomocą wbudowanej funkcji createElement() JavaScript.

Aby zapewnić kompatybilność międzyplatformową, struktura fragmentu musi być dobrze zorganizowana. Tagi, które mogą zawierać inne elementy, muszą być występować w parach (z zamkniętymi tagami):

$("<a href="http://jquery.com"></a>");

Jednak jQuery pozwala również na gramatykę podobną do XML:

$("<a/>");

Tagi, które nie zawierają innych elementów, mogą być zamknięte lub nie zamknięte:

$("<img />");
$("<input>");

Użycie 2: Ustawienie atrybutów i zdarzeń

Gramatyka

jQuery(html,props)

Dla jQuery 1.4 możemy przekazać do drugiego parametru mapę atrybutów. Parametr ten akceptuje superset atrybutów, które można przekazać do metody .attr(). Dodatkowo, można przekazać dowolne typy zdarzeń i wywołać poniższe metody jQuery: val, css, html, text, data, width, height, lub offset.

Uwaga, Internet Explorer nie pozwala na tworzenie elementów input i zmianę ich typu; musisz użyć np. "<input type="checkbox" />" aby określić typ.

Przykład

Tworzy element <input>, ustawia atrybuty typu, wartości oraz niektóre zdarzenia.

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

jQuery( callback )

Pozwala na przypisanie funkcji do wykonania po załadowaniu dokumentu DOM.

Funkcja ta działa podobnie jak $(document).ready(), ale gdy używasz tej funkcji, musisz włożyć wszystkie inne operacje $() wymagające załadowania DOM do niej. Choć technicznie funkcja jest łączna, prawdziwe łączenie w ten sposób jest rzadkie.

Przykład

Gdy DOM zostanie załadowany, wykona funkcje z wewnętrznego bloku:

$(function(){
  // Dokument gotowy
);

Podręcznik referencyjny jQuery