为什么jQuery无法与Bootstrap 4 alpha 6一起使用？
[英]Why is jQuery not working with Bootstrap 4 alpha 6?
问题描述
I am attempting to use jQuery and it is giving me various errors. 
我正在尝试使用jQuery，它给了我各种错误。 I tried shuffling different script tags around, but had no success. 我尝试改组不同的脚本标签，但没有成功。 Here is some code: 这是一些代码：
<!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>
I get an error saying that jQuery is undefined. 我收到一个错误消息，说jQuery是未定义的。 If I put the jquery CDN before my script, I get this error: 如果将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
Is there something I am missing? 我有什么想念的吗？
3 个解决方案
解决方案1
5 已采纳 2017-03-08 02:25:13
Your problem is not related with bootstrap, you are adding jQuery dependent script before it's loaded. 您的问题与引导程序无关，您正在加载jQuery依赖脚本，然后再进行加载。 Add your script after jQuery and use $(document).ready() , .load() is deprecated. 在jQuery之后添加脚本并使用$(document).ready() ，不建议使用.load() 。 https://api.jquery.com/load-event/ 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>
解决方案2
2 2017-03-08 02:12:48
you have to import jquery before write any code using jquery so what you have to do is 您必须先导入jquery，然后才能使用jquery编写任何代码，所以您要做的是
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
// then your code goes here
the second thing for Uncaught TypeError: a.indexOf is not a function Uncaught TypeError: a.indexOf is not a function的第二件事Uncaught TypeError: a.indexOf is not a function
you should use $(window).on('load', function() { ... }); 您应该使用$(window).on('load', function() { ... });
instead of 代替
$(window).load(function() { ... });
load, .unload, and .error, deprecated since jQuery 1.8, are no more.
解决方案3
-1 2017-07-24 17:57:17
Note that you've been using the jQuery commands before linking the script. 请注意，在链接脚本之前，您一直在使用jQuery命令。 The script tag which source(src) attribute is pointing to Google CDN must come before the jQuery command. source（src）属性指向Google CDN的脚本标记必须在jQuery命令之前。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.