Pro JavaScript Techniques Learning notes _javascript Tips

Source: Internet
Author: User
Tags xml dom document
The global variable is part of the Window object property, for example:
Copy Code code as follows:

var test = ' Test ';
alert (window.test);

the approximate order in which browsers render and manipulate HTML:

HTML parsing complete
External scripts and style sheets loaded complete
The script parses and executes within the document
The HTML Dom is completely constructed.
Picture and external content loading
Web page completes loading
All the mainstream browsers implement the innerHTML attribute, but because there is no uniform standard, there are more or less weird bugs.

Mozilla based browsers do not return <style> elements in the innerHTML declaration;
The element characters returned by IE are all uppercase;
innerHTML is a property that can only be used in an element of an HTML DOM document, and returns only null values if used in an XML DOM document.
Checks whether an element is useful for a specified property:

Copy Code code as follows:

function Hasattribute (elem, name) {
return Elem.getattribute (name)!= null;
};

JavaScript events are performed in two phases: capture and bubbling.

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

Click, hover, and mouse to leave events in any situation, consider providing a non-mouse-bound optional event.
Copy Code code as follows:

Onmouseout–> onblur
Onmousedown–> onkeydown
Onmouseup–> onkeyup
Onclick–> onkeypress
Onmouseover–> onfocus

eg.

Copy Code code as follows:

var ax = document.getelementsbytagname (' a ');
for (var i = 0; i < ax.length; 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 method for element positioning, which simply follows the normal flow of the document. The top and left properties are not valid when the element is statically positioned.

position:static;top:0px;left:0px;
Relative positioning: This form of positioning is very similar to static positioning because elements continue to follow the normal flow of documents unless otherwise specified. However, setting the top or left property causes the element to be offset relative to its original (static) position.

position:relative;top:-50px;left:50px;
Absolute positioning: The absolutely positioned element completely jumps out of the normal flow of the page layout, and it is displayed relative to its first non-static-positioned ancestor element. 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 the element to 0 will make it appear in the upper left-hand corner of the browser, completely ignoring the drag of the browser scroll bar, which will always appear in the user's field of view.

position:fixed;top:20px;left:0px;
Development Reserve Retreat (degrading gracefully): Adding any form of dynamic interaction to a page has the potential to alienate some users. It should always be a matter of time that when JavaScript or CSS is disabled, Web applications should have the basic basics of usability.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.