浅谈学java必备的前端知识点新手可看

最新推荐文章于 2021-03-21 16:05:34 发布

广目无双王

最新推荐文章于 2021-03-21 16:05:34 发布

阅读量353

点赞数

文章标签： js jquery javascript java

本文链接：https://blog.csdn.net/JJ_only_love_SS/article/details/107867065

版权

首先明白一些概念

HTML：用于搭建基础网页，展示页面的内容
CSS：用于美化页面，布局页面
JavaScript：控制页面的元素，让页面有一些动态的效果
====================
JSP:是servlet的封装，既可以写java代码,又可以定义html标签的页面
EL表达式：只能在jsp页面上使用，${表达式}
JSTL:jsp标准标签库，用于简化和替换jsp页面上的java代码
====================
JQuery:javaScript的框架，简化js开发的
Ajax:异步的javascript和xml，局部刷新页面
Json:传值的一种规范，类似于xml,比xml更小更快更易解析
通常ajax和json是一起使用的，用于页面传值，通常是基于jquery使用的

html和css还有javaScript的知识在https://blog.csdn.net/JJ_only_love_SS/article/details/107831392这里有
本文就不赘述了
首先说说jsp
**

JSP

**
jsp九大内置对象

pageContext PageContext 当前页面共享数据，还可以获取其他八个内置对象
* request HttpServletRequest 一次请求访问的多个资源(转发)
* session HttpSession 一次会话的多个请求间
* application ServletContext 所有用户间共享数据
* response HttpServletResponse 响应对象
* page Object 当前页面(Servlet)的对象 this
* out JspWriter 输出对象，数据输出到页面上
* config ServletConfig Servlet的配置对象
* exception Throwable 异常对象
四大作用域
ApplicationScope 对应application内置对象
SessionScope 对应session对象
PageScope 对应Page对象
RequestScope 对应的Request对象
jsp三大指令
Page：
1.指定页面编码.例:
<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%>
2.导入包,例:
<%@ page import=“java.util.,java.text.” %>.

include：静态包含(统一编译):<%@ include file=“included.jsp”%>
在java中是静态包含的意思,在配置标签中include有引入,和导入配置文件的意思，了解即可，基本用不到

taglib：
taglib 标签的(俗称C标签) prefix属性是可变的,随意更改
<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c” %>
也是了解即可

EL表达式
${表达式} 这就是EL表达式了，Java学习需要知道怎么用EL表达式取值就行

<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>el获取域中的数据</title>
</head>
<body>
    <%
        //在域中存储数据
        session.setAttribute("name","李四");
        request.setAttribute("name","张三");
        session.setAttribute("age","23");
        request.setAttribute("str","");
    %>
<h3>el获取值</h3>
${requestScope.name}
${sessionScope.age}
${sessionScope.haha}

${name}//会从小到大的域范围里找name属性 直到查到为止
${sessionScope.name}

 <%
        User user = new User();
        user.setName("张三");
        user.setAge(23);
        user.setBirthday(new Date());
        request.setAttribute("u",user);

        List list = new ArrayList();
        list.add("aaa");
        list.add("bbb");
        list.add(user);
        request.setAttribute("list",list);

        Map map = new HashMap();
        map.put("sname","李四");
        map.put("gender","男");
        map.put("user",user);
        request.setAttribute("map",map);
    %>
<h3>el获取对象中的值</h3>
${requestScope.u}<br>
<%--
    * 通过的是对象的属性来获取
        * setter或getter方法，去掉set或get，在将剩余部分，首字母变为小写。
        * setName --> Name --> name
--%>
    ${requestScope.u.name}<br>
    ${u.age}<br>
    ${u.birthday}<br>
    ${u.birthday.month}<br>

    ${u.birStr}<br>

    <h3>el获取List值</h3>
    ${list}<br>
    ${list[0]}<br>
    ${list[1]}<br>
    ${list[10]}<br>
    ${list[2].name}
    <h3>el获取Map值</h3>
    ${map.gender}<br>
    ${map["gender"]}<br>
    ${map.user.name}
</body>
</html>

JSTL:jsp标准标签库
用于简化和替换jsp页面上的java代码
使用前需要先导包
常用方法有三个，分别是： if 和Java中if的使用相同
choose：相当于java中的switch case
foreach；相当于for循环
举例如下：

<%@ page import="cn.itcast.domain.User" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>test</title>
</head>
<body>

    <%--
    c:if标签
        1. 属性：
            * test 必须属性，接受boolean表达式
                * 如果表达式为true，则显示if标签体内容，如果为false，则不显示标签体内容
                * 一般情况下，test属性值会结合el表达式一起使用
        2. 注意：c:if标签没有else情况，想要else情况，则可以在定义一个c:if标签
    --%>
        <c:if test="true">
        <h1>我是真...</h1>
    </c:if>
