Day06

内容回顾：

@Resource 是JDK 提供的 @Autowired 是Spring 提供的 Springioc: 控制反转，就将new对象的权利交给spring容器去管理，随时用对象，直接从容器中获取对象即可 DI 依赖注入 set 构造方法注入 使用注解注入@Value @Autowired ==@Resource Spring+Mybatis 步骤：

  1. Pom依赖
  2. 创建表对应的实体类
  3. 创建表对应的接口 crud
  4. 创建service
  5. 创建mybatis_conf.xml 专门配置mybatis的全局配置
  6. 创建接口对应的mapper文件
  7. 创建spring.xml
    1. 扫描包注解
    2. 配置数据源
    3. 配置sqlSessionFactoryBean 配置数据源 配置mybatis_conf.xml mapper.xml
    4. 配置dao层包扫描
    5. 单元测试

读取spring的配置文件，调用service的方法

Js的简单使用

Js的全名javascript ，跟java没有关系。是脚本语言，不需要编译的语言，即写即用。 Java属于编译语言 常见的脚本语言：html ,css ,python js Js数据类型：String、Boolean、Number、Null undefined 在js中定义变量 统一使用var 运算符和+ - * / % 逻辑运算符 && || ! 函数语法： function 函数名(参数列表){ 方法体; Return 返回值; }

案例一 图片翻页

  1. 2. 在ok.jsp中书写js代码
  2. <body>
  3.     <img id="bg" src="img/1.png" width="400px" height="200px">
  4.     <button>《《《</button>
  5.     <button onclick="next()">》》》》》</button>
  7. <script>
  8.     var num=1;
  9.     function  next() {
  10.         document.getElementById("bg").src="img/"+num+".png";
  11.         num++;
  12.         if (num>3){
  13.             num=1;
  14.         }
  15.     }
  17. </script>
  18. </body>

案例二 计算器

创建hello.jsp

  2. <body>
  3.         <div>
  4.            数字1: <input id="num1" value="100">
  5.         </div>
  6.         <div>
  7.             数字2: <input id="num2" value="200">
  8.         </div>
  9.         <div>
  10.             <button onclick="add()">+</button>
  11.             <button>-</button>
  12.             <button>*</button>
  13.             <button>/</button>
  14.         </div>
  15.         <div id="res">
  16.             结果：
  17.         </div>
  19. <script>
  20.     function add() {
  21.         var n1=document.getElementById("num1").value;
  22.         var n2=document.getElementById("num2").value;
  23.         var result=Number(n1)+Number(n2);
  24.         document.getElementById("res").innerText=result
  25.     }
  26. </script>
  27. </body>

Jquery

其实jquery就是封装了一堆函数，直接使用js函数库

  1. <%--
  2.  Created by IntelliJ IDEA.
  3.  User: DELL
  4.  Date: 2020/10/11
  5.  Time: 16:27
  6.  To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <html>
  10. <head>
  11.    <title>jquery使用</title>
  12.    <%--引入jquery函数库--%>
  13.    <script src="js/jquery.min.js"></script>
  15.    <script>
  16.        //html页面的加载顺序，从上到下依次加载
  18.        $(function () {//等待网页加载完成之后再执行
  19.            //取出标签中html的内容
  20.          var str=  $("#d1").html();
  21.          console.log(str);
  22.          //重新设置标签中的html
  23.            $("#d1").html("<a href='http://baidu.com'>百度</a>")
  25.            //alert($("div").length);  //找所有的div
  26.            // alert($(".df").length)  //找类名
  27.            $(".ds").css({"color":"red","font-size":"80px"});//css方法，改变样式
  29.            $("#d3").hide();//隐藏
  30.            $("#d4").show();//显示
  32.            alert($("#bg").prop("src"))//取出标签中的src属性
  33.            $("#bg").prop("src","http://contentcms-bj.cdn.bcebos.com/cmspic/2c044bcf5c58bafa0d24d5bb8637baa3.jpeg?x-bce-process=image/crop,x_0,y_0,w_899,h_489");//重新给src属性赋值
  36.            $("#checkAll").click(function () {
  37.                $(".checkOne").prop("checked",$(this).prop("checked"));
  38.            });
  39.        })
  42.    </script>
  43. </head>
  44. <body>
  45.    <div id="d1" class="dd">这是第一个div</div>
  46.    <div id="d2" class="dd ds df">这是第二个div</div>
  47.    <div id="d3" class="dd ds">这是第三个div</div>
  49.    <div id="d4" style="display:none" class="dd ds">这是第四个div</div>
  51.    <img id="bg" src="img/1.png">
  52.    <div>
  53.        <input id="checkAll" type="checkbox">全选/全不选   <br>
  55.        爱好:<input class="checkOne" type="checkbox"> 胸口碎大石
  56.            <input class="checkOne" type="checkbox"> 脚踩电灯泡
  57.            <input class="checkOne" type="checkbox"> 泡油锅
  58.    </div>
  60. </body>
  61. </html>

Day07

内容回顾

Js 基本的数据类型，语法，函数 Jquery 查找标签： $(“#id”).html() 取出标签中的html标签 $(“#id”).html(“”) 重新给标签中html赋值 $(“选择器”).prop(“属性名”) 取出标签中的属性值 $(“选择器”).prop(“属性名”,属性值) 重新给属性赋值 Ajax Json：javascript object notation js的对象表示方式,json是一种格式 {“key”:“value”,””:””……} 标准的json格式字符串： {“name”:”张三”,”age”:18,”address”:”西安”}

  1. <script>
  2.     var person={name:"张三",age:18,address:"西安"};
  4.     console.log(person.age);//取出对象中的属性
  5.     //将对象变成字符串
  7.    var str= JSON.stringify(person);
  8.    console.log(str)
  9.     var s="{\"name\":\"张三\",\"age\":18,\"address\":\"西安\"}";
  11.   var obj= JSON.parse(s);
  13.   console.log(obj.address)
  15. </script>