집 >웹 프론트엔드 >JS 튜토리얼 >js 기본 지식 포인트 요약 및 공유

js 기본 지식 포인트 요약 및 공유

小云云원래의: 2018-03-26 17:15:142501검색

이 기사는 모든 사람에게 도움이 되기를 바라며 주로 기본 js 지식 요점을 요약하여 공유합니다.

웹사이트나 페이지에 js 코드를 작성하는 방법:
1.js 레이어링(함수): jquery(도구) 구성요소(ui) 애플리케이션(앱), mvc(backboneJs)
2.js 계획(): 피함 전역 변수 및 메소드(네임스페이스, 클로저, 객체 지향), 모듈화(seaJs, requireJs)

일반적으로 사용되는 내부 클래스: 데이터 배열 수학 문자열

HTML 속성, CSS 속성
HTML: attribute.HTML Attribute="value";
CSS: object.style.CSS attribute="value";

class 및 float
1.class:className
2.float:cssFloat

Get object
id:document.getElementById("id Name")

이벤트 : 사용자의 작업
마우스 이벤트:
onclick: 클릭
onmouseover: 마우스 온
onmouseout: 마우스 멀리
ondbclick: 더블 클릭 이벤트
onmousedown: 마우스 다운
onmouseup: 마우스 업
onmousemove 마우스 이동
Form 이벤트:
onfocus: Get focus
onblur: 포커스 상실
onsubmit: 이벤트 제출
onchange: 변경이 발생할 때
onreset: 이벤트 재설정
Keyboard events:
onkeyup: 키보드 해제
onkeydown: 키보드 누름
onkeypress: 키보드 키 입력 한 번
Window 시간: onload 이벤트
Event 페이지가 로드된 후 즉시 실행됩니다
두 가지 방법:
1.<script>window.onload=init/*함수 이름, 괄호는 추가할 수 없습니다*/;</script>
2.
event: 이벤트 발생 시 관련 정보 저장
이벤트 발생 시 event
event.clientX: 이벤트 발생 시 "클릭" 좌표 onclick = "fn(event)" >

p
innerHTML의 콘텐츠 수정: 개체의 모든 콘텐츠(텍스트 콘텐츠 및 라벨 콘텐츠)는 일반적으로 이중 라벨 또는 컨테이너 태그를 참조합니다.

innerText: 개체의 모든 텍스트 콘텐츠

document.createElement("tag name");

document.body.appendChild(object);
removeChild(object)
document.body는 본문 태그 객체입니다

document.documentElement는 html 태그 객체

ECMAscript, BOM, DOM
1.window: 최상위 객체
2.BOM: 브라우저 객체: 브라우저 객체 모델
3.DOM: 문서 객체 모델: 문서 객체 모델

4.BOM: 웹 페이지가 열리자마자 존재합니다

5. DOM: 작동하는 코드
6.Document는 DOM과 BOM 사이의 링크입니다.
Document에는 하위 항목이 있고 다른 문서에는 하위 항목이 없습니다. [다중 창]

window.open("Link","name","Settings");
1 .width: Set the window width
2.height: 창 높이를 설정합니다
3.left: 새 창에서 왼쪽 끝까지의 거리

4.top: 새 창에서 위쪽까지의 거리

5.srollbars: 스크롤 막대 [yes , no, 1,0 ]
6.toolbar: 도구 클래스 [yes, no, 0]
7.location: 주소 표시줄
window.close: 창 닫기
window.close()

타이머 생성:
One- 시간 타이머: window.setTimeout("Function()", 시간 t)
실행: 시간 t 이후 js 코드 실행 [한 번만 실행됨]
시간: 밀리초 단위

반복 타이머: window.setInterval("Function() " , 시간 t)
시간: 밀리초 단위
실행: js 코드는 t [n회]마다 한 번씩 실행됩니다.

타이머 지우기:

일회성 타이머 지우기: window.clearTimeout(타이머 이름)
반복 항목 지우기 타이머: window.clearInterval(타이머 이름)
참고: 타이머를 지우려면 타이머 이름을 지정해야 합니다. 익명 타이머는 지울 수 없습니다.

객체를 찾는 방법:
di:document.getElementById(" id name");
Tag:document.getElementsByTagName("TagName")//얻은 것은 객체 모음(배열)입니다
Object.getElementByTagName(TagName)

name:document.getElementByName("name");/ /form 모음(배열)

className:document.getElementByClassName("클래스 이름");//컬렉션(배열)【firefox】
document.images;//img 개체 가져오기(배열)
document.links;//링크 가져오기 개체(배열)
document .forms; //양식 객체 가져오기(배열)
document.body; //body 태그 객체
document.documentElement; //HTML 객체
event: 이벤트 정보 객체
this: 현재 객체

location 객체
location.href : URL 정보를 반환합니다. [URL 정보를 얻거나 여기에 값을 할당하여 점프 페이지를 구현할 수 있습니다.]
location.sign(): 새 문서 로드 [점프 페이지]
location.reload(): Reload 현재 문서 로드 [ 페이지 새로 고침]

location.replace(): 현재 문서를 새 문서로 교체 [페이지 이동]

location.add와 location.replace의 차이점:
location.sign: 기록 레코드를 생성합니다.
location.replace: 기록 레코드를 생성하지 않습니다.

history 개체:
history.length: 탐색한 URL 수
history.back ( ): 기록의 이전 페이지로 돌아가기
history.forward(): 기록의 다음 페이지 로드
history.go(n): 기록에 지정된 페이지로 이동, -1이면 실제로는 History .back() 함수

화면 개체
screen.height: 화면 높이 가져오기
screen.width: 화면 너비 가져오기
screen.availHeight: 작업 표시줄 없이 높이 가져오기
screen.availWidth: 화면 너비 가져오기 작업 표시줄 없는 너비

navigator object
navigator.appName: 브라우저 이름
navigator.appCodeName: 브라우저 코드 이름
navigator.appVersion: 브라우저 버전 번호 및 플랫폼 정보
navigator.userAgent: 브라우저 정보

DOM: 각 구성 요소를 설명합니다. 웹 페이지 부분 관계
var obj = document.getElementById("id name")
Firefox의 공백도 노드로 간주됩니다
parentNode: 부모 노드
childNodes: 자식 노드
firstChild: 첫 번째 자식 노드
lastChild: 마지막 one Child 노드
nextSibling: 다음 형제 노드 [참고: 동일한 부모 관계여야 함]
previousSiblind: 이전 형제 노드 [참고: 동일한 부모 관계여야 함]

로그인 확인:
onsubmit: 양식 제출 이벤트
onsubmit = "return 함수()"

js 기본 지식 포인트 요약 및 공유

관련 기사