Przykład jQuery. Proste przykłady skryptów jQuery

jQuery to biblioteka javascript, która pozwala programistom stron internetowych dodawać dodatkowe funkcje do ich stron internetowych. Jest to oprogramowanie typu open source i jest udostępniane bezpłatnie na podstawie licencji MIT. W ostatnich latach jQuery stała się najbardziej popularną biblioteką javascript wykorzystywaną w tworzeniu stron internetowych.

Przykład jQuery

Aby zaimplementować jQuery, twórca stron internetowych musi odwołać się do pliku javascript w kodzie HTML strony internetowej. Niektóre witryny mają swoją lokalną kopię, podczas gdy inne odnoszą się do biblioteki hostowanej przez Google lub serwer. Na przykład strona internetowa może załadować bibliotekę jQuery za pomocą następującego wiersza w sekcji HTML (przykład jQuery i cookie):


Przykłady jQuery i Ajax

Po pobraniu biblioteki strona internetowa może wywoływać dowolne funkcje obsługiwane przez bibliotekę. Typowe przykłady obejmują zmiany tekstu, przetwarzanie danych formularzy, przenoszenie elementów na stronie i wykonywanie animacji. jQuery może również pracować z kodem Ajax i językami skryptowymi, takimi jak PHP i ASP, aby uzyskać dostęp do danych z bazy danych. Ponieważ jQuery jest wykonywane po stronie klienta (a nie na serwerze WWW), może aktualizować informacje na stronie internetowej w czasie rzeczywistym bez ponownego ładowania strony. Typowym przykładem jest autouzupełnianie, w którym formularz wyszukiwania automatycznie wyświetla ogólne dane podczas wprowadzania zapytania.

Korzyści biblioteczne

Oprócz bezpłatnej licencji, kolejnym ważnym powodem, dla którego jQuery zyskała taką popularność, jest jejZgodność z różnymi przeglądarkami. Ponieważ każda przeglądarka wyświetla HTML, CSS i javascript na różne sposoby, twórca strony internetowej może mieć problem z tym, aby strona była taka sama we wszystkich przeglądarkach. Zamiast pisać funkcje zdefiniowane przez użytkownika dla każdej przeglądarki, twórca stron internetowych może korzystać z jednej funkcji jQuery, która będzie działać w Chrome, Safari, Firefox i Internet Explorer. Obsługa wielu przeglądarek zmusiła wielu programistów do przejścia ze standardowego javascript do jQuery, ponieważ znacznie upraszcza to proces kodowania.


Opis

