suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Verwendung von jquery event change()

Detaillierte Erläuterung der Verwendung von jquery event change()

黄舟
黄舟Original
2018-05-15 10:12:389873Durchsuche

Dieser Artikel stellt hauptsächlich die Verwendung von change() in jquery vor. Er analysiert die Funktion, Definition und spezifischen Verwendungsfähigkeiten von Change und ist von großem praktischem Wert dazu

Dieser Artikel analysiert die Verwendung von change() in jquery anhand von Beispielen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

change() Wenn sich der Wert des Elements ändert, tritt das Änderungsereignis auf. Dieses Ereignis gilt nur für Textfelder sowie Textarea- und Select-Elemente.
Bei Verwendung mit ausgewählten Elementen tritt das Änderungsereignis auf, wenn eine Option ausgewählt wird. Bei Verwendung mit einem Textfeld oder Textbereich tritt dieses Ereignis auf, wenn das Element den Fokus verliert.
1. Verwendung von Änderung

1. Änderungsereignis auslösen: Änderungsereignis des ausgewählten Elements auslösen

Syntax: $(selector).change()

2. Binden Sie die -Funktion an das Änderungsereignis: Geben Sie die Funktion an, die ausgeführt werden soll, wenn das Änderungsereignis des ausgewählten Elements auftritt.

Syntax: $(selector).change(function)

2. Beispiel für change() in jquery

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
 $("button").click(function(){
  $("input").change();
 });
});
</script>
</head>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>

oninput ,onpropertychange,Verwendung von onchange

l Das onchange-Triggerereignis muss zwei Bedingungen erfüllen:

a) Die aktuelle Objekteigenschaft ändert sich und wird durch eine Tastatur oder Maus ausgelöst Ereignis (Skriptauslösung ist ungültig)

b) Das aktuelle Objekt verliert den Fokus (onblur);

l Bei Eigenschaftsänderung wird das Ereignis ausgelöst, solange sich die Eigenschaften des aktuellen Objekts ändern. aber es ist exklusiv für IE;

l oninput ist ein Nicht-IE-Browser Es unterstützt Browser wie Firefox und Opera, aber es gibt einen Unterschied, wenn es gebunden ist Für ein Objekt können nicht alle Eigenschaften des Objekts geändert werden. Löst ein Ereignis aus, das nur funktioniert, wenn sich der Objektwert ändert.

Wenn Sie im Textbereich die Tastatureingaben des Benutzers erfassen möchten, verwenden Sie einfach onkeyup, um das Ereignis zu überprüfen. Onkeyup unterstützt jedoch kein Kopieren und Einfügen, daher müssen Sie die Änderungen des Werts in der dynamisch überwachen Textarea, für das onpropertychange (im IE-Browser verwendet) und oninput (nicht im IE-Browser) erforderlich sind, werden zusammen verwendet.

Onpropertychange-Fehler

Während der Codeimplementierung wurde festgestellt, dass bei der Antwort des Benutzers beim Klicken auf den Textbereich obj.className="XX" zum Ändern des Schriftstils verwendet wird Als Ergebnis wird im IE ein Fehler auftreten, der dazu führt, dass onpropertychange nicht ausgelöst wird, wenn das erste Zeichen eingegeben wird. Daher muss es wie folgt festgelegt werden: obj.style.color="#000";

Lassen Sie uns zunächst über jquery sprechen und die jQuery-Bibliothek verwenden. Wenn ja, müssen Sie nur die Ereignisse oninput und onpropertychange gleichzeitig binden:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von jquery event change(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Paginierungskomponente basierend auf jQuery-KapselungNächster Artikel：Paginierungskomponente basierend auf jQuery-Kapselung

In Verbindung stehende Artikel

Mehr sehen