jQueryKomma igång med jQuery


Anmärkningar

jQuery är ett JavaScript-bibliotek som förenklar DOM-operationer, händelsehantering, AJAX och animationer. Det tar också hand om många problem med webbläsarkompatibilitet i underliggande DOM- och javascript-motorer.

Varje version av jQuery kan laddas ner från https://code.jquery.com/jquery/ i både komprimerade (minifierade) och okomprimerade format.

versioner

Version anteckningar Utgivningsdatum
1,0 Första stabila utgåvan 2006-08-26
1,1 2007-01-14
1,2 2007-09-10
1,3 Sizzle infördes i kärnan 2009-01-14
1,4 2010-01-14
1,5 Uppskjuten återuppringning, omskrivning av ajax-modulen 2011-01-31
1,6 Betydande resultatförbättringar i attr() och val() -metoderna 2011-05-03
1,7 Nya händels API: er on() och off() . 2011-11-03
1,8 Sizzle omskrivna, förbättrade animationer och $(html, props) flexibilitet. 2012-08-09
1,9 Borttagning av avskrivna gränssnitt och kodrensning 2013/01/15
1,10 Inbyggda bugfixar och skillnader rapporterade från både beta- och 1.9-cyklerna 2013/05/24
1,11 2014/01/24
1,12 2016/01/08
2,0 Tappade IE 6–8-stöd för prestandaförbättringar och minskning i storlek 2013/04/18
2,1 2014/01/24
2,2 2016/01/08
3,0 Massiva speedups för vissa anpassade jQuery-väljare 2016/06/09
3,1 Inga fler tysta fel 2016/07/07

Komma igång

Skapa en fil hello.html med följande innehåll:

<!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>
 

Live Demo på JSBin

Öppna den här filen i en webbläsare. Som ett resultat ser du en sida med texten: Hello, World!

Förklaring av kod

  1. Laddar jQuery-biblioteket från jQuery CDN :

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

    Detta introducerar den globala variabeln $ , ett alias för jQuery funktionen och namnområdet.

    Var medveten om att ett av de vanligaste misstagen som gjorts när jQuery inkluderas inte laddar biblioteket FÖR andra skript eller bibliotek som kan bero på eller använda det.

  1. Använder en funktion som ska köras när DOM ( Document Object Model ) detekteras som "redo" av jQuery:

    // When the `document` is `ready`, execute this function `...`
    $(document).ready(function() { ... });
     
    // A commonly used shorthand version (behaves the same as the above)
    $(function() { ... });
     
  1. När DOM är klar, kör jQuery återuppringningsfunktionen som visas ovan. Inuti vår funktion finns det bara ett samtal som gör två huvudsakliga saker:

    1. Hämtar elementet med id attributet lika med hello (vår väljare #hello ). Att använda en väljare som godkänt argument är kärnan i jQuerys funktionalitet och namngivning; hela biblioteket utvecklades väsentligen från att utvidga document.querySelectorAll MDN .

    2. Ställ in text() i det valda elementet på Hello, World! .

      #    ↓ - Pass a `selector` to `$` jQuery, returns our element
      $('#hello').text('Hello, World!');
      #             ↑ - Set the Text on the element
       

Mer information finns på sidan jQuery - Dokumentation .

Undvika kollisioner i namnområdet

Bibliotek andra än jQuery kan också använda $ som ett alias. Detta kan orsaka störningar mellan dessa bibliotek och jQuery.

Så här släpper du $ för användning med andra bibliotek:

jQuery.noConflict();
 

Efter att ha ringt denna funktion är $ inte längre ett alias för jQuery . Du kan dock fortfarande använda variabeln jQuery själv för att komma åt jQuery-funktioner:

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

Alternativt kan du tilldela en annan variabel som ett alias för jQuery:

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

Omvänt, för att förhindra andra bibliotek från att störa jQuery, kan du radera din jQuery-kod i ett omedelbart åberopat funktionsuttryck (IIFE) och skicka in jQuery som argument:

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

Inuti denna IIFE är $ ett alias endast för jQuery.

Ett annat enkelt sätt att säkra jQuerys $ alias och se till att DOM är redo :

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

För att sammanfatta,

  • jQuery.noConflict() : $ hänvisar inte längre till jQuery, medan variabeln jQuery gör det.
  • var jQuery2 = jQuery.noConflict() - $ hänvisar inte längre till jQuery, medan variabeln jQuery gör och det gör variabeln jQuery2 .

Nu finns det ett tredje scenario - Tänk om vi vill att jQuery endast ska vara tillgängligt i jQuery2 ? Använda sig av,

var jQuery2 = jQuery.noConflict(true)

Detta resulterar i att varken $ eller jQuery hänvisar till jQuery.

Detta är användbart när flera versioner av jQuery ska laddas på samma sida.

<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/

Inkludera skriptetikett i huvudet på HTML-sidan

För att ladda jQuery från det officiella CDN , gå till jQuery- webbplatsen . Du ser en lista över olika tillgängliga versioner och format.

jQuery CDN-sida med versioner av jQuery tillgängliga

Nu kopierar du källan till den version av jQuery som du vill ladda. Anta att du vill ladda jQuery 2.X , klicka på okomprimerad eller minifierad tagg som visar dig något liknande:

Skriptetikett som dyker upp med jQuery-versionen är vald

Kopiera hela koden (eller klicka på kopieringsikonen) och klistra in den i <head> eller <body> på din html.

Den bästa praxisen är att ladda alla externa JavaScript-bibliotek på huvudtaggen med async attributet. Här är en demonstration:

<!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>
 

När du använder async attribut ska du vara medveten eftersom javascript-biblioteken sedan laddas och körs asynkront så snart som tillgängliga. Om två bibliotek ingår där det andra biblioteket är beroende av det första biblioteket är detta fall om andra bibliotek laddas och körs före första biblioteket kan det kasta ett fel och applikationen kan gå sönder.

jQuery Namespace ("jQuery" och "$")

jQuery är utgångspunkten för att skriva någon jQuery-kod. Det kan användas som en funktion jQuery(...) eller som en variabel jQuery.foo .

$ är ett alias för jQuery och de två kan vanligtvis bytas mot varandra (utom där jQuery.noConflict(); har använts - se Undvika kollisioner i namnområdet ).

Förutsatt att vi har detta HTML-utdrag -

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

Vi kanske vill använda jQuery för att lägga till lite textinnehåll till denna div. För att göra detta kan vi använda funktionen jQuery text() . Detta kan skrivas med antingen jQuery eller $ . dvs -

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

Eller -

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

Båda kommer att resultera i samma slutliga HTML -

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

Eftersom $ är mer kortfattat än jQuery är det i allmänhet den föredragna metoden att skriva jQuery-kod.

jQuery använder CSS-väljare och i exemplet ovan användes en ID-väljare. För mer information om väljare i jQuery, se typer av väljare .

Laddar jQuery via konsolen på en sida som inte har den.

Ibland måste man arbeta med sidor som inte använder jQuery medan de flesta utvecklare brukar ha jQuery hands.

I sådana situationer kan man använda Chrome Developer Tools konsolen ( F12 ) för att manuellt lägga till jQuery på en laddad sida genom att köra följande:

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);
 

