Javaweb Learning Notes 공유 (필수)

저자：Eve Cole 업데이트 시간：2025-04-09 04:32:01

사용자 정의 목록

<dl> </dl> : 목록의 범위를 나타냅니다

** 내부 <dt> </dt> : 상위 내용

** 내부 <dd> </dd> : 내용을 낮추십시오

주문 목록

<ol> </ol> : 순서 목록의 범위

-Attribute 유형 : 정렬 방법을 설정, 1 (기본값), a, i,

** ol 태그 <li> 특정 컨텐츠 </li>

순서가없는 목록

<ul> </ul> : 정렬되지 않은 목록의 범위

-attribute 유형 : 원 (중공 원), 디스크 (기본 솔리드 원), 사각형 (단단한 사각형)

** ul 태그 <li> 특정 컨텐츠 </li>

이미지 태그

-Attributes : SRC, 너비, 높이, alt (그림에 표시된 텍스트, 마우스를 그림으로 이동하고 사진이 잘못 표시 될 때 내용이나 표시된 텍스트가 표시되지만 일부 브라우저가 표시되지 않으며 효과가 없습니다).

** <img src = "그림의 페이지"/>

경로 소개

*카테고리 : 두 가지 범주

** 절대 경로 EG. http://www.baidu.com/b.jpg

*** 3 개의 상대 경로 다른 파일에 대한 한 파일의 위치

-html 파일과 그림은 같은 경로 (디렉토리)에 있으며 파일 이름은 직접 작성할 수 있습니다.

-HTML 파일에서 IMG/A.JPG와 동일한 경로의 IMG 폴더 아래의 A.JPG 파일을 사용하십시오.

** d : /htmlstudy/code/4.html

** d : /htmlstudy/code/img/a.jpg

-그림은 HTML 파일의 상단 디렉토리에 있습니다. 현재 이미지 사용 방법 : ../c.png ../ 상단 경로를 나타냅니다.

하이퍼 링크 태그

** 링크 리소스

- <a href = "리소스 링크 경로"> 페이지에 표시된 콘텐츠 </a>

** HREF : 연결된 리소스의 주소

** 대상 : 오프닝 메소드를 설정하면 기본값은 현재 페이지에서 열립니다.

-_ blank : 새 창에서 열립니다

-_ self : 기본 페이지를 엽니 다

-<a href = " #"> 링크 제목 </a> : 하이퍼 링크가 페이지로 점프 할 필요가 없으면 # (자리 표시 자)를 href에 추가하십시오.

** 위치 자원

-자원을 찾으려면 : 위치를 정의하십시오

<이름 = "상단"> 상단 </a>

-이 위치로 향합니다

<a href = "#top"> 다시 상단으로 돌아갑니다 </a>

-IS- 출력 태그 : <fre> 입력 해야하는 컨텐츠 as-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-i-i s-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is -is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is- is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is

테이블 태그

* 기능 : 데이터를 더 명확하게하기 위해 데이터를 형식화 할 수 있습니다.

*속성 테두리 (테이블 라인 두께) BorderColor (테이블 라인 색상) 셀 팩링 (셀 거리) 너비 높이

*<table> </table> : 테이블의 범위를 나타냅니다

** 테이블에서는 <tr> </tr> 라인을 의미합니다

-정렬 정렬 : 왼쪽 중앙 오른쪽을 설정하십시오

*** Tr에서는 셀을 줄 <td> </td>를 나타냅니다.

** 사용 th는 또한 세포를 나타낼 수 있습니다. 중심 및 대담한 것을 달성 할 수 있습니다.

*테이블의 제목은 테이블 <캡션> </caption>에 배치됩니다.

*운영 기술 :

** 먼저 얼마나 많은 행이 있는지 계산하고 각 행에 몇 개의 셀 수를 계산하십시오.

*셀을 병합하십시오

** Rowspan : 크로스 행 (수직 병합)

** Colspan : 크로스 컬럼 (수평 병합)

태그 양식

예를 들어, Kaixin.com을 등록 할 때 Kaixin.com의 서버에 데이터를 제출할 수 있습니다. 이 프로세스는 양식 태그를 사용하여 구현할 수 있습니다.

* <양식> </form> : 양식 범위를 정의합니다

*재산:

** 조치 : 제출 된 주소, 현재 페이지에 기본 제출

** 방법 : 양식 제출 방법

-일반적으로 사용되는 두 가지가 있습니다 : Get and Post, 기본값 GET 요청

** Get과 Post의 차이

1) GET 요청 주소 표시 줄은 제출 된 데이터를 전달하며 게시물은이를 운반하지 않습니다 (데이터는 요청 본문에 있습니다).

2) 요청 보안 수준이 낮고 게시물이 높습니다.

3) GET 요청의 데이터 크기에는 제한이 있지만 게시물에는 제한이 없습니다.

** ENCTYPE :이 속성은 요청에 필요하지 않으며 파일을 업로드 할 때이 속성을 설정해야합니다.

** 입력 항목 : 컨텐츠를 입력하거나 선택할 수있는 부분

- 대부분의 입력 항목은 <입력 유형 = "입력 항목 유형"/>와 함께 사용할 수 있습니다.

********** 입력 항목에는 이름 속성이 있어야합니다.

*** 일반 입력 : <입력 유형 = "텍스트"/>

*** 비밀번호 입력 항목 : <입력 유형 = "비밀번호"/>

*** 단일 선택 입력 : <입력 유형 = "Radio"/>

-Attribute 이름은 내부에 필요합니다

-이름 속성 값은 동일해야합니다

- 값 값이 있어야합니다

**** 기본 선택된 속성을 구현하십시오

*** checked = "Checked"

*** 입력 확인 : <입력 유형 = "CheckBox"/>

** 속성 이름은 내부에 필요합니다

** 이름 속성 값은 동일해야합니다

** 값 값이 있어야합니다

**** 기본 선택된 속성을 구현하십시오

---- 점검 = "확인"

*** 파일 입력 항목 : <입력 유형 = "파일"/>

*** 풀다운 입력 항목 (입력 태그가 아님)

<옵션 값 = "0"> </옵션>을 선택하십시오

<옵션 값 = "1991"> 1991 </옵션>

<옵션 값 = "1992"> 1992 </옵션>

<옵션 값 = "1993"> 1993 </옵션>

</선택>

**** 기본 선택된 속성을 구현하십시오

---- 선택된 = "선택"

*** 텍스트 필드 (예 : : 계정을 등록 할 때 개인 정보의 프로필에 대한 상자를 작성)

*** 숨겨진 항목 (페이지에 표시되지 않지만 HTML 코드에 존재합니다)

<입력 유형 = "숨겨진"/>

*** 제출 버튼

<입력 유형 = "제출"/>

제출하기 전의 address : c : /users/happydog/desktop/index.html

** 이름 속성이 입력 항목에 작성된 경우

