将 jquery 代码设置为正文页面加载

Set jquery code to body page onload

本文关键字：加载正文 jquery 代码设置更新时间：2023-09-26

嗨，伙计们，我有这个jquery代码，我在网上搜索了它。我是 jquery 的新手。代码需要单击按钮才能执行。我的问题是如何在页面加载时执行此 jQuery 的代码。

<button id="notification-trigger" class="progress-button">
                        <span class="content">Show Notification</span>
                        <span class="progress"></span>
                    </button>
<script>
        (function() {
            var bttn = document.getElementById( 'notification-trigger' );
            // make sure..
            bttn.disabled = false;
            bttn.addEventListener( 'click', function() {
                // simulate loading (for demo purposes only)
                classie.add( bttn, 'active' );
                setTimeout( function() {
                    classie.remove( bttn, 'active' );
                    // create the notification
                    var notification = new NotificationFx({
                        message : '<div class="ns-thumb"><img src="img/user1.jpg"/></div><div class="ns-content"><p>Welcome, Nixxx!</p></div>',
                        layout : 'other',
                        ttl : 6000,
                        effect : 'thumbslider',
                        type : 'notice', // notice, warning, error or success
                        onClose : function() {
                            bttn.disabled = false;
                        }
                    });
                    // show the notification
                    notification.show();
                }, 1200 );
                // disable the button (for demo purposes only)
                this.disabled = true;
            } );
        })();
</script>

我想要这样的东西：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
}
</script>
</body>
</html>

请帮忙谢谢！

(已编辑，我包括在脚本执行之前需要单击的按钮。我希望每次加载/刷新页面时执行此代码，而不是通过单击按钮。感谢您的帮助！

请使用以下代码。它的工作方式与Vanilla Javascript的onload((函数相同。

<script>
    // $(function(){}); Wrapper acts as the document.ready of vanilla javascript
    $(function(){
      //call myfunction() onload;
      myFunction();
      //functions to execute goes in here
      function myFunction() {
           $("#div1").fadeToggle();
           $("#div2").fadeToggle("slow");
           $("#div3").fadeToggle(3000);
           //call button action instead of click
           btnFunction();
      }
   var bttn = document.getElementById( 'notification-trigger' );
   bttn.disabled = false;
   function btnFunction() {
   classie.add( bttn, 'active' );
   setTimeout( function() {
        classie.remove( bttn, 'active' );
        var notification = new NotificationFx({
            message : '<div class="ns-thumb"><img src="img/user1.jpg"/></div><div class="ns-content">   <p>Welcome, Nikko Zabala!</p></div>',
            layout : 'other',
            ttl : 6000,
            effect : 'thumbslider',
            type : 'notice', // notice, warning, error or success
            onClose : function() {
                bttn.disabled = false;
           }
    });
       notification.show();
   }, 1200 );
   };
   });
</script>

使用：

<script>
    $(document).ready(function(){
      myFunction()
        // put your code here;
    });

  function myFunction() {
 // your code
      }
function btnFunction(){
// your code
}
</script>