우선 DOM 작업은 무엇입니까?

Document ObjectModel의 약자는 문서를 물품으로 처리하는 모델입니다.프로그램에서 HTML과 XML을 자유롭게 조작할 수 있는 구조입니다.
아무것도 하지 않은 상태의 HTML은 JavaScript에서 사용할 수 없습니다.따라서 문서의 특정 부분에 기호를 하고 이 부분에 "이런 일을 하고 싶다"는 처리를 하는 것이 가능한 규정인 DOM이 된다.
참조자바스크립트 초보자도 바로 알아!DOM이란 무엇입니까?

메서드, 객체 및 함수

무엇이 대상입니까?

js로 조작할 수 있는 게 뭐야?브라우저 창을 표시하는 윈도우 대상, 컨트롤러를 표시하는 콘솔, 웹 내용을 표시하는 문서 등이 있다.
객체는 값의 하나이므로 변수 또는 속성 ※ 속성은 그 녀석의 특성을 나타내는 정보입니다. 에 넣을 수 있습니다.
예를 들어 콘솔과document는 윈도우 대상의 속성입니다.하지만 생략할 수 있는 경우가 많다.document를 쓸 필요가 없습니다. 이렇게 하면 document만 있으면 이동할 수 있습니다.

방법이 무엇입니까?

대상 속성의 함수입니다.

함수는 무엇입니까?

제작 방법

현재 ES2015는 메인스트림입니다. ES5의 구문은 let이 아니라 function입니다.

반복 문법은 이것만 기억하세요.

example.js

for(let num = 0; num < 10; num++ ) {
　　　console.log( num + '回目のハロー');
}
//解説文 
//1. 新規作成した変数peopleを数値0で初期化し、継続条件「変数peopleが10より小さい」が真ならば、以下を繰り返せ
//2. {文字列「ハロー」をコンソールに表示しろ} 変数peopleに1を足す

=> //出力結果は以下
//０回目のハロー　１回目のハロー　２回目のハロー　３回目の・・・ 10回目のハロー

//逆順にしたいなら
for (let num = 10; num > 0; num-- ) {
　　　console.log( num + '回目のハロー');
}

//10ずつ増やしたいなら
for (let num = 10; num > 0; num+=10  ) {
　　　console.log( num + '回目のハロー');
}

for와while의 차이점은 횟수를 지정할 수 있느냐 없느냐입니다.

가명을 얘기해 볼게요.

일
이
삼
let
새로 만들기
prompt
사용자가 입력할 수 있도록 프롬프트
방법
log
나타나다
방법
perseInt
정수화
함수
매개 변수
매개 변수의 내용이 수치로 변환되지 않으면 진짜로 돌아가고, 가능하다면 진짜로 돌아간다
함수
>=
왼쪽은 오른쪽 이상.
연산자
==
왼쪽 = 오른쪽
!=
왼쪽 ≠ 오른쪽
==
왼쪽과 오른쪽은 엄격히 같다
!==
왼쪽과 오른쪽은 엄격히 같지 않다
&&
및
논리 연산자
!
아니오(NOT)
논리 연산자
대상
해설
참조 링크
document
브라우저에 표시된 문서를 사용할 수 있습니다.
JavaScript에서 문서 객체 사용 방법
일
이
삼
getElementById
html에서 id 가져오기
querySelector
선택기에서 질의
id인지 class인지 알 필요가 없어요.
addEventListener
이벤트 탐지기 추가
사건을 상응하는 함수와 결합시키다
innerText
내부 텍스트 가져오기
classList
다음에add와remove를 계속하면 클래스를 간단하게 추가하고 삭제할 수 있습니다
https://bityl.co/5vLy
onload
페이지나 이미지 읽기 완료 시 실행, 이벤트 자동 실행 등
https://bityl.co/5y3v
getAttribute
속성 값 가져오기
매개 변수 속성에서 속성 값 가져오기
setAttribute
속성 값 설정
매개변수 속성으로 설정합니다.새 속성 추가/기존 속성 변경
removeAttribute
속성 값 삭제
classList에 관해서는 지금까지 jQuery에서 간단하게 할 수 있었지만, js를 낳는 데 매우 번거로운 반의 추가·삭제가 간단해졌다는 것을 기억할 수 있다면 ok?

addEventListener 사용

예를 들어 햄버거 버튼을 누르면 메뉴 탭이 열릴 때 안쪽이 이렇다.

js로 표시하면 다음과 같다.
example.js

変数.addEventLisner('click', 関数);

//または
変数.addEventLisner('click', () => {
　関数内の処理
} );

어려운 거 있으면 이거 봐.

・프런트엔드 엔지니어 전용 MDN 웹 docs를 망라했습니다.
MDN web docs 일본인들이 이해하기 쉽게 링크할 수 있다.js뿐만 아니라 html, css 등도 망라되어 사전 느낌으로 사용할 수 있다.각자의 강좌도 있다.

jQuery

jQuery에서 뭘 하는지 대충 얘기해주세요.
① 작업할 HTML 요소 가져오기
② 어떤 이벤트(클릭 ~등)가 발생하면 HTML에 대한 조작(명령)
취득 방법은 다음과 같다.
선택기
코드
기본형
$("선택자")
식별 선택기
$("#Selector")
클래스 선택기
$(".Selector")
요소 선택기
$("h1")

기본 문법

script.js

$("セレクタ01").on('イベント',function(){
  $("セレクタ02").メソッド(値);
});

주요 방법 일람
방법
기본 문법
용도
on()
대상 요소.on(이벤트 이름, 선택기, 데이터 및 함수)
css()
css 덮어쓰기
remove ()
지정된 HTML 요소 삭제
attr()
$(선택기).attr(변경할 속성 이름, 변경할 속성 값)
HTML 요소의 속성 값 가져오기 또는 변경
addClass ()
$("p").addClass("red");
지정된 요소에 매개변수 클래스 추가
removeClass()
$("p").removeClass("red");
지정된 요소에서 매개변수 클래스 삭제하기
toggleClass()
$("p").toggleClass("red");
지정된 요소에서 매개변수 클래스 삭제하기
hide()
요소 숨기기
show()
요소 숨기기
toggle
show와hide기능의 총결
fadeIn()
$('선택자').fadeIn(필요한 밀리초)
지정된 HTML 요소 페이드 인
fadeOut()
$('선택자').fadeIn(필요한 밀리초)
지정된 HTML 요소 페이드 아웃
fadeToggle()
$('선택자').fadeIn(필요한 밀리초)
페이드 인 페이드 지정 HTML 요소
text
요소의 텍스트 가져오기 및 변경
children()
하위 요소 읽어들이기
parent()
부모 요소 읽어들이기
slideIn
요소.초수
요소 표시
slideOut
요소.초수
요소 숨기기
slideToggle
요소.초수
요소 표시 또는 숨기기
더 이런 상황이 여기 있어요.
주요 활동 목록
일
이
cllick
클릭 시
mouseover
커서가 요소 위에 있는 경우
mouseout
커서가 요소 위로 이동할 때
scroll
스크롤 시
load
로드 완료 시

기타

js용 css에 -js의 접두사를 붙이면 관리하기 쉽다

참조 링크

・jQuery 일반적인 방법 요약
・jQuery의 기초(개념·방법)
・Onload에 대해 이해하기 쉬운 해설 사이트입니다.