jQuery Handledning => Komma 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

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 .

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

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.

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() { ... });

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 .

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.

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:

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.

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/

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 .

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

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.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

jQuery Handledning
Komma igång med jQuery

Sök…