interface Web
js tutoriel
Explication détaillée des exemples d'utilisation des fonctions attr() et prop() dans jQuery (avec différences d'utilisation)_jquery
Explication détaillée des exemples d'utilisation des fonctions attr() et prop() dans jQuery (avec différences d'utilisation)_jquery
L'exemple de cet article décrit l'utilisation des fonctions attr() et prop() dans jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
1. Méthode attr() de jQuery
La méthode attr() est utilisée dans jquery pour obtenir et définir les attributs des éléments. attr est l'abréviation d'attribut. Attr() est souvent utilisée dans les opérations jQuery DOM. attr() a 4 expressions.
1. attr (nom de l'attribut) //Obtenir la valeur de l'attribut (obtenir la valeur de l'attribut du premier élément correspondant. Cette méthode peut facilement obtenir la valeur d'un attribut du premier élément correspondant. Si l'élément ne le fait pas avoir un attribut correspondant, renvoie undefined )
2. attr(nom de l'attribut, valeur de l'attribut) //Définissez la valeur de l'attribut (Définissez une valeur d'attribut pour tous les éléments correspondants.)
3. attr (nom de l'attribut, valeur de la fonction) //Définissez la valeur de la fonction de l'attribut (Définissez une valeur d'attribut calculée pour tous les éléments correspondants. Ne fournissez pas de valeur, mais fournissez une fonction et la valeur calculée par celle-ci. la fonction est la valeur de l'attribut)
4.attr(properties) //Définissez plusieurs valeurs d'attribut pour l'élément spécifié, à savoir : {Nom d'attribut un : "Valeur d'attribut un", Nom d'attribut deux : "Valeur d'attribut deux", … … }. (C'est la meilleure façon de définir de nombreux attributs par lots sur tous les éléments correspondants. Notez que si vous souhaitez définir l'attribut de classe d'un objet, vous devez utiliser « className » comme nom d'attribut. Ou vous pouvez utiliser directement « class » ou 'identifiant' )
Exemple de code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>
1.attr(name)//Obtenir la valeur de l'attribut
1.1 Utilisez attr(name) pour obtenir la valeur du titre :
<script>
alert($("ul li:eq(1)").attr("title"));
</script>
Résultat :
1.2 Utilisez attr(name) pour obtenir la valeur alt :
<script>
alert($("ul li:eq(1)").attr("alt"));
</script>
Résultat :
2. attr(name,value) //Définissez la valeur de l'attribut
2.1 Utilisez attr(name,value) pour modifier la valeur du titre en : Ne mangez pas d'oranges
<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>
Résultat :
3. attr(name,fn) //Définir la valeur de fonction de l'attribut
3.1 Définissez la valeur de l'attribut alt sur la valeur de l'attribut title.
<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>
Résultat :
4.attr(properties) //Définissez un objet sous la forme de "nom/valeur" comme attributs de tous les éléments correspondants
4.1 Obtenez le deuxième
- et définissez les attributs title et alt.
-
<script> $("ul li:eq(1)").attr({className:"lili"}); </script>Copier après la connexionRésultat :
4.3 Obtenez l'identifiant de paramètre du deuxième
- dans
- .
- dans
<script> $("ul li:eq(1)").attr({style:"color:red"}); </script>Copier après la connexionRésultat :
Il est faux d'ajouter alt dans li. Il ne peut être utilisé que dans les éléments img, area et input (y compris les éléments d'applet). Pour les éléments d'entrée, l'attribut alt est destiné à remplacer l'image du bouton de soumission. Afin d'expliquer la méthode attr() en détail ici, il n'y a pas d'attribut approprié, donc alt est utilisé comme exemple. C'est uniquement pour l'apprentissage et la référence de l'utilisation de la méthode attr().
Voici la différence entre alt et tite.
alt : Il s'agit du texte utilisé pour décrire le graphique. Lorsque l'image ne peut pas être affichée, ces textes seront affichés à la place de l'image. Le texte sera également affiché lorsque la souris sera déplacée sur l'image.
titre : C'est le texte qui sera affiché une fois que la souris sera placée dessus.Alors comment supprimer des attributs ?
Le mot-clé pour supprimer les attributs dans jquery est : removeAttr. Notez que A est en majuscule. Voyez comment l'utiliser :
. C'est le même code html que dans l'utilisation 1. Je veux supprimer l'attribut title de li, donc ça y est :<script> $("ul li:eq(1)").removeAttr ("title"); </script>Copier après la connexionC'est aussi simple que cela, attr est en fait une implémentation simplifiée de getAttribute en js natif, et RemoveAttr est l'abréviation de RemoveAttribute.
Alors, existe-t-il un attribut similaire à attr() ?
val() dans jquery est similaire à ,
$(this).val(); Obtient la valeur d'un nœud d'élément, équivalent à $(this).attr("value");
$(this).val(value); Définir la valeur d'un nœud d'élément, équivalent à $(this).attr("value",value);2. Méthode prop() de jQuery :
La fonctionprop() 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 la valeur d'un nombre quelconque de propriétés simultanément en tant qu'objet. 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ètresVeuillez trouver les paramètres correspondants en fonction des noms de paramètres définis dans la section de syntaxe précédente.
参数value可以是包括对象和数组在内的任意类型。Paramètres Description Nom de la propriété String type spécifie le nom de l'attribut. valeur Type facultatif/objet/fonction spécifie la valeur de l'attribut, ou la fonction qui renvoie la valeur de l'attribut. objet Objet spécifié par type , utilisé pour encapsuler plusieurs paires clé-valeur et définir plusieurs propriétés en même temps. 返回值
prop()函数的返回值是任意类型，返回值的类型取决于当前prop()函数执行的是"设置属性"操作还是"读取属性"操作。
如果prop()函数执行的是"设置属性"操作，则返回当前jQuery对象本身；如果是"读取属性"操作，则返回读取到的属性值。
如果当前jQuery对象匹配多个元素，返回属性值时，prop()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性，则返回undefined。
prop()和attr()的主要区别：prop()函数针对的是DOM元素(JS Element对象)的属性，attr()函数针对的是DOM元素所对应的文档节点的属性。详情请查看jQuery函数attr()和prop()的区别。
注意事项
1、如果通过prop()函数更改和
2、如果使用prop()函数操作表单元素的checked、selected、disabled等属性，如果该元素被选中(或禁用)，则返回true，否则(意即HTML中没有该属性)返回false。
3、prop()函数还可以设置或返回DOM元素的Element对象上的某些属性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。
4、在IE9及更早版本中，如果使用prop()函数设置的属性值不是一个简单的原始值(String、Number、Boolean)，并且在对应的DOM元素被销毁之前，该属性没有被移除，则可能会导致内存泄漏问题。如果你只是为了存储数据，建议你使用data()函数，以避免内存泄漏问题。
示例&说明
以下面这段HTML代码为例：
<div id="n1"> <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p> <input id="n3" name="order_id" type="checkbox" value="1"> <input id="n4" name="order_id" type="checkbox" checked="checked" value="2"> </div>
Copier après la connexion我们编写如下jQuery代码：
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; });Copier après la connexion附：jquery中attr和prop的区别
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。
关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。上面的描述也许有点模糊，举几个例子就知道了。
这个例子里元素的DOM属性有“href、target和class"，这些属性就是元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。
这个例子里元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。
再举一个例子：
是否可见
是否可见像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false $("#chk2").prop("checked") == trueCopier après la connexion如果上面使用attr方法，则会出现：
$("#chk1").attr("checked") == undefined $("#chk2").attr("checked") == "checked"Copier après la connexion希望本文所述对大家jQuery程序设计有所帮助。
<script> $("ul li:eq(1)").attr({id:"lili"}); </script>Copier après la connexionRésultat :
4.4 Obtenez le deuxième
- dans
<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>
Résultat :
4.2 Obtenez la deuxième classe de paramètres
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Conseils pour créer dynamiquement de nouvelles fonctions dans les fonctions Golang
Apr 25, 2024 pm 02:39 PM
Le langage Go propose deux technologies de création de fonctions dynamiques : la fermeture et la réflexion. les fermetures permettent d'accéder aux variables dans la portée de la fermeture, et la réflexion peut créer de nouvelles fonctions à l'aide de la fonction FuncOf. Ces technologies sont utiles pour personnaliser les routeurs HTTP, mettre en œuvre des systèmes hautement personnalisables et créer des composants enfichables.
Considérations relatives à l'ordre des paramètres dans la dénomination des fonctions C++
Apr 24, 2024 pm 04:21 PM
Dans la dénomination des fonctions C++, il est crucial de prendre en compte l’ordre des paramètres pour améliorer la lisibilité, réduire les erreurs et faciliter la refactorisation. Les conventions courantes d'ordre des paramètres incluent : action-objet, objet-action, signification sémantique et conformité de la bibliothèque standard. L'ordre optimal dépend de l'objectif de la fonction, des types de paramètres, de la confusion potentielle et des conventions du langage.
Comment écrire des fonctions efficaces et maintenables en Java ?
Apr 24, 2024 am 11:33 AM
La clé pour écrire des fonctions Java efficaces et maintenables est la suivante : restez simple. Utilisez un nom significatif. Gérer des situations particulières. Utilisez une visibilité appropriée.
Collection complète de formules de fonctions Excel
May 07, 2024 pm 12:04 PM
1. La fonction SOMME permet de sommer les nombres d'une colonne ou d'un groupe de cellules, par exemple : =SOMME(A1:J10). 2. La fonction MOYENNE permet de calculer la moyenne des nombres dans une colonne ou un groupe de cellules, par exemple : =AVERAGE(A1:A10). 3. Fonction COUNT, utilisée pour compter le nombre de nombres ou de texte dans une colonne ou un groupe de cellules, par exemple : =COUNT(A1:A10) 4. Fonction IF, utilisée pour effectuer des jugements logiques basés sur des conditions spécifiées et renvoyer le résultat correspondant.
Comparaison des avantages et des inconvénients des paramètres par défaut et des paramètres variables des fonctions C++
Apr 21, 2024 am 10:21 AM
Les avantages des paramètres par défaut dans les fonctions C++ incluent la simplification des appels, l’amélioration de la lisibilité et l’évitement des erreurs. Les inconvénients sont une flexibilité limitée et des restrictions de dénomination. Les avantages des paramètres variadiques incluent une flexibilité illimitée et une liaison dynamique. Les inconvénients incluent une plus grande complexité, des conversions de types implicites et des difficultés de débogage.
Quels sont les avantages des fonctions C++ renvoyant des types référence ?
Apr 20, 2024 pm 09:12 PM
Les avantages des fonctions renvoyant des types référence en C++ incluent : Améliorations des performances : le passage par référence évite la copie d'objets, économisant ainsi de la mémoire et du temps. Modification directe : L'appelant peut modifier directement l'objet de référence renvoyé sans le réaffecter. Simplicité du code : le passage par référence simplifie le code et ne nécessite aucune opération d'affectation supplémentaire.
Quelle est la différence entre les fonctions PHP personnalisées et les fonctions prédéfinies ?
Apr 22, 2024 pm 02:21 PM
La différence entre les fonctions PHP personnalisées et les fonctions prédéfinies est la suivante : Portée : les fonctions personnalisées sont limitées à la portée de leur définition, tandis que les fonctions prédéfinies sont accessibles tout au long du script. Comment définir : les fonctions personnalisées sont définies à l'aide du mot-clé function, tandis que les fonctions prédéfinies sont définies par le noyau PHP. Passage de paramètres : les fonctions personnalisées reçoivent des paramètres, tandis que les fonctions prédéfinies peuvent ne pas nécessiter de paramètres. Extensibilité : des fonctions personnalisées peuvent être créées selon les besoins, tandis que les fonctions prédéfinies sont intégrées et ne peuvent pas être modifiées.
Exception de fonction C++ avancée : gestion personnalisée des erreurs
May 01, 2024 pm 06:39 PM
La gestion des exceptions en C++ peut être améliorée grâce à des classes d'exceptions personnalisées qui fournissent des messages d'erreur spécifiques, des informations contextuelles et effectuent des actions personnalisées en fonction du type d'erreur. Définissez une classe d'exception héritée de std::exception pour fournir des informations d'erreur spécifiques. Utilisez le mot-clé throw pour lancer une exception personnalisée. Utilisez Dynamic_cast dans un bloc try-catch pour convertir l'exception interceptée en un type d'exception personnalisé. Dans le cas réel, la fonction open_file lève une exception FileNotFoundException. La capture et la gestion de l'exception peuvent fournir un message d'erreur plus spécifique.
