JS Advanced Summary

First, find HTML elements

　　Typically, with JavaScript, you need to manipulate HTML elements.

1. Find HTML elements by ID

2. find HTML elements by tag name

3. find HTML elements by class name

Tips: finding HTML elements through the class name is not valid in IE 5,6,7,8.

var x=document.getelementbyid ("Intro"); var y=document.getelementsbytagname ("P");

①, changing the contents of HTML elements (InnerHTML)

document.getElementById (ID). innerhtml=New HTML

②, changing HTML properties

document.getElementById (ID). attribute=New  Valuedocument.getelementbyid ("image"). src= " Landscape.jpg ";

③, changing HTML styles

document.getElementById (ID). style.property=new  style<script>document.getElementById ("P2"). style.color= "Blue"; </script>

④, adding or removing HTML elements

Second, DOM events

1, JS in the event

Behavior, structure, style-separated pages

This event is triggered by the general event onclick mouse click

OnDblClick This event when the mouse double-clicks
OnMouseDown triggers this event when the mouse is pressed
OnMouseUp triggers this event when the mouse is released when the mouse is pressed
onMouseOver This event is triggered when the mouse moves over the range of an object
OnMouseMove triggers this event when the mouse moves
onMouseOut This event is triggered when the mouse leaves an object range
OnKeyPress This event is triggered when a key on the keyboard is pressed and released.
OnKeyDown This event is triggered when a key on the keyboard is pressed
OnKeyUp triggers this event when a key on the keyboard is pressed to release

3 ways to ① and bind events

1: Write directly within the HTML tag declaration

<div id= "School" onclick= "T ();" >

This is the oldest and most compatible. The standard of the Lev0 class that belongs to the DOM. This effect is equivalent to executing "t () when the div is clicked;" This statement,

In the global scope, therefore, the inside of the T function refers to the global object-->window want to manipulate the clicked Dom object, with this is not.

The 2nd type of binding method:

Dom object. onclick = function () {}

This binding is to assign a DOM object onclick property to a function,

Therefore, this inside the function directly points to the DOM object.

In this binding method, only one event can be bound to a handler function

That is. onclick = fn1; . onclick = fn2;

The final effect, is. onclick = fn2;

If you use a function to invoke the form of another function

Example. onclick = function () {fn1 (), FN2 ()}

At this point in the fn1,fn2, this also points to window.

How to bind multiple functions and make this point to a DOM object

Third Way to bind events:

The event binding standard for DOM Lev3

Add and remove listener events.

AddEventListener (' Events ', functions); The first parameter event parameter, no prefix "on", the standard of the Internet, IE does not support

Note 1: If more than one event handler is added, press "Add in order to execute"

Note 2: The This in the event handler function refers to the DOM node itself (standard)

Note 3: The first event parameter, the "on" of the event name is removed (standard)

Remove bindings

RemoveEventListener (' event ', function)

How to bind events and dismiss events under IE

Attachevent (' event ', function)//Note: event to be added on

DetachEvent (' Events ', functions)//events are still added on

To summarize:

The difference between AddEventListener and IE's attachevent ()

1: Different names of functions

2: The event name is different, ie to add on,w3c do not add on

3: The order of execution after the addition of events is different, the ie6,7,8 is executed in the order of binding events, and the post-binding event occurs first.

4:this, the This in the binding function points to the DOM object, and in ie6,7,8, points to the Window object

Iii. capturing and bubbling models of events

In the model,

The AddEventListener supports the 3rd parameter to declare whether the model of the event is bubbling or snapping.

If declared true, is the snap mode

If it is declared false or is not declared, it is bubbling

Note: The attchevent of IE does not have a 3rd parameter and does not support capturing the model

The concept of the event object:

When the function that corresponds to the event is triggered, the function receives an event argument,//Standard

Example Xx.onclick = function (EV) {alert (EV)}

When clicked, the EV parameter represents the "individual parameters" at the moment of the click, passing in the same way as an object.

For IE, when an event occurs, the event object is assigned a value to the Window.event property

Iv. interruption of the event

How to interrupt the propagation of an event???????

In the "event." Stoppropagation ();

In IE, the event object. cancelbubble = true;

Cancelbubble = True//ie Cancel bubbling

Stoppropagation (); Bubble cancellation

ReturnValue = false; IE Cancel Event effect

Preventdefautl ();//The event effect is canceled

Cancel the default effect of an event

The event object. Preventdefault (); The default effect of blocking events, the method

The event object. returnvalue = false; Set the property value of ReturnValue to false;

Five, Js scope chain (refers to the AO chain)

1: Parameters

2: Local variable declaration

