jQuery
dokumentklart evenemang

Vad är dokumentklart och hur ska jag använda det?

jQuery-kod är ofta inslaget i jQuery(function($) { ... }); så att den bara körs efter att DOM är klar.

<script type="text/javascript"> 
  jQuery(function($) {
    // this will set the div's text to "Hello".
    $("#myDiv").text("Hello");
  });
</script>

<div id="myDiv">Text</div>

Detta är viktigt eftersom jQuery (och JavaScript i allmänhet) inte kan välja ett DOM-element som inte har återgivits på sidan.

<script type="text/javascript">
  // no element with id="myDiv" exists at this point, so $("#myDiv") is an
  // empty selection, and this will have no effect
  $("#myDiv").text("Hello");
</script>

<div id="myDiv">Text</div>

Observera att du kan alias jQuery-namnområdet genom att skicka en anpassad hanterare till .ready() . Detta är användbart i fall där ett annat JS-bibliotek använder samma förkortade $ alias som jQuery , vilket skapar en konflikt. För att undvika denna konflikt måste du ringa $.noConflict(); - Detta tvingar dig att bara använda standardområdet för jQuery-namn (istället för det korta aliaset $ ).
Genom att skicka en anpassad hanterare till .ready() -hanteraren kan du välja aliasnamnet som ska användas jQuery .

$.noConflict();

jQuery( document ).ready(function( $ ) {
   // Here we can use '$' as jQuery alias without it conflicting with other 
   // libraries that use the same namespace 
   $('body').append('<div>Hello</div>')
});

jQuery( document ).ready(function( jq ) {
   // Here we use a custom jQuery alias 'jq' 
   jq('body').append('<div>Hello</div>')
});

Istället för att bara placera din jQuery-kod längst ner på sidan, använder du $(document).ready säkerställer att alla HTML-element har gjorts och att hela Document Object Model (DOM) är redo för att JavaScript-kod kan köras.

jQuery 2.2.3 och tidigare

Dessa är alla likvärdiga, koden inuti blocken kommer att köras när dokumentet är klart:

$(function() {
  // code
});

$().ready(function() {
  // code
});

$(document).ready(function() {
  // code
});

Eftersom dessa är likvärdiga är den första den rekommenderade formen, följande är en version av den med jQuery nyckelordet i stället för $ som ger samma resultat:

jQuery(function() {
  // code
});

jQuery 3.0

Notation

Från jQuery 3.0 rekommenderas endast detta formulär:

jQuery(function($) {
  // Run when document is ready
  // $ (first argument) will be internal reference to jQuery
  // Never rely on $ being a reference to jQuery in the global namespace
});

Alla andra dokumentfärdiga hanterare avskrivs i jQuery 3.0.

Asynchronous

Från jQuery 3.0 kommer den färdiga hanteraren alltid att kallas asynkront . Detta innebär att i koden nedan alltid visas loggen 'extern hanterare' först, oavsett om dokumentet var klart vid körningspunkten.

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

> utanför hanteraren
> inuti hanteraren

Skillnad mellan $ (dokument). Redan () och $ (fönster) .load ()

$(window).load() avskrivs i jQuery version 1.8 (och togs bort helt från jQuery 3.0 ) och som sådan bör den inte användas längre. Orsakerna till avskrivningen anges på jQuery-sidan om denna händelse

Varning om lasthändelsen när den används med bilder

En vanlig utmaning som utvecklare försöker lösa med hjälp av .load() är att köra en funktion när en bild (eller bildsamling) har laddats fullständigt. Det finns flera kända varningar med detta som bör noteras. Dessa är:

• Det fungerar inte konsekvent eller pålitligt i webbläsare
• Det avfyras inte korrekt i WebKit om src är inställd på samma src som tidigare
• Det bubblar inte korrekt upp DOM-trädet
• Kan sluta skjuta för bilder som redan lever i webbläsarens cache

Om du fortfarande vill använda load() dokumenteras det nedan:

$(document).ready() väntar tills hela DOM är tillgängligt - alla element i HTML har tolkats och finns i dokumentet. Resurser som bilder kanske emellertid inte har laddats fullt ut just nu. Om det är viktigt att vänta tills alla resurser har laddats, $(window).load() och du är medveten om de betydande begränsningarna för denna händelse kan nedan användas istället:

$(document).ready(function() {
  console.log($("#my_large_image").height()); // may be 0 because the image isn't available
});

$(window).load(function() {
  console.log($("#my_large_image").height()); // will be correct
});

Bifoga händelser och manipulera DOM inuti redo ()

Exempel på användningar av $(document).ready() :

1. Fästa händelseshanterare
   Bifoga hanterare av jQuery-evenemang

$(document).ready(function() {
  $("button").click(function() {
    // Code for the click function
  });
});

2. Kör jQuery-kod efter att sidstrukturen har skapats

jQuery(function($) {
// set the value of an element.
   $("#myElement").val("Hello");
});

3. Manipulera den laddade DOM-strukturen
   Till exempel: dölja en div när sidan laddas för första gången och visa den på klickhändelsen på en knapp

$(document).ready(function() {
  $("#toggleDiv").hide();
  $("button").click(function() {
    $("#toggleDiv").show();
  });
});

Skillnad mellan jQuery (fn) och körning av din kod innan

Att använda den dokumentklara händelsen kan ha små prestanda nackdelar , med försenad körning på upp till ~ 300ms. Ibland kan samma beteende uppnås genom körning av kod strax innan den stängande </body> -taggen:

<body>
  <span id="greeting"></span> world!
  <script>
    $("#greeting").text("Hello");
  </script>
</body>

kommer att producera liknande beteende men fungerar förr än eftersom det inte väntar på att dokumentet är klar för händelseutlösaren som i:

<head>
  <script>
    jQuery(function($) {
      $("#greeting").text("Hello");
    });
  </script>
</head>
<body>
  <span id="greeting"></span> world!
</body>

Tyngdpunkten på det faktum att det första exemplet förlitar sig på din kunskap om din sida och placering av skriptet precis innan den stängande </body> -taggen och specifikt efter span taggen.