我的问题是我不能在我的 js 文件中使用 jquery,即使它已经嵌入到 html 中,甚至可以与 bootstrap 一起使用。我尝试在 JS 之前和之后包含 JQuery,但它没有用。
class User {
contructor(name,pass){
this.name = name;
this.pass = pass;
}
dis(){
//$('.navbar').fadeOut();
}
}
var u = new User();
u.dis();
$('.navbar').fadeOut();
<!DOCTYPE html>
<html lang="es">
<head>
<base href="http://localhost/FreedomWallpapers/" target="_blank">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="views/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="views/app/css/hometemplate.css" rel="stylesheet">
</head>
<header>
<nav class="navbar navbar-toggleable-md navbar-light fixed-top bg-faded" >
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Freedom Wallpapers</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Inicio<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categorias</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Perfil</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0 mx-auto" type="button" data-toggle="modal" data-target="#loginFormModal">Login</button>
<!-- Modal -->
<div class="modal fade" id="loginFormModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Iniciar Sesion</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="logEmail" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="logPassword" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Recordarme
</label>
</div>
</div>
</div>
<button type="button" class="btn btn-outline-success float-right" id="loginButton">Ingresar</button>
<button type="button" class="btn btn-outline-warning float-right mr-2" id="registerButton">Registrarse</button>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</nav>
</header>
<script src="views/app/js/login.js" charset="utf-8"></script>
<body>
<section class="homeSection">
<div class="container">
<div class="welcomeText">
<h2>Freedom Wallpapers</h2>
<h5>El mejor sitio para descargar wallpapers.</h5>
</div>
</div>
</section>
<section class="randomSection bg-inverse">
<div class="container">
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></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="views/libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
脱掉这个
并将其替换为:
除了更改 Jquery 之外,还可以在 jquery 包含后立即移动 Jquery 需要的 js 文件,这样您将拥有现有的 $ 值,否则您仍然会遇到问题。
您可以使用稳定版 3,但要小心一些您想要使用的其他浏览器和库可能不适合您,在这种情况下,我建议使用版本 2