JavaScript在HTML中的位置问题，form表单js获取判断输入框是否为null问题

最新推荐文章于 2023-07-05 16:59:14 发布

学渣的星辰大海

最新推荐文章于 2023-07-05 16:59:14 发布

阅读量422

点赞数

分类专栏： Javascript 前端 jquery 文章标签： javascript jquery html5 html

本文链接：https://blog.csdn.net/weixin_45699186/article/details/109104720

版权

Javascript 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

JavaScript在HTML中的位置问题，form表单js获取判断输入框是否为null问题

帮同学解决一下标题上的问题，先明白js能放在HTML的那个位置，分别是head和body中。放到这两个地方的到底有什么区别:
1## 1，JavaScript代码不放在head中时：
同学写的一个HTML页面：

<!DOCTYPE html>
<html>
  <head>
  	<title>666</title>
  	<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/register.css"/>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </head>
  <body>
  	<nav class="navbar navbar-default" role="navigation">
  <p class="container-fluid"id="top">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">登陆页面</a>
    </div>
    </nav>
    
<div id="change1">
<div class="register-form" id="dl">
  <form >
  <div class="form-group">
    <label for="exampleInputEmail1">账号</label>
    <input class="form-control" id="loginNum" placeholder="请输入您的账号">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="loginPassword" placeholder="请输入您的密码">
  </div>
  <div class="">
    <label>
     <input type="checkbox"> 记住密码
    </label>
    <label>
    <a onclick="change()">还没有账号？</a>
    </label>
  </div>

   <input type="submit" class="btn btn-default" value="登录" id="submit" />
</form>
</div>
 </div> 	
 
 
<div id="change2" style="display: none;">
<div class="register-form">
  <form >
  	<input type="file" name="file"  id="user"/>
  <div class="form-group">
    <label for="exampleInputEmail1">账号</label>
    <input class="form-control" id="registerNum" placeholder="请输入您的账号">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="registerPassword1" placeholder="请输入您的密码">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="registerPassword2" placeholder="请确认您的密码">
  </div>
  <div id="">
  <label>
  <a href="#"  onclick="change()">已有有账号？</a>
  </label>
  </div>
  <button type="submit" class="btn btn-default" id="submit2" >注册</button>
</form>
</div>
 </div> 

 </body>
 <script src="js/register.js"></script>
</html>

css

*{
	margin: 0px;
	padding: 0px;

}
.register-form{
	width: 455px;
	background-color: rgb( 	0,250,154);
	border-radius: 15px;
	margin: 10% auto;
	padding: 50px 50px;
}

再导入js


function change(){
//$("#change1").toggleClass("hidden");
//
/csschange2").toggleClass("hidden");
$("#change1").slideToggle(3000);
$("#change2").slideToggle(3000);
}
//submit提交后查看name和password的值是否为null
//是否进行下一步
alert("点击成功");
$("#submit").click(function (){
	
    var $num=$("#loginNum").val();
    if ($num==""){
         alert("输入框不能为null");

         event.preventDefault();
     }else {
         return true;
     }
     
})

#我在这里运行一下，可以发现，我的页面和我的js同时加载出来了。既显示了我的HTML页面的画面，又加载了点击成功4个字，而且此时也可判断输入框是否为null；放在head里面却不一样

当JavaScript放在head里面时

引用上方的代码，将js代码放在head中时，运行可以发现js代码正常运行了
显示了“点击成功”四个字，但是页面此时却没有加载完毕出来
同时，当我点击登录判断我的输入框是否为null时，不能使用我写的JavaScript代码，此时不能判断是否为null；
说一下HTML的编译顺序是自上而下的，所以一般来说，
页面加载所的js放在body上面；其他js都应该放到body下面。

学渣的星辰大海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript在HTML中的位置问题，form表单js获取判断输入框是否为null问题

JavaScript在HTML中的位置问题，form表单js获取判断输入框是否为null问题帮同学解决一下标题上的问题，先明白js能放在HTML的那个位置，分别是head和body中。放到这两个地方的到底有什么区别:1## 1，JavaScript代码不放在head中时：同学写的一个HTML页面：<!DOCTYPE html><html> <head> <title>666</title> <meta charset
复制链接

扫一扫

专栏目录