jQuery kern - de jQuery() methode
Instance
Vind alle p-elementen die onderdeel zijn van een div-element, en stel hun randeigenschap in:
$("div > p").css("border", "1px solid gray");
Definitie en gebruik
De jQuery() methode accepteert een string die een CSS-selector bevat om een elementencollectie te matchen.
De jQuery() functie heeft drie syntaxis:
Syntaxis 1
Ontvang een string die een CSS-selector bevat om een elementencollectie te matchen:
jQuery(selector, [context]
Syntaxis 2
Maak DOM-elementen met een string in bruto HTML:
jQuery(html,ownerDocument]
Syntaxis 3
Bind een functie die wordt uitgevoerd wanneer het DOM-document is geladen:
jQuery(callback)
jQuery( selector, [ context ] )
Deze syntaxis heeft de volgende gebruiksmethoden:
Gebruik 1: Stel de selector omgeving in
Syntax
jQuery(selector, [context]
Standaard zoekt de selector van de wortel van het document doorheen de DOM. Maar we kunnen een optionele context parameter instellen voor $().
Bijvoorbeeld, als we een element willen zoeken in een callback, kunnen we de volgende zoekopdracht beperken:
Instance
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
Omdat we de span-selector hebben beperkt tot deze omgeving, krijgt alleen de span in het geklikte element de toegevoegde class.
Binnenin wordt de selector-omgeving geïmplementeerd via de .find() methode, dus $("span", this) is equivalent aan $(this).find("span").
De kernfunctionaliteiten van jQuery worden allemaal door deze functie geïmplementeerd. Alles in jQuery is gebaseerd op deze functie, ofwel wordt deze functie op een of andere manier gebruikt. De meest basisgebruik van deze functie is om een expressie (doorgaans samengesteld uit CSS-selectors) door te geven aan deze functie, en vervolgens alle overeenkomende elementen te vinden op basis van deze expressie.
Standaard gesproken, zoeken $() in het huidige HTML-document naar DOM-elementen als de context parameter niet is gespecificeerd; als de context parameter is gespecificeerd, zoals een verzameling DOM-elementen of een jQuery-object, dan wordt in deze context gezocht. Vanaf jQuery 1.3.2 is de volgorde van de elementen die worden geretourneerd equivalent aan de volgorde waarin ze in de context verschijnen.
Gebruik 2: Gebruik DOM-elementen
Syntax
jQuery(element)
Deze functie maakt het mogelijk om een jQuery-object te maken door gebruik te maken van DOM-elementen die op andere manieren zijn gevonden. De gebruikelijke toepassing van deze functie is om methoden van jQuery aan elementen te roepen die zijn doorgegeven aan de callback-functie via de this-kleutel:
Instance
$("div.foo".click(function() {
$(this).slideUp();
});
Deze voorbeeldcode gebruikt een schuifanimatie om een element te verbergen wanneer het wordt geklikt. Omdat de handler de geklikte item in de this-kleutel als puur DOM-element accepteert, moet het element voor het aanroepen van jQuery-methoden worden omhuld met een jQuery-object.
Deze functie kan ook XML-documenten en Window-objecten (hoewel deze geen DOM-elementen zijn) als geldige parameters accepteren.
Wanneer XML-gegevens worden geretourneerd uit een Ajax-aanroep, kunnen we de functie $() gebruiken om de gegevens met een jQuery-object te omhullen. Zodra dit is voltooid, kunnen we .find() en andere DOM-beslismethoden gebruiken om individuele elementen in de XML-structuur op te halen.
Gebruik 3: Cloneer een jQuery-object
Syntax
jQuery(jQuery-object)
Wanneer een jQuery-object wordt doorgegeven aan de functie $(), wordt een kopie van dat object gemaakt. Net als het oorspronkelijke object verwijst de nieuwe jQuery-object naar dezelfde DOM-elementen.
Gebruik 4: Lege collectie retourneren
Syntax
jQuery()
Voor jQuery 1.4 wordt het aanroepen van de jQuery() -methode zonder parameters een lege jQuery-collectie. In eerdere versies van jQuery wordt er een collectie met de document-node geretourneerd.
jQuery( html, [ ownerDocument ] )
Deze syntaxis heeft de volgende gebruiksmethoden:
Gebruik 1: Nieuwe elementen maken
Syntax
jQuery(html,ownerDocument]
Je kunt een handgeschreven HTML-string doorgeven, of een string die is gemaakt door een bepaalde template-engine of plug-in, of een string die via AJAX is geladen. Maar er zijn beperkingen bij het maken van input-elementen, zie de tweede voorbeeld.
Natuurlijk kan deze string schuine strepen bevatten (bijvoorbeeld een afbeeldingsadres), en backslashes. Wanneer je een enkel element maakt, gebruik dan gesloten tags of XHTML-formaat. Bijvoorbeeld, om een span te maken, kun je $("<span/>") of $("<span></span>") gebruiken, maar $("<span>") wordt niet aanbevolen. In jQuery is deze syntaxis equivalent aan $(document.createElement("span")).
Als je een string als parameter aan $() geeft, controleert jQuery of de string HTML is (bijvoorbeeld, als er tags op bepaalde posities in de string staan). Als dat niet het geval is, wordt de string geïnterpreteerd als een selector-expressie, zie hierboven. Als de string echter een HTML-fragment is, probeert jQuery een DOM-element te maken dat wordt beschreven door dat HTML-fragment. Vervolgens maakt het een en keert een jQuery-object terug dat verwijst naar deze DOM-elementen:
Instance
$("<p id="test">Mijn <em>nieuwe</em> tekst</p>").appendTo("body");
Als de HTML-fragment complexer is dan een eenvoudige tag zonder attributen, zoals in het voorbeeld hierboven, wordt het element effectief gemaakt door het innerHTML-mechanie van de browser. Specifiek gezegd, maakt jQuery een nieuwe <div>-element aan en stelt de innerHTML-eigenschap van het element in op het overgegeven HTML-fragment. Als het argument een eenvoudige tag is, zoals $("<img />") of $("<a></a>"), maakt jQuery het element met behulp van de ingebouwde JavaScript createElement() -functie.
To ensure cross-platform compatibility, the structure of the fragment must be good. Tags that can contain other elements must be paired (with closing tags):
$("<a href="http://jquery.com"></a>");
However, jQuery also allows an XML-like tag syntax:
$("<a/>");
Tags that cannot contain other elements can be closed or not closed:
$("<img />");
$("<input>");
Usage 2: Set attributes and events
Syntax
jQuery(html,props)
For jQuery 1.4, we can pass an attribute mapping to the second parameter. This parameter accepts a superset of attributes that can be passed to the .attr() method. In addition, you can pass any event type and call the following jQuery methods: val, css, html, text, data, width, height, or offset.
Note that Internet Explorer does not allow you to create an input element and change its type; you must use, for example, "<input type="checkbox" />" to specify the type.
Instance
Create an <input> element while setting the type attribute, attribute values, and some events.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
).appendTo("form");
jQuery(callback)
Allows you to bind a function to be executed after the DOM document is loaded.
The function behaves like $(document).ready(), but when using this function, you need to wrap all other $() operations that need to be executed when the DOM is loaded into it. Although technically this function is chainable, there are not many cases where it is actually chained in this way.
Example
Execute the function within it after the DOM is loaded:
$(function() {
// Document ready
});