-파일 : /// C : /users/HappyDog/desktop/index.html? 전화 = 123123 & PWD = 12321312 & sex = man & love = y & love = pp & birth = 1992 & tex = 1231245

**? 입력 항목 이름의 값 = 입력 값 &

** 매개 변수는 키 값 양식과 유사합니다

*** 이미지를 사용하여 이미지를 제출합니다

<입력 유형 = "이미지"SRC = "이미지 경로"/>

*** 재설정 버튼 : 입력 항목의 초기 상태로 돌아갑니다.

<입력 유형 = "재설정"/>

<입력 유형 = "재설정"value = "버튼 제목"/>

*** 일반 버튼 (JS와 함께 사용)

<입력 유형 = "버튼"value = ""/>

사례 : 양식 태그를 사용하여 등록 페이지를 구현하십시오

테이블 셀의 내용이 비어 있으면 자리 표시 자 ((탈출 된 공간))가 일반적으로 채워집니다.

HTML에서 다른 공통 태그 사용

** B (BOLD) S (Strike Line) U (밑줄) I (이탈리아) pre (출력) 서브 (첨자) sup (SuperScript) div (line wrap) span (한 줄에 표시) p (단락 레이블)

HTML 헤더 태그 사용

** HTML 두 부분이 머리와 몸을 구성합니다

** 헤드의 레이블은 헤드 레이블입니다

** 제목 태그 : 태그에 표시된 내용을 나타냅니다

** <Meta> 태그 : 설정 페이지의 일부 관련 내용

-<meta name = "keywords"content = "" />

-<meta http-equiv = "Refresh"content = "10; url = test_form.html" /> 지정된 페이지에 정기적으로 속도

** 기본 태그 : 하이퍼 링크의 기본 설정을 설정합니다

-하이퍼 링크 개방 방법을 균일하게 설정할 수 있습니다 <베이스 대상 = "_ blank" />

** 링크 태그 : 외부 파일을 소개합니다

프레임 태그 사용

** <프레임 세트>

** 행 : 행으로 나눕니다

<frameset rows = "80,*"> 두 부분으로 나뉘 웁니다. 상위 80, 최하위 80

** 콜 : 열로 나눕니다

<frameset cols = "80,*"> 80에서 왼쪽과 오른쪽으로 나누기

** <frame> 특정 페이지가 표시됩니다

** <프레임 이름 = "lower_left"src = "b.html">

*프레임 태그를 사용할 때는 머리와 몸에 쓸 수 없습니다. 프레임 태그가 사용되면 신체를 제거하고 헤드 외부로 작성해야합니다.

*왼쪽 페이지의 하이퍼 링크가 오른쪽 페이지에 컨텐츠를 표시하려면 하이퍼 링크에 대상 속성을 설정하고 프레임의 이름으로 대상 값을 설정할 수 있습니다.

** <a href = "http://www.baidu.com"target = "right"> baidu </a> <br/>

<프레임 이름 = "상단"src = "a.html">

<프레임 이름 = "왼쪽"src = "b.html">

</frameset>

지식 요약

1) HTML 작동 아이디어 : 태그를 사용하여 작동 할 데이터를 랩핑하고 태그의 속성 값을 수정하여 태그의 데이터 스타일을 변경하십시오.

2) 글꼴 태그 속성 : 크기 값 범위 1-7 색상 : 16 진수 번호 #ffffff

3) 제목 태그 <H1> </h1> ...... <H6> </h6> : H1에서 H6으로, 글꼴이 점점 작아지고 라인이 자동으로 변경됩니다.

4) 의견

CSS 소개

** CSS : 계단식 스타일 시트

** 레이어 : 레이어 별 층

** 스타일 시트 : 많은 속성 및 속성 값

** 페이지 표시를 더 좋게 만듭니다

** CSS는 웹 페이지 컨텐츠와 디스플레이 스타일을 분리하여 디스플레이 기능 향상

CSS와 HTML을 결합하는 방법 (결합하는 4 가지 방법)

1) CSS와 HTML을 결합한 각 HTML 태그에 속성 스타일이 있습니다.

-<div style = "배경색 : 빨간색; 색상 : 녹색;" id = ""> 하늘의 길은 초과분을 줄이고 결핍을 보완합니다. 그러므로 공허함은 실제를 물리 치고 불충분 한 사람은 초과를 극복합니다. </div>

2) HTML의 태그를 사용하여 <style> 태그를 구현하고 헤드에 쓰십시오.

- <스타일 유형 = "text/css">

CSS 코드;

</스타일>

--- 코드 구현 <Head>

<스타일 유형 = "텍스트/CSS">

div {

배경색 : 파란색;

색상 : 빨간색;

}

</스타일>

</head>

<body>

하늘의 길은 초과분을 줄이고 결핍을 보완합니다. 그러므로 공허함은 실제를 극복하고 결핍 부족은 초과를 극복합니다.

</div>

</body>

3) 스타일 태그에서 진술을 사용하십시오

@import URL (CSS 파일의 경로);

- 1 단계 : CSS 파일을 만듭니다

--- <스타일 유형 = "텍스트/CSS">

@import URL (Div.CSS);

</스타일>

4) 헤더 태그 링크를 사용하여 외부 CSS 파일을 소개하고 <head> </head>에 배치하십시오.

- 1 단계 : CSS 파일을 만듭니다

- <link rel = "Stylesheet"type = "text/css"href = "CSS 파일의 경로"/>

**** 세 번째 조합 방법의 단점 : 일부 브라우저에서는 작동하지 않으며 네 번째 방법은 일반적으로 사용됩니다.

**** 우선 순위 (일반)

위에서 아래로, 내부에서 외부로, 우선 순위가 낮은 곳에서 높아집니다.

로드 후 우선 순위가 높습니다

**** 형식 : 선택기 이름 {속성 이름 : 속성 값; 속성 이름 : 속성 값; ......}

CSS 용 기본 선택기 (세 가지 유형)

** 해당 태그의 데이터를 작동합니다

1) 태그 선택기 div {CSS Code}

-레이블 이름을 선택기의 이름으로 사용하십시오.

<헤드>

<스타일 유형 = "텍스트/CSS">

div {

배경색 : 파란색;

색상 : 빨간색;

}

</스타일>

</head>

<body>

<div> aaaaa </div>

</body>

2) 클래스 선택기. 이름 {}

** 각 HTML 태그에는 속성 클래스가 있습니다

** <head>

<스타일 유형 = "텍스트/CSS">

Div.test {

배경색 : 파란색;

색상 : 빨간색;

}

p.test {

배경색 : 파란색;

색상 : 빨간색;

}

다음과 같이 축약 할 수 있습니다.

.시험{

배경색 : 파란색;

색상 : 빨간색;

}

</스타일>

</head>

** <body>

<div> aaaaa </div>

<p> bbbbbbbbbb </p>

</body>

