为什么jQuery不能使用Bootstrap 4 alpha 6？

-1

我正在尝试使用jQuery，它给了我各种错误。我尝试过洗牌不同的脚本标签，但没有成功。这里是一些代码：为什么jQuery不能使用Bootstrap 4 alpha 6？

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

有什么我失踪？

来源

2017-03-08 Nick Solonko

删除bootstrap。你会很快看到它是不相关的。 –

您的问题与bootstrap无关，您在加载之前添加了jQuery相关脚本。在jQuery之后添加脚本并使用$(document).ready()，已弃用。 https://api.jquery.com/load-event/

.intro{ 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t background: purple; 
 
\t display: none; 
 
} 
 
.welcomeSize{ 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t background: violet; 
 
\t 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"> 
 
\t 
 
</div> 
 
\t <div class="welcomeSize"> 
 
\t \t 
 
\t </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> 
 
\t  <script> 
 
if(jQuery){ 
 
console.log('yes'); 
 
} 
 
    $(document).ready(function(){ 
 
      $('.intro').fadeIn(500, function(){ 
 
       $(".welcomeSize").fadeIn(500); 
 
      }); 
 
     }); 
 
    </script> 
 
    </body> 
 
</html> 
 
</body> 
 
</html>

来源

2017-03-08 02:25:13 azs06

您以前导入的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

的第二件事情，你应该使用$(window).on('load', function() { ... });

，而不是

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

load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.

来源

2017-03-08 02:12:48

我不明白downvote，这个答案是正确的... – r3bel

-1

请注意，你已经使用了jQuery链接脚本之前命令。 source（src）属性指向Google CDN的脚本标记必须位于jQuery命令之前。

来源

2017-07-24 17:57:17

该帖已经接受了答案。直到除非你的答案增强了现有的答案，否则不需要添加一个重复。 –

为什么jQuery不能使用Bootstrap 4 alpha 6？

回答

相关问题