웹 API 소개

js 기본과 웹 API의 두 단계 사이의 관계

API와 웹 API

DOM 소개

DOM 소개

getElementById는 요소를 가져옵니다.

getElementsByTagName 특정 유형의 태그 요소를 가져옵니다.

H5에는 요소를 얻는 새로운 방법이 추가되었습니다.

본문 및 HTML 요소 가져오기

사건의 세 가지 요소

이벤트 프로세스 실행

요소 조작 - 요소 컨텐츠 수정

innerText와 innerHTML의 차이점

요소 조작 - 요소 속성 수정

시분할 인사 사례

작업 요소 - 양식 속성 수정

JD.com을 모방하여 숨겨진 비밀번호를 일반 텍스트로 표시하는 예(1부)

JD.com을 모방하여 숨겨진 비밀번호를 일반 텍스트로 표시하는 예(2부)

요소 조작 - 스타일 속성 수정

타오바오 모방 QR코드 폐쇄 사례

반복 스프라이트

숨겨진 텍스트 상자 내용 표시

className을 사용하여 스타일 속성 수정

비밀번호 상자 확인 정보

운영 요소 및 임무 요약

배타적 사고(알고리즘)

바이두 피부재생 효과

테이블 행의 색상 변경 효과

양식 전체 선택 - 전체 선택 취소(전편)

양식 전체 선택 - 전체 선택 취소(후편)

맞춤 속성 값 가져오기

사용자 정의 속성 제거 설정

탭바 전환 레이아웃 분석(중요)

탭바 전환 제작(1편)

탭바 전환 제작(2부)

H5 맞춤 속성

노드 운영과 노드 소개를 배우는 이유

노드 작업의 상위 노드

노드 작업의 하위 노드

노드 작업 첫 번째 하위 요소 및 마지막 하위 요소

시나 드롭다운 메뉴

노드 작업의 형제 노드

노드 작업: 노드 생성 및 추가

게시 메시지 케이스의 간단한 버전

노드 작업-노드 삭제

메시지 케이스 삭제

노드 작업-복사 노드

동적으로 테이블 생성 - 학생 데이터 생성

동적으로 테이블 생성 - 행 생성

동적으로 테이블 생성 - 셀 생성

동적으로 테이블 생성 - 데이터로 셀 채우기

동적으로 테이블 생성 - 셀 생성 및 삭제

동적으로 테이블 생성 - 작업 추가 및 삭제

document.write가 요소를 생성합니다.

innerHTML과 createElement의 효율성 비교

DOM 키 코어

이벤트 고급 안내

이벤트를 등록하는 두 가지 방법

AttachEvent 등록 이벤트

일정 삭제

DOM 이벤트 흐름 이론

DOM 이벤트 흐름 코드 확인

이벤트 객체란 무엇인가

e.target과 이것의 차이점

기본 동작 차단

이벤트가 터지는 것을 방지

이벤트 위임

텍스트 선택 및 마우스 오른쪽 버튼 클릭 메뉴 비활성화

페이지에서 마우스 좌표 얻기

쥐를 따라가는 천사

자주 사용되는 키보드 이벤트

keyCode는 사용자가 누른 키를 결정합니다.

JD 키 입력 내용 시뮬레이션 사례 연구

Jingdong Express 추적 번호 조회 시뮬레이션(1부)

Jingdong Express 추적 번호 쿼리 시뮬레이션(2부)

BOM 소개

BOM 개요

페이지 로드 이벤트

창 크기 조정 이벤트

타이머 설정시간 초과

5초 후 자동으로 닫히는 콜백 기능과 광고

타이머 지우기

타이머 설정간격

카운트다운 효과

타이머 지우기

SMS 케이스 보내기

이것이 문제를 지적한다

js 동기화 및 비동기

동기 태스크 및 비동기 태스크 실행 프로세스

JS 실행 메커니즘

위치 개체의 공통 속성

5초 후 해당 페이지로 이동

URL 매개변수 가져오기

일반적인 위치 방법

네비게이터 객체

히스토리 객체

PC 웹페이지 특수효과 열람

