입력 상자에 내용을 입력하면 해당 div에 세 가지 메서드 인스턴스가 나타납니다.-JS 튜토리얼-php.cn

입력 상자에 내용을 입력하면 해당 div에 세 가지 메서드 인스턴스가 나타납니다.

零下一度

풀어 주다： 2017-05-09 10:08:26

원래의

2908명이 탐색했습니다.

이 글에서는 주로 아래 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

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 선택기

를 직접 사용하여

>>.action은 keyup() 이벤트에서 수행되는 작업을 나타냅니다. 여기서는 JS와 다른 연산이 사용됩니다. html(), val()은 여기서 메소드이고, JS에서는 속성입니다.

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>
1.
무료 js 온라인 동영상 튜토리얼

JavaScript 중국어 참조 매뉴얼

3. php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼

위 내용은 입력 상자에 내용을 입력하면 해당 div에 세 가지 메서드 인스턴스가 나타납니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!