SSM开发之jquery整合

SSM开发之jquery整合

一、jquery下载和使用

1、进入jquery官网(https://jquery.com),点击下载jquery,如下图:

2、将下载好的文件拷贝到项目中,如下图:
SSM开发之jquery整合_第1张图片
3、在jsp文件中引用

<script type="text/javascript" src="<%=basePath%>/jquery/jquery-3.4.1.js"></script>

二、测试

1、jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="../CONFIG-INF/common.jsp"></jsp:include>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
</head>
<body>

	<div class="container" style="width:400px; position: relative; top: 15%;">

      <div class="form-signin">
        <h2 class="form-signin-heading" style="text-align: center;">试卷分析系统</h2>
        <input type="text" id="username" class="form-control margincss" placeholder="用户名" required autofocus>
        <input type="password" id="password" class="form-control margincss" placeholder="密码" required>
        <div>
        	<input type="text" id="checkcode" class="form-control margincss" placeholder="验证码" style="display: inline; width: 50%;" required>
        	<div style="float: right;" class="margincss">
        		<img id="checkImg" alt="请稍等" style="width: 80px; height: 35px;">
        	</div>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> 记住我
          </label>
          <div style="float: right;">
          	<a>忘记密码</a>
          </div>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="button">登录</button>
      </div>

    </div>
    
    <script type="text/javascript"
		src="${pageContext.request.contextPath}/views/js/Login.js"></script>
</body>
</html>

2、js代码

$(document).ready(function(){  
    $('#checkImg').attr('src', $("#contextPath").val() + "/CONFIG-INF/image/image8.png");
});

3、效果图
设置图片
SSM开发之jquery整合_第2张图片

你可能感兴趣的:(SSM框架整合)