3) ID 선택기 #name {}

** 각 HTML 태그에는 속성 ID가 있습니다

-<div id = "test"> ccccccccccccc </div>

-<헤드>

<스타일 유형 = "텍스트/CSS">

div#test {

배경색 : 파란색;

색상 : 빨간색;

}

p#테스트 {

배경색 : 파란색;

색상 : 빨간색;

}

다음과 같이 축약 할 수 있습니다.

#시험 {

배경색 : 파란색;

색상 : 빨간색;

}

</스타일>

</head>

-<body>

<div id = "test"> aaaaa </div>

<p id = "test"> bbbbbbbbbb </p>

</body>

** 우선 순위 스타일> ID 선택기> 클래스 선택기> 태그 선택기

CSS Extension Selector (학습)

1) 협회 선택기를위한 중첩 레이블에 대한 스타일 설정

** <div> <p> wwwwwwww </p> </div>

** DIV 태그에서 P 태그의 스타일과 중첩 태그의 스타일을 설정합니다.

-<헤드>

<스타일 유형 = "텍스트/CSS">

div p {

배경색 : 파란색;

색상 : 빨간색;

}

</스타일>

</head>

-<body>

<div> <p> wwwwwwwww </p> </div>

<p> aaaaa </p>

</body>

2) 선택기를 결합하여 다른 레이블을 동일한 스타일로 설정합니다

** <div> 1111 </div>

** DIV 및 P 태그를 같은 스타일로 설정하고 다른 태그를 같은 스타일로 설정합니다.

-<헤드>

<스타일 유형 = "텍스트/CSS">

div, p {

배경색 : 파란색;

색상 : 빨간색;

}

</스타일>

</head>

-<body>

</body>

3) 의사 (클래스) 요소 선택기

** CSS는 잘 정의 된 스타일을 제공하며 사용할 수 있습니다.

** 예를 들어, 하이퍼 링크

** 하이퍼 링크 상태

-원래 상태를 클릭하고 클릭 한 후

: 링크 : 호버 : 활성 : 방문

코드 구현 :

<헤드>

<스타일 유형 = "텍스트/CSS">

/*원본 상태*/

A : 링크 {

배경색 : 빨간색;

}

/*hoom 상태*/

A : 호버 {

배경색 : 녹색;

}

/*상태를 클릭하십시오*/

A : Active {

배경색 : 파란색;

}

/*클릭 후 상태*/

A : 방문 {

배경색 : 회색;

}

</스타일>

</head>

<body>

<a href = "http://www.baidu.com"> Baidu 웹 페이지 링크를 클릭하십시오

</body>

CSS의 박스 모델 (이해) 데이터에서 작동하려면 데이터를 영역 (DIV)에 넣어야합니다.

1) 국경 경계 : 통합 설정

당신은 또한 별도로 설정할 수 있습니다 : 상단 테두리 탑 하단 : 경계-바닥 왼쪽 : 국경 오른쪽 : 국경 오른쪽

-<헤드>

<스타일 유형 = "텍스트/CSS">

div {

너비 : 200px;

높이 : 100px;

테두리 : 2px 단단한 블루;

}

#div12 {

테두리 오른쪽 : 2px 점선 노란색;

}

</스타일>

</head>

-<body>

<div id = "div11"> aaaaaaaaaaa </div>

<div id = "div12"> bbbbbbbbb </div>

</body>

2) 내부 마진 패딩 : 상단, 하단, 왼쪽 및 오른쪽에서 내용 사이의 거리를 설정

당신은 또한 그것을 별도로 설정할 수 있습니다 : 위, 아래, 왼쪽 및 오른쪽

<헤드>

<스타일 유형 = "텍스트/CSS">

div {

너비 : 200px;

높이 : 100px;

테두리 : 2px 단단한 블루;

}

#div21 {

패딩 : 20px;

}

#div22 {

왼쪽 패딩 : 30px;

}

</스타일>

</head>

<body>

<div id = "div21"> aaaaaaaaaaa </div>

<div id = "div22"> bbbbbbbbb </div>

</body>

3) 마진 : 가장 바깥 쪽 4면에서 DIV 사이의 거리를 설정

위, 아래, 왼쪽 및 오른쪽으로 별도로 설정할 수도 있습니다. . .

CSS의 레이아웃 플로트 (이해) 플로트 : 왼쪽 오른쪽

CSS 레이아웃 위치 (이해)

*위치

** 속성 값 :

-정적 : 기본값, 특별한 포지셔닝 없음

--순수한:

문서 스트림에서 객체를 끌고 왼쪽, 오른쪽, 상단, 하단 및 기타 속성을 사용하여 절대적으로 찾으십시오.

-관련 : 문서 스트림에서 객체가 드래그되지 않습니다. 객체를 쌓을 수는 없지만 왼쪽, 오른쪽, 상단, 하단 등과 같은 속성을 기반으로 일반 문서 스트림에서 오프셋됩니다.

사례 : 혼합 그림과 텍스트

** 그림과 텍스트가 함께 표시됩니다

케이스 : 이미지 서명

JavaScript 소개 : 주로 클라이언트에서 사용되는 객체 중심 스크립팅 언어입니다.

*객체 기반 : 많은 객체가 제공되며 직접 사용할 수 있습니다.

* 이벤트 중심 : HTML은 웹 사이트 정적 효과, JavaScript 동적 효과를 만듭니다.

*클라이언트 : 특히 브라우저를 나타냅니다

* JS의 기능 :

1) 대화식 정보의 동적 상호 작용

2) 보안 JS는 로컬 디스크의 파일에 액세스 할 수 없습니다

3) 크로스 플랫폼 Java, 가상 머신; JS를 지원할 수있는 브라우저만큼 실행할 수 있습니다.

*JavaScript와 Java의 차이 : 둘 사이에는 관계가 없습니다.

1) Java는 Sun Company, 현재 Oracle입니다. JS는 Netscape Company입니다

2) Java는 객체 지향적이며 JS는 객체 기반입니다

3) Java는 강력하게 타이핑 된 언어이며 JS는 약하게 입력 한 언어입니다.

-예를 들어 : Java의 int i = "10"; 오류를보고합니다

-js : var i = 10; var i = "10"; 오류 가보고되지 않습니다

4) JS는 실행을 위해서만 구문 분석하면되며 Java는 먼저 Bytecode 파일로 컴파일 된 다음 실행해야합니다.

*JS 구성 (세 부분) :

1) ecmascript

-ECMA : 유럽 컴퓨터 협회

-JS 구문 및 ECMA에 의해 구성된 진술 ...

2) BOM

-BrosWer 객체 모델 : 브라우저 객체 모델

3) 돔

-문서 객체 모델 : 문서 개체 모델

JS와 HTML을 결합하는 방법 (두 가지 유형)

1) 태그 <script type = "text/javaScript"> js 코드; </script>를 사용하십시오

