Indique l'emplacement où est positionnée l'image d’arrière plan
a méthode .prop() renvoie la valeur de la propriété d'un élément. La méthode prop() obtient la valeur de la propriété
$( " sélecteur " .prop (NomPropriété)
NomPropriété est Le nom de la propriété à obtenir.
La méthode .prop() obtient la valeur de la propriété pour seulement le premier élément dans l'ensemble des éléments sélectionnés. Elle renvoie undefined pour la valeur d'une propriété qui n'a pas été définie, ou si l'ensemble des éléments sélectionnés n'existe pas. Pour obtenir la valeur de chaque élément individuellement, utilisez une construction en boucle, comme la méthode .each() ou .map() de jQuery.
La différence entre les propriétés et les attributs peut être importante dans des situations précises. Avant jQuery 1.6, la méthode .attr() prend parfois les valeurs de propriété en compte lors de la récupération de certains attributs, ce qui pouvaient provoquer un comportement incompatible. A partir de jQuery 1.6, la méthode .prop() fournit un moyen pour récupérer explicitement les valeurs de propriété, alors que .attr() récupère les attributs.
Par exemple, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultCheckedet defaultSelected devraient être récupérées et définies avec la méthode .prop() . Avant jQuery 1.6, ces propriétés ont été récupérées avec la méthode .attr() .
En ce qui concerne des attributs booléens, envisager un élément DOM défini par la balisage HTML <input type="checkbox" checked="checked" />et supposer que c'est dans une variable JavaScript nommée elem:
|
elem.checked |
true (Boolean) Va changer l'état de la case à cocher en checked |
|
$(elem).prop("checked") |
true (Boolean) Va changer l'état de la case à cocher en checked |
|
elem.getAttribute("checked") |
"checked" (String) l'état initial de la case à cocher ne change pas |
|
$(elem).attr("checked")(1.6) |
"checked" (String) l'état initial de la case à cocher ne change pas |
|
$(elem).attr("checked")(1.6.1+) |
"checked" (String) Va changer l'état de la case à cocher en checked |
|
$(elem).attr("checked")(pre-1,6) |
true (Boolean) va changer l'état de la case à cocher en checked |
A l'aide de jQuery 1.6, le code if ( $(elem).attr("checked") ) permettra de récupérer le contenu réelles de l' attribut, ne change pas la case à cocher en checked ou unchecked. Il vise uniquement à stocker la valeur initiale de la propriété checked .
Afin de maintenir la compatibilité, la méthode .attr() en jQuery 1.6.1 et plus va récupérer et mettre à jour la propriété pour vous donc aucun code pour les attributs de type boolean n'est nécessaire pour être changé avec la méthode .prop(). Néanmoins, le moyen préféré pour récupérer une valeur checked est l'une des options suivantes :
Pour voir comment cela fonctionne dans jQuery, cocher/décocher la case à cocher dans l'exemple ci-dessous.
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p { margin: 20px 0 0 }
b { color: blue; }
</style>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$("input").change(function() {
var $input = $(this);
$("p").html(".attr('checked'): <b>" +
$input.attr('checked') + "</b><br>"
+ ".prop('checked'): <b>" + $input.prop('checked') +
"</b><br>"
+ ".is(':checked'): <b>" + $input.is(':checked') ) +
"</b>";
}).change();
</script>
</body>
</html>
Syntaxe 1:
.prop (NomPropriété, valeur)
NomPropriétéLe nom de la propriété à définir.
Valeur Une valeur à définir pour la propriété.
Syntaxe 2 :
.prop (array)
array : un array de paires de valeur de la propriété à définir.
Syntaxe :
.prop (propertyName, fonction (index, oldPropertyValue))
propertyNameLe nom de la propriété à définir.
fonction(index, oldPropertyValue)Une fonction retournant la valeur à définir. Reçoit la position d'index de l'élément dans le jeu et l'ancienne valeur de propriété comme arguments. Au sein de la fonction, le mot clé this désigne l'élément actuel.
La méthode .prop() est un moyen commode pour définir la valeur des propriétés — surtout lors de la définition de plusieurs propriétés, en utilisant les valeurs renvoyées par une fonction, ou les valeurs de paramètre sur plusieurs éléments à la fois. Il devrait être utilisé lors de la définition de selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked ou defaultSelected. Depuis jQuery 1.6, ces propriétés peuvent ne plus être définies avec la méthode .attr() .
Propriétés affectent généralement l'état dynamique d'un élément DOM sans changer l'attribut HTML sérialisé.
Exemples comprennent la propriété de la value des éléments d'entrée, la propriété disabled des intrants et des boutons ou la propriété checked d'une case à cocher. La méthode .prop() devrait être utilisée pour définir désactivé et vérifiées au lieu de la méthode .attr() . La méthode .val() doit être utilisée pour l'obtention et la mise en valeur comme suit :
$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");
En utilisant une fonction pour définir les propriétés, vous pouvez calculer la valeur basée sur les autres propriétés de l'élément. Par exemple, pour basculer toutes les cases à cocher à leurs valeurs individuelles :
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
Note :Si rien n'est retourné dans la fonction setter (ie. function(index, prop){}), ou si undefined est retourné, la valeur actuelle n'est pas modifiée. Ceci est utile pour définir sélectivement les valeurs quand certaines conditions sont remplies.
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p { margin: 20px 0 0 }
b { color: blue; }
</style>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1"> 1 Check
me</label>
<input id="check2" type="checkbox" checked="checked">
<label for="check2">2 Check me</label>
<p></p>
<script>
$("input").change(function() {
var $input = $(this);
$("p").html(".attr('checked'): <b>" +
$input.attr('checked') + "</b><br>"
+ ".prop('checked'): <b>" + $input.prop('checked') +
"</b><br>"
+ ".is(':checked'): <b>" + $input.is(':checked') ) +
"</b>";
}).change();
</script>
</body>
</html>