前几篇为后端的相关框架【spring,struts2,mybatis】及web三大组件【listener,filter,
servlet】的入门学习，接下来了解一下前端的知识。
1、下载jquery.js，例子中使用的是jquery-3.3.1.js
2、新建web工程，将上述的jquery.js添加到项目中
3、在web根目录下新建login.html网页文件，并引用jquery-3.3.1.js，项目中将方法写进单独文件，名为login.js，此处一并添加到html中
<!-- login.html+login.js -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="CSS/login.css">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div id="loginForm" class="login-content userlogin-chk0">
<h2>用户登录</h2>
<ul class="login-form">
<li class="login_input" id="userName_div">
<input id="userName" name="userName" class="name" type="text" maxlength="20"
autocomplete="off" placeholder="请输入用户名">
</li>
<li class="login_input" id="password_div">
<input id="password" name="password" class="pwd" type="password" maxlength="50"
autocomplete="off" placeholder="请输入密码">
</li>
<li class="login_botton">
<!-- IE8不支持:disabled，放弃使用input元素 --> <!-- 禁用状态 class="login-submit disabled" -->
<a id="J_login" class="login-submit" href="#" ">登录</a>
</li>
</ul>
<img id="img_mouse" src="image/eg_mouse.jpg">
</div>
</body>
</html>4、login.js中增加方法
$(document).ready(function(){
$("#J_login").click(function(){
window.alert("jquery test.....")
$("#img_mouse").hide();
});
});5、运行效果
输入对应url
点解登录按钮后弹出提示框
点击提示框确定按钮后，鼠标图像消失
6、代码框架
/DemoJS/WebContent
js [ login.js ]
login.html
扫一扫
3637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