2) 스크립트 태그를 사용하여 외부 JS 파일을 소개합니다.

- JS 파일을 만들고 JS 코드를 작성하십시오

- <script type = "text/javaScript"src = "js path"> </script>

참고 : 두 번째 메소드를 사용하는 경우 스크립트 태그에 JS 코드를 쓰지 않으면 실행되지 않습니다.

JS의 원시 유형 및 변수를 선언합니다

*Java의 기본 데이터 유형 : 바이트 짧은 int Long Float Double Char Bolean

*JS는 키워드 var로 변수를 정의합니다

*JS의 원래 유형 (5)

-스트링 문자열 var str = "abc";

-번호 숫자 유형 var m = 123;

-부울 true 및 false var flag = true;

-null var date = 새 날짜 ();

** 객체에 대한 참조를 가져옵니다. NULL은 객체 참조가 비어 있고 객체에 대한 모든 참조도 객체임을 의미합니다.

-undifined 변수를 정의하지만 var aa를 할당하지 않습니다.

* typeof (변수 이름) 현재 변수의 데이터 유형보기

JS 문

** Java의 판단 인 경우 진술 ( "="는 할당을 의미합니다.

** JS의 진술

-판단 진술

-스위치 (a) {

사례 5 : ...

부서지다;

사례 6 : ...

부서지다;

기본:...

...............

}

** do-while에 대한 루프 명령문

-var i = 5;

while (i> 0) {

경고 (i);

나--;

}

--- -for (var i = 0; i <= 5; i ++) {

경고 (i);

}

JS 운영자

** JS는 정수와 소수성을 구별하지 않습니다

-var j = 123;

경고 (J/1000*1000);

** J/1000*1000 Java의 결과는 0입니다

** JS에서는 정수와 소수점 사이에 구분이 없습니다. 123/1000*1000 = 0.123*1000 = 123

** 문자열 작업을 추가하고 빼기

--var str = "123";

경고 (str + 1); Java와 JS의 결과는 1231이며, 이는 문자열 연결입니다.

경고 (str -1); 빼기시 뺄셈 작업을 수행하십시오. STR이 숫자가 아닌 경우 NAN을 자랑합니다. 숫자가 아님을 의미합니다.

** Bolean 유형도 작동 할 수 있습니다

*** True로 설정되면 1과 같습니다. False로 설정하면 0과 같습니다.

** == 및 === 차이

** 판단에 관한 것입니다

** == 비교는 값 일뿐입니다. === 비교는 값과 유형입니다

** 페이지에 직접 출력되는 문장 (페이지에 컨텐츠가 표시 될 수 있음)은 변수, 고정 값 및 HTML 코드를 페이지에 출력 할 수 있습니다. document.write ( "")에는 이중 인용문이 포함되어 있으며 레이블의 속성을 설정하면 단일 따옴표를 사용해야합니다.

- document.write ( "aaaa");

- document.write ( "<hr/>");

*** Document.Write ( "<테이블 테두리 = '1'BorderColor = 'red'>");

*** document.write ( "</table>");

운동 : 99 곱셈 테이블 구현

JS 배열

*java int [] arr = {1,2,3}의 배열 정의;

*JS 배열 정의 방법 (세 가지 유형)

1) var arr = [1,2,3]; var arr = [1, "2", 3]; var arr = [1,2, true];

2) 내장 객체 배열 객체를 사용하십시오

var arr1 = 새로운 배열 (5); // 배열 정의, 배열의 길이는 5입니다.

ARR1 [0] = "1";

......

3) 내장 객체 배열 객체를 사용하십시오

var arr2 = 새로운 배열 (3,4,5); // 배열 정의, 배열의 요소는 3,4,5입니다.

* 배열에는 속성 길이가 있습니다 : 배열의 길이를 얻으십시오.

* 배열의 길이는 가변적이며 배열은 다른 데이터 유형의 데이터를 저장할 수 있습니다.

JS 함수 (메소드)

** JS의 함수 (메소드) 정의. 함수를 정의하는 세 가지 방법이 있습니다. 함수의 매개 변수 목록에서 var를 작성할 필요가 없으며 매개 변수 이름을 작성하십시오.

1) 키워드 기능을 사용하십시오

*** 함수 메소드 이름 (매개 변수 목록) {

방법 본체;

반환 값은 선택 사항입니다 (실제 요구에 따라 다름).

}

코드 구현 : // 첫 번째 메소드를 사용하여 기능을 만듭니다

기능 test () {

경고 ( "Qqqqqq");

}

// 메소드를 호출합니다

시험();

// 두 숫자 추가를 구현하기 위해 매개 변수로 메소드를 정의합니다.

함수 add1 (a, b) {

var sum = a+b;

경고 (합);

}

add1 (3,5);

함수 add2 (a, b, c) {

var sum1 = a+b+c;

반환 sum1;

}

경고 (add2 (7,8,9));

2) 익명 기능

var add = 함수 (매개 변수 목록) {

방법 본문 및 반환 값;

}

코드 구현 : var add3 = function (m, n) {

경고 (m+n);

}

// 메소드를 호출합니다

add3 (8,9);

3) 일반적으로 동적 함수라고도합니다. 덜 사용하면 이해하십시오.

*JS에서 내장 객체 기능을 사용하십시오

var add = 새 함수 ( "매개 변수 목록", "메소드 본문 및 반환 값");

var add4 = 새 함수 ( "x, y", "var sum; sum = x+y; return sum;");

경고 (add4 (9,10));

// 또는 다음 코드

var canshu = "x, y";

var fangfati = "var sum; sum = x+y; return sum;";

var add4 = 새로운 함수 (Canshu, Fangfati);

경고 (add4 (5,3));

JS의 글로벌 및 로컬 변수

** 글로벌 변수 : 스크립트 태그에서 변수를 정의하여 페이지의 JS 부분에서 사용할 수 있습니다.

-메소드 내부에서 메소드 내부에서 다른 스크립트 태그에서 사용하십시오.

** 로컬 변수 : 메소드 내부의 변수를 정의하고 방법 내에서만 사용할 수 있습니다.

-메소드 내에서만 사용할 수 있습니다. 이 변수가 메소드 외부에서 호출되면 오류가 표시됩니다.

--ie에는 디버깅 도구가 제공됩니다. IE8 이상의 버전에서는 키보드의 F12가 표시되며 페이지 하단에 막대가 표시되어 콘솔을 볼 때 오류가 표시됩니다.

스크립트 태그를 어디에 배치 해야하는지

** 스크립트 태그를 뒤에 넣는 것이 좋습니다

** 현재 요구 사항이있는 경우 :

-JS에서는 입력 값을 가져와야합니다. 스크립트 태그를 머리에 넣으면 문제가 있습니다.

