数据回显

    文本框输入的值对应的是一个value，所以通过el表达式获取域中数据后给到value

    2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    3. <%--导入jstl标签库--%>
    4. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    5. <%
    6. String path = request.getContextPath();
    7. %>
    8. <html>
    9. <head>
    10.     <title>编辑界面</title>
    11. </head>
    13. <%--引入jquery框架--%>
    14. <script src="<%=path%>/jquery/jquery-1.7.2.js"></script>
    15. <script>
    16.     //文本就绪函数
    17.     $(function (){
    19.         /**单选框的回显
    20.          */
    21.         var els = $([name = 'sex'])
    22.         //each()  遍历方法
    23.         els.each(function (){
    25.             //获取的是当前标签对象对应的value的值
    26.             //this 表示当前标签对象 原生js对象,val()是jquery方法，所以要将this封装成jquery对象
    27.             var value = $(this).val()
    28.             //获取域对象中的sex值
    29.             //加单引号使之成为一种数据类型，否则接收不到
    30.             var sex = '${student.sex}'
    32.             if(value == sex){
    33.                 $(this).checked(true)
    34.             }
    35.         })
    37.         /**多选框的回显
    38.         因为在后端中我们将hobby用逗号隔开，因此此时需要根据逗号将爱好分割开
    39.         */
    40.         /**
    41.          1、要取到域对象中的hobby字段，把每一个爱好的值分割
    42.          */
    44.         var hobby = '${student.hobby}'
    46.         //切割 split()根据传递的参数进行字符串的分割，分割成一个数组
    47.         var hobbies = hobby.split(",");
    48.         for(var i = 0;i < hobbies.length;i++){
    50.             $([name = 'hobby']).each(function (){
    52.                 //取出对应多选框标签的value的值
    53.                 var value = this.value;
    55.                 if(value==hobbies[i]){
    57.                     this.checked(true)
    58.                 }
    59.             })
    60.         }
    61.     })
    62. </script>
    63. <body>
    64. <h1 align="center"> 学生编辑页面</h1>
    65. <%--
    66. <input type="radio"> 单选框
    67. <input type="checkbox">  多选框
    68. <input type="date"> 日期选择
    69. name 用于分组
    70. 文本输入框的name属性将作为获取数据的key
    71. <input type="hidden" >隐藏域标签，客户端不可见，但真实存在
    72. --%>
    74. <form action="http://localhost:8080/managerWeb/stu?flag=update" method="post">
    76.     <input type="hidden" name="id" value="${student.id}">
    77.     <table align="center">
    78.         <tr>
    79.             <td>学生姓名:</td>
    80.             <td>
    81.                 <input type="text" name="sname" value="${student.sname}">
    82.             </td>
    83.         </tr>
    84.         <tr>
    85.             <td>学生年龄:</td>
    86.             <td>
    87.                 <input type="text" name="age" value="${student.age}">
    88.             </td>
    89.         </tr>
    90.         <tr>
    91.             <td>学生性别:</td>
    92.             <td>
    93.                 男:<input type="radio" name="sex" value="1">
    94.                 女:<input type="radio" name="sex" value="2">
    95.             </td>
    96.         </tr>
    97.         <tr>
    98.             <td>学生住址:</td>
    99.             <td>
    100.                 <input type="text" name="address" value="${student.address}">
    101.             </td>
    102.         </tr>
    103.         <tr>
    104.             <td>生日:</td>
    105.             <td>
    106.                 <input type="date" name="birthday" value="${student.birthday}">
    107.             </td>
    108.         </tr>
    109.         <tr>
    110.             <td>爱好:</td>
    111.             <td>
    112.                 下棋:<input type="checkbox" name="hobby" value="下棋">
    113.                 舞剑:<input type="checkbox" name="hobby" value="舞剑">
    114.                 论道:<input type="checkbox" name="hobby" value="论道">
    115.                 布阵:<input type="checkbox" name="hobby" value="布阵">
    116.                 弄枪:<input type="checkbox" name="hobby" value="弄枪">
    117.             </td>
    118.         </tr>
    120.         <tr align="center">
    121.             <td colspan="10"><input type="submit" value="编辑" ></td>
    122.         </tr>
    123.     </table>
    124. </form>
    125. </body>
    126. </html>

    JavaScript是运行在浏览器端的脚本语言，是一门编程语言，弱类型语言，即所有的数据类型都使用一个关键字var去接收

    jquery是一种前端的框架

    <%—引入jquery框架—%>

    1. //相对路径
    2. <script src="../jquery/jquery-1.7.2.js"></script>
    3. scr 用以引入js文件
    4. ../表示上级目录
    5. ./表示当前目录
    7. //绝对路径
    8. //在jsp开头写个绝对路径
    9. <%
    10. String path = request.getContextPath();
    11. %>
    12. //使用绝对路径
    13. <script src="<%=path%>/jquery/jquery-1.7.2.js"></script>

    html中可以直接写js的语法

    js的语法都写在

    1.  <script></script>

    标签中

    var 表示变量接收的类型，可以接收任意数据类型（et 与var功能相同）

    js中定义方法要使用function关键字，无返回值类型
    格式：function +方法名称
    所定义的方法可以在script标签内部中通过标签内的属性调用；也可以在<script>中；若是要在<script>标签之外某些标签的内部进行调用，就需要绑定事件，这种绑定是静态绑定。
    如下图

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3.   <head>
    4.     <title>JavaScript</title>
    7.     <script>
    9.       function getMethod(){
    11.       }
    12.       function getMethod1(){
    14.       }
    16.     </script>
    18.   <body>
    20.   <%--给当前按钮绑定事件--%>
    21.   <%--onclick 鼠标单击事件的属性--%>
    22.   <input type="button" value="ceshi" onclick="getMethod()">
    23.   </body>
    24. </html>

    通过js获得标签对应的文本值：

    用document的方法

    如document.getElementById() 这里是Element，因为id是唯一的

    document.getElementsByName()这里是Elements，因为name可以有多个。

    1. <input type="text" name="name" id="name">  //文本框
    2. var el1 = document.getElementById('name') //此时获取的是文本框的input属性
    3. var el1 = document.getElementById('name').value //此时获取的是标签对象的文本值，即从文本框输入提交的值。

    jquery底层对js的所有属性都进行了封装

    使用jquery：

    1. //原生js获取标签以及标签对应的文本值
    2. var el1 = document.getElementById(`name`).value;
    4. //通过jQuery框架获取
    5. //jQuery核心对象 $
    6. //#  是id属性选择符,#name  选择id为name的标签
    7. var el2 = $("#name").val();
    8. //var el2 = $("#name").val();等价于var el1 = document.getElementById('name').value;

    单选框中加入checked属性，checked为true表示默认选中。