jQuery 로드 이벤트

Loading 이벤트

javascript 로딩 이벤트:

<body onload = "function()">

window.onload = function(){}

jquery 로딩 이벤트 구현

① $(document).ready(함수 처리);

② $().ready(함수 처리);

3 $(함수 처리); 그냥 로딩 패키지

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        //①  $(document).ready(加载事件处理函数);
        ////$(document)  创建一个jquery对象，内部有dom组成部分：document
        //$(document)[0]-------获得-------->document对象
        $(document).ready(function(){
            console.log(123);
        });

        //② $().ready(加载事件处理函数)
        //$()  创建一个jquery对象，内部没有dom组成部分
        $().ready(function(){
            console.log(456);
        });

        //③ $(function加载事件处理函数);
        $(function(){
            console.log(789);
        });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
    </body>
</html>

jquery 로딩 이벤트와 기존 로딩 이벤트의 차이점

설정 개수

동일한 요청에서 jquery는 여러 항목을 설정할 수 있으며, 전통적인 방법은 하나만 설정할 수 있습니다.

이벤트를 로드하는 전통적인 방법은 onload 이벤트 속성에 값을 할당하는 것입니다. 여러 번 할당하면 후자가 전자를 덮어씁니다.

jquery의 이벤트 로드 메서드는 각 로드 이벤트를 배열에 저장하고 배열의 요소가 됩니다. 실행 시 배열을 순회하여 각 요소를 실행하기 때문에 여러 개의 로드 이벤트를 설정할 수 있습니다.

실행 시점이 다릅니다

기존의 로딩 이벤트는 모든 콘텐츠(텍스트, 그림, 스타일)가 브라우저에 표시된 후 로딩 이벤트를 실행하는 것입니다.

Jquery 로딩 이벤트는 모든 콘텐츠(텍스트, 그림, 스타일)가 메모리의 해당 DOM 트리 구조에 그려져 있는 동안 실행됩니다. 해당 콘텐츠가 아직 브라우저에 표시되지 않았을 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        window.onload = function(){
            console.log('abc');
        }
        $(function(){
            console.log('def');
        });
        </script>

        <style type="text/css">
        </style>
    </head>
    <body>
        <h2>加载事件区别</h2>
    </body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> //① $(document).ready(加载事件处理函数); ////$(document) 创建一个jquery对象，内部有dom组成部分：document //$(document)[0]-------获得-------->document对象 $(document).ready(function(){ console.log(123); }); //② $().ready(加载事件处理函数) //$() 创建一个jquery对象，内部没有dom组成部分 $().ready(function(){ console.log(456); }); //③ $(function加载事件处理函数); $(function(){ console.log(789); }); </script> <style type="text/css"> </style> </head> <body> </body> </html>

제출하다 코드 재설정

자동운전