Version du vill ha kan skilja sig från ovan ( 1.12.4 ). Du kan hämta länken till den du behöver här .

Läser in namngivna jQuery-plugins

När du laddar plugins måste du alltid inkludera plugin-programmet efter jQuery.

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

Om du måste använda mer än en version av jQuery, se till att ladda plugin (erna) efter den nödvändiga versionen av jQuery följt av kod för att ställa in jQuery.noConflict(true) ; ladda sedan nästa version av jQuery och dess tillhörande plugin:

<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>
 

När du initialiserar plugins måste du använda den tillhörande jQuery-versionen

<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>
 

Det är möjligt att endast använda en dokumentklar funktion för att initiera båda insticksprogrammen, men för att undvika förvirring och problem med eventuell extra jQuery-kod inuti dokumentklarfunktionen skulle det vara bättre att hålla referenserna separata.

JQuery-objektet

Varje gång jQuery kallas, med $() eller jQuery() , skapar det internt en new instans av jQuery . Detta är källkoden som visar den nya instansen:

// 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 );
}
 

Internt jQuery hänvisar till sin prototyp som .fn , och stilen som används här internt instansiera en jQuery objekt tillåter att prototypen ska utsättas utan uttryckligt användning av new av den som ringer.

Förutom att ställa upp en instans (vilket är hur jQuery API, exempelvis .each , children , filter , etc. exponeras), internt jQuery kommer också att skapa en array-liknande struktur för att matcha resultatet av väljaren (förutsatt att något annat än ingenting, undefined , null eller liknande överfördes som argumentet). När det gäller en enda artikel kommer denna arrayliknande struktur endast att innehålla den artikeln.

En enkel demonstration skulle vara att hitta ett element med ett ID och sedan komma åt jQuery-objektet för att returnera det underliggande DOM-elementet (detta fungerar också när flera element matchas eller finns).

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