offsetLeft 및 offsetTop은 요소 오프셋을 가져옵니다.

offsetWidth 및 offsetHeight는 요소 크기를 가져옵니다.

오프셋과 스타일의 차이점

상자 안의 마우스 좌표를 가져옵니다.

모달 상자 끌기(위)

모달 상자 드래그(가운데)

모달 상자 드래그(아래)

Jingdong의 돋보기 효과를 모방한 페이지 구조 구축

숨겨진 폐색 레이어와 큰 상자를 보여주는 모조 Jingdong 돋보기 효과

모조 Jingdong 돋보기 효과 폐색 레이어가 마우스를 따릅니다.

Jingdong 돋보기 모방 효과는 폐색 레이어의 이동 범위를 제한합니다.

모조 Jingdong 돋보기 효과 대형 그림 운동

클라이언트 시리즈

즉시 기능 실행

Taobao의flexibleJS 소스 코드 분석의 핵심 원칙

Taobao의flexibleJS 소스 코드 분석 페이지쇼 이벤트

스크롤 시리즈

모방 Taobao 고정 사이드바(1부)

모방 Taobao 고정 사이드바(아래)

세 가지 주요 시리즈 요약

마우스오버와 마우스엔터의 차이점

애니메이션 원리

간단한 애니메이션 기능 캡슐화

애니메이션 기능 - 다양한 요소에 대해 다양한 타이머를 기록합니다.

애니메이션 완화의 원리

애니메이션 완화의 기본 코드 구현

여러 대상 값 간 이동을 위한 애니메이션 완화

애니메이션 완화를 위한 콜백 함수 추가

애니메이션 기능 활용

웹페이지 캐러셀 다이어그램-구조 구축

웹 페이지 캐러셀 - 마우스가 지나갈 때 왼쪽 및 오른쪽 버튼을 표시하고 숨깁니다.

웹페이지 캐러셀 - 동적으로 생성된 작은 원

웹 페이지 회전식 차트 - 작은 원 독점 생각

웹페이지 캐러셀 - 이미지를 스크롤하려면 작은 원을 클릭하세요.

웹 페이지 캐러셀 - 오른쪽에 있는 버튼으로 원활한 스크롤

웹 페이지 캐러셀 - 첫 번째 사진 복제

웹페이지 캐러셀의 작은 원은 오른쪽 버튼으로 변경됩니다.

웹 페이지 캐러셀 - 두 개의 작은 버그 솔루션

왼쪽의 웹페이지 회전식 버튼 기능

웹 페이지 캐러셀 - 자동 재생 기능

스로틀 밸브 및 로직 인터럽트 애플리케이션

애니메이션으로 맨 위로 돌아가기

Somersault 클라우드 케이스

모바일 웹사이트 특수효과 소개

모바일 터치 이벤트

모바일 TouchEvent 터치 이벤트 객체

모바일에서 요소 드래그

모바일 단말 캐러셀 차트 구조 구축

모바일 캐러셀 차트-레이아웃 분석

모바일 캐러셀 스크롤 사진

모바일 회전식 원활한 스크롤

classList 클래스 이름 작업

모바일 캐러셀 차트 - 작은 점이 변경 사항을 따릅니다.

모바일 단말기의 캐러셀 차트 - 손가락 드래그 캐러셀 차트

모바일 캐러셀 - 손가락을 밀어서 이전 사진과 다음 사진으로 슬라이드합니다.

모바일 캐러셀 이미지 리바운드 효과

맨 위로템플릿 제작

모바일 단말의 클릭 이벤트 300ms 지연 문제 해결

Fastclick 플러그인 사용법

Swioper 플러그인 사용 - 관련 파일 소개

모바일 캐러셀 이미지 - 문법 사양에 따라 사용됨

스와이프 플러그인 사용 매개변수 변경

기타 모바일 플러그인 및 사용 요약

비디오 플러그인 zy.media.js 사용

부트스트랩 캐러셀

알리바바 쇼 캐러셀 사진 제작

로컬 스토리지 가이드

로컬 스토리지 세션Strage

로컬 스토리지 localStorage

사용자 이름 대소문자 기억