關于頁面加載即執(zhí)行JQuery的三種方法小結

更新時間：2022年10月24日 15:17:23 作者：流煙默

這篇文章主要介紹了關于頁面加載即執(zhí)行JQuery的三種方法小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

頁面加載即執(zhí)行JQuery的方法

【1】$(function( ){ }）；

? $(function(){?
　　$("#name").click(function(){?
　　　　//adding your code here?
　　});?
});?

【2】$(document).ready(function( ){ })

? $(document).ready(function(){?
　　$("#name").click(function(){?
　　　　//adding your code here　　?
　　});?
});

第二種是第一種的完整形式。

【3】window.onload = function( ){ }

?window.onload = function(){?
　　$("#name").click(function(){?
　　　　//adding your code here?
　　});?
}?

【4】后面兩種的區(qū)別

1.執(zhí)行的時機不同

window.onload要等整個窗口（包括圖片）都加載完才觸發(fā) 執(zhí)行
$(document).ready()在 DOM 結構繪制完成后就可執(zhí)行

2.編寫的個數(shù)

window.onload 編寫多個時，只有最后的那起作用
$(document).ready()可以編寫多個，都生效

3.簡化寫法

window.onload 無
$(document).ready()可簡寫為()

Tip ：jQuery中真正與 window.onload完全等價的是$(window).load()方法

jQuery頁面加載事件

在jQuery對象與js對象之間的轉換的案例中，我們看到所有的js代碼都放到了body標簽之后，如果把js代碼放到head標簽中，js代碼就會報錯，這個問題我們已經在js中學過，就是需要讓頁面加載完成之后再執(zhí)行.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <!‐‐ 測試jQuery ‐‐>

</head>
<body>
<div id="myDiv1">通過不同方式獲得文本內容111</div>
<div id="myDiv2">通過不同方式獲得文本內容222</div>
</body>
<script type="text/javascript">
    //通過js方式打印div內部的內容
    var divEle = document.getElementById("myDiv1");//js的DOM對象
    alert(divEle.innerHTML);//js對象的innerHTML屬性

    //通過jQuery方式打印div內部的內容
    var $divEle = $("#myDiv2");//jQuery對象
    alert($divEle.html());//jQuery對象的html方法

    //使用js的DOM對象調用jQuery對象的方法
    //alert(divEle.html());//錯誤寫法，不能正常執(zhí)行

    //使用jQuery對象調用js的DOM對象的屬性
    //alert($divEle.innerHTML);//錯誤寫法，不能正常執(zhí)行

    //js轉換成jQuery對象后在調用jQuery對象的html方法
    alert($(divEle).html());//轉換后正常執(zhí)行

    //jQuery轉換成js的DOM對象后在調用js的innerHTML屬性
    alert($divEle[0].innerHTML);
    alert($divEle.get(0).innerHTML);
</script>
</html>

js中的頁面加載事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        onload=function(){
//通過js方式打印div內部的內容
            var divEle = document.getElementById("myDiv");
            alert(divEle.innerHTML);
        }
    </script>
</head>
<body>
<div id="myDiv">通過不同方式獲得文本內容</div>
</body>
</html>

jquery對頁面加載事件也進行了封裝,讓我們使用起來更加的簡單

jQuery中的頁面加載事件方式1:(理解)

$(document).ready(function(){
//編寫代碼
});

方式2:(掌握)

$(function(){
//編寫代碼
});

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <!‐‐ 測試jQuery ‐‐>
    <script type="text/javascript">
        //js
        onload=function(){
            alert("js頁面加載");
        }
        //jquery方式
        $(document).ready(function(){
            alert("jquery方式1");
        });
        $(function(){
            alert("jquery方式2");
        })
    </script>
</head>
<body>

</body>
</html>