-HTML 파싱은 위에서 아래로 구문 분석됩니다. 스크립트 태그는 헤드에 배치되어 입력 값을 직접 가져옵니다. 페이지가 아직 입력 라인에 구문 분석되지 않았기 때문에 확실히 얻을 수 없습니다.

JS 과부하 JS에는 과부하가 발생하지 않지만 시뮬레이션 및 구현할 수 있습니다.

예 : 함수 add11 (a, b) {

A+B를 반환합니다.

}

함수 add11 (a, b, c) {

A+B+C를 반환합니다.

}

함수 add11 (a, b, c, d) {

A+B+C+D를 반환합니다.

}

경고 (add11 (2,2)); // 난

경고 (add11 (2,2,3)); // 난

경고 (add11 (2,2,4,5)); // 13

JS의 문자열 객체

** 문자열 개체 생성 객체 var str = "abc ';

** 방법 및 속성 (문서)

-attribute 길이 : 문자열 길이

--방법

1) HTML과 관련된 방법

- bold () : bold fontcolor () : 문자열 fontsize ()의 색상 설정 () : font 링크의 크기를 설정 : 문자열을 하이퍼 링크로 표시합니다.

2) Java와 유사한 방법

---concat () : 문자열 charat () : 문자열 indexof ()을 반환합니다. () : 문자열 split ()의 문자열 위치를 반환합니다. split () : 배열 교체 ( "", "")로 슬라이스하십시오 : 문자열-패스 두 매개 변수를 교체하십시오. 첫 번째 매개 변수는 원래 문자이며, 두 번째 매개 변수는 substr (5,3)로 대체 할 문자입니다. 다섯 번째 비트에서 시작하여 세 번째 비트에서 5 번의 끝에서 5 번의 끝을 포함하여 세 번째 비트에서 시작하여 세 번째 비트에서 시작하여 5 번째 비트 (3,5)를 제외하고 세 번째 비트에서 시작합니다.

js의 배열 객체

** 배열을 만드는 세 가지 방법

1) var arr1 = [1,2,3];

2) var arr1 = 새로운 배열 (3); // 길이는 3입니다

3) var arr1 = 새로운 배열 (1,2,3); // 요소는 1,2,3입니다

var arr = []; // 빈 배열을 만듭니다

** 속성 길이 : 배열의 길이를 봅니다

**방법

concat (); 가입하다(); 지정된 문자 push ()에 따라 배열을 분할합니다. 배열 끝에 요소를 추가하고 배열의 새 길이를 반환 ** 추가 배열이 배열 인 경우 배열을 전체 문자열 pop ()로 추가하십시오. 배열 reverse ()의 마지막 요소를 삭제하고 반환합니다. 배열에서 요소의 순서를 반전하십시오

JS의 날짜 개체

** Java에서 현재 시간을 얻으십시오

날짜 = 새 날짜 ();

// 형식 // tolocalestring ()

** JS에서 현재 시간을 얻으십시오

var date = 새 날짜 ();

// 관례 형식으로 변환 날짜 .tolocalestring ();

JS의 수학 객체 수학 작동

** 모든 내부는 정적 방법이며 수학을 사용할 수 있습니다. 방법 ()을 사용할 때 직접;

JS의 글로벌 기능

** 어떤 객체에도 속하지 않기 때문에 이름을 직접 작성하여 사용하십시오.

** 평가 (); JS 코드 실행 (문자열이 JS 코드 인 경우 메소드를 사용하여 직접 실행하십시오).

- var str = "Alert ( '1234');";

// 경고 (str); // Alert ( '1234');

평가 (str); // 1234

** .....

JS 기능의 과부하가 과부하되는 것은 무엇입니까? 메소드 이름은 동일하고 매개 변수는 다릅니다.

*JS에는 기능의 과부하가 없으며 마지막 방법 만 호출되지만 과부하는 다른 방식으로 시뮬레이션 될 수 있습니다. JS 함수는 전달 된 매개 변수를 인수 배열에 저장합니다. 인수 배열의 길이의 판단을 사용하여 다른 처리 결과를 반환 할 수 있습니다.

재 장전 효과 코드 구현 시뮬레이션 :

함수 add1 () {

if (arguments.length == 2) {

반환 인수 [0] + 인수 [1];

} else if (arguments.length == 3) {

반환 인수 [0] + 인수 [1] + 인수 [2];

} else if (arguments.length == 4) {

반환 인수 [0] + 인수 [1] + 인수 [2] + 인수 [3];

} 또 다른 {

반환 0;

}

// 부르다

경고 (add1 (1,2)); // 3

경고 (add1 (1,2,3)); // 6

경고 (add1 (1,2,3,4)); // 10

경고 (add1 (1,2,3,4,5)); // 0

JS BOM 객체

** BOM : Broswer 객체 모델 : 브라우저 객체 모델

** 물체는 무엇입니까?

- 네비게이터 : 클라이언트 정보 가져 오기 (브라우저 정보)

- 화면 : 화면 정보를 얻습니다

- 위치 : 요청 된 URL 주소

*** HREF 속성

1) 요청 된 URL 주소를 가져옵니다

-document.write (location.href);

2) URL 주소를 설정하십시오

-페이지에 버튼이 배치되고 이벤트가 버튼에 바인딩됩니다. 이 버튼을 클릭하면 페이지가 다른 페이지로 이동할 수 있습니다.

<body>

<입력 유형 = "버튼"value = "JumpBaidu"onclick = "href1 ();"/>

함수 href1 () {

// Alert ( "AAAA");

location.href = "http://www.baidu.com";

}

</스크립트>

</body>

- 역사 : 요청 된 URL의 역사

- 세 페이지 만들기 (위아래 기록의 효과 시뮬레이션)

1) A.HTML 페이지를 만들고 B.html에 하이퍼 링크를 작성하십시오.

2) B.html 하이퍼 링크를 C.HTML로 만듭니다

3) C.HTML을 만듭니다

- 이전 페이지를 방문했습니다

history.back ();

역사, GO (-1);

- 방문한 다음 페이지로 이동하십시오

history.forward ();

history.go (1);

-Window (키 마스터리) Window 개체의 최상위 객체 (모든 BOM 객체는 창에서 작동)

**방법

- window.alert (); 약어는 다음과 같습니다. alert (); 컨텐츠를 표시하기 위해 페이지에 창이 팝업됩니다.

- 확인 ( "메시지 내용 표시"); 확인 프롬프트 상자에는 반환 값이 true and false가 있습니다.

-- 즉각적인(); 입력 대화 상자 (현재는 많이 사용되지 않음)에 두 가지 매개 변수가 있습니다 : 표시 컨텐츠 및 기본값

- Open ( "URL 주소", "", "창 너비 및 높이와 같은 창 기능"); 새 창을 엽니 다

-- 닫다(); 닫기 창 (브라우저 호환성이 상대적으로 열악합니다)

- 타이머를 만듭니다