Składnia jQuery służy do uproszczenia nawigacji po dokumentach, wybierania elementów DOM, tworzenia animacji, przetwarzania zdarzeń i opracowywania aplikacji Ajax. jQuery zapewnia również programistom możliwość tworzenia wtyczek w bibliotece javascript. Pozwala to programistom tworzyć abstrakcyjne projekty dla interakcji i animacji niskiego poziomu, zaawansowanych efektów i wysokopoziomowych widgetów tematycznych. Modularne podejście do biblioteki jQuery pozwala tworzyć potężne dynamiczne strony internetowe i aplikacje internetowe. Zestaw podstawowych funkcji:
  • wybór elementów DOM;
  • Obejście i manipulacja za pomocą mechanizmu wyboru;
  • nowy styl programowania;
  • Algorytmy łączenia i struktury danych DOM.
  • Styl wpłynął na architekturę innych frameworków javascript, takich jak YUI v3 i Dojo, a także stymulował tworzenie standardowych selektorów API.
    Microsoft i Nokia udostępniają jQuery na swoich platformach. Microsoft dołącza go do Visual Studio do użytku w ASP.NET AJAX i ASP.NET MVC, a Nokia integruje go z platformą kreatora rozwoju aplikacji internetowych.

    Recenzja

    jQuery to biblioteka elementów z dokumentem modelu obiektowego (DOM). DOM jest reprezentacją struktury drzewa wszystkich elementów strony internetowej. jQuery upraszcza składnię do wyszukiwania, wybierania i zarządzania tymi DOM-ami. Biblioteka może być używany do wyszukiwania elementów w dokumencie o określonych właściwościach (np wszystkich pozycji z h1 tag), zmienić jeden lub więcej atrybutów (kolor, widoczność) lub odpowiedź odbioru zdarzenia (np kliknięciem myszki).

    Rozwój

    Biblioteka używa popularnych funkcji JavaScript, jak ins blakną i znikają outów na chowanie, animacji i pracy z elementami jQuery CSS. jQuery zapewnia również paradygmat do obsługi zdarzeń, które idzie poza wybierania i manipulowania elementów DOM. Przypisywanie zdarzenia i definiowanie funkcji zwrotnej odbywa się w jednym kroku w jednym miejscu kodu. Zasady przy użyciu jQuery (przykłady)
  • Oddzielenie JavaScript i HTML - biblioteka zapewnia prostą składnię, aby dodać do obsługi zdarzeń DOM przy użyciu JavaScript, zamiast dodawania atrybutów HTML wydarzeń na wywołanie funkcji JS. Dlatego zachęca programistów do całkowitego oddzielenia kodu javascript od znaczników HTML.
  • zwięzłość i przejrzystość - promuje zwięzłość i przejrzystość narzędzi, takich jak łańcuchy i zmniejszenia nazwami funkcyjnych.
  • Eliminacja niezgodności cross-Browser - Javascript silniki różne przeglądarki są nieco inne, więc kod JS, który pracuje dla jednej przeglądarki, nie może pracować dla innego. Podobnie jak inne narzędzia javascript, jQuery obsługuje je wszystkierozbieżności między przeglądarkami i zapewnia spójny interfejs działający w różnych przeglądarkach.
  • Rozszerzalność - Nowe zdarzenia, elementy i metody można łatwo dodać, a następnie ponownie wykorzystać jako wtyczkę.
  • Historia

    jQuery została pierwotnie wydana w styczniu 2006 roku w BarCamp NYC przez Johna Reshiga i była pod wpływem wczesnej biblioteki cssQuery Dean Edwards. Obecnie jest obsługiwany przez zespół programistów Timmy'ego Willisona (z silnikiem selektora jQuery, Sizzle, prowadzonym przez Richarda Gibsona).

    Funkcje

    Biblioteka zawiera następujące funkcje:
  • wybór elementów DOM z wykorzystaniem mechanizmu wielu serwerów selektora z otwartym Sizzle;
  • Wybór projektu manipulatora DOM selektora CSS, który wykorzystuje nazwy i atrybuty elementów takich jak id, klasa jako kryteria wyboru węzłów DOM;
  • miara;
  • efekty animacji;
  • ajax;
  • obiekty są opóźnione i obiecują kontrolować przetwarzanie asynchroniczne;
  • parsowanie JSON;
  • Rozszerzalność poprzez wtyczki;
  • narzędzia, takie jak wykrywanie funkcji;
  • Metody kompatybilności, które są pierwotnie dostępne w nowoczesnych przeglądarkach, ale wymagają starszych wersji, takich jak inArray () i each (), multi-browser (nie mylić z przeglądarką).
  • Wykorzystanie

    Biblioteka jQuery jest pojedynczym plikiem javascript, który zawiera wszystkie jego wspólne funkcje DOM, zdarzenia, efekty i Ajax. Można go umieścić na stronie internetowej, łącząc się z lokalną kopią lub jedną z wielu kopii dostępnych publicznieserwery Biblioteka ma sieć dostarczania treści (CDN) obsługiwaną przez max-cdn. JQuery PHP Przykład:

    Style

    jQuery ma dwa style użytkowania:
  • Ze względu na funkcję $, która jest fabryczną metodą dla obiektu jQuery. Te funkcje, często nazywane poleceniami, są liczbami całkowitymi, ponieważ wszystkie one zwracają obiekty jQuery.
  • ​​
  • Poprzez funkcje $ - prefix. Są to funkcje usługowe, które nie wpływają bezpośrednio na obiekt.
  • Uzyskiwanie dostępu do JQuery i zarządzanie wieloma węzłami DOM zwykle rozpoczyna się od wywołania funkcji $ za pomocą wiersza selektora CSS. Zwraca to obiekt jQuery, który odnosi się do wszystkich istotnych elementów na stronie HTML.

    Tryb bez konfliktów

    jQuery zawiera tryb .noConflict (), który uwalnia kontrolę funkcji $. Jest to użyteczne, jeśli jQuery jest używany z innymi bibliotekami, które również używają $ jako identyfikatora. W trybie bez konfliktów programiści mogą korzystać z bibliotek jako zamiennik o wartości 2 USD bez utraty funkcjonalności.

    Zaawansowane funkcje

    Funkcja oddzwaniania do obsługi zdarzeń w komórkach, które nie zostały jeszcze pobrane, można zarejestrować w ciągu .ready () jako funkcji anonimowych. Te procedury obsługi będą wywoływane tylko po uruchomieniu zdarzenia. Na przykład poniższy kod dodaje obsługi za pomocą kliknięcia myszy na elemencie obraz IMG:. $ (Function () {$ ('img') On ('click', function () {//proces zdarzenie kliknij na dowolnym elemencie na img strona });}). Niektóre funkcje zwracają określone wartości (na przykład $ ('# input-user-email') Val ()). W takich przypadkach łańcuch nie działa, ponieważ wartość nie odwołuje się do obiektu jQuery.

    Tworzenie nowychelementy

    Oprócz dostępu do węzłów DOM poprzez hierarchię obiektów, możliwe jest również, aby tworzyć nowe przedmioty, jeśli ciąg przekazany jako argument $ () wygląda HTML. Na przykład, wybór elementu zamówienia HTML z kart identyfikacyjnych i dodaje element o wartości opcji i tekstowym VAG Volkswagen: $ ('# select carmakes') .append ($ ('') .attr ({wartość: VAG}) .append (Volkswagen ))

    Narzędzia

    Funkcje jQuery z prefiksem $ to funkcje użytkowe, które wpływają na globalne właściwości i zachowanie. Poniższy przykład wykorzystuje funkcję co (), która wykonuje iteracje przez tablic: $ .each ([1,2,3], funkcja () {console.log (to + 1)}); Ten przykład postu jQuery zapisuje 234 na konsoli.

    Ajax

    można wykonać przekrój żądań przeglądarki Ajax pomocą $ .ajax () jQuery, które mogą służyć jako przykład odpowiednich metod usunięte przesyłania i przetwarzania danych: $ .ajax ({typ: PO, URL: " /process/submit.php 'dane {name: John lokalizacja:' Boston '}}) gotowe (function (msg) {alert. (' dane zapisane: „+ MSG).}) nie (function (XMLHttpRequest, statusText, errorThrown) {alert ('nie udało się wysłać swojego povidomlennya.Nn' + 'XML żądania HTTP:' + JSON.stringify (XMLHttpRequest) + 'tekst nStatus:' + statusText +”, nBłąd Wrzucony: "+ errorThrown};}); W tym przykładzie serwer ma nazwę danych = John i location = Boston dla /process/submit.php. Po zakończeniu tego żądania wywoływana jest funkcja ostrzegania użytkownika. Jeśli żądanie nie powiedzie się, powiadomi użytkownika o stanie błędu żądania i konkretnym błędzie.

    Wtyczki

    Architektura jQuery umożliwia programistom tworzenie niestandardowego kodu rozszerzającego różne funkcje. Istnieją tysiące dodatkowych modułów dostępnych w Internecie, które obejmują szereg funkcji, takich jakPomocnicy Ajax, usługi sieciowe, listy dynamiczne, narzędzia XML i XSLT, przeciąganie i upuszczanie, zdarzenia, przetwarzanie plików cookie i okna modalne. Istnieją alternatywne wtyczki dla wyszukiwarek, takie jak jquer.in, które używają bardziej wyspecjalizowanych metod, takich jak lista tylko wtyczek, które spełniają określone kryteria (na przykład te, które mają wspólne repozytorium kodu). Programista udostępnia Centrum edukacji jQuery dla początkujących, dzięki czemu użytkownicy mogą zrozumieć javascript i zacząć tworzyć wtyczki.

    jQuery UI

    jQuery UI to zbiór widgetów GUI, animowanych efektów wizualnych i motywów zaimplementowanych w jQuery CSS (biblioteka javascript), kaskadowe arkusze stylów i HTML. Według javascript, Libscore, interfejs jQuery jest używany na ponad 197 000 najlepszych witryn, co czyni go drugą najpopularniejszą biblioteką JS. Najbardziej znane to Pinterest, PayPal, IMDb, The Huffington Post i Netflix.
    Interfejs jQuery jest darmową i open source Foundation, licencjonowaną przez MIT. Po raz pierwszy został opublikowany we wrześniu 2007 r.

    jQuery Mobile

    jQuery Mobile to internetowa infrastruktura do optymalizacji sensorycznej (znana również jako infrastruktura mobilna). Głównym celem rozwoju jest stworzenie infrastruktury kompatybilnej z szeroką gamą smartfonów i tabletów, niezbędnych na rozwijającym się rynku technologii gadżetów. Kompatybilny z innymi platformami aplikacji mobilnych, takimi jak PhoneGap, Worklight i wieloma innymi.

    Powiązane publikacje