Introduction to Web APIs

The relationship between the two stages of js basics and Web APIs

APIJapan Web API

Introduction to DOM

Introduction to DOM

getElementById gets the element

getElementsByTagName Gets a certain type of tag element

H5 adds new way to obtain elements

Get body and html elements

three elements of event

Execute event process

Manipulate elements - modify element content

The difference between innerText and innerHTML

Manipulate elements - modify element attributes

Time-sharing greeting case

Operation element-modify form attributes

Example of imitating JD.com to display hidden passwords in clear text (Part 1)

Example of imitating JD.com to display hidden passwords in clear text (Part 2)

Manipulate elements - modify style attributes

Case of imitation Taobao closing QR code

Looping sprites

Show hidden text box content

Use className to modify style attributes

Password box verification information

Summary of operational elements and assignments

Exclusive thinking (algorithm)

Baidu skin resurfacing effect

Color changing effect of table rows

Form Select All-Cancel Select All (Part 1)

Form Select All-Cancel Select All (Part 2)

Get custom attribute value

Set remove custom properties

Tab bar switching layout analysis (important)

Tab bar switching production (Part 1)

Tab bar switching production (Part 2)

H5 custom attributes

Why learn node operations and node introduction

The parent node of the node operation

Child node of node operation

Node operation first child element and last child element

Sina drop down menu

Node operation's sibling node

Node operations: create and add nodes

Simple version of posting message case

Node operation-delete node

Delete message case

Node operation-copy node

Dynamically generate tables - create student data

Dynamically generate tables - create rows

Dynamically generate tables - create cells

Dynamically generate tables - fill cells with data

Dynamically generate tables - create and delete cells

Dynamically generate tables - add and delete operations

document.write creates elements

Comparison of efficiency between innerHTML and createElement

DOM key core

Advanced guide to events

Two ways to register events

attachEvent registration event

delete event

DOM event flow theory

DOM event flow code verification

What is an event object

The difference between e.target and this

Block default behavior

Prevent events from bubbling up

event delegation

Disable text selection and right-click menu

Get the coordinates of the mouse on the page

Angel following the mouse

Commonly used keyboard events

keyCode determines which key the user pressed

Case study of simulating JD key input content

Simulate Jingdong express tracking number inquiry (Part 1)

Simulate Jingdong express tracking number inquiry (Part 2)

BOM introduction

BOM overview

page load event

window resize event

Timer setTimeout

Callback function and ads that automatically close after 5 seconds

clear timer

Timer setInterval

Countdown effect

clear timer

Send SMS case

this points to the problem

js sync and asynchronous

Synchronous task and asynchronous task execution process

js execution mechanism

Common properties of location objects

Jump to the page after 5 seconds

Get URL parameters

Common methods of location

navigator object

history object

PC web page special effects reading

offsetLeft and offsetTop get the element offset

offsetWidth and offsetHeight get the element size

The difference between offset and style

Get the coordinates of the mouse inside the box

Drag modal box (top)

Drag modal box (middle)

Drag the modal box (below)

Building a page structure that imitates Jingdong’s magnifying glass effect

Imitation Jingdong magnifying glass effect showing hidden occlusion layer and big box

Imitation Jingdong magnifying glass effect occlusion layer follows the mouse

Jingdong magnifying glass imitation effect limits the movement range of the occlusion layer

Imitation Jingdong magnifying glass effect large picture movement

client series

Execute function immediately

The core principles of Taobao flexibleJS source code analysis

Taobao flexibleJS source code analysis pageshow event

scroll series

Imitation Taobao fixed sidebar (Part 1)

Imitation Taobao fixed sidebar (below)

Summary of three major series

The difference between mouseover and mouseenter

Animation principles

Simple animation function encapsulation

Animation function - record different timers for different elements

Principle of easing animation

Basic code implementation of easing animation

Easing animation to move between multiple target values

Add callback function for easing animation

Use of animation functions

Web page carousel diagram-structure construction

Web page carousel - display and hide the left and right buttons when the mouse passes

Web page carousel-dynamically generated small circles

Web page carousel chart-small circle exclusive thought

Web page carousel - click on the small circle to scroll through the images

Web page carousel - seamless scrolling with buttons on the right

Web page carousel - clone the first picture

The small circle of the web page carousel changes with the button on the right

Web page carousel-two small bug solutions

Web page carousel-button function on the left

Web page carousel-auto play function

Throttle valve and logic interrupt application

Return to top with animation

Somersault cloud case

Introduction to mobile website special effects

Mobile touch event

Mobile TouchEvent touch event object

Drag elements on mobile

Mobile terminal carousel chart-structure construction

Mobile Carousel Chart-Layout Analysis

Mobile carousel-scrolling pictures

Mobile carousel-seamless scrolling

classList class name operation

Mobile carousel chart - small dots follow changes

Carousel chart on mobile terminal - drag carousel chart with finger

Mobile carousel - slide your finger to slide the carousel to the previous and next pictures

Mobile carousel image-rebound effect

Back to topTemplate making

Solution to the 300ms delay problem of click events on mobile terminals

Fastclick plug-in usage

Using swioper plug-in - introducing related files

Mobile carousel image - used according to grammar specifications

swiper plug-in usage-parameter change

Other mobile plug-ins and usage summary

Use of video plug-in zy.media.js

bootstrap carousel

Alibaba 100 show carousel picture production

Local storage guide

Local storage sessionStrage

local storage localStorage

Remember username case