*** SetInterVal ( "JS Code", milliseconds); window.setInterVal ( "Alert ( '123');", 3000); 경고 방법이 3 초마다 실행되었음을 나타냅니다.

*** settimeout ( "js code", milliseconds); 이는 밀리 초 후에 실행되지만 한 번만 실행됩니다.

*** ClearInterVal (); SetInterval에 의해 설정된 타이머를 지우십시오

- var id1 = setInterval ( "alert ( '123');", 3000);

ClearInterval (id1);

*** CLEARTIMEOUT (); 타이머 설정 타임 아웃을 지우십시오

JS DOM 객체

** dom : 문서 개체 모델 : 문서 개체 유형

** 문서 : HyperText 문서 (HyperText Tagged Document) HTML, XML

** 객체 : 제공 속성 및 방법

** 모델 : 속성 및 방법을 사용하여 하이퍼 텍스트 태그가 지정된 문서를 조작합니다.

*** JS의 DOM에 제공된 객체를 사용 하여이 객체의 속성과 방법을 사용하여 마크 업 문서에서 작동합니다.

*** 태그가 지정된 문서에서 작동하려면 먼저 태그 된 문서의 모든 내용을 객체에 캡슐화해야합니다.

- HTML의 태그, 속성 및 텍스트 내용을 객체로 캡슐화해야합니다.

*** 마커 문서에서 작동하려면 마커 문서를 구문 분석합니다

*** 구문 분석 프로세스 : HTML의 계층 구조에 따라 트리 구조가 메모리에 할당되며 HTML의 각 부분은 객체에 캡슐화되어야합니다.

*하나의 루트 노드 만

루트 노드 아래에는 여러 개의 하위 노드가있을 수 있습니다. 자식 노드가없는 노드를 리프 노드라고합니다

- 문서 개체 : 전체 HTML 문서

- 요소 개체 : 태그 객체

- 속성 객체

- 텍스트 객체

** 노드 노드 객체 :이 객체의 상위 객체입니다.

DHTML : 많은 기술의 약어입니다

** HTML : 데이터를 캡슐화합니다

** CSS : 스타일에 속성 및 속성 값을 사용합니다

** DOM : HTML 문서 작동 (표시된 문서)

** javaScript : 특히 JS (ecmascript)의 구문 문을 지칭합니다.

문서 객체는 전체 문서를 나타냅니다

** 일반적인 방법

- write () 메소드 : 1) 페이지 2에 대한 출력 변수) 출력 HTML 코드는 페이지에 출력

- getElementById (); ID를 통해 요소 (레이블)를 얻는 것을 의미합니다

<body>

<입력 유형 = "text"id = "nameid"value = "aaaaa"/> <br/>

// getElementById를 사용하여 입력 태그 객체를 가져옵니다

var input1 = document.getElementById ( "nameid");

// 입력에서 값 값을 얻습니다

경고 (input1.Value);

// 입력에 값을 설정합니다

input1.value = "bbbbbbbb";

</스크립트>

</body>

- getElementsByName (); 태그의 이름 속성은 태그에 합당하며 리턴은 컬렉션 (배열)입니다.

<body>

<입력 유형 = "text"name = "name1"value = "aaaaa"/> <br/>

<입력 유형 = "text"name = "name1"value = "bbbb"/> <br/>

<입력 유형 = "text"name = "name1"value = "cccccc"/> <br/>

var input1 = document.getElementsByName ( "name1"); // 전달 된 매개 변수는 레이블의 이름 값입니다.

for (var i = 0; i <input1.length; i ++) {// Traversal을 통해 각 태그의 특정 값을 가져옵니다.

var inputs = input1 [i]; // 각 루프는 입력 객체를 가져 와서 입력에 값을 지정합니다.

경고 (입력. 값); // 각 입력 태그에서 값 값을 얻습니다

}

</스크립트>

</body>

- getElementsByTagName ( "태그 이름"); 컬렉션을 반환 (배열)

<body>

<입력 유형 = "text"name = "name1"value = "aaaaa"/> <br/>

<입력 유형 = "text"name = "name1"value = "bbbb"/> <br/>

<입력 유형 = "text"name = "name1"value = "cccccc"/> <br/>

var inputs1 = document.getElementsByTagName ( "input"); // 전달 된 매개 변수는 태그의 이름입니다

for (var i = 0; i <inputs1.length; i ++) {

var input1 = inputs1 [i];

경고 (input1.Value);

}

</스크립트>

</body>

**** 참고 : 레이블은 하나 뿐이며이 레이블은 이름을 사용 하여만 얻을 수 있습니다. 현재 GetElementsByName을 사용하면 배열이 반환되지만 이제는 요소가 하나뿐입니다. 현재 트래버스 할 필요는 없지만 배열의 첨자를 통해 직접 값을 얻을 수 있습니다.

<입력 유형 = "text"name = "name1"value = "aaaaa"/>

var input1 = document.getElementsByName ( "name1") [0];

경고 (input1.Value);

케이스 : 창 팝업 케이스

** 구현 프로세스 : 1) 페이지를 만들어야합니다 : 두 개의 입력 항목과 버튼이 있으며 버튼에 이벤트가 있습니다.

2) 팝업 페이지 생성 : 테이블의 각 행에는 버튼, 번호 및 이름이 있습니다. 버튼에 이벤트가 있습니다. 현재 번호와 이름을 첫 번째 페이지의 해당 위치에 할당하십시오.

** 크로스 페이지 작동 오프너 :이 창을 만드는 창을 얻을 수 있습니다. 즉, 부모 창을 얻을 수 있습니다.

케이스 : 끝에 노드를 추가하십시오

1) li 태그를 만듭니다

2) 텍스트를 만듭니다

3) Li에 텍스트를 추가하십시오

4) li를 ul에 추가하십시오

<body>

</ul> <br/>

함수 add1 () {

// UL 태그를 가져옵니다

var ul1 = document.getElementById ( "ulid");

// 태그를 만듭니다

var li1 = document.createElement ( "li");

// 텍스트를 만듭니다

var tex1 = document.creatextNode ( "4444");

// LI에 텍스트를 추가합니다

Li1. AppendChild (Tex1);

// li를 ul에 추가하십시오

UL1. AppendChild (li1);

}

</스크립트>

</body>

요소 개체 (요소 개체) : 요소를 작동하려면 먼저 문서의 해당 메소드를 사용하여 요소를 얻으려면 요소를 얻어야합니다.

**방법

**** 속성 getAttribute ( "속성 이름")에서 값을 가져옵니다.

**** 속성 setAttribute (이름, 값)의 값을 설정합니다.

**** 속성 removeAttribute ( "속성 이름")를 제거합니다. 값은 삭제할 수 없습니다

<입력 유형 = "text"name = "name1"id = "inputId"value = "aaaa"/>

// 먼저 입력 태그를 가져옵니다

var input1 = document.getElementById ( "inputId");

// alert (input1.value);