3: function declaration

* The difference between a function declaration and a function expression

The expression must have a return value, assigning the return value (that is, the anonymous function) to a variable.

This is the normal assignment process.

①, JS is not a sentence in order to execute, first lexical analysis

This, with arguments

When a function is running, there are several variables that can be referenced within the function.

AO, arguments, this

For arguments and this, each function has its own unique arguments and this, and does not chain-find

What is arguments?

A: 1:arguments is a copy of the actual argument received

2: Receive the arguments collected and put into a arguments object

In lexical analysis, the properties of AO are first formed by formal parameters, and the value is undefined

When the arguments come, modify the corresponding properties of the AO.

T (a,b,c) {},

Called when: T (1,2,3,4,5) parameters

At this point, the AO attribute has only a,bc,3 properties, arguments has 1,3,3,4,5, all the values

For arguments beyond the number of formal parameters, you can get the arguments

Index of 3:arguments from 0,,.... increment, corresponding to the argument one by one

The 4:arguments.length property represents the number of arguments

5:arguments must not be an array, it is a long comparison of an object like an array, although there is also the length property

6:arguments each function will have, therefore, Arguemnts will only find its own arguments inside,

Cannot refer to the outer arguments

Who is this?

This refers to the calling context

To discuss the application scenario of the function

4 Ways to call functions

1: Function mode

Call the function name directly, or the return value of the function expression,

This refers to the Global object, window

2: Attribute mode (object method mode)

This refers to the object (the owner of the method)

3: Constructor mode

Create an object by using the new function name ()

In JS, the relationship between the constructor and the object is relatively loose,

Object is a collection of property-and value

The role of the constructor is to create an object that points to the object,

4:call,apply Way

The function itself is an object, and the object has a method

The name of the function. Call (object, parameter 1, parameter 2, parameter 3);

With Fn.call (obj, ' A ', ' B ');

The actual effect is equivalent to

1:FN internal this points to obj

2:FN (' A ', ' B ');

Apply has the same effect as call, except that all parameters are wrapped in an array and passed through when the parameter is passed.

Example Fn.call (obj, ' A ', ' B ') ===> fn.apply (obj,[' A ', ' B ']);

There's another way to change this.

With statement

With (object) {

Statement 1

Statement 2

.....

}

In the WITH internal statement, the object in the argument is treated as the context.

Vi. Lexical analysis

JS execution sequence 1: The lexical analysis phase first puts the received parameters on the active object and then analyzes the code in the function body a:var xx = yy; procedure: Declares an XX property on the active object, but does not assign a value, if there is already xx, it is not without action. B:function TTT () {} procedure: Directly declares the TTT attribute, and the content is function Body 2: EXECUTE statement phase

Six, JS object-oriented

Properties, Method-to object

"Class" Can do encapsulation, inheritance, polymorphism,

static method of "class"

What are the objects in 1:js?

A: JS object is an unordered collection of key-value pairs

2: Ways to create objects

①, creating objects by literal amount

Example: {age:22,hei:180}

{}-> empty object, no attributes

②, through New Object ([value]);

Create objects with constructors (no difference from 2nd, because object is a built-in constructor)

Seven, JS object-oriented encapsulation

In the JavaScript language, there is no out-of-the-box private property/method mechanism, but you can simulate private properties through scopes, private methods

The object's properties are readable and writable, how can I achieve the purpose of encapsulation?

Answer: Through closures + local variables to complete

Declare local variables inside the constructor, and common methods,

Because of the scope relationship, only the methods within the constructor can access the local variables.

The method is open to the outside world, so it is possible to access local variables by means of methods.

In the process of locating a property or method, locate the attribute along the prototype chain,

Prototype of prototype----prototype ....-> empty object-->null

The prototype forms a chain

This way of finding properties, called JS's prototype chain

①, prototypes impersonate the way to complete inheritance

Copy inheritance, also known as Object inheritance, is actually copying the properties of the parent object to the child object

The static property or static method of object-oriented in the eight, JS

From soya-bean milk machine to the process of making soy milk, soy milk machine is the role of the constructor function.

If you look at the soy milk machine itself, soy milk machine is also a machine, is also an object, can also have properties and methods.

Then, the soybean milk machine as the object when the property and method, is equivalent to the static property of the class, static method.

Ten, closed bag

A word closure: the scope of a function does not depend on the environment at run time, but on the environment when the function is declared. Typical applications: Closure and local scope simulation private property closures and anonymous functions complete "undisturbed variables" ①, Closures (4) closures + anonymous functions
Source: http://www.cnblogs.com/suihui/p/3186499.html

JS Advanced Summary