Pseudo-array arguments
On behalf of the arguments are arguments. There is particular about the place: arguments used only in a function.
1.1 returns the number of parameters
Return function argument number: arguments.length
example:
Fn (2,4 ); Fn ( 2,4,6 ); Fn ( 2,4,6,8 ); function Fn (A, B, C) { the console.log (arguments); the console.log (Fn. length); // Get the number of the parameter the console.log (the arguments.length); // Get the number of arguments the console.log ( "----------------" ); }
result:
1.2 can only modify elements can not be modified duration
The reason why is a pseudo-array arguments, because: arguments can modify elements, but can not change the length of the array.
example:
Fn (2,4 ); Fn ( 2,4,6 ); Fn ( 2,4,6,8 ); function Fn (A, B) { arguments [ 0] = 99; // The first argument of the number to 99 arguments.push (. 8); // this method does not pass through, can not be increased because the element }
Empty arrays in several ways:
var Array = [1,2,3,4,5,6 ]; Array.splice ( 0); // Embodiment 1: Removes all items be array.length = 0; // Embodiment 1: length attribute can be assigned, in other languages is read length Array = []; // mode 3: recommended
2. DOM operation time
2.1 JavaScript composition
JavaScript is divided into three basic parts:
ECMAScript: JavaScript syntax standards. Including variables, expressions, operators, functions, IF statements, for statements and the like.
DOM: API Document Object Model, the operating elements on the page. Such as making the box moves, color, rotation, etc. Fig.
BOM: browser object model, operating some functions of the browser API. For example, let the browser automatically scroll.
2.2 Event
JS is event-driven core of a language.
2.2.1 three elements of things
Three elements of the event: event source, event, event-driven programming.
For example, press my hand to switch the lights. This matter where the event source is: hand. Event is: press the switch. Event-driven program are: lights on and off.
As another example, a pop-up ad on the page, I click on the upper right corner X, advertising shut down. This thing, the event source is: X. Events: onclick. Event-driven program are: advertising closed.
So we can conclude: Who caused by subsequent events, who is the event source.
Summarized as follows:
Event Source: html tags triggered subsequent events.
Event: js've defined (see below).
Event-driven programming: operation of styles and html. That is DOM.
Writing code following steps:
(1) obtaining Event Source: document.getElementById ( "box"); // similar ios language UIButton * adBtn = [UIButton buttonWithType: UIButtonTypeCustom];
(2) binding events: Event Source box event onclick = function () {} driver event;.
(3) write event-driven programming: operating on the DOM
Code Example:
<body> <div ID = "box1"> </ div> <Script type = "text / JavaScript"> // . 1, obtaining an event source var div = document.getElementById ( "box1" ); // 2, bound event div.onclick = function () { // . 3, the writing event driven alert ( "I pop content" ); } </ Script> </ body>
Common events are as follows:
For the following three elements of this event, we were introduced.
2.2.2 way to obtain event source (DOM nodes to obtain)
Get events common source as follows:
var DIV1 = document.getElementById ( "box1"); // way: by acquiring a single tag ID var of arr1 = document.getElementsByTagName ( "DIV1"); // Second way: obtained by tag array tag name, so there are S var = document.getElementsByClassName arr2 is ( "Hehe"); // three ways: an array of labels obtained by the class name, so there s
2.2.3 binding events the way
Mode 1: Direct binding anonymous function
<div the above mentioned id = "box1"> </ div> <Script of the type = "text / JavaScript"> var div1 = document.getElementById ( "box1" ); // Bind event is the first way div1.onclick = function ( ) { Alert ( "I pop content" ); } </ Script>
Embodiment 2: the first single-defined function, then bound
<div the above mentioned id = "box1"> </ div> <Script of the type = "text / JavaScript"> var div1 = document.getElementById ( "box1" ); // Bind second way events div1.onclick = fn; // note that this is fn, not fn (). Fn () refers to the return value. // the individual function defined function Fn () { Alert ( "I pop content" ); } </ Script>
Note that the comment above code. When bound to write fn, not write fn (). Representative entire function fn, and fn () represents the return value.
Mode 3: inline binding
<! - inline binding -> <div the above mentioned id = "box1" onclick = "the Fn ()"> </ div> <Script of the type = "text / JavaScript"> function the Fn () { Alert ( "I'm a pop content " ); } </ Script>
Note that the first line of code, when binding, was written "fn()", not written "fn". Because this code is not binding written js code, but became recognized string.
2.2.4 Event-driven program
We are alert to take the example above, not only that, we can also operate the style tags and attributes.
For example as follows:
<style> #box { width: 100px; height: 100px; background - Color: Pink; Cursor: pointer; } </ style> </ head> <body> <div ID = "Box"> </ div> <Script = of the type "text / JavaScript"> var oDiv = document.getElementById ( "Box" ); // clicks the mouse, the original pink div bigger, the background turns red oDiv.onclick = function () { oDiv.style. width = "200px"; // attribute values quoted write oDiv.style.height = "200px" ; oDiv.style.backgroundColor = "red"; // property name is backgroundColor, not the backgroundColor } </ Script>
Above the code Note:
When writing property values Lane js, use quotation marks
Write attribute name js Lane is
backgroundColornot inside the CSSbackground-Color. Remember all the text like css property - *, line - *, backgroun- * , etc. are written in js hump
2.2.5 onload event
When the page loads (text and pictures) is completed, the trigger onload event.
For example:
<Script type = "text / JavaScript"> the window.onload = function () { the console.log ( "Mr Ma"); // isochronous page is loaded, print string } </ Script>
One thing we need to know: js and html loading is synchronized loaded. Therefore, if the elements before defining elements, easy error. This time, onload event can come in handy, we can use the elements of the code in the onload inside, we can guarantee this code is executed last.
Advice: across the page has finished loading all the elements in the implementation of js content. So, window.onload can be prevented using the tag before you define the label.