alert (input1.getAttribute ( "value")); // 속성에서 값을 얻습니다

alert (input1.getAttribute ( "class"));

input1.setattribute ( "class", "haha"); // 속성의 값을 설정합니다

alert (input1.getAttribute ( "class"));

input1.removeattribute ( "name");

</스크립트>

** 태그 아래에서 자막을 가져오고 싶습니다

** 속성을 사용하지만이 속성은 호환성이 좋지 않습니다

** 태그 아래 태그를 가져 오는 유일한 효과적인 방법은 getElementsByTagName 메소드를 사용하십시오.

<body>

<li> aaaaaa </li>

<li> bbbbbb </li>

<li> cccccccc </li>

</ul>

<cript>

// UL 태그를 가져옵니다

var ul1 = document.getElementById ( "ulid1");

// UL 아래의 자막을 가져옵니다

// var lis = ul1.ChildNodes; // 호환성이 좋지 않습니다

// Alert (lis.length); // 일부 디스플레이 3 일부 디스플레이 7

var lis = ul1.getElementsByTagName ( "li");

경고 (lis.length);

</스크립트>

</body>

노드 객체의 속성

** Nodename

** Nodetype

** nodevalue

** DOM을 사용하여 HTML을 구문 분석 할 때 HTML의 태그, 속성 및 텍스트를 객체에 캡슐화해야합니다.

** 태그 노드에 해당하는 값

Nodetype : 1

Nodename : Span과 같은 캡 태그 이름

nodevalue : null

** 속성 노드에 해당하는 값

Nodetype : 2

Nodename : 속성 이름

Nodevalue : 재산의 가치

** 텍스트 노드에 해당하는 값

Nodetype : 3

Nodename : #text

nodevalue : 텍스트 내용

** <body>

// 태그 객체를 가져옵니다

var span1 = document.getElementById ( "spanid");

// alert (span1.nodeType); // 1

// alert (span1.nodename); // SAPN

// alert (span1.nodevalue); // 널

// 속성

var id1 = span1.getAttributeNode ( "id");

// alert (id1.NodeType); // 2

// alert (id1.nodename); //ID

// alert(id1.nodeValue); // spanid

//获取文本

var text1 = span1.getfirstChild;

// alert(text1.nodeType); // 3

// alert(text1.nodeName); //#텍스트

// alert(text1.nodeValue); // 文本内容

</스크립트>

</body>

Node对象的属性二

<ul>

<li>aaaaaa</li>

<li>bbbbb</li>

</ul>

**父节点ul是li的父节点

*** parentNode ：父节点

**子节点li是ul的子节点

*** childNodes : 得到所有子节点，但是兼容性很差

*** firstChild : 获取第一个子节点

*** lastChild : 获取最后一个子节点

**同辈节点li与li之间是同辈节点

**nextSibling : 返回一个给定节点的下一个兄弟节点

**previousSibling : 返回一个给定节点的上一个兄弟节点

<body>

<li id="li1">aaaaa</li>

<li id="li2">bbbbb</li>

<li id="li3">ccccc</li>

<li id="li4">ddddd</li>

</ul>

/* // 得到li1

var li1 = document.getElementById("li1");

// 得到ul

var ul1 = li1.parentNode;

alert(ul1.id); */

/* // 获取ul的第一个子节点

// 得到ul

var ul1 = document.getElementById("ulid");

// 第一个子节点

var li1 = ul1.firstChild;

alert(li1.id);

var li4 = ul1.lastChild;

alert(li4.id); */

//获取li的id是li3的上一个和下一个兄弟节点

var li3 = document.getElementById("li3");

var li4 = li3.nextSibling;

var li2 = li3.previousSibling;

alert(li4.id);

alert(li2.id);

</스크립트>

</body>

操作dom树

** appendChild方法：

*** 添加子节点到末尾

*** 特点：类似于剪切粘贴的效果

** insertBefore(newNode,oldNode);

*** 在某个节点之前插入一个新的节点通过父节点添加

*** 两个参数1）要插入的节点2)在谁之前插入

*** 插入一个节点，节点不存在，创建

1）创建标签

2）创建文本

3）把文本添加到标签下面

**代码实现：（在<li>貂蝉</li>之前添加<li>董小宛</li>）

<body>

</ul>

// 在<li>貂蝉</li>之前添加<li>董小宛</li>

function insert1() {

// 1、获取到li13标签

var li13 = document.getElementById("li13");

// 2、创建li

var li15 = document.createElement("li");

// 3、创建文本

var text15 = document.createTextNode("董小宛");

// 4、把文本添加到li下面

li15.appendChild(text15);

// 5、获取ul

var ul21 = document.getElementById("ulid21");

// 6、把li添加到ul下面（在<li>貂蝉</li>之前添加<li>董小宛</li>）

ul21.insertBefore(li15,li13);

}

</스크립트>

</body>

**removeChild方法：删除节点

***通过父节点删除，不能自己删除自己

**代码实现: 删除<li id="li24">杨玉环</li>

<body>

</ul>

// 删除<li id="li24">杨玉环</li>

function remove1() {

// 1、获取到li24标签

var li24 = document.getElementById("li24");

// 2、获取父节点ul标签

// 有两种方式1）通过id获取2）通过属性parentNode获取

var ul31 = document.getElementById("ulid31");

// 3、执行删除（通过父节点删除）

ul31.removeChild(li24);

}

</스크립트>

</body>

** replaceChild(newNode,oldNode); 替换节点

***两个参数：1）新的节点（替换成的节点） 2）旧的节点（被替换的节点）

***不能自己替换自己，通过父节点替换

** cloneNode(boolean) : 复制节点

**代码实现：把ul列表复制到另外一个div里面

<body>

</ul>

</div>

// 把ul列表复制到另外一个div里面

1、获取到ul

2、执行复制方法cloneNode方法复制参数true

3、把复制之后的内容放到div里面去

** 获取到div

** appendChild方法

function clone1() {

// 1、获取ul

var ul41 = document.getElementById("ulid41");

// 2、复制ul，放到类似剪切板里面

var ulcopy = ul41.cloneNode(true);

// 3、获取到div

var divv = document.getElementById("divv");

// 4、把副本放到div里面去

divv.appendChild(ulcopy);

}

</스크립트>

</body>

**操作dom总结：

**获取节点使用方法

getElementById() : 通过节点的id属性，查找对应节点

getElementsByName() : 通过节点的name属性，查找对应节点

getElementsByTagName() : 通过节点名称，查找对应节点

**插入节点的方法

insertBefore方法: 在某个节点之前插入

appendChild方法: 在末尾添加，类似于剪贴粘贴

**删除节点的方法

removeChild方法: 通过父节点删除

**替换节点的方法

replaceChild方法: 通过父节点替换

innerHTML属性（重点）

** 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

** 第一个作用：获取文本内容

var span1 = document.getElementById("sid");

