jQuery Samouczek => Rozpoczęcie pracy z jQuery

Uwagi

jQuery to biblioteka JavaScript, która upraszcza operacje DOM, obsługę zdarzeń, AJAX i animacje. Zajmuje się także wieloma problemami ze zgodnością przeglądarki w podstawowych silnikach DOM i javascript.

Każdą wersję jQuery można pobrać ze strony https://code.jquery.com/jquery/ zarówno w skompresowanym (zminimalizowanym), jak i nieskompresowanym formacie.

Wersje

Wersja	Notatki	Data wydania
1.0	Pierwsze stabilne wydanie	26.08.2006
1.1		14.01.2007
1.2		2007-09-10
1.3	Skwierczenie wprowadzone do rdzenia	14.01.2009
1.4		14.01.2010
1.5	Odroczone zarządzanie wywołaniami zwrotnymi, przepisanie modułu ajax	31.01.2011
1.6	Znaczący wzrost wydajności w metodach `attr()` i `val()`	2011-05-03
1.7	Nowe interfejsy API zdarzeń: `on()` i `off()` .	2011-11-03
1.8	Skwiercz przepisane, ulepszone animacje i elastyczność `$(html, props)` .	09.08.2012
1.9	Usuwanie przestarzałych interfejsów i czyszczenie kodu	15.01.2013
1.10	Wbudowane poprawki błędów i różnice zgłaszane zarówno w cyklach beta 1.9 i 2.0	2013-05-24
1.11		24.01.2014
1.12		08.01.2016
2.0	Usunięto obsługę IE 6–8 dla poprawy wydajności i zmniejszenia rozmiaru	18.04.2013
2.1		24.01.2014
2.2		08.01.2016
3.0	Ogromne przyspieszenia dla niektórych niestandardowych selektorów jQuery	2016-06-09
3.1	Nigdy więcej cichych błędów	07.07.2016

Przestrzeń nazw jQuery („jQuery” i „$”)

jQuery jest punktem wyjścia do pisania dowolnego kodu jQuery. Może być używany jako funkcja jQuery(...) lub zmienna jQuery.foo .

$ jest aliasem dla jQuery i zwykle można je zamieniać (chyba że jQuery.noConflict(); - patrz Unikanie kolizji przestrzeni nazw ).

Zakładając, że mamy ten fragment kodu HTML -

<div id="demo_div" class="demo"></div>

Możemy chcieć użyć jQuery do dodania zawartości tekstowej do tego div. Aby to zrobić, możemy użyć funkcji jQuery text() . Można to napisać przy użyciu jQuery lub $ . tj. -

jQuery("#demo_div").text("Demo Text!");

Lub -

$("#demo_div").text("Demo Text!");

Oba spowodują ten sam końcowy HTML -

<div id="demo_div" class="demo">Demo Text!</div>

Ponieważ $ jest bardziej zwięzły niż jQuery , jest to ogólnie preferowana metoda pisania kodu jQuery.

jQuery używa selektorów CSS, aw powyższym przykładzie użyto selektora ID. Aby uzyskać więcej informacji na temat selektorów w jQuery, zobacz typy selektorów .

Pierwsze kroki

Utwórz plik hello.html o następującej treści:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>

Demo na żywo na JSBin

Otwórz ten plik w przeglądarce internetowej. W rezultacie zobaczysz stronę z tekstem: Hello, World!

Objaśnienie kodu

Ładuje bibliotekę jQuery z CDN jQuery:
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
Wprowadza to zmienną globalną $ , alias funkcji jQuery i przestrzeni nazw.
Należy pamiętać, że jednym z najczęstszych błędów popełnianych podczas dołączania jQuery nie jest załadowanie biblioteki PRZED innymi skryptami lub bibliotekami, które mogą być od niej zależne lub z niej korzystać.

Odracza funkcję, która ma zostać wykonana po wykryciu DOM ( Document Object Model ) jako „gotowy” przez jQuery:

// When the `document` is `ready`, execute this function `...`
$(document).ready(function() { ... });
 
// A commonly used shorthand version (behaves the same as the above)
$(function() { ... });

Gdy DOM jest gotowy, jQuery wykonuje przedstawioną powyżej funkcję zwrotną. Wewnątrz naszej funkcji jest tylko jedno wywołanie, które wykonuje 2 główne rzeczy:
1. Pobiera element z atrybutem id równym hello (nasz selektor #hello ). Użycie selektora jako przekazanego argumentu jest rdzeniem funkcjonalności i nazewnictwa jQuery; cała biblioteka zasadniczo ewoluowała od rozszerzenia document.querySelectorAll ^MDN .
2. Ustaw text() wewnątrz wybranego elementu na Hello, World! .
```
#    ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
#             ↑ - Set the Text on the element
```

Więcej informacji można znaleźć na stronie jQuery - Dokumentacja .

Dołącz znacznik skryptu w nagłówku strony HTML

Aby załadować jQuery z oficjalnej CDN , przejdź do jQuery stronie . Zobaczysz listę różnych dostępnych wersji i formatów.

Teraz skopiuj źródło wersji jQuery, którą chcesz załadować. Załóżmy, że chcesz załadować jQuery 2.X , kliknij nieskompresowany lub zminimalizowany tag, który pokaże ci coś takiego:

Skopiuj pełny kod (lub kliknij ikonę kopiowania) i wklej go w <head> lub <body> html.

Najlepszą praktyką jest ładowanie zewnętrznych bibliotek JavaScript do tagu head za pomocą atrybutu async . Oto demonstracja:

<!DOCTYPE html>
    <html>
      <head>
         <title>Loading jquery-2.2.4</title>
         <script src="https://code.jquery.com/jquery-2.2.4.min.js" async></script>
      </head>
      <body>
          <p>This page is loaded with jquery.</p>
      </body>
   </html>

Podczas korzystania z atrybutu async należy zachować ostrożność, ponieważ biblioteki javascript są następnie asynchronicznie ładowane i uruchamiane, gdy tylko będą dostępne. Jeśli dołączone są dwie biblioteki, w których druga biblioteka jest zależna od pierwszej biblioteki, to w takim przypadku, jeśli druga biblioteka jest ładowana i wykonywana przed pierwszą biblioteką, może to spowodować błąd i aplikacja może się zepsuć.

Unikanie kolizji przestrzeni nazw

Biblioteki inne niż jQuery mogą również używać $ jako aliasu. Może to powodować zakłócenia między tymi bibliotekami a jQuery.

Aby zwolnić $ do użytku z innymi bibliotekami:

jQuery.noConflict();

Po wywołaniu tej funkcji $ nie jest już aliasem dla jQuery . Jednak nadal możesz użyć zmiennej jQuery , aby uzyskać dostęp do funkcji jQuery:

jQuery('#hello').text('Hello, World!');

Opcjonalnie możesz przypisać inną zmienną jako alias dla jQuery:

var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');

I odwrotnie, aby zapobiec ingerencji innych bibliotek w jQuery, możesz owinąć swój kod jQuery w bezpośrednio wywołane wyrażenie funkcyjne (IIFE) i przekazać jako argument jQuery :

(function($) {
    $(document).ready(function() {
        $('#hello').text('Hello, World!');
    });
})(jQuery);

Wewnątrz tego IIFE $ jest aliasem tylko dla jQuery.

Kolejny prosty sposób zabezpieczenia aliasu $ jQuery i upewnienia się, że DOM jest gotowy :

jQuery(function( $ ) { // DOM is ready
   // You're now free to use $ alias
   $('#hello').text('Hello, World!');
});

Podsumowując

jQuery.noConflict() : $ nie odnosi się już do jQuery, jQuery.noConflict() jak zmienna jQuery .
var jQuery2 = jQuery.noConflict() - $ nie odnosi się już do jQuery, podczas gdy zmienna jQuery tak robi, podobnie jak zmienna jQuery2 .

Istnieje trzeci scenariusz - co zrobić, jeśli chcemy, aby jQuery był dostępny tylko w jQuery2 ? Posługiwać się,

var jQuery2 = jQuery.noConflict(true)

Powoduje to, że ani $ ani jQuery nie odnoszą się do jQuery.

Jest to przydatne, gdy wiele wersji jQuery ma zostać załadowanych na tę samą stronę.

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
    var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
    // Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Ładowanie jQuery za pomocą konsoli na stronie, która go nie ma.

Czasami trzeba pracować ze stronami, które nie używają jQuery podczas gdy większość programistów jest przyzwyczajona do posiadania jQuery .

W takich sytuacjach można użyć konsoli Chrome Developer Tools ( F12 ), aby ręcznie dodać jQuery na ładowanej stronie, wykonując następujące czynności:

var j = document.createElement('script');
j.onload = function(){ jQuery.noConflict(); };
j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(j);

Wersja, którą chcesz, może różnić się od powyższej ( 1.12.4 ), możesz uzyskać link do jednego, którego potrzebujesz tutaj .

Obiekt jQuery

Za każdym razem, gdy jQuery jest wywoływane za pomocą $() lub jQuery() , wewnętrznie tworzy new instancję jQuery . To jest kod źródłowy, który pokazuje nowe wystąpienie:

// Define a local copy of jQuery
jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}

