【前端】区分html、css、json、ajax、layer、jquery、 el、jstl、

今天小迪敲代码了吗

已于 2023-08-09 11:47:32 修改

阅读量463

点赞数

分类专栏： JAVAWEB 文章标签：前端 html css json ajax 笔记

于 2023-08-04 20:36:41 首次发布

本文链接：https://blog.csdn.net/weixin_51947647/article/details/132111369

版权

JAVAWEB 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML:

超文本标记语言定义页面结构

CSS：

层叠样式表页面显示的样式、排版

JS:

JavaScript 脚本语言界面交互(动态交互、逻辑）
1、直接嵌入HTML页面。 script DOM
2、由浏览器解释执行代码，不进行预编译。

javascript代码：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象

BootStrap：

Bootstrap 是一个流行的前端开发框架，用于构建响应式和移动优先的网站和应用程序。它包含了 HTML、CSS 和 JavaScript 的一套组件和工具，可以帮助开发者快速搭建现代化的用户界面。

JQuery:

其是对javascript封装的一个框架包,简化对javascript的操作.
jQuery：javascript+query
使用前期，jquery侧重快速找到页面上各种节点。
后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等

 基本选择器
$(‘#id属性值’)  ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’)   class属性值选择器
$(‘*’)     通配符选择器
$(‘s1,s2,s3’)联合选择器

jquery代码：无需考虑浏览器兼容问题、代码足够少

json:

JavaScript Object Notation缩写
定义：是一种轻量级的==数据交换格式 ==
json是一种与语言无关的数据交换的格式，
作用：
1、使用ajax进行前后台数据交换
2、移动端与服务端的数据交换
特点：
1、易于程序员阅读和编写。
2、易于计算机解析和生成。
3、其实是javascript的子集：原生javascript支持JSON
元素值可具有的类型：string, number, object, array, true, false, null

1、对象(Object)用大括号({})表示
Student：
{
    "id" : 12,
    "name" : "java1711",
    "age" : 20,
    "gender" : "男"
}
2、数组（Array）用方括号([])表示:
List<Student>:   [{},{},{}]
[
    {
       "id" : 12,
        "name" : "java1711",
        "age" : 20,
        "gender" : "男"
    }
    ,
    {
       "id" : 13,
        "name" : "java1712",
        "age" : 21,
        "gender" : "女"
    }
]

ajax:

Ajax: asynchronous javascript and xml (异步js和xml)
其是可以与服务器进行(异步/同步)交互的技术之一。
ajax的语言载体是javascript。
最大特点：异步请求，不刷新整个页面，只刷新局部也叫局部刷新。
Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，
在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，
从而执行自定义的js逻辑代码完成某种页面功能。

与ajax操作相关的jquery方法有如下几种

1）$.get(url, [data], [callback], [type])  后面三个是可选的可以没有
2）$.post(url, [data], [callback], [type])

url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等

3）$.ajax( { option1:value1,option2:value2... } );    语法：$.ajax({键值对});
常用的option有如下：
async：是否异步，默认是true代表异步。（get/post方式只能异步，不能配置）
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址

layer:

layer是layui的一部分.
“Layer” 通常表示逻辑上相互独立的不同组件或模块。
在这里插入图片描述

el:

EL表达式的作用：向浏览器输出域对象（只能输出域对象）的变量或者表达式计算的结果。
语法：${变量或表达式} ${list}
减少jsp表达式的编写，EL出现的目的是要替代jsp脚本编写。

主要作用：
1、EL从域对象中取出数据(EL最重要的作用)
jsp表达式：<%=request.getAttribute(name)%>
EL表达式替代上面的脚本：${requestScope.name}
EL最主要的作用是获得四大域中的数据，格式${EL表达式}
EL获得pageContext域中的值：${pageScope.key};
EL获得request域中的值：${requestScope.key};
EL获得session域中的值：${sessionScope.key};
EL获得application域中的值：${applicationScope.key};

<%=request.getContextPath()%>
用EL表达式得到当前项目的路径
${pageContext.request.contextPath}

在这里插入图片描述

jstl:

JSTL（JSP Standard Tag Library)，JSP标准标签库，可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能。同el一样也是要代替jsp页面中的脚本代码。

以下是 JSTL 标签库中的一些核心标签：

<c:set>：用于设置一个变量的值或属性的值。
例如：<c:set var="name" value="John" />

<c:if>：用于执行条件判断，根据条件是否为真来展示或隐藏页面内容。
例如：<c:if test="${score > 90}">Excellent!</c:if>

<c:choose>、<c:when> 和 <c:otherwise>：用于实现类似 switch-case 的条件判断。
例如：

jsp
<c:choose>
  <c:when test="${day == 'Monday'}">It's Monday!</c:when>
  <c:when test="${day == 'Tuesday'}">It's Tuesday!</c:when>
  <c:otherwise>It's another day!</c:otherwise>
</c:choose>
<c:forEach>：用于循环迭代一个集合、数组或其他可迭代的对象，并执行指定的操作。
例如：

jsp
<c:forEach items="${books}" var="book">
  ${book.title}
</c:forEach>
<c:url>：用于创建包含请求参数和会话 ID 的 URL。
例如：<c:url value="/mypage.jsp" var="myUrl"><c:param name="id" value="${itemId}" /></c:url>

<c:out>：用于输出变量的值，自动进行 HTML 转义。
例如：<c:out value="${user.name}" />