前言：学习JavaWeb和前端基础学的比较匆忙，基础不是很牢固。到现在脑海中还只剩下一些零散的知识点以及项目，因此此篇博客浅浅的记录一下巩固所学，根据自己理解，如有错误欢迎指正。

学习路程：

JavaWeb学习之前学习了一些预备知识：HTML超文本标记语言，CSS样式，JavaScript脚本语言，jQuery框架，学完之后做了一个前端页面项目（模仿vivo商城），但只有一些简单的特效如轮播图，导航栏，地址填写，使用cookie进行页面数据的传递，购物车的功能，放大镜。个人感觉项目有好多地方，需要完善，例如，放大镜实现存在Bug,页面特效不完整等等。并且HTML和css样式，学起来很简单，可真正手写代码时，很痛苦，代码重复，量还多。

当明白前端是如何实现的时候，开始接触后端也就正式的开始学习JavaWeb,首先学习的是服务器tomcat,web静态资源，动态资源。web项目的创建配置web项目的配置文件。Web的三大组件Serlet,过滤器，监听器.会话技术，cookie,还有写在HTML代码中的el表达式，jstl以及之前很火的jsp(java servlet pages)。

重点：

jQuery：

jQuery一款主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作包含了

HTML 事件函数

CSS操作

AJAX

HTML 元素操作等等。

使用jQuery我们可以少写很多代码，多做事情。就像我们之前学习JavaScriotp获取DOM文档对象模型时的三种方式：
（1）通过 ID 属性：document.getElementById()
（2）通过 class 属性：getElementsByClassName()
（3）通过标签名：document.getElementsByTagName()

