为什么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

您的问题与bootstrap无关,您在加载之前添加了jQuery依赖脚本.在jQuery和use之后添加你的脚本$(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>