jQuery-kärna - jQuery() metod

jQuery kärnreferenshandbok

Exempel

Hitta alla p-element som är underelement av div-element och ställ in deras kantegenskap:

$("div > p").css("border", "1px solid gray");

Prova själv

Definition och användning

jQuery()-metoden accepterar en sträng som innehåller en CSS-väljare för att matcha elementgrupper.

jQuery()-funktionen har tre syntaxer:

Syntax 1

Acceptera en sträng som innehåller en CSS-väljare för att matcha elementgrupper:

jQuery(selector, [context]

Detaljerad användning

Syntax 2

Skapa DOM-element med hjälp av en sträng med original HTML:

jQuery(html,ownerDocument]

Detaljerad användning

Syntax 3

Binda en funktion som ska köras när DOM-dokumentet har laddats klart:

jQuery( callback )

Detaljerad användning

jQuery( selector, [ context ] )

Denna syntax har följande användningsfall:

Användning 1: Ställ in väljarens miljö

Syntax

jQuery(selector, [context]

Som standard söker väljaren från dokumentets rot i DOM. Men du kan ställa in ett valfritt kontextargument för $().

Om vi vill söka efter ett element i en callback, kan vi begränsa sökningen som följer:

Exempel

$("div.foo").click(function() {
  $("span", this).addClass("bar");
)

Eftersom vi redan har begränsat span-väljaren till detta miljö, kommer endast span i det klickade elementet att få tilldelad klassen.

Inuti implementeras valjaremiljön genom .find() -metoden, så $("span", this) är ekvivalent med $(this).find("span").

Alla kärnfunctioner i jQuery implementeras genom denna funktion. Allt i jQuery baseras på denna funktion, eller används på något sätt med denna funktion. Den grundläggande användningen av denna funktion är att överföra ett uttryck (vanligtvis ett CSS-väljare) till den och sedan leta efter alla matchande element baserat på detta uttryck.

Som standard, om inget context-argument har specificerats, söker $() DOM-element i det aktuella HTML-dokumentet; om context-argumentet specificerats, t.ex. en DOM-elementgrupp eller ett jQuery-objekt, kommer det att sökas i detta context. Från och med jQuery 1.3.2 är elementordningen som returneras lika med den som uppstår i context.

Användning 2: Använda DOM-element

Syntax

jQuery(element)

Funktionen tillåter oss att skapa jQuery-objekt genom att använda DOM-element som hittats på annat sätt. Det vanliga användningsfallet är att anropa jQuery-metoder på element som redan har överförts till callback-funktionen via this-nyckelordet:

Exempel

$("div.foo".click(function() {
  $(this).slideUp();
)

Detta exempel använder en glidande animation för att dölja elementet när det klickas. Eftersom den hanterare som accepterar det klickade objektet i this-nyckelordet är ett rent DOM-element, måste elementet först förpackas med jQuery-objekt innan dess jQuery-metoder anropas.

Funktionen kan också ta emot XML-dokument och Window-objekt (även om de inte är DOM-element) som giltiga parametrar.

När XML-data returneras från en Ajax-anrop kan vi använda $() -funktionen för att paketera data genom jQuery-objektet. När detta är klart kan vi använda .find() och andra DOM-sökmetoder för att hämta enskilda element från XML-strukturen.

Användning 3: Klona jQuery-objekt

Syntax

jQuery(jQuery-objekt)

När jQuery-objektet överförs som parameter till $() -funktionen skapas en kopia av detta objekt. Som det ursprungliga objektet refererar den nya jQuery-objektet till samma DOM-element.

Användning 4: Returnera en tom uppsättning

Syntax

jQuery()

För jQuery 1.4 returnerar anropet av jQuery() utan parametrar en tom jQuery-uppsättning. I tidigare versioner av jQuery returnerar detta en uppsättning som innehåller document-knotet.

jQuery( html, [ ownerDocument ] )

Denna syntax har följande användningsfall:

Användning 1: Skapa nya element

Syntax

jQuery(html,ownerDocument]

Du kan skicka en manuellt skriven HTML-sträng, en sträng skapad av vissa mallmotorer eller plugins, eller en sträng som laddats via AJAX. Men det finns begränsningar när du skapar input-element, se den andra exempel.

Naturligtvis kan denna sträng innehålla snedstreck (t.ex. en bildadress) och backsteg. När du skapar ett enskilt element, använd stängda etiketter eller XHTML-format. Till exempel, skapa en span, kan du använda $("<span/>") eller $("<span></span>"), men det rekommenderas inte att använda $("<span>")). I jQuery är denna syntax lika med $(document.createElement("span")).

Om du skickar en sträng som parameter till $(), kontrollerar jQuery om strängen är HTML (t.ex. om vissa positioner i strängen innehåller etiketter). Om inte, tolkas strängen som en selektorsuttryck, se ovanstående förklaring. Men om strängen är ett HTML-segment, försöker jQuery att skapa DOM-element beskrivna av det HTML-segmentet. Därefter skapas och returneras en jQuery-objekt som refererar till dessa DOM-element:

Exempel

$("<p id="test">Min <em>nya</em> text</p>").appendTo("body");

Om HTML-segmentet är mer komplext än enkelt etikett utan egenskaper, som i det ovanstående exemplet med HTML, utförs den faktiska skapandeprocessen av elementet av webbläsarens innerHTML-mekanism. Speciellt sett skapar jQuery nya <div>-element och sätter elementets innerHTML-egenskap till den inmatade HTML-segmentet. När parameteren bara är en enkel etikett, till exempel $("<img />") eller $("<a></a>"), skapar jQuery element genom att använda den inbyggda JavaScript-funktionen createElement().

För att säkerställa plattformskompabilitet måste strukturen på segmenten vara god. Etiketter som kan innehålla andra element måste uppstå i par (med sluttaggare):

$("<a href="http://jquery.com"></a>");

Men jQuery tillåter också en liknande XML-etikettssyntax:

$("<a/>");

Etiketter som inte innehåller andra element kan stängas, eller inte stängas:

$("<img />");
$("<input>");

Användning 2: Sätt egenskaper och händelser

Syntax

jQuery(html,props)

För jQuery 1.4 kan vi skicka en egenskapsmapp till den andra parametern. Denna parameter accepterar en uppsättning egenskaper som kan passeras till .attr() -metoden. Dessutom kan du skicka vilken händelsetyp som helst och kan anropa följande jQuery-metoder: val, css, html, text, data, width, height, eller offset.

Observera att Internet Explorer inte tillåter dig att skapa en input-element och ändra dess typ; du måste använda till exempel "<input type="checkbox" />" för att definiera typen.

Exempel

Skapar en <input>-element, samtidigt som den sätter typattribut, attributvärden och några händelser.

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

jQuery( callback )

Tillåter dig att binda en funktion som ska köras när DOM-dokumentet har laddats in.

Denna funktion fungerar likadant som $(document).ready(), men när du använder denna funktion måste du packa in alla andra $()-operationer som behöver köras när DOM-laddningen är klar i den. Även om tekniskt sett denna funktion är länkbar, är det inte särskilt vanligt att länka på detta sätt.

Exempel

När DOM-laddningen är klar, kör de funktioner som finns där:

$(function() {
  
)

jQuery kärnreferenshandbok