=================================================
    <%--
        完成数字编号对应星期几案例
            1.域中存储一数字
            2.使用choose标签取出数字         相当于switch声明
            3.使用when标签做数字判断         相当于case
            4.otherwise标签做其他情况的声明  相当于default
    --%>
    <%
        request.setAttribute("number",51);
    %>
    <c:choose>
        <c:when test="${number == 1}">星期一</c:when>
        <c:when test="${number == 2}">星期二</c:when>
        <c:when test="${number == 3}">星期三</c:when>
        <c:when test="${number == 4}">星期四</c:when>
        <c:when test="${number == 5}">星期五</c:when>
        <c:when test="${number == 6}">星期六</c:when>
        <c:when test="${number == 7}">星期天</c:when>
        <c:otherwise>数字输入有误</c:otherwise>
    </c:choose>
===========================================
//foreach遍历用户类 制成表格
<%

    List list = new ArrayList();
    list.add(new User("张三",23,new Date()));
    list.add(new User("李四",24,new Date()));
    list.add(new User("王五",25,new Date()));

    request.setAttribute("list",list);


%>

<table border="1" width="500" align="center">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>生日</th>
    </tr>
    <%--数据行--%>
    <c:forEach items="${list}" var="user" varStatus="s">
        <c:if test="${s.count % 2 != 0}">
            <tr bgcolor="red">
                <td>${s.count}</td>
                <td>${user.name}</td>
                <td>${user.age}</td>
                <td>${user.birStr}</td>
            </tr>
        </c:if>
        <c:if test="${s.count % 2 == 0}">
            <tr  bgcolor="green">
                <td>${s.count}</td>
                <td>${user.name}</td>
                <td>${user.age}</td>
                <td>${user.birStr}</td>
            </tr>
        </c:if>
    </c:forEach>

</table>
</body>
</html>

接下来是JQuery 这是一个javaScript框架，简化js开发的，是在html页面上写的
用jQuery的时候需要导入jquery文件，通常导入。。min.js（体积小）
JQuery主要是对一些js操作进行了封装主要会用到获取元素对象，以及事件绑定以及遍历jquery对象
js:a.innerHTML
jq:a.html()
js和jq的对象方法不通用，jq–>js:jq对象.get(索引)或jq对象[索引]
jquery基本选择器
1.标签选择器：$(“html标签名”) 注意和EL表达式区分 EL ： ${表达式} 2.id选择器：$ ("#id名")
3.类选择器： $(".class属性名")
事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        // 给b1按钮添加单击事件
       /* window.onload = function(){
            //1.获取b1按钮
            $("#b1").click(function(){
                alert("abc");
            });

        }*/
     /*   //jquery入口函数(dom文档加载完成之后执行该函数中的代码)
       $(function () {
            //1.获取b1按钮
           $("#b1").click(function(){
               alert("abc");
           });
       });*/
       /* function fun1(){
            alert("abc");
        }
        function fun2(){
            alert("bcd");
        }
        window.onload = fun1;
        //window.onload = fun2;
*/
      /* $(function(){
           alert(123);
       });
       $(function(){
           alert(234);
       });
*/
      $(function(){
          // $("#div1").css("background-color","red");
          $("#div1").css("backgroundColor","pink");
      });
        /*
             window.onload  和 $(function) 区别
                 * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
                 * $(function)可以定义多次的。
          */
    </script>
</head>
<body>
    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" value="点我" id="b1">
</body>
</html>

jQuery遍历

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
/*

        遍历
            1. js的遍历方式
             * for(初始化值;循环结束条件;步长)
            2. jq的遍历方式
                1. jq对象.each(callback)
                2. $.each(object, [callback])
                3. for..of:jquery 3.0 版本之后提供的方式

*/
            $(function () {
               //1.获取所有的ul下的li
                var citys = $("#city li");
               /* //2.遍历li
                for (var i = 0; i < citys.length; i++) {
                    if("上海" == citys[i].innerHTML){
                        //break; 结束循环
                        //continue; //结束本次循环，继续下次循环
                    }
                    //获取内容
                    alert(i+":"+citys[i].innerHTML);

                }*/

/*
                //2. jq对象.each(callback)
                citys.each(function (index,element) {
                    //3.1 获取li对象 第一种方式 this
                    //alert(this.innerHTML);
                    //alert($(this).html());
                    //3.2 获取li对象 第二种方式 在回调函数中定义参数   index（索引） element（元素对象）
                    //alert(index+":"+element.innerHTML);
                    //alert(index+":"+$(element).html());

                    //判断如果是上海，则结束循环
                    if("上海" == $(element).html()){
                        //如果当前function返回为false，则结束循环(break)。
                        //如果返回为true，则结束本次循环，继续下次循环(continue)
                        return true;
                    }
                    alert(index+":"+$(element).html());
                });*/
                //3 $.each(object, [callback])
               /* $.each(citys,function () {
                    alert($(this).html());
                });*/
               //4. for ... of:jquery 3.0 版本之后提供的方式
                for(li of citys){
                    alert($(li).html());
                }
            });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>