Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

jQuery加载事件

加载事件

javascript的加载事件：

<body  onload = “函数()”>

window.onload = function(){}

 jquery加载事件实现

① $(document).ready(function处理);

② $().ready(function处理);

③ $(function处理);  对第一种加载的封装而已

<!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>




Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492793 spielt ab