Geben Sie den Inhalt in das Eingabefeld ein und drei Methodeninstanzen werden im entsprechenden Div angezeigt.-js-Tutorial-php.cn

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

零下一度

Freigeben： 2017-05-09 10:08:26

Original

2908 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

. <body ng-app=""></body>

3.ng-bind: Die Direktive bindet den Namen der Anwendungsvariablen an das innerHTML eines Absatzes. Sie können den

-Ausdruck

verwenden, um <input type="text" ng-model="name"/>

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

<p ng-bind=“name”></p>[Verwandte Empfehlungen]

1. <p>{{name}}</p>Kostenloses 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!