Explication détaillée de jQuery.prop() utilisation_jquery

La fonction

prop() est utilisée pour définir ou renvoyer la valeur d'attribut de l'élément correspondant à l'objet jQuery actuel.

Cette fonction appartient à l'objet (instance) jQuery. Si vous devez supprimer une propriété d'un élément DOM, utilisez la fonction removeProp().

Grammaire

Cette fonction a été ajoutée dans jQuery 1.6. La fonction prop() a les deux utilisations suivantes :

Utilisation 1 :

jQueryObject.prop( propertyName [, value ] )

Définit ou renvoie la valeur de la propriété spécifiée propertyName. Si le paramètre value est spécifié, cela signifie définir la valeur de la propriété propertyName sur value ; si le paramètre value n'est pas spécifié, cela signifie renvoyer la valeur de la propriété propertyName.

La valeur du paramètre peut également être une fonction. prop() parcourra et exécutera la fonction en fonction de tous les éléments correspondants. Le pointeur this dans la fonction pointera vers l'élément DOM correspondant. prop() transmettra également deux paramètres à la fonction : le premier paramètre est l'index de l'élément dans l'élément correspondant et le deuxième paramètre est la valeur actuelle de l'attribut propertyName de l'élément. La valeur de retour de la fonction est la valeur définie pour l'attribut propertyName de l'élément.

Utilisation 2 :

jQueryObject.prop( objet )

Définissez les valeurs de n'importe quel nombre de propriétés simultanément sous forme d'objets. Chaque attribut de l'objet object correspond à propertyName et la valeur de l'attribut correspond à value.

Remarque : toutes les opérations de "définition des attributs" de la fonction prop() concernent chaque élément correspondant à l'objet jQuery actuel ; toutes les opérations de "lecture des attributs" concernent uniquement le premier élément correspondant.
Paramètres

Veuillez trouver les paramètres correspondants en fonction des noms de paramètres définis dans la section de syntaxe précédente.

Description du paramètre
propertyName Le nom de la propriété spécifié par le type String.
valeur La valeur d'attribut spécifiée par le type facultatif/Objet/Fonction, ou une fonction qui renvoie la valeur d'attribut.
object Un objet spécifié par le type Object, utilisé pour encapsuler plusieurs paires clé-valeur et définir plusieurs propriétés en même temps.
La valeur du paramètre peut être de n'importe quel type, y compris des objets et des tableaux.

Valeur de retour

La valeur de retour de la fonction prop() est de n'importe quel type. Le type de la valeur de retour dépend si la fonction prop() actuelle effectue une opération de « définition d'attribut » ou une opération de « lecture d'attribut ».

Si la fonction prop() effectue une opération de « définition de propriété », elle renvoie elle-même l'objet jQuery actuel ; si elle effectue une opération de « propriété de lecture », elle renvoie la valeur de la propriété lue.

Si l'objet jQuery actuel correspond à plusieurs éléments, lors du renvoi de la valeur de l'attribut, la fonction prop() utilise uniquement le premier élément correspondant parmi eux. Si l'élément n'a pas l'attribut spécifié, undefined est renvoyé.

La principale différence entre prop() et attr() : la fonction prop() cible les attributs de l'élément DOM (objet JS Element), et la fonction attr() cible les attributs du nœud document correspondant au DOM élément. Pour plus de détails, veuillez consulter la différence entre les fonctions jQuery attr() et prop().

Remarques

1. Si l'attribut type des éléments d5fd7aea971a85678ba271703566ebfd et bb9345e55eb71822850ff156dfde57c8 est modifié via la fonction prop(), une erreur sera générée sur la plupart des navigateurs, car cet attribut n'est généralement pas autorisé à être modifié ultérieurement. .

2. Si vous utilisez la fonction prop() pour faire fonctionner les attributs vérifiés, sélectionnés, désactivés et autres de l'élément de formulaire, si l'élément est sélectionné (ou désactivé), il retournera vrai, sinon (ce qui signifie qu'il n'y a pas tel attribut en HTML), il renverra false.

3. La fonction prop() peut également définir ou renvoyer certains attributs sur l'objet Element de l'élément DOM, tels que : tagName, selectedIndex, nodeName, nodeType,ownerDocument, defaultChecked, defaultSelected et d'autres attributs.

4. Dans IE9 et les versions antérieures, si la valeur de l'attribut définie à l'aide de la fonction prop() n'est pas une simple valeur primitive (String, Number, Boolean), et avant que l'élément DOM correspondant ne soit détruit, l'attribut n'a pas de If. supprimé, des fuites de mémoire peuvent se produire. Si vous stockez simplement des données, il est recommandé d'utiliser la fonction data() pour éviter les fuites de mémoire.

Exemples et instructions

Prenons le code HTML suivant comme exemple :

Copier le code Le code est le suivant :

a90cc2847621da1ce91680be941a0b17
b865089f5bb26a6ff7bce3abe4f24202CodePlayer94b3e26ee717c64999d7867364b1b4a3
f01cab756e4c0e73fb2e1bd6a2318dc9
5c9471189e0bed080f5da51ac5b050ef
16b28748ea4df4d9c2150843fecfba68

Nous écrivons le code jQuery suivant :

var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性，而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined

document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function

// prop()设置的属性也是针对元素(Element对象)，因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer

// 以对象形式同时设置多个属性，属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.jb51.net/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.jb51.net/

// 反选所有的复选框(没选中的改为选中，选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.