자바 스크립트 프런트 엔드와 엔트리 --- 자바 스크립트 변수 조작 요소

변수
자바 스크립트는 변수 유형의 값에 의해 결정됩니다 자바 스크립트 약하게 입력 된 언어입니다. 변수의 정의 키워드 'var에'를 사용합니다 :

A = 123 VAR;
VAR = B 'ASD';
// 또한 다수의 변수를 정의 할 수있다 ","분리 공통 'VAR'키워드
VAR의 C = 45, D = " QWE", F = '68 ' ]
. 1
2
. 3
. 4
가변형

다섯 개 가지 기본 데이터 유형 :
숫자, 문자열, 부울, 정의, 널 (null)

복합 형의 한 종류 :
객체

변수, 함수, 속성, 함수 매개 변수의 이름

대소 문자 구분
첫 번째 문자는 문자 여야, 밑줄 (_) 또는 달러 기호 ($)
다른 문자가 밑줄, 달러 기호 나 숫자, 문자 수 있습니다
정의 된 변수 var에 정의가 선을 정의 할 수 있습니다 JS, 당신은 VAR에 정의 할 수있다 여러 변수;

JS 변수 선언 및 유형 인스턴스

<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<메타 문자 집합 = "UTF-8">
<제목> 문서 </ 제목>
<스크립트 유형 = "텍스트 / 자바 스크립트">
//单行注释

/ *
멀티 라인 코멘트
다음 두 가지 변수가 합성을 선언
* /

// inum = 12이었다;
//은 = 'ABC'를 str에되었다;
inum = 12, 크기 = 'ABC'이었다;
iNum02이었다;
// 경고 (inum);
// 경고 (STR);
경고 (iNum02);
</ script>
</ head>
<body>

</ BODY>
</ HTML>

JS 변수 선언 및 입력 한 경우
. (1)
(2)
. 3
. 4
. 5
. 6
. 7
. 8
. 9
(10)
. (11)
(12)는
13이다
(14)
15
(16)
. (17)
(18)이다
. (19)
(20)는
21이다
(22)이
23 인
24
25
26이
27
28
취득 요소법
페이지를 얻기 위해 내부 문서 객체에서 getElementById 방법을 사용할 수있다 요소의 id 속성은 HTML 객체에 대한 액세스를 설정하고, 다음과 같은 변수에 할당 :

<script TYPE = "텍스트 / 자바 스크립트">
VAR oDiv = document.getElementById를 ( 'DIV1');
</ script>
....
<div ID = "DIV1는">이 div 요소는 </ div>
1.
2
3.
4
5
자바 스크립트 요소에 기록하는 경우는 페이지 요소가로드되지 div1 때 요소 div1 얻는 페이지의 스크립트의 실행으로부터 다운로드되어 있기 때문에 문 위는, 오류가 발생하는 두 개의 해결책이 있습니다 종 :

첫 번째 방법 : 페이지 맨 아래에 자바 스크립트

....
<div의 ID = "DIV1">이 div 요소 </ div>이다
....
<script TYPE = "텍스트 / 자바 스크립트">
VAR oDiv = document.getElementById를 ( 'DIV1');
</ 스크립트 >
</ body>
1
2
3
4
5
6
7
번째 방법은 : 트리거 창로드 문 내부 자바 스크립트 기능을 넣어, 문장의 요소가 페이지가로드 된 이후에 실행 된 획득되며,이 잘못되지

<script 타입 = "텍스트 / 자바 스크립트">
창로드 = 함수 () {
VAR oDiv = document.getElementById를 ( 'DIV1');
}
</ 스크립트>
....
<div ID = "DIV1가">이 인 div 요소 </ div>
. (1)
(2)
. 3
. 4
. 5
. 6
. 7
우리가 폰트 크기 = 구비 30 픽셀로, JS 스타일에 의해 소자에 추가 할 경우 - 예 fontSize는 같은 쓰기 모드로 낙 기록 모드 또는에 참고 나는 불평 할 것이다;

JS 스타일 예가 변경 소자를 얻을

<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<= "UTF-8"메타 캐릭터>
<TITLE> 문헌 </ TITLE>
<script 타입 = "텍스트 / 자바 스크립트">
창로드 = 함수 ( ) {
/ *
document.getElementById를 ( 'div1') style.color = '적색'.;
document.getElementById를 ( 'div1') style.fontSize = '30 픽셀'.
用变量简化代码:
* /
VAR oDiv = document.getElementById를 ( 'div1');

oDiv.style.color = '빨간색';
oDiv.style.fontSize = '30 픽셀';
}
</ script>
</ head>
<body>
<DIV ID = "div1">这是一个사업부元素</ DIV>
</ BODY>
<! - <스크립트 유형 = "텍스트 / 자바 스크립트"> ->
<! - VAR oDiv = document.getElementById를 ( 'div1')] ->
<! - oDiv.style.color = '적색'] ->
<! - oDiv.style.fontSize = '30 픽셀'! ->
<! - </ script> ->
</ HTML>

