js가 헤드에 배치될 때 때때로 실패하는 이유를 깊이 이해합니다.
- 迷茫원래의
- 2017-03-26 17:25:231282검색
1. 오늘 js를 작성할 때 이상한 문제가 발생했습니다. 작성한 js를 실행하기 위해 배치했는데, 헤드에 배치하면 효과가 없습니다.
잘못된 코드를 보세요:
<!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" />
<p id="enter" class="login"> 登录</p>
</body></html>2. 해결 방법: js 코드를 본문에 넣거나 window.onload = function(){} 코드 패키지를 사용한 후 실행하세요. 문서가 로드되어 있으므로 앞으로는 헤드에 넣지 않는 것이 좋습니다.
<!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" />
<p id="enter" class="login"> 登录</p>
</body></html>3. 이유:
문서가 아직 로드되지 않았고 js를 읽었기 때문에 js가 작동하지 않습니다. 헤드에서 사용하려면 window.onload를 사용하십시오. = function(){/ /여기에 코드 넣기}
JS는 외부 JS와 내부 JS로 나눌 수 있습니다. 일반적으로 외부 JS는 헤드에 배치됩니다. 내부 js는 이 페이지의 JS 스크립트라고도 합니다.
내부 js는 일반적으로 본문에 배치됩니다.
1. (실제로 js는 캐시됩니다.)
2. js에서 dom을 직접 조작할 수 있습니다. 이때 dom이 준비되었다는 것은 js가 실행될 때 dom이 존재한다는 의미입니다.
3. 권장되는 방법은 페이지 하단에 배치하고 window.onload 또는 Readystate를 수신하여 js를 실행하는 것입니다.
4. 확장:
헤드의 js는 페이지 전송과 페이지 렌더링을 차단합니다. Head에 있는 JavaScript는 Body의 렌더링을 시작하기 전에 실행되어야 하므로 JS 파일을 Head에 넣지 않도록 하세요. 문서가 완료될 때 또는 특정 블록 이후에 JavaScript를 도입하고 실행하도록 선택할 수 있습니다. Head에 있는 JavaScript는 Body의 렌더링을 시작하기 전에 실행되어야 하므로 JS 파일을 Head에 넣지 않도록 하세요. 문서가 완료될 때 또는 특정 블록 이후에 JavaScript를 도입하고 실행하도록 선택할 수 있습니다.
따라서 일반적으로 본문 페이지가 렌더링되기 전에 헤드에 있는 js가 먼저 실행되어야 합니다. head가 도입한 js 스크립트가 Wanderer에서 메인 파싱 엔진의 DOM 파싱 작업을 막는 것을 방지하기 위해 DOM 렌더링의 일반적인 원칙은 스타일이 맨 앞에, DOM 문서가, 스크립트가 맨 뒤에 있는 것입니다. . 먼저 구문 분석한 다음 렌더링하고 스크립트를 실행하는 순서를 따릅니다.
위 내용은 js가 헤드에 배치될 때 때때로 실패하는 이유를 깊이 이해합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!