suchen

Heim  >  Artikel  >  Web-Frontend  >  Geben Sie den Inhalt in das Eingabefeld ein und drei Methodeninstanzen werden im entsprechenden Div angezeigt.

Geben Sie den Inhalt in das Eingabefeld ein und drei Methodeninstanzen werden im entsprechenden Div angezeigt.

零下一度
零下一度Original
2017-05-09 10:08:262866Durchsuche

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>

js: nativeDOM-Manipulation

<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-Attribut

und 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

zu ersetzen. Sobald die Seite geladen wird, wird {} angezeigt ersetzen

8be52d48d3dd0c5e3985460ca0e795e694b3e26ee717c64999d7867364b1b4a3[Verwandte Empfehlungen]

1. e388a4556c0f65e1904146cc1a846bee{{name}}94b3e26ee717c64999d7867364b1b4a3Kostenloses JS-Online-Video-Tutorial

2 >

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!

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：Teilen Sie den Beispielcode, der Node-Images verwendet, um die Image-Server-Funktion zu implementierenNächster Artikel：Teilen Sie den Beispielcode, der Node-Images verwendet, um die Image-Server-Funktion zu implementieren

In Verbindung stehende Artikel

Mehr sehen