jQuery - Omówienie

Co to jest jQuery?

jQuery to szybka i zwięzła biblioteka JavaScript stworzona przez Johna Resiga w 2006 roku z ładnym mottem: Write less, do more. jQuery upraszcza przeglądanie dokumentów HTML, obsługę zdarzeń, animację i interakcje Ajax w celu szybkiego tworzenia stron internetowych. jQuery to zestaw narzędzi JavaScript zaprojektowany w celu uproszczenia różnych zadań poprzez pisanie mniejszej ilości kodu. Oto lista ważnych podstawowych funkcji obsługiwanych przez jQuery -

DOM manipulation - jQuery ułatwiło wybieranie elementów DOM, negocjowanie ich i modyfikowanie ich zawartości za pomocą silnika selektora open source w różnych przeglądarkach o nazwie Sizzle.
Event handling - jQuery oferuje elegancki sposób przechwytywania szerokiej gamy zdarzeń, takich jak kliknięcie linku przez użytkownika, bez konieczności zaśmiecania samego kodu HTML programami obsługi zdarzeń.
AJAX Support - jQuery bardzo pomaga w tworzeniu responsywnej i bogatej w funkcje witryny przy użyciu technologii AJAX.
Animations - jQuery zawiera wiele wbudowanych efektów animacji, których możesz używać w swoich witrynach internetowych.
Lightweight - Biblioteka jQuery jest bardzo lekką biblioteką - około 19 KB (zminimalizowana i spakowana gzipem).
Cross Browser Support - jQuery obsługuje wiele przeglądarek i działa dobrze w IE 6.0+, FF 2.0+, Safari 3.0+, Chrome i Opera 9.0+
Latest Technology - jQuery obsługuje selektory CSS3 i podstawową składnię XPath.

Jak korzystać z jQuery?

Istnieją dwa sposoby korzystania z jQuery.

Local Installation - Możesz pobrać bibliotekę jQuery na swój komputer lokalny i dołączyć ją do kodu HTML.
CDN Based Version - Bibliotekę jQuery można dołączyć do kodu HTML bezpośrednio z sieci Content Delivery Network (CDN).

Instalacja lokalna

Przejdź do https://jquery.com/download/ aby pobrać najnowszą dostępną wersję.
Teraz umieść pobrane jquery-2.1.3.min.js plik w katalogu Twojej witryny, np. / jquery.

Przykład

Teraz możesz dołączyć bibliotekę jquery do swojego pliku HTML w następujący sposób -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

To da następujący wynik -

Wersja oparta na CDN

Bibliotekę jQuery można dołączyć do kodu HTML bezpośrednio z sieci Content Delivery Network (CDN). Google i Microsoft zapewniają dostarczanie treści do najnowszej wersji.

Używamy wersji Google CDN biblioteki w całym tym samouczku.

Przykład

Teraz przepiszmy powyższy przykład, używając biblioteki jQuery z Google CDN.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

To da następujący wynik -

Jak wywołać funkcje biblioteki jQuery?

Jak prawie wszystko, co robimy, gdy jQuery odczytuje lub manipuluje modelem obiektowym dokumentu (DOM), musimy się upewnić, że zaczynamy dodawać zdarzenia itp., Gdy tylko DOM będzie gotowy.

Jeśli chcesz, aby zdarzenie działało na Twojej stronie, powinieneś wywołać je wewnątrz funkcji $ (document) .ready (). Wszystko w nim zostanie załadowane, gdy tylko zostanie załadowany DOM, a przed załadowaniem zawartości strony.

Aby to zrobić, rejestrujemy gotowe zdarzenie dla dokumentu w następujący sposób -

$(document).ready(function() {
   // do stuff when DOM is ready
});

Aby wywołać dowolną funkcję biblioteki jQuery, użyj tagów skryptu HTML, jak pokazano poniżej -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

To da następujący wynik -

Jak korzystać ze skryptów niestandardowych?

Nasz niestandardowy kod lepiej jest napisać w niestandardowym pliku JavaScript: custom.jsw następujący sposób -

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

Teraz możemy dołączyć custom.js plik w naszym pliku HTML w następujący sposób -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

To da następujący wynik -

Korzystanie z wielu bibliotek

Możesz używać wielu bibliotek jednocześnie, nie powodując wzajemnych konfliktów. Na przykład można używać razem bibliotek javascript jQuery i MooTool. Więcej szczegółów można znaleźć w metodzie jQuery noConflict .

Co jest następne ?

Nie przejmuj się zbytnio, jeśli nie rozumiesz powyższych przykładów. Wkrótce zrozumiecie je w kolejnych rozdziałach.

W następnym rozdziale spróbujemy omówić kilka podstawowych pojęć pochodzących z konwencjonalnego JavaScript.