Heim >Web-Frontend >Front-End-Fragen und Antworten >So legen Sie mehrere Attributwerte eines Elements in jquery fest
So legen Sie mehrere Attributwerte eines Elements in jquery fest
- 青灯夜游Original
- 2023-01-28 14:23:411999Durchsuche
So legen Sie mehrere Attributwerte eines Elements in jquery fest: 1. Verwenden Sie zum Festlegen attr(). Die Syntax lautet „$(selector).attr({Attributname: Attributwert; Attributwert: Attributwert ...})“; 2. Verwenden Sie prop() zum Festlegen. Die Syntax lautet „$(selector).prop({property name:property value;property value:property value...})“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6-Version, Dell G3-Computer.
In jquery können Sie zwei Methoden verwenden, um Attribute (Werte) auf Elemente festzulegen:
attr()-Methode
prop()-Methode
Beide Methoden können auf Elemente Eins oder festgelegt werden mehr Attributwerte.
Sehen wir uns an, wie man mehrere Attributwerte festlegt.
Methode 1. Verwenden Sie attr(), um mehrere Attributwerte festzulegen.
attr()-Methode legt den Attributwert des ausgewählten Elements fest oder gibt ihn zurück. Abhängig von den Parametern der Methode ist auch die Funktionsweise unterschiedlich.
Syntax:
//多个属性
$(selector).attr({属性名:属性值;属性值:属性值...})Beispiel: Legen Sie die Breiten- und Höhenattribute des Bildes fest
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("img").attr({
width: "50",
height: "80"
});
});
});
</script>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="So legen Sie mehrere Attributwerte eines Elements in jquery fest" >
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>
2. Verwenden Sie prop(), um mehrere Attributwerte festzulegen. Die Methode prop() legt die fest oder gibt sie zurück Attribute des ausgewählten Elements und Werts.
Wenn diese Methode zum Festlegen von Attributwerten verwendet wird, werden ein oder mehrere Attribut-/Wertpaare für den Satz übereinstimmender Elemente festgelegt. Grammatik://多个属性
$(selector).prop({属性名:属性值;属性值:属性值...})Beispiel: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("img").prop({
width: "50",
height: "80"
});
});
});
</script>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="So legen Sie mehrere Attributwerte eines Elements in jquery fest" >
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>
Die Methode prop() ähnelt der Methode attr(), beide werden verwendet, um die HTML-Attribute des Elements abzurufen oder festzulegen, es gibt jedoch wesentliche Unterschiede zwischen den beiden.
Offizielle jQuery-Empfehlung: Für Attribute mit zwei Werten von wahr und falsch, z. B. aktiviert, ausgewählt, deaktiviert usw., wird empfohlen, die Methode prop () zum Betrieb zu verwenden, während für andere Attribute die Verwendung empfohlen wird attr()-Methode zum Betrieb. Beispiel:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$('input[type="radio"]').change(function(){
var bool = $(this).attr("checked");
if(bool){
$("p").text("你选择的是：" + $(this).val());
}
})
})
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<p></p>
</body>
</html>Der Vorschaueffekt ist in Abbildung 1 dargestellt.
Analyse
$().change(function(){
……
})Das Obige stellt das Änderungsereignis in jQuery dar, das mit dem onchange-Ereignis in JavaScript identisch ist. Wir werden es später im Detail vorstellen. In diesem Beispiel möchten wir tatsächlich $(this).attr("checked") verwenden, um festzustellen, ob das Optionsfeld ausgewählt ist. Wenn es ausgewählt ist, erhalten Sie den Wert des Optionsfelds. Aber nachdem ich den Code ausgeführt hatte, stellte ich fest: Es hat überhaupt keine Wirkung! Warum ist das so? Tatsächlich können wir die aktivierten, ausgewählten und deaktivierten Attribute des Formularelements nicht mit der Methode attr() abrufen, sondern müssen die Methode prop() verwenden. Daher funktioniert es, wenn wir die Methode attr() durch die Methode prop() ersetzen. Tatsächlich scheint die prop()-Methode die Mängel der attr()-Methode bei Formularattributoperationen auszugleichen. Erinnern Sie sich an einen Satz: Wenn eine Eigenschaft mit der Methode attr() nicht abgerufen oder festgelegt werden kann, kann dies durch Ändern der Methode prop() erreicht werden. 【Empfohlenes Lernen: jQuery-Video-Tutorial
,Web-Frontend-Video】
Das obige ist der detaillierte Inhalt vonSo legen Sie mehrere Attributwerte eines Elements in jquery fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!