為什么jQuery無法與Bootstrap 4 alpha 6一起使用？

Question

我正在嘗試使用jQuery，它給了我各種錯誤。 我嘗試改組不同的腳本標簽，但沒有成功。 這是一些代碼：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
 <style>
/*some css here*/
  </style>

        <!--a bunch of HTML here-->
      <script>
if(jQuery){
alert('yes');
}
    $(window).load(function(){
            $('.intro').fadeIn(500, function(){
                $(".welcomeSize").fadeIn(500);
            });
        });
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

我收到一個錯誤消息，說jQuery是未定義的。 如果將jquery CDN放在腳本之前，則會出現此錯誤：

Uncaught TypeError: a.indexOf is not a function
    at r.fn.init.r.fn.load (jquery.min.js:4)
    at newsite.html:129

我有什么想念的嗎？

Answer 1

您的問題與引導程序無關，您正在加載jQuery依賴腳本，然后再進行加載。 在jQuery之后添加腳本並使用$(document).ready() ，不建議使用.load() 。 https://api.jquery.com/load-event/

 .intro{ width: 200px; height: 200px; background: purple; display: none; } .welcomeSize{ width: 200px; height: 200px; background: violet; display: none; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JQuery+Bootstrap</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <div class="intro"> </div> <div class="welcomeSize"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script> if(jQuery){ console.log('yes'); } $(document).ready(function(){ $('.intro').fadeIn(500, function(){ $(".welcomeSize").fadeIn(500); }); }); </script> </body> </html> </body> </html>

Answer 2

您必須先導入jquery，然后才能使用jquery編寫任何代碼，所以您要做的是

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

// then your code goes here

Uncaught TypeError: a.indexOf is not a function的第二件事Uncaught TypeError: a.indexOf is not a function

您應該使用$(window).on('load', function() { ... });

代替

$(window).load(function() { ... });

從jQuery 1.8開始不推薦使用load，.unload和.error。 使用.on（）注冊偵聽器。

Answer 3

請注意，在鏈接腳本之前，您一直在使用jQuery命令。 source（src）屬性指向Google CDN的腳本標記必須在jQuery命令之前。

為什么jQuery無法與Bootstrap 4 alpha 6一起使用？

問題描述

3 個解決方案

解決方案1
5 已采納 2017-03-08 02:25:13

解決方案2
2 2017-03-08 02:12:48

解決方案3
-1 2017-07-24 17:57:17

為什么jQuery無法與Bootstrap 4 alpha 6一起使用？

問題描述

3 個解決方案

解決方案1 5 已采納 2017-03-08 02:25:13

解決方案2 2 2017-03-08 02:12:48

解決方案3 -1 2017-07-24 17:57:17

解決方案1
5 已采納 2017-03-08 02:25:13

解決方案2
2 2017-03-08 02:12:48

解決方案3
-1 2017-07-24 17:57:17