Day16 -- HTML, CSS, and JavaScript summary, day16 -- htmlcss

Day16 -- HTML, CSS, and JavaScript summary, day16 -- htmlcss

HTML

A lot of labels: block-level, intra-row

CSS

Position

Background

Text-align

Padding

Font-size

Background-image

Z-index

Opacity

Float (clear: both)

Line-height

Border

Color

Display

Supplement: Page Layout

JavaScript

6. for Loop

For (var item in [11,22, 33,44]) {

Console. log (item)

}

For (var I = 0; I <arra. length; I = I + 1 ){

Break ;}

While (condition ){}

7. conditional statements

If (condition) {} else if (condition) {result} else {result}

Switch (name) {case: "1 |: console. log (123)

Break;

Case: "1": console. log (456 );

Default: console. log (789 );}

8. Functions

Function func (arg ){

}

Common functions

Function func (){

}

Anonymous functions:

SetInterval (function () {}, 5000)

Self-executed functions:

Function func (){}

(Function (arg ){

Console. log (arg );

}) () # Self-executed function, automatically executed Function

After the function is created, the self-executed function is integrated. After a () is added to the outside, the function can be automatically executed (def func (): print (66666) () to automatically trigger the execution.

Serialization and rice serialization

JSON. stringify (obj) # convert the object to the string obj = [, 5] con = JSON. stringify (obj)>: "[, 5]"

JSON. parse (obj) # convert the string object to the original form, such as list and dictionary form.

10. Escape

Client (cookie) = "Server

After escaping, save it to the hard disk, save the user logon status, and save it to the local cookie, which must be escaped.

Escape the data and save it in the cookie.

EncodeURI () # Escape Character, which converts Chinese characters to the URL address after escaping

EncodeURIComponent () escape characters in the URI component

DecodeURI () # Escape and decode the converted URL

Unescaped characters in the decodeURIComponent () URI component

11. eval

JavaScript

Eval ()

12. Time

Date class

Var d = new Date ()

13. Scope

JavaScript: Use a function as the scope

Function func (){

If (1 = 1) {var name = "alex ";

}

Console. log (name );

}

Func ()

=======================================1. Use a function as the scope = ==========================================

============================================= 2. The function scope is in the function before being called, already created ==========================

=======================================3. The function scope has a scope chain, and created before being called ========

The JavaScript scope is at the function level. The function block is used as the scope to search for the scope from the inner layer.

Function func (){

Var xo = "eric ";

Function inner (){

Console. log (xo );

}

Var xo = "tony"

Return inner;

}

Var ret = func ()

Ret ()

The execution result is "tony". Why? Because the inner scope is not executed, "tony" replaces "eric". At the end of the call, "eric" has been changed to "tony ".

14. JavaScript object-oriented

Function Foo (n ){

This. name = n;

This. sayName = function (){

Console. log (this. name );

}

}

Var obj = new Foo ("we ");

A. this refers to the object (python self)

B. When creating an object, the new function ()

DOM

Indirect search

File Content operations:

InnerText # retrieve text only

InnerHTML # Get all content

Value # value in the input tag, which can be set

Value # The <option value = "n"> value in the select tag can also be modified.

SelectedIndex # index value in select

CSS style

ClassName

ClassList. add

ClassList. remove

Obj. style. fontsize = "16px" # modify the style in the label and add attributes to the style

Attribute operations

SetAttribute (attribute name, value) # Set the attribute value

RemoveAttribute (Attribute Value) # Delete the attribute value

GetAttribute # Get attributes

Create tags and add them to HTML　

Submit Form

Document. getElementById ("f1"). submit ()

Others:

Console. log () alert confirm (information) v: true false

Location. href get the url of the current webpage location. href = "url |" jump to a webpage

SetInterval (function, time) # timer, always in progress.

ClearInterval (obj); cancel the timer

SetTimeout (function, time) timer is executed only once

ClearInterval (obj) Cleanup Timer

Event:

Page with separated behavior style structures?

Js css html

Bind events in two ways:

A. Bind tags directly, onclick = "xxxx ();"

B. first obtain the Dom object and then bind it.

Document. getElementById ("xx"). onfoucs

Document. getElementById ("xx"). onfoucs

This is the tag of the currently triggered event.

A. the first binding method

<Input id = "i1" type = "button" onclick = "ClickOn (this)">

Function. ClickOn (self ){

// The tag currently clicked by self

}

B. method 2

<Input id = "i1" type = button ">

Document. getElementById ("i1"). onclick = function (){

// This indicates the tag currently clicked.

}