이 글에서는 주로 아래 p에 표시되는 입력 상자에 콘텐츠를 입력하는 다양한 방법을 소개합니다. js 메소드 jQuery 메소드; 🎜> 방법은 좋은 참고 가치를 가지고 있습니다. 아래 편집기로 살펴보겠습니다.
질문 예시: 입력 상자에 내용을 입력하면 아래 p에 다양한 방법이 표시됩니다.
<!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: 기본DOM 작업<script type="text/javascript">
var put1=document.getElementById("put");
var p1=document.getElementById("p");
put1.onkeyup=function(){
p1.innerText=put1.value;
}
</script>
안내 미로: getElementById는
DOM 노드를 가져옵니다. innerHTML: 노드 내부의 모든 HTML 코드를 설정하거나 가져옵니다. 여기서 필요합니다. 입력에서 노드를 가져오는 데 주의하세요. 콘텐츠는 값을 가져와야 합니다.
여기서 사용되는 것은 내부
HTML 속성JQ 작업의 메서드와 구별되도록 주의하세요. <script src="js/angular.js"></script>
<script type="text/javascript">
$("#put").keyup(function(){
$("#p").html($("#put").val())
});
</script>
가이드: jQuery("selector").
action(); 선택기를 통해 이벤트 함수 를 호출하지만 JQuery에서는 JQuery를 $, 즉 $("selector").action();<🎜로 대체할 수 있습니다. > >>Select 선택기는 CSS 선택기
를 직접 사용하여 AngularJs 연산:<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=""는 Angular의 관할 범위를 선언하며 일반적으로 본문에 작성됩니다. 원칙적으로 페이지는
2.ng-model만 있을 수 있습니다. 요소 값(명령어의 입력 필드 값)을 바인딩합니다. 애플리케이션 <body ng-app=""></body>
변수
3.ng-bind: 지시어는 애플리케이션 변수 이름을 단락의 innerHTML에 바인딩합니다. <input type="text" ng-model="name"/>
표현식
<p ng-bind=“name”></p>
을 바꿀 수 있습니다. 페이지가 로드되는 순간 {}가 표시됩니다.
[관련 권장사항]<p>{{name}}</p>
무료 js 온라인 동영상 튜토리얼
3. php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼
위 내용은 입력 상자에 내용을 입력하면 해당 div에 세 가지 메서드 인스턴스가 나타납니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!