jQuery kerne - jQuery() metode
Eksempel
Find alle p-elementer, der er underlæggende til div-elementer, og sæt deres kantegenskab:
$("div > p").css("border", "1px solid gray");
Definition og brug
jQuery() metoden accepterer en streng, der indeholder en CSS-valgmaker til at matche elementkolektionen.
jQuery() funktionen har tre syntaks:
Syntaks 1
Accepter en streng, der indeholder en CSS-valgmaker til at matche elementkolektionen:
jQuery(selector, [context]
Syntaks 2
Opret DOM-elementer ved hjælp af en streng med original HTML:
jQuery(html,ownerDocument]
Syntaks 3
Bind en funktion, der skal køres, når DOM-dokumentet er indlæst:
jQuery( callback )
jQuery( selector, [ context ] )
Denne syntaks har følgende brugsmåder:
Brug 1: Sæt valgskema miljø
Syntaks
jQuery(selector, [context]
Som standard søger valgmaker fra dokumentets rod til DOM. Men du kan sætte en valgfri context parameter til $().
Hvis vi vil søge efter et element i en callback, kan vi begrænse søgningen som følger:
Eksempel
$("div.foo").click(function() {
$("span", this).addClass("bar");
);
Da vi allerede har begrænset span-vælgeren til denne kontekst, får kun de span i det klikkede element tilføjet klassen.
Indvendigt implementeres selector-miljøet gennem .find() metoden, så $("span", this) er lig med $(this).find("span").
jQuery's kernefunktioner implementeres gennem denne funktion. Alt i jQuery er baseret på denne funktion, eller det bruger på en eller anden måde denne funktion. Den grundlæggende brug af denne funktion er at passere en udtryk (normalt dannet af CSS-vælgere), og derefter finde alle elementer, der matcher dette udtryk.
Som standard søger $() i det aktuelle HTML-dokument, hvis ingen context-parametre er specificeret; hvis context-parametre er specificeret, såsom en DOM-elementgruppe eller et jQuery-objekt, vil søgningen finde sted i denne kontekst. Fra jQuery 1.3.2 og fremefter er elementernes rækkefølge den samme som deres fremtræden i konteksten.
Brug 2: Brug af DOM-element
Syntaks
jQuery(element)
Funktionen lader os oprette jQuery-objekter ved hjælp af DOM-elementer, som vi har fundet på en anden måde. Denne funktion bruges normalt til at kalde jQuery-metoder på elementer, der allerede er blevet overført til callback-funktionen via this-nøglen:
Eksempel
$("div.foo".click(function() {
$(this).slideUp();
);
Dette eksempel bruger en glidende animation til at skjule elementet, når det klikkes. Da hændelseshåndteringen modtager det klikkede element som ren DOM-element, skal elementet pakkes med jQuery-objektet, før jQuery-metoderne kaldes.
Funktionen kan også acceptere XML-dokumenter og Window-objekter (selvom de ikke er DOM-elementer) som gyldige parametre.
Når XML-data returneres fra en Ajax-anmodning, kan vi bruge $() funktionen til at indpakke dataene med jQuery-objektet. Når det er færdigt, kan vi bruge .find() og andre DOM-søgemetoder til at hente enkelt elementer fra XML-strukturen.
Brug 3: Klon jQuery-objekt
Syntaks
jQuery(jQuery-objekt)
Når jQuery-objektet passes som parameter til $() funktionen, oprettes en kopi af dette objekt. Som det oprindelige objekt refererer den nye jQuery-objekt til de samme DOM-elementer.
Brug 4: Returner en tom samling
Syntaks
jQuery()
For jQuery 1.4 vil kald af jQuery() uden parametre returnere en tom jQuery-samling. I tidligere versioner af jQuery ville dette returnere en samling, der indeholder dokumentknotet.
jQuery( html, [ ownerDocument ] )
Denne syntaks har følgende brugsmåder:
Brug 1: Opret nye elementer
Syntaks
jQuery(html,ownerDocument]
Du kan overføre en håndskrevet HTML-streng, en streng oprettet af en vis template-motor eller plugin, eller en streng lastet via AJAX. Men der er begrænsninger, når du opretter input-elementer, og du kan se et andet eksempel.
Selvfølgelig kan strengen indeholde skråstreg (f.eks. en billedadresse) og baglæns skråstreg. Når du opretter et enkelt element, skal du bruge afsluttende tag eller XHTML-format. For eksempel kan du oprette en span ved hjælp af $("<span/>") eller $("<span></span>"), men det anbefales ikke at bruge $("<span>"). I jQuery svarer denne syntaks til $(document.createElement("span")).
Hvis du overfører en streng som parameter til $(), kontrollerer jQuery om strengen er HTML (f.eks. om der er tags på visse steder i strengen). Hvis ikke, tolker jQuery strengen som en vælgerudtryk, se den tidligere forklaring. Hvis strengen er en HTML-del, forsøger jQuery at oprette DOM-elementer beskrevet af den pågældende HTML-del. Derefter oprettes og returneres en jQuery-objekt, der refererer til disse DOM-elementer:
Eksempel
$("<p id="test">Min <em>ny</em> tekst</p>").appendTo("body");
Hvis HTML-delen er mere kompleks end en enkel tag uden egenskaber, såsom i de ovennævnte eksempler med HTML, udføres elementets faktiske oprettelsesproces af browserens innerHTML-mekanisme. Specifikt vil jQuery oprette nye <div>-elementer og derefter sætte elementets innerHTML-egenskab til den indsendte HTML-deling. Når argumentet kun er en simpel tag, f.eks. $("<img />") eller $("<a></a>"), opretter jQuery elementet gennem den indbyggede JavaScript createElement()-funktion.
For at sikre tværplatforms-kompatibilitet skal fragmentets struktur være god. Tag, der kan indeholde andre elementer, skal optræde i par (med lukkeetiketter):
$("<a href="http://jquery.com"></a>");
Men jQuery tillader også en lignende XML-tag-syntaks:
$("<a/>");
Etiketter, der ikke kan indeholde andre elementer, kan lukkes, eller de kan ikke lukkes:
$("<img />");
$("<input>");
Brug 2: Indstil egenskaber og begivenheder
Syntaks
jQuery(html,props)
For jQuery 1.4 kan vi sende en egenskabsmappning til den anden parameter. Denne parameter accepterer en supermængde af egenskaber, der kan sendes til .attr() metoden. Derudover kan du sende enhver begivenhedstype og kan kalde de nedenstående jQuery-metoder: val, css, html, text, data, width, height, eller offset.
Bemærk, at Internet Explorer ikke tillader dig at oprette input-elementer og ændre deres type; du skal bruge f.eks. "<input type="checkbox" />" for at specificere typen.
Eksempel
Opretter en <input>-element, samtidig med at den sætter type-attribut, værdi og nogle begivenheder.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
Tillader dig at binde en funktion, der skal udføres, når DOM-dokumentet er indlæst.
Denne funktion fungerer ligesom $(document).ready(), men når du bruger denne funktion, skal du pakke alle andre $() operationer, der skal udføres, når DOM'en er klar til at blive indlæst, ind i den. Selvom funktionen teknisk set er kædelig, er der ikke mange, der gør det på denne måde.
Eksempel
Når DOM'en er indlæst, udføres funktionerne her:
$(function(){
// dokumentet er klar
);
