My problem is that I can't use jquery in my js files, even though it's already embedded in html and even works with bootstrap. I tried including JQuery before and after the JS but it didn't work.
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>
take this off
and replace it with this:
In addition to Change the Jquery also move your js files that Jquery needs right after the jquery include, so you will have the existing $ value otherwise you will still have problems.
you can use stable version 3 but be careful with some additional browsers and libraries that you want to use may not work for you, in that case I recommend using version 2