JS 취득 소자 변화 패턴 예
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
(10)
. (11)
(12)는
13이다
(14)
15
(16)
. (17)
(18)이다
. (19)
(20)는
21이다
(22)이
23 인
24
25
26 인
27
28
29
30
가동 소자 특성
페이지 요소는 인수는 페이지 요소 수 읽기와 쓰기 작업 등록 정보 속성을 포함하여 작업을 속성.

속성의 동작 방법에있어서,

. ","조작
"[]"동작
특성 문구

동일한 속성을 HTML과 표현 JS하는 속성
"클래스" "클래스 이름"기록 된 속성
"같은 속성 내부 특성, 혹으로 바 타입이 있습니다 :" "스타일이 style.fontSize" "로,"글꼴 크기
에 의해 작업 속성 "".
운영 요소 인스턴스를 속성

<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<= "UTF-8"메타 캐릭터>
<TITLE> 문헌 </ TITLE>
<script 타입 = "텍스트 / 자바 스크립트">
창로드 = 함수 ( ) {
VAR oDiv = document.getElementById를 ( 'div1');
VAR OA = document.getElementById를 ( '링크');
VAR oDiv2 = document.getElementById를 ( 'DIV2');

// 읽기 속성
VAR = SID와 oDiv.id,
경고 (SID와);

// 쓰기 속성
oDiv.style.color = "레드";
oA.href = "http://www.baidu.com";
oA.title = "이 순 바이두로 이동하는 링크입니다"

// 속성이 작동 클래스 클래스 이름에 쓸 수
, oDiv2.className = "BOX2"
}
</ SCRIPT>

<스타일 유형 = "텍스트 / CSS">
.box {
글꼴 크기 : 20 픽셀;
색상 : 골드;
}
.box2 {
글꼴 크기 : 30 픽셀;
색상 : 핑크;
}
</ 스타일>
</ head>
<body>
< DIV의 ID = "div1는">이 div 요소 </ div>이다
<a href="#" id="link">이 </a>에 대한 링크
<div 클래스 = "박스"는 위에서 언급 한 id 'DIV2 "=> 이렇게 두 번째 DIV </ DIV>
</ BODY>
</ HTML>

조작 요소는 속성 예
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
(10)
. (11)
(12)는
13이다
(14)
15
(16)
. (17)
(18)이다
. (19)
(20)는
21이다
(22)이
23 인
24
25
26 인
27
28
29
30
31
32
33이
34 인
35
36
37
38 인
(39)
(40)
(41)는
42이다
(43)가
44 인
은 " [] "동작 특성 :

<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<메타 문자 집합 = "UTF-. 8">
<제목> 문서 </ 제목>
<스크립트 유형 = "텍스트 / 자바 스크립트">
위해 window.onload = 기능 ( ) {
VAR oDiv = document.getElementById를 ( 'DIV1');
VAR = sMystyle '는 fontSize는';
var에 s 값을 = '30 픽셀';
// oDiv.style.fontSize = s 값 // 올바른 문장
/ *
이 A는 아무 효과가 없다 : sMystyle 변수 특성 간주
oDiv.style.sMystyle = s 값;
* /
/ * 대신에 작동하도록 * / []과, 원하는 경우 변수 특성의
oDiv.style [sMystyle] = s 값;
}
</ script>
</ head>
<body>
<div ID = "DIV1">이 div 요소 인 </ div>
</ BODY>
</ HTML>

"[]"액션 속성에 의해 예
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
(10)
. (11)
(12)는
13이다
(14)
15
(16)
. (17)
(18)된다
. (19)
(20)는
21이다
(22)이
23 인
24
25
26이되는
원소 함량 변경

innerHTML을
패키지의 innerHTML 태그를 읽거나 쓸 수 컨텐츠
태그로 데이터베이스로부터 콘텐츠를 판독하는 데 사용하고 삽입;

innerHTML을 예

<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<메타 문자 집합 = "UTF-. 8">
<제목> 문서 </ 제목>
<스크립트 유형 = "텍스트 / 자바 스크립트">
위해 window.onload = 기능 ( ) {
VAR oDiv = document.getElementById를 ( 'DIV1')
소자 내부의 내용 판독 //
VAR의 STR = oDiv.innerHTML를,
경보 (STR)
// 내부 요소의 콘텐츠 작성
//oDiv.innerHTML은 = "가 변형 텍스트 ";
oDiv.innerHTML ="<a href='http://www.baidu.com'> 바이, </a>를 "
}
</ script>
</ head>
<body>
<div ID ="DIV1 " >이 div 요소는 </ div>
</ BODY>
</ HTML>

innerHTML을 예를
--------------------- 

추천

출처www.cnblogs.com/hyhy904/p/10983047.html