
前端基础
文章平均质量分 83
本专栏主要收录 HTML 、CSS、JavaScript、JQuery、Ajax 等前端基础知识
在森林中麋了鹿
我们都要做生活的高手!
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Thymeleaf (一) --------- 初识 Thymeleaf
目录一、认识 Thymeleaf二、第一个例子一、认识 ThymeleafThymeleaf 是一个流行的模板引擎,该模板引擎采用 Java 语言开发。模板引擎是一个技术名词,是跨领域跨平台的概念,在 Java 语言体系下有模板引擎,在 C#、PHP 语言体系下也有模板引擎,甚至在 JavaScript 中也会用到模板引擎技术,Java 生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl(国产) 等。Thymeleaf 对网络环境不存在严格的要求,既能用于原创 2022-03-21 15:30:36 · 758 阅读 · 0 评论 -
SpringBoot + Thymeleaf 练手小项目 --------- 豆瓣网站模拟
实现豆瓣网站的简单模拟原创 2022-03-25 16:36:52 · 7369 阅读 · 0 评论 -
Thymeleaf (二) ---------- 表达式
目录一、标准变量表达式二、选择变量表达式三、链接表达式 (URL 表达式)表达式是在页面获取数据的一种 thymeleaf 语法,类似 ${key}。一、标准变量表达式注意 :我们第一个例子中用到的 th:text="" 是 Thymeleaf 的一个属性,用于文本的显示。语法 : ${key}说明 :标准变量表达式用于访问容器 (tomcat) 上下文环境中的变量,功能和 EL 中的 ${} 相同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controlle原创 2022-03-21 22:40:18 · 1310 阅读 · 1 评论 -
Thymeleaf (三) ---------Thymeleaf 属性
目录一、th:action 属性二、th:method 属性三、th:href 属性四、th:src 属性五、th:text 属性六、th:style 属性七、th:each 属性1、循环列表2、遍历数组 Array大部分属性和 html 的一样,只不过前面加了一个 th 前缀。 加了 th 前缀的属性,是经过模版引擎处理的一、th:action 属性定义后台控制器的路径,类似标签的 action 属性,主要结合 URL 表达式,获取动态变量<form id="login" th:actio原创 2022-03-22 18:12:28 · 6441 阅读 · 0 评论 -
Thymeleaf (五) --------- Thymeleaf 对象
目录一、Thymeleaf 基本对象一、Thymeleaf 基本对象模板引擎提供了一组内置的对象,这些内置的对象可以直接在模板中使用,这些对象由#号开始引用,我们比较常用的内置对象。#request : 表示 HttpServletRequest#session :表示 HttpSession 对象session :同样表示 HttpSession 对象,使用起来有略微差别request.setAttribute("requestData","request 中的数据");原创 2022-03-23 09:02:34 · 1910 阅读 · 0 评论 -
Thymeleaf (四) --------- 字面量与运算符
目录一、字面量1、文本字面量2、数字字面量3、boolean 字面量4、null 字面量二、运算符三、字符串拼接一、字面量1、文本字面量用单引号'...'包围的字符串为文本字面量<p th:text="'城市是' + ${city}"></p>这里的‘城市是’是字面量2、数字字面量<p th:if="${age > 10}"> age >10 </p><p th:if="20 > 5"> 20 大于 5 &l原创 2022-03-22 23:05:30 · 863 阅读 · 0 评论 -
jQuery学习(一) --------- jQuery概述
目录一、什么是 jQuery ?二、为什么要使用 jQuery ?三、DOM 对象四、jQuery 对象五、下载 jQuery 相关文件六、第一个jQuery程序七、DOM对象与jQuery对象之间的相互转换一、什么是 jQuery ?jQuery 是一款跨主流浏览器的JavaScript库,封装了 JavaScript 相关方法调用,简化了JavaScript 对于 HTML DOM操作。下面是官网对于jQuery的相关定义jQuery 是一个快速,小巧,功能丰富的 JavaScr原创 2021-11-19 09:45:48 · 598 阅读 · 0 评论 -
jQuery学习(三) --------- 函数与事件
目录一、函数常用函数二、事件1. 定义元素的监听事件2. on() 绑定事件一、函数常用函数(1) val操作数组中 DOM 对象的 value 属性$(选择器).val() : 无参数调用形式, 读取数组中第一个 DOM $(选择器).val(值) : 有参形式调用,对数组中所有 DOM 对象属性值进行统一赋值(2) text操作数组中所有 DOM 对象的文字显示内容属性$(选择器).text() : 无参数调用, 读取数组中所有 DOM 对象的文字显示内容,将得到内容拼接为一个字符原创 2021-11-21 12:09:36 · 625 阅读 · 0 评论 -
jQuery学习(二) --------- 选择器与过滤器
目录一、选择器1. 基本选择器一、选择器选择器,就是定位条件(定位DOM对象的字符串),通知jQuery函数定位满足条件的 DOM 对象。1. 基本选择器id 选择器通过dom对象的id定位dom对象的。通过id找对象,id在当前界面中是唯一值。语法:$("#dom对象的id值") class 选择器通过dom对象的class属性名称定位dom对象语法:$(".class类样式名")标签选择器通过标签名称定位dom对象语法$("标签名称")实例:在这里插原创 2021-11-20 22:23:33 · 628 阅读 · 0 评论 -
jQuery学习(四) ---------jQuery中AJAX相关方法
目录1. $.ajax()2. $.get()3. $.post()jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。1. $.ajax()$.ajax() 是 jQuery 中 AJAX 请求的核心方法,所有的其他方法都是在内部使用此方法语法:$.ajax( { name:value, name:value,原创 2021-11-21 14:29:53 · 692 阅读 · 0 评论 -
JSP学习(四) --------- EL表达式
目录一、传统JSP文件开发步骤二、EL表达式介绍三、EL表达式作用域对象别名四、EL表达式输出对象属性五、简化版EL表达式六、EL表达式支持运算七、EL表达式中隐式对象八、EL表达式常见异常一、传统JSP文件开发步骤第一步:从指定的作用域对象读取处理结果第二步:将得到数据进行类型强转第三步:将转换后的结果写入到响应体<% String value = (String)request.getAttribute("key");%><%=value%>二、原创 2021-11-14 15:48:38 · 861 阅读 · 0 评论 -
JSP学习(一) --------- JSP规范及命令书写规则
目录一、JSP 规范二、JSP命令书写规则基本语法一、JSP 规范1.概述来自于JAVAEE 规范的一种JSP 规范制定了如何开发 JSP 文件代替响应对象将处理结果写入到响应体的开发流程JSP规范制定了 Http 服务器应该如何调用管理JSP文件2.响应对象存在弊端适合将数据量较少的处理结果写入到响应体如果处理结果数量过多,使用响应对象增加开发难度3.JSP文件优势JSP 文件在互联网通信过程中是响应对象的替代品降低将处理结果写入到响应体的开发工作量降低处理结果维护难度原创 2021-11-10 22:46:24 · 1509 阅读 · 0 评论 -
JSP学习(二) --------- JSP内置对象及JSP与Servlet联合调用案例
目录一、JSP内置对象二、JSP与Servlet联合调用案例开发步骤实例一、JSP内置对象内置对象:由JSP规范提供,不用编写者实例化。通过Web容器实现和管理所有JSP页面均可使用只有在JSP程序段或JSP表达式 (<%= %>或<% %>) 中1. request 对象类型: javax.servlet.HttpServletRequest 类型对象作用:在JSP文件运行时读取请求包信息,与Servlet在请求转发过程中实现数据共享作用域:只在一次请求原创 2021-11-11 16:56:18 · 1185 阅读 · 0 评论 -
JSP学习(三) --------- JSP文件运行原理
目录一、Http服务器调用JSP文件步骤二、如何将Servlet中doGet/doPost方法执行结果交给JSP文件输出一、Http服务器调用JSP文件步骤Tomcat根据JSP规范,将被访问的JSP文件编辑为一个Java文件。这个Java文件是Servlet接口实现类Tomcat根据JSP规范,调用JVM将这个java文件[编译]为class类型Tomcat根据JSP规范负责生成这个class文件的实例对象。这个实例对象是一个Servelt接口实例对象Tomcat根据JSP规范通过实例对象调原创 2021-11-11 23:36:36 · 588 阅读 · 0 评论 -
AJAX学习(二) --------- AJAX异步实现步骤
目录AJAX异步实现步骤1. 创建异步对象2. 给异步对象绑定onreadystatechange事件3. 初始化异步请求参数4. 使用异步对象发送请求5. 接收服务器响应数据AJAX异步实现步骤1. 创建异步对象//创建异步对象var xmlHttp = new XMLHttpRequest();2. 给异步对象绑定onreadystatechange事件onreadystatechange:当异步对象发起请求、获取数据都会触发这个事件(或者说是每当readyState改变时,就会触发on原创 2021-11-16 17:47:45 · 546 阅读 · 0 评论 -
AJAX学习(三) --------- 根据省份ID来查询省份名称(项目实例)
目录前言实现步骤1. 将 city.sql 与 province.sql 导入数据库中2. 创建实体类3. 创建 DAO 类前言需求:用户在文本框架输入省份的编号 id,在其他文本框显示省份名称项目准备:(1) 数据库表:省份信息表CREATE TABLE province ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(255) DEFAULT NULL COMMENT '省份名称', abbr varchar(255)原创 2021-11-18 15:59:35 · 1069 阅读 · 0 评论 -
AJAX学习(一) --------- AJAX概述
目录一、全局刷新和局部刷新1. 全局刷新2. 局部刷新二、异步请求对象三、AJAX简介一、全局刷新和局部刷新1. 全局刷新概念 : 整个浏览器被新的数据覆盖。 在网络中传输大量的数据。 浏览器需要加载、渲染页面。具体实例:登录请求处理:index.jsp 发起登录请求--------LoginServlet--------result.jsp首先,在发起请求阶段,浏览器内存是index.jsp数据。服务器在收到请求后,对该请求进行应答:sevlet 返回后把数据全部覆盖掉原来 index原创 2021-11-16 10:34:08 · 470 阅读 · 0 评论 -
Javascript学习(五) --------- JSON基础
目录一、JSON概述二、JSON的语法格式三、JSON字符串四、较复杂的JSON结构一、JSON概述JSON,全称为Javascript Object Notation ---- Java对象表示法,是一种基于文本独立于语言的轻量级数据交换格式。其主要作用就是用于不同语言、系统、平台之间的数据交换。JSON作为一种标准的轻量级的数据交换格式,特点为:体积小、易解析。相比于JSON,XML虽然也能作为跨平台的数据交换格式,但XML体积较大,解析麻烦,标记比数据多,增加了交换产生流量,我们倾向于选择JSO原创 2021-10-23 00:27:45 · 242 阅读 · 0 评论 -
Javascript学习(一) --------- Javascript概述
目录一、 Javascript的发展历程二、Javascript主要的学习模块一、 Javascript的发展历程JavaScript是运行在浏览器上的脚本语言。简称JS。JavaScript是网景公司(NetScape)的 布兰登艾奇(JavaScript之父)开发的,最初叫LiveScript。LiveScript的出现让浏览器更加的生动了,不再是单纯的静态页面了。页面更具有交互性。在历史的某个阶段,SUN公司和网景公司他们之间有合作关系,SUN公司把LiveScript的名字修改Java原创 2021-10-21 20:58:53 · 179 阅读 · 0 评论 -
Javascript学习(二) --------- ECMAScript语法
目录一、JS代码嵌入的三种方式二、变量三、函数四、数据类型五、 JS中的类六、JS中的事件七、JS中的控制语句八、数组ECMAScript语法即为Javacript核心语法,通过对ECMAScript语法的学习,可以初步使用Javascript进行编程。一、JS代码嵌入的三种方式1.方法一 : 内联样式JS代码嵌套在HTML标签内部<input type = "button" value = "hello" onclick = "window.alert('hello, js')"/>原创 2021-10-22 15:35:35 · 562 阅读 · 1 评论 -
Javascript学习(六) --------- JSON实现服务端与Javascript之间数据通信
目录前言一、错误做法二、正确做法三、标准做法四、使用JSON工具包前言要求设计:新建学生类并放在entity包下,在servlet中新建学生对象信息,并将学生信息放在共享数据中,在JSP文件中将其取出,最后在网页中以警示框的形式输出出来。学生类代码:package Entity;public class Student { String name; int age; public Student() {} public Student(String原创 2021-11-15 15:15:07 · 889 阅读 · 2 评论 -
Javascript学习(三) --------- DOM编程
目录一、DOM与BOM二、JS内置对象三、获取文本框的值四、innerText 与 innerHTML五、正则表达式六、去除文本框输入值左右两侧的空格七、表单验证八、获取下拉列表中的value一、DOM与BOM两者的定义DOM:Document Object Model ---------文档对象模型 :对网页当中的节点进行增删改的过程。HTML文档被当做一棵DOM树来看待。BOM:Browser Object Model ---------- 浏览器对象模型 :主要操作有关闭浏览器窗口、打开原创 2021-10-22 21:33:33 · 293 阅读 · 0 评论 -
Javascript学习(四) --------- BOM编程
目录一、window.open() 与 window.close()二、弹出消息框及确认框三、设置顶级窗口四、历史记录五、设置地址栏上的URL六、通过浏览器往服务器发送请求的方式一、window.open() 与 window.close()在BOM编程中,window对象是顶级对象,代表浏览器窗口。window有 open() 和 close() 方法, 可以打开和关闭窗口//在当前窗口打开<input type = "button" onclick = "window.open('h原创 2021-10-22 23:07:47 · 120 阅读 · 0 评论