Pro JavaScript Techniques study notes_javascript skills

Global variables are part of the properties of the Window object. Example:

Copy code The code is as follows: var test = 'test'; alert(window.test); The approximate sequence of browser rendering and operating HTML: HTML parsing completed External scripts and stylesheets are loaded Scripts are parsed and executed within the document HTML DOM is fully constructed Images and external content are loaded Web page is loaded All major browsers They all implement the innerHTML attribute, but because there is no unified standard, there are more or less weird bugs.

Mozilla-based browsers will not return the element in the innerHTML declaration; The element characters returned by IE are all uppercase; innerHTML can only be used in HTML Attributes in elements of DOM documents will only return null values if used in XML DOM documents. Check whether the element has a specified attribute:

Copy the code The code is as follows: function hasAttribute(elem, name) { return elem.getAttribute(name) != null; }; JavaScript events are executed in two phases: capturing and bubble.

GET requests should not have destructive side effects (such as deleting a message).

Consider providing non-mouse-bound optional events for any occasion where click, mouseover, and mouseout events occur. Copy code The code is as follows: onmouseout –> onblur onmousedown –> onkeydown onmouseup –> onkeyup onclick –> onkeypress onmouseover –> onfocus eg.

Copy code The code is as follows: var ax = document.getElementsByTagName('a'); for (var i = 0; i ax[i].onmouseover = ax[i].onfocus = function(){ this.style.backgroundColor = 'blue'; }; ax[i].onmouseout = ax[i].onblur = function(){ this.style.backgroundColor = 'white'; }; }; Static positioning: This is the default way to position elements, it simply follows the normal flow of the document. When the element is statically positioned, the top and left attributes have no effect.

position:static;top:0px;left:0px; Relative positioning: This form of positioning is very similar to static positioning in that the element continues to follow the normal flow of the document unless otherwise specified. . However, setting the top or left properties will cause the element to be offset relative to its original (static) position.

position:relative;top:-50px;left:50px; Absolute positioning: An absolutely positioned element completely breaks out of the ordinary flow of the page layout, and it will be positioned relative to its first non-static positioning Displayed by ancestral elements. If there is no such ancestor element, it is relative to the entire document.

position:absolute;top:20px;left:0px; Fixed positioning: Fixed positioning positions the element relative to the browser window. Setting the top and left of an element to 0 will cause it to be displayed in the upper left corner of the browser. It will completely ignore the dragging of the browser scroll bar and will always appear in the user's field of vision.

position:fixed;top:20px;left:0px; Development reserved fallback (degrading gracefully): Adding any form of dynamic interaction to the page has the potential to alienate some users. It should always be noted that when JavaScript or CSS is disabled, the web application should have basic usability.