alert(span1.innerHTML);

** 第二个作用：向标签里面设置内容（可以是html代码）

<body>

</div>

// 获取span标签

var span1 = document.getElementById("sid");

//alert(span1.innerHTML); // 测试文本

// 向div里面设置内容<h1>AAAAA</h1>

// 获取div

var div11 = document.getElementById("div11");

div11.innerHTML = "<h1>AAAAA</h1>"; // 设置内容

</스크립트>

</body>

** 练习：向div里面添加一个表格

var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";

div11.innerHTML = tab;

案例：动态显示时间

** 得到当前时间

var date = new Date();

var d1 = date.toLocaleString();

** 需要让页面每一秒获取时间

setInterval方法定时器

** 显示到页面上

每一秒向div里面写一次时间使用innerHTML属性

** 代码实现动态显示时间

<body>

</div>

function getD1() {

// 当前时间

var date = new Date();

// 格式化

var d1 = date.toLocaleString();

// 获取div

var div1 = document.getElementById("times");

div1.innerHTML = d1;

}

// 使用定时器实现每一秒写一次时间

setInterval("getD1();",1000);

</스크립트>

</body>

案例：全选练习

** 使用复选框上面一个属性判断是否选中

** checked 属性

** checked = true; 选中

** checked = false; 未选中

** 创建一个页面

** 复选框和按钮

***四个复选框表示爱好

***还有一个复选框操作全选和全不选有一个事件

***三个按钮全选全不选反选每个按键都分别有事件

**代码实现

<body>

<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选

<br/>

<input type="checkbox" name="love"/>篮球

<input type="checkbox" name="love"/>排球

<input type="checkbox" name="love"/>羽毛球

<input type="checkbox" name="love"/>乒乓球

<br/>

// 实现全选操作

function selAll() {

1、获取要操作的复选框使用getElementsByName();

2、返回的是数组

**属性checked 判断复选框是否选中

** checked = true; // 表示选中

** checked = false; // 表示未选中

**遍历数组，得到的是每一个checkbox

** 把每一个checkbox属性设置为true 即checked = true;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = true; // 设置属性为true

}

// 实现全不选操作

function selNo() {

1、获取到要操作的复选框

2、返回的是数组，遍历数组

3、得到每一个复选框

4、设置复选框的属性checked = false;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = false; // 设置属性为true

}

function selOther() { // 实现反选

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

if(love1.checked == true) {

love1.checked = false;

}

또 다른 {

love1.checked = true;

}

function selAllNo() { // 一个多选框实现全选全不选切换

1、得到上边的复选框通过id来获取

2、判断该复选框是否选中if条件checked == true

3、如果是选中，下面是全选

4、如果不是选中，下面是全不选

var box1 = document.getElementById("boxid");

if(box1.checked == true) {

selAll();

}

또 다른 {

selNo();

}

</스크립트>

</body>

案例：下拉列表左右选择

** 下拉选择框

</선택>

** 创建一个页面

** 两个下拉框设置属性multiple

** 四个按钮，都有事件

** 代码实现：

<body>

<div>

</선택>

</div>

<div>

</div>

<div>

<option>AAAAAAAA</option>

<option>BBBBBBBB</option>

</선택>

</div>

<div>

</div>

// 实现选中添加到右边

function selToRight() {

1、获取select1 里面的option

* 使用getElementsByTagName(); 返回的是数组

* 遍历数组，得到每一个option

2、判断option是否被选中

* 属性selected ，判断是否被选中

** selected = true; 选中

** selected = false;未选中

3、如果选中，把选择的添加到右边去

4、得到select2

5、添加选择的部分

* appendChild 方法

// 获取到select1 里面的option

// 得到select1

var select1 = document.getElementById("select1");

// 得到select2

var select2 = document.getElementById("select2");

// 得到option

var options1 = select1.getElementsByTagName("option");

// 遍历数组

for(var i=0;i<options1.length;i++) {

// 第一次循环i=0 length:5

// 第二次循环i=1 length:4

// 第三次循环i=2 length:3

// 再往后就不满足条件了后边的都循环不到了

var option1 = options1[i]; // 得到每一个option对象

// 判断是否被选中

if(option1.selected == true) {

// 添加到select2 里面

select2.appendChild(option1);

나--; // Pay attention to this point, if you don’t write it, you will have problems

}

// 全部添加到右边

function allToRight() {

var select2 = document.getElementById("select2");

var select1 = document.getElementById("select1");

var options1 = select1.getElementsByTagName("option");

for(var i=0;i<options1.length;i++) {

var option1 = options1[i];

select2.appendChild(option1);

나--;

}

// 右边的添加到左边的操作类似

</스크립트>

</body>

案例：下拉框联动效果(省市联动)

** 创建一个页面，有两个下拉选择框

** 在第一个下拉框里面有一个事件：改变事件onchange事件

** 方法add1(this.value); 表示当前改变的option 里面的value值

** 创建一个二维数组，存储数据

** 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

**代码实现：

<body>

</선택>

</선택>

// 创建一个数组存储数据

// 使用二维数组

var arr = new Array(4);

arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];

arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];

arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];

arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];

function add1(val) {

/* 实现步骤：

1、遍历二维数组

2、得到的也是一个数组（国家对应关系）

3、拿到数组中的第一个值和传递过来开的值作比较

4、如果相同，获取到第一个值后面的元素

5、得到city 的select

6、添加过去使用appendChild 方法

** 需要创建option （三步操作）

// 由于每次都要向city里面添加option，第二次添加，前边第一次的会保留，追加

// 所以每次添加之前，判断一下city里面是否有option，如果有，删除

// 获取city 的select

var city1 = document.getElementById("cityid");

// 得到city 里面的option

var options1 = city1.getElementsByTagName("option");

// 遍历数组

for(var k=0;k<options1.length;k++) {

// 得到每一个option

var op = options1[k];

// 删除这个option 通过父节点删除

city1.removeChild(op);

k--;// 每次删除长度都会减一k都会增加一不执行此操作会出错

}

// 遍历二维数组

for(var i=0;i<arr.length;i++) {

// 得到二维数组里面的每一个数组

var arr1 = arr[i];

// 得到遍历之后的数组的第一个值

var firstvalue = arr1[0];

// 判断传递过来的值和第一个值是否相同

if(firstvalue == val) { // 相同

// 得到第一个值后面的元素

// 遍历数组arr1

for(var j=1;j<arr1.length;j++) {

var value1 = arr1[j]; // 得到国家之后城市的名称

// alert(value1);

// 创建option

var option1 = document.createElement("option");

// 创建文本

var text1 = document.createTextNode(value1);

// 把文本添加到option里面

option1.appendChild(text1);

// 添加值到city 的select 里面

city1.appendChild(option1);

}

</스크립트>

</body>

The above JavaWeb Learning Notes Sharing (must-read) is all the content I share with you. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.