日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

關于頁面加載即執行JQuery的三種方法小結_jquery

作者：流煙默 ? 更新時間： 2022-11-30 編程語言

頁面加載即執行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】后面兩種的區別

1.執行的時機不同?

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

2.編寫的個數?

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

3.簡化寫法?

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

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

jQuery頁面加載事件

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

<!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());//錯誤寫法，不能正常執行

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

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

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

效果

原文鏈接：https://janus.blog.csdn.net/article/details/53885605

欄目分類
最近更新