1. Process control statements

The program has three basic structures-sequence structure, selection structure and loop structure

1. Selection structure:

If statement

If (check condition) {execute statement}else if (check condition) {execute statement}else{execute statement}Copy the code

A switch statement

Case must be a specific value, but if the expression can return a specific value true or false it can also be an expression, then switch is true

Switch (expression) {case Value: Execute the statement break; Case The value can be "break". Default: execute statement}Copy the code

2. Cycle structure:

For statement

1. Initialize the expression,

2. Control expression,

3. Expression after loop

for(var i = 0; i < n ; Var I = 0; Which {execute statement} do while at least once var I = 0; Do {execute statement}while(judgment condition)Copy the code

Second, the array

1. Array declaration

Var arr = new Array (); Var arr = []; var arr = [];Copy the code

2. Array assignment and value

Arr [index] = 1; For loop value: arr [index number];Copy the code

3. Array traversal —- Batch value

for (var i = 0; i < arr.length; i ++){}
Copy the code

4. Prevent sparse arrays

 arr (arr.length) = i;
Copy the code

Three, functions,

1. Function definition and call

Function definition: Each function can be defined only once, but a function can be declared and called as many times as necessary.

Function name () {function body (to execute the code)} ② function expression: var function name = function () {function body}; Function call: function name (); (To call reference first)Copy the code

2. Parameters of the function

Function name (parameter 1, parameter 2) {// Function declaration argument is just a placeholder, is the formal argument function body} function with arguments: Function name (parameter 1, parameter 2) // The function is called with a specific parameter. The actual parameter is not related to the actual parameter, but is assigned a copy of the value of the parameter at call timeCopy the code

3. Function return value

Return Specifies the value to be returned. (function return values, call this function is equivalent to call what) (2) the function in the execution is completed after the return statement will exit the function, the code will not perform (3) if the print function name only, will find the body of the function through the function name, if you want to print the function return value, so be sure to add parentheses ()Copy the code

4. Anonymous functions

Anonymous function: the function is assigned to a variable after it is defined. The function is called by the name of the variable, so there is no need for a nameCopy the code

5. Recursive functions

Functions call their own programming tricksCopy the code

6. Callback functions

Functions passed as functionsCopy the code

Four, objects,

Objects make it easy to manage and use variables and functions

1. Key-value pair: a corresponding relationship, through which the value can be easily found key:value;

Object is also a key-value pair attribute name: attribute value, index: element valueCopy the code

2. Object declaration

Var obj = new.object (); Var obj = {};Copy the code

3. Attributes: The characteristics used to describe objects are generally nouns corresponding to variables

Definition: object. Attribute name = value to assign; Call: object. Property name;Copy the code

4. Methods: Verbs are used to describe the behavior of objects

Is a function (a function that belongs to an object is called a method) definition: object. Function (){// function body}; Call: object.method name;Copy the code

5. Two ways to access properties

Attribute name: obj. Attribute name: obj. Parentheses: obj[" attribute name "];Copy the code

6. Two ways to traverse

For loop ②for-in for(var k in json) {statement} the k variable represents the key of the json variable (var I = 0) Notation (JavaScript object Notation) is a string written to record object data in the format of object literals in JS and can be used for data transfer.Copy the code

7, Null

Null is often used when an object is expected, but no value is currently attached

Undefined derived from null

    undefined == null  //true
    undefined === null  //false
Copy the code

Five, the DOM

Block the default behavior of the A tag

return false;
Copy the code

(2) Three elements of the event

Event = function () {event handler};

③ Batch operation

Replace (element, value to be replaced) function (element, value to be replaced) To replace the value of the) {element. The className = element. The className. Replace (to find the value of the replacement value)} the Document Object Model Document Object Model (dom), is the HTML Document modeling, as the Object to deal withCopy the code

1, concept,

Document: refers to HTML or XML file Node: all contents in AN HTML Document can be called nodes, common nodes include elements, Node attributes, text nodes, annotations, Node elements: tags in an HTML Document can be called elementsCopy the code

2. Structure concept

Parent node Parent child node Of the current node The child sibling node of the current node belongs to the same parent node as the current nodeCopy the code

3. Get elements

GetElementById getElementsByTagName Finds a class of elements by tag name (pseudo-array)Copy the code

4. Set properties

Element object. Attribute name = "attribute value"; < tag attribute name = "attribute Value" >Copy the code

5. Bind events

Event Three elements Event source. Event = function(){event handler}; This in an object method always refers to the object to which the method belongsCopy the code

6. Common attributes

SRC, title, className, href, and style. B The innerHTML text attribute retrits and sets the content of the tag. The innerText gets and sets the contents of the tag, which is treated as plain text. The innerText gets and sets the contents of the tag, which is treated as plain text. C Common form attributes Common form element attributes are: Type, Value, Checked, selected, and disabled Type Sets the type of the input element. Value Sets the value of the input element. Checked Sets whether the selected input element is selected Set whether option in the select drop-down list is selected disabled Sets whether the input element is disabled Get focus event yes onfocus Lose focus event yes onblur d custom attribute -- it must start with data- getAttribute() get tag attribute SetAttribute () Sets the tag attribute. RemoveAttribute () Removes the tag attributeCopy the code

7, node,

ChildNodes // children // nextSibling // nextElementSibling // nextSibling // previousSibling// last sibling // PreviousElementSibling // firstChild // firstElementChild // lastChild // ParentNode // parentNode (must be element node, so no need to deal with it)Copy the code

8. style attributes

The style property is an object, and the style object property is a string. Style can only be obtained and set in inline style JS - cannot be used as an identifier, and must be applied directly through JS when computingCopy the code

Create elements dynamically.

① Insert and remove nodes

Append the child element last in the parent: father. AppendChild (element to append); InsertBefore a child element in a parent element: father. InsertBefore (the element to be inserted, before the element); RemoveChild element from parent: father. RemoveChild (the child element to remove);Copy the code

②js dynamically create structure

Method 1: write the document directly in the document (" content ") method 2: change the innerHTML of the element object: innerHTML= "content" concatenated with a string or array and then added to the page with innerHTML. Method 3: Create or clone a node and append it with a Boolean value true for deep copy false for shallow copy document.createElement() document.clonenode ()Copy the code

Six, functions,

1. Scope, pre-resolution, and declaration enhancement

Pre-parsing: The parser has a pre-parsing process before executing the code in the current scope

Pre-parsing: Variable and function declarations are promoted to the top of the current scope before execution

Statement of ascension

② Function promotion: The parser reads the function declaration first and makes it available before any code is executedCopy the code

In addition, the parser looks for var before function, so if a function is found after a variable has the same name as the function, the function will be overwritten. (If the code executes after an assignment, the function will be overwritten.)

Variable scope

The outermost is a global variable is a local variable in a function: special function without internal var is a global variable recursive concept: programming skill is called recursive procedure calls itself Callback function: function is also a kind of common data types, so the function can also be regarded as parameters, to be treated as a function of the parameter called callback functionCopy the code

2. Constructors create objects

@this and new use the new keyword to declare new objects. The new keyword changes the direction of this in the constructor and causes the constructor to return this. Constructors are functions, but they return an object by default. Constructors make it easier to create objects (no need to create objects and return them). More importantly, you can use instanceof to determine the type of instance.Copy the code