使用jQuery获取文档对象时，是需要$(#id)，$（.class）$(标签名）这样减少了很多代码

上面的DOM对象是由JavaScript创建的js对象，而要使用jQuery中的方法必须要把DOM对象转换为JQuery对象，只需要$(dom对象)。

代码：

<body>
		<div align="center">
			<input type="button"  id="btn" value="我要成为jQuery对象" onclick="btnClick()" />
		</div>
</body>

转换：

<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
			function btnClick(){
				//使用js方法获取DOM对象
				var domBtn = document.getElementById("btn");
				alert("1="+domBtn.value)
				//使用jQuery函数$()把DOM对象转换jQuery对象
				var $btn = $(domBtn);
				//调用jQuery方法val()
				alert("2="+$btn.val());
			}
</script>

获取jQuery对象之后，就可以对象调用他的方法。而它的方法这里就不一一介绍了，可以查jQuery的官方文档。

使用jQuery实现购物车：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/co">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
    <!-- 先引入jquery  -->
    <script src="js/jquery.min.js"></script>
    <!-- 在引入我们自己的js文件 -->
    <script src="js/car.js"></script>
</head>

<body>


    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <b>我的购物车</b>
            </div>
        </div>
    </div>

    </div>
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全选
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">单价</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">小计</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" checked class="j-checkbox">
                        </div>
<!-- 第一个 -->
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                        </div>
                        <div class="p-price">￥12.60</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12.60</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <!-- 第二个 -->
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p2.jpg" alt="">
                            </div>
                            <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
                        </div>
                        <div class="p-price">￥24.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                        <!-- 第三个 -->
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p3.jpg" alt="">
                            </div>
                            <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
                        </div>
                        <div class="p-price">￥29.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>

                </div>

                <!-- 结算模块 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全选
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
                        <a href="javascript:;" class="clear-all">清理购物车</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已经选<em>1</em>件商品</div>
                        <div class="price-sum">总价： <em>￥12.60</em></div>
                        <div class="btn-area">去结算</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

<script src="js/jquery.min.js">
</script>
    <script src="js/checkAll.js">
    </script>


</body>

</html>

js代码：

// 全选按钮
$(".checkall").change(function(){
    $("input").prop("checked",$(this).prop("checked"));
});
// 比较长度，判断是否选中
$(".j-checkbox").change(function(){
    if($(".p-checkbox input:checked").length==$(".p-checkbox input").length){
        $(".checkall").prop("checked",true);
    }else{
        $(".checkall").prop("checked",false);
    
    }
    if($(this).prop("checked")){
        $(this).parent().parent(".cart-item").addClass("check-cart-item");
    }else{
        $(this).parent().parent(".cart-item").removeClass("check-cart-item");
    }
    // console.log($(".p-checkbox input:checked").length);
    // console.log($(".p-checkbox input").length);
});

// 计算商品小计
$(".increment").click(function(){
    // console.log(12131312);
    // 找到兄弟文本框
    let  count=$(this).siblings(".itxt").val();
    count++;
    // 把值赋值给文本框
    $(this).siblings(".itxt").val(count);
    //得到同一模块中的数量和单价相乘，得到该商品的小计
    // 先找到他的父类，之后找到他的父类的兄弟
    let p=$(this).parents(".p-num").siblings(".p-price").html();
    // 相乘
    p=p.substr(1);
    // 保留两位小数
    let price=(count*p).toFixed(2);
    // 传入小计模块的值
    $(this).parents(".p-num").siblings(".p-sum").html("￥"+price);
getSum();
})
// 减号
$(".decrement").click(function(){
    let count=$(this).siblings(".itxt").val();
    if(count==1){
        return false;
    }
    count--;
    $(this).siblings(".itxt").val(count);
     //得到同一模块中的数量和单价相乘，得到该商品的小计
    // 先找到他的父类，之后找到他的父类的兄弟
    let p=$(this).parents(".p-num").siblings(".p-price").html();
    // 相乘
    p=p.substr(1);
    // 保留两位小数
    let price=(count*p).toFixed(2);
    // 传入小计模块的值
    $(this).parents(".p-num").siblings(".p-sum").html("￥"+price);
    getSum();

})

    // 用户操作文本框中的数据，计算小计的数量
$(".itxt").change(function(){
    // 先得到数据
    let count=$(this).val();
    // 价格
    let p=$(this).parents(".p-num").siblings(".p-price").html();
    //单价和数量相乘，得到小计
    let price=(p*count).toFixed(2);
    // 把小计赋值给price
    $(this).parents(".p-num").siblings(".p-sum").html("￥"+price);
    getSum();

})

// 计算总额和总数量
function getSum(){
    let money=0;//总额
    let count=0;//总数

    $(".j-checkbox:checked").parents(".p-checkbox").siblings(".p-num").children(".quantity-form").children(".itxt").each(function (i, em) {
        count += parseInt($(em).val());
    });

    $(".amount-sum em").text(count);
    $(".j-checkbox:checked").parents(".p-checkbox").siblings(".p-sum").each(function (i, em) {
        money += parseFloat($(em).text().substr(1));
    });
    $(".price-sum em").text("¥" + money.toFixed(2));

}

// 删除商品
//删除单个商品
$(".p-action").click(function(){
    $(this).parents(".cart-item").remove();
    getSum();
})
// 删除所有的商品
$(".clear-all").click(function(){
    $(".cart-item").remove();
    getSum();
})
//删除选中的商品
$(".remove-batch").click(function(){
    $(".j-checkbox:checked").parents(".cart-item").remove();
    getSum();
})

servlet：

见：servlet详解

jsp:

JSP（Java Server Pages）是JavaWeb服务器端的动态资源。它与html页面的作用是相同的，显示数据和获取数据。由Java代码+HTML+JSP标签组成。

JSP脚本就是Java代码片段，它分为三种：

<%...%>：Java语句；

<%=…%>：Java表达式；

<%!...%>：Java定义类成员；

注意点：

有些对象是创建的，JSP有九大内置对象：

out（JspWriter）：等同与response.getWriter()，用来向客户端发送文本数据；
config（ServletConfig）：对应“真身”中的ServletConfig；
page（当前JSP的真身类型）：当前JSP页面的“this”，即当前对象；
pageContext（PageContext）：页面上下文对象，它是最后一个没讲的域对象；
exception（Throwable）：只有在错误页面中可以使用这个对象；
request（HttpServletRequest）：即HttpServletRequest类的对象；
response（HttpServletResponse）：即HttpServletResponse类的对象；
application（ServletContext）：即ServletContext类的对象；
session（HttpSession）：即HttpSession类的对象，不是每个JSP页面中都可以使用，如果在某个JSP页面中设置<%@page session=”false”%>，说明这个页面不能使用session。

在这9个对象中有很多是极少会被使用的，例如：config、page、exception基本不会使用。

request&respose

:Web端无非是发送响应和接收请求，所以响应和请求就很重要了

详情见：见：servlet详解

总结：

总的来讲，JavaWeb学了很多的东西，可知识点理解不够深入，自己同时在很多地方没有拓展，只是知道基本代码怎么写，基本的流程是一个怎样的。希望之后自己改正这个还没有把思路理清楚，条件搞明白，就写代码的这个坏习惯。

JavaWeb总结：

前言：学习JavaWeb和前端基础学的比较匆忙，基础不是很牢固。到现在脑海中还只剩下一些零散的知识点以及项目，因此此篇博客浅浅的记录一下巩固所学，根据自己理解，如有错误欢迎指正。

学习路程：

重点：

jsp:

request&respose

总结：

猜你喜欢