1. Writing js today encounters a strange problem. Written js is executed in body, but it has no effect in head. Why does this happen?
Look at the failure code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style type="text/css"> .login{width:40px;height:25px;line-height:25px;background-color:#4E74A5;margin-top:30px;text-align:center;color:#FFF;} </style> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(".login").click(function(){ alert(1); }); </script> </head> <body> <input type="text" class="pass" /> <div id="enter" class="login"> Sign in</div> </body> </html>
2. Solution: Put the js code in the body, or wrap it in the window.onload = function(){} code, and then execute it after loading the document. It is not recommended to put it in the head later.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style type="text/css"> .login{width:40px;height:25px;line-height:25px;background-color:#4E74A5;margin-top:30px;text-align:center;color:#FFF;} </style> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> window.onload = function(){ $(".login").click(function(){ alert(1); }); } </script> </head> <body> <input type="text" class="pass" /> <div id="enter" class="login"> Sign in</div> </body> </html>
3. reasons:
Because the document has not been loaded, read js, JS does not work in the head, using window.onload = function() {// wrap your code here}
JS can be divided into external and internal, external JS is generally placed in the head. The internal JS is also called the JS script of this page.
Internal js are generally placed in the body for many purposes:
1. Do not block page loading (in fact, js will be cached).
2. The dom can be operated directly in js, when the dom is ready, that is to say, to ensure the existence of the dom at JS runtime.
3. The recommended way is to put it at the bottom of the page and listen for window.onload or readystate to trigger js.
4. extension:
JS in head blocks the transfer of pages and rendering of pages. JavaScript in the head needs to be executed before it starts rendering the body, so try not to put JS files in the head. You can choose to introduce and execute JavaScript when the document is completed, or after a specific block. JavaScript in the head needs to be executed before it starts rendering the body, so try not to put JS files in the head. You can choose to introduce and execute JavaScript when the document is completed, or after a specific block.
So js in the head usually has to be executed before rendering the body page. In order to avoid the js script introduced by head blocking the parsing work of the main parsing engine on the dom, the general principle of rendering the DOM is that the style is in front, the DOM document and the script are at the end. Follow the sequence of parsing, rendering and scripting.