Javascript shortcut tutorial notes

Chapter 4, HTML, CSS, javascript1, CSS specificity-defined priority! The important keyword forcibly applies the sample. 2. In prototype, 1000 objects in other languages must have 1000 attributes and methods. js introduces prototype attributes. Methods attached to the prototype attributes are shared by all objects. 3. When passing a value or referencing an object as a parameter, pass var Foo = function () {}; Foo. Prototype. value = 5; function bar (OBJ ){ OBJ. value = 6;} bar (FOO); alert (FOO. value); // when the value is 6, the function will be copied and passed in Var Foo = function (); Foo. prototype. value = 5; Foo. prototype. addvalue = function () {Foo. value = 6;} function bar (func ){ Func ();} bar (FOO. addvalue); alert (FOO. value); // if the value is 6, the passed parameter should be executed immediately, and the () bar (FOO () should be carried during the transfer; 4. JavaScript and Dom should check the HTML document node type: element Node = 1, text node = 3this keyword this indicates the currently referenced object image. onmouseover = function (){ This.src+'newimage.gif ';} 5. Event listener: element. addeventlistener (event, listener, false) event -- event type click, focus, blurlistener -- function false executed when the event is triggered -- whether to enable event capture 6. Event capturing and event bubbling event capturing from top to bottom, bottom-to-top bubbling IE does not support event capturing. attachevent ('onclick', func); parameter: name of the event with the on prefix, the function to be called is compatible with the event listener function of the browser: function addlistener (element, event, listener ){ If (element. addeventlistener) { Element. addeventlistener (event, listener, false ); } Else if (element. attachevent) { Element, attachevent ('on' + event, listener ); } 7. When checking the context to execute a function, this points to the object that owns the function. By default, the Function Property Window object function myfunc (){ Alert (this); // this points to the window object} EL. methodname = function (){ Alert (this); // this points to the El object } El. when methodname is passed as a function to another function myfunc, only the method El of the object is passed. the reference of methodname. In this case, this points to the owner window of myfunc. To make the function func execute in the context of another object El, that is, let this point inside func point to El and use call: function myfunc (func) { Func. call (EL); // This in func points to El} 8. Before IE6, the event object is not passed as a parameter, using the event object as a property of the window, the event object eventfunction openwin (event ){ Event = event | window. event;} the event delegates a bubble mechanism to enable the event to be received by elements at the upper layer of the event occurrence element. If you have many elements to bind, you can add an event processor for each element or use event delegation. Function evthandler (EVT ){ Event = event | window. event; VaR currentelement=event.tar GET | event. srcelement; VaR eventelement = this; While (currentelement & currentelement! = Eventelement) { If (currentelement. classname = 'theone ') { Alert ('get it '); Break; } } Var El = document. getelementbyid ('test'); El. onclick = evthandler; Chapter 6th, visual effects 1. Let the class parameter be either an element reference or an ID string: function AA (element ){ VaR El = element; If (typeof El = 'string ') El = Document. getelementbyid (element ); If (! El) return false;} when multiple parameters are input, you can change the parameter to the literal: function AA (options ){ VaR El = options. element; If (typeof El = 'string ') El = Document. getelementbyid (options. element ); If (! El) return false;} var Options = { Element: Document. getelementbyid ('elementid '), Property: 'left ', From: 0, To: 200} new AA (options); 2. Timing function: var intervalid = setinterval (AA, 1000); var timeoutid = setTimeout (AA, 1000); cancel the animation: clearinterval (intervalid); cleartimeout (timeoutid); 3. animation framework: function animation (options ){ VaR El = options. element; If (typeof El = 'string ') El = Document. getelementbyid (options. element ); If (! El) return false; VaR FPS = 30; Function animate () { } VaR intervalid = setinterval (animate, 1000/FPs);} 4. Improved animation framework-provides methods for starting, stopping, and resetting; provides public APIs for returning instantiated results as objects: function animation (options ){ VaR El = options. element; If (typeof El = 'string ') El = Document. getelementbyid (options. element ); If (! El) return false; VaR FPS = 30; VaR step = 0; // number of ongoing steps VaR numsteps = options. Duration/1000 * FPS; // The total number of steps VaR interval = (options. From-Options. To)/numsteps; // interval between steps VaR intervalid; // the return value of the scheduled function, used to control the stop. Function animate () { VaR newval = options. From-(Step * interval ); If (Step ++ <numsteps) { El. Style [Options. Property] = math. Cell (newval) + 'px '; } Else { El. Style [Options. Property] = options. To + 'px '; Publicmethods. Stop (); } } VaR publicmethods = { Start: function (){ Intervalid = setinterval (animate, 1000/FPs ); }, Stop: function (){ Clearinterval (intervalid ); }, Gotostart: function (){ Step = 0; El. Style [Options. Property] = options. From + 'px '; }, Gotoend: function (){ Step = numsteps; El. Style [Options. Property] = options. To + 'px '; } } Return publicmethods;} extends the API and calls back the function animate (){ VaR newval = option. From-(Step * interval ); If (option. onstart & step = 0) option. onstart (); If (option. onstep) options. onstep; //...} Options requires adding the property: var Options = { Element: Document. getelementbyid ('elementid '), Property: 'height ', From: 0, To: 200, Onstart: function () {console. Log ('started ')}, Onstep: function () {console. Log ('stepped ')}, Onend: function () {console. Log ('enabled ')}};