快捷導(dǎo)航

關(guān)于頁(yè)面加載即執(zhí)行JQuery的三種方法小結(jié)

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

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

頁(yè)面加載即執(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í)行的時(shí)機(jī)不同

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

2.編寫(xiě)的個(gè)數(shù)

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

3.簡(jiǎn)化寫(xiě)法

window.onload 無(wú)
$(document).ready()可簡(jiǎn)寫(xiě)為()

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

jQuery頁(yè)面加載事件

在jQuery對(duì)象與js對(duì)象之間的轉(zhuǎn)換的案例中，我們看到所有的js代碼都放到了body標(biāo)簽之后，如果把js代碼放到head標(biāo)簽中，js代碼就會(huì)報(bào)錯(cuò)，這個(gè)問(wèn)題我們已經(jīng)在js中學(xué)過(guò)，就是需要讓頁(yè)面加載完成之后再執(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>
    <!‐‐ 測(cè)試jQuery ‐‐>

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

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

    //使用js的DOM對(duì)象調(diào)用jQuery對(duì)象的方法
    //alert(divEle.html());//錯(cuò)誤寫(xiě)法，不能正常執(zhí)行

    //使用jQuery對(duì)象調(diào)用js的DOM對(duì)象的屬性
    //alert($divEle.innerHTML);//錯(cuò)誤寫(xiě)法，不能正常執(zhí)行

    //js轉(zhuǎn)換成jQuery對(duì)象后在調(diào)用jQuery對(duì)象的html方法
    alert($(divEle).html());//轉(zhuǎn)換后正常執(zhí)行

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

js中的頁(yè)面加載事件

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

jquery對(duì)頁(yè)面加載事件也進(jìn)行了封裝,讓我們使用起來(lái)更加的簡(jiǎn)單

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

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

方式2:(掌握)

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

代碼

<!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>
    <!‐‐ 測(cè)試jQuery ‐‐>
    <script type="text/javascript">
        //js
        onload=function(){
            alert("js頁(yè)面加載");
        }
        //jquery方式
        $(document).ready(function(){
            alert("jquery方式1");
        });
        $(function(){
            alert("jquery方式2");
        })
    </script>
</head>
<body>

</body>
</html>