Wewnętrznie jQuery odnosi się do jego prototypu jako .fn , a zastosowany tutaj styl wewnętrznej instancji obiektu jQuery pozwala na ujawnienie tego prototypu bez jawnego użycia new przez osobę dzwoniącą.

Oprócz skonfigurowania instancji (w taki sposób ujawnia się interfejs API jQuery, taki jak .each , children , filter itp.), Wewnętrznie jQuery utworzy również strukturę tablicową, która będzie pasować do wyniku selektora (pod warunkiem, że jako argument przekazano coś innego niż nic, undefined , null lub podobny). W przypadku pojedynczego elementu ta tablicowa struktura pomieści tylko ten element.

Prostą demonstracją byłoby znalezienie elementu o identyfikatorze, a następnie uzyskanie dostępu do obiektu jQuery w celu zwrócenia podstawowego elementu DOM (zadziała to również wtedy, gdy wiele elementów zostanie dopasowanych lub obecnych).

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element

Ładowanie wtyczek jQuery z przestrzenią nazw

Zazwyczaj podczas ładowania wtyczek pamiętaj, aby zawsze dołączać wtyczkę po jQuery.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="some-plugin.min.js"></script>

Jeśli musisz użyć więcej niż jednej wersji jQuery, upewnij się, że jQuery.noConflict(true) wtyczki po wymaganej wersji jQuery, a następnie kod, aby ustawić jQuery.noConflict(true) ; następnie załaduj następną wersję jQuery i powiązanych z nią wtyczek:

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>

Teraz podczas inicjowania wtyczek musisz użyć powiązanej wersji jQuery

<script>
// newer jQuery document ready
jQuery(function($){
  // "$" refers to the newer version of jQuery
  // inside of this function

  // initialize newer plugin
  $('#new').newerPlugin();
});

// older jQuery document ready
$oldjq(function($){
  // "$" refers to the older version of jQuery
  // inside of this function

  // initialize plugin needing older jQuery
  $('#old').olderPlugin();
});
</script>

Można użyć tylko jednej funkcji gotowości dokumentu do zainicjowania obu wtyczek, ale aby uniknąć nieporozumień i problemów z dodatkowym kodem jQuery wewnątrz funkcji gotowości dokumentu, lepiej byłoby zachować oddzielne odniesienia.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

jQuery Samouczek
Rozpoczęcie pracy z jQuery

Szukaj…