Heim >Web-Frontend >js-Tutorial >Geben Sie den Inhalt in das Eingabefeld ein und drei Methodeninstanzen werden im entsprechenden Div angezeigt.
In diesem Artikel werden hauptsächlich die verschiedenen Methoden zur Eingabe von Inhalten in das Eingabefeld vorgestellt, die im Folgenden angezeigt werden: js-Methode; AngularJs Methode hat einen guten Referenzwert. Schauen wir es uns mit dem untenstehenden Editor an.
Eine Beispielfrage: Geben Sie den Inhalt in das Eingabefeld ein, und die verschiedenen Methoden werden im folgenden Bild angezeigt:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" /> <style type="text/css"> #p{ width: 175px; height: 100px; margin: 20px 84px; border:2px solid green; } </style> </head> <body> <p class="container"> 请输入内容:<input type="text" id="put" /> <p id="p" ></p> </p> </body> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script>
<script type="text/javascript"> var put1=document.getElementById("put"); var p1=document.getElementById("p"); put1.onkeyup=function(){ p1.innerText=put1.value; } </script>
Anleitung: getElementById, um
DOM-Knoten zu erhalten, innerHTML: alle HTML-Codes innerhalb des Knotens festlegen oder abrufen Sie müssen bezahlen Achten Sie hier darauf, den Knoteninhalt in der Eingabe zu erhalten, um den Wert zu erhalten.
Was hier verwendet wird, ist das innere
HTML-Attributund das Wertattribut. Achten Sie darauf, es von der Methode in JQ zu unterscheiden
JQ-Operation.
<script src="js/angular.js"></script> <script type="text/javascript"> $("#put").keyup(function(){ $("#p").html($("#put").val()) }); </script>
Anleitung: jQuery("selector").
action( ); pass Der Selektor ruft die Funktion Ereignis auf, aber in JQuery kann JQuery durch $ ersetzt werden, also $("selector").action(); >> ;Der Selektor kann den CSS-Selektor
direkt verwenden, um das Element auszuwählen. Der Unterschied besteht darin, dass html() und val() hier Methoden sind und in JS Attribute AngularJs-Operation:Anleitung:
<body ng-app=""> <p class="container"> 请输入内容:<input type="text" ng-model="name"/> <p ng-bind="name"></p> <!--<p id="p" >{{name}}</p>--> </p> </body>
1.ng -app: ng-app=""Erklärt den Umfang der Zuständigkeit von Angular, im Allgemeinen im Textkörper und im HTML geschrieben, im Prinzip kann es nur einen geben
2.ng- Modell auf der vorherigen Seite: Binden Sie den Elementwert (den Wert des Eingabefelds der Anweisung) an den Namen der Anwendungsvariablen
. 0a8bc3a1c393ad574b94550112e9f02936cc49f0c466276486e50c850b7e4956
3.ng-bind: Die Direktive bindet den Namen der Anwendungsvariablen an das innerHTML eines Absatzes. Sie können den
-Ausdruck verwenden, um 13aaf5bf552d43d11224df3448eff489
8be52d48d3dd0c5e3985460ca0e795e694b3e26ee717c64999d7867364b1b4a3
[Verwandte Empfehlungen]
1. e388a4556c0f65e1904146cc1a846bee{{name}}94b3e26ee717c64999d7867364b1b4a3
Kostenloses JS-Online-Video-Tutorial
3. php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial
Das obige ist der detaillierte Inhalt vonGeben Sie den Inhalt in das Eingabefeld ein und drei Methodeninstanzen werden im entsprechenden Div angezeigt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!