Question

大家好我有这个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>

请帮助谢谢！

（编辑i包含在脚本执行之前需要单击的按钮。）我希望每次加载/刷新页面时都执行此代码，而不是单击按钮。谢谢你的帮助！

Answer 1

请使用以下代码。它的工作方式与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>

Answer 2

使用：

<script>
    $(document).ready(function(){

      myFunction()
        // put your code here;
    });



  function myFunction() {
 // your code
      }
function btnFunction(){
// your code
}

</script>

将jquery代码设置为body page onload

2 个答案: