1)文笔有限,如果发现博客有书写有误的地方恳请读者直言不讳,我一定会第一时间改正。
2)代码的具体实现可以参考代码中的注释,如果由于注释不清楚而不明白相应原理,可以与作者私聊。码字不易,有兴趣的小伙伴点个赞呗,大家相互学习。
3)XML 的补充知识可以参考该教程。【传送门】
4)JQuery 的补充知识可以参考该教程。【传送门】
传送门:
1 XML
1.1 概念
XML,即可拓展标记语言,主要作用如下:
- 用来保存具有自我描述性的数据;
- 可以做为项目或者模块的配置文件;
- 可以做为网络传输数据的格式(现在JSON 为主)。
1.2 XML 解析技术
XML解析意味着通过读取XML的数据,并转化成我们需要的内容。
早期 JDK 为我们提供了两种 XML 解析技术,分别为:DOM 和 SAX ,不过这两种技术目前都已经过时。
DOM 即文档对象模型,DOM 解析技术是 W3C 组织制定的,且所有的编程语言都对这个解析技术根据自己语言的特点进行了实现。
SAX( Simple API for XML )解析,它跟 W3C 制定的解析不太一样。它是以类似事件机制通过回调告诉用户当前正在解析的内容。它是一行一行的读取 XML 文件进行解析的,因此不会创建大量的 DOM 对象。所以它在解析 XML 的时候,在内存和性能上都是优于DOM 解析。
2 JQuery
2.1 jQuery 的导入
在 HTML 或者 JSP 中引入 jQuery 有两种方式,一种是将对应的 .js 包下载到本地导入,另一种是使用 cdn 在线导入。
1)本地安装
1 JQuery 官网
2 选择版本号
3 点击后,浏览器会显示 jQuery 的源码,这个时候,通过 Ctrl + S 快捷键保存到本地
4 将下载好的 Js 文件拖到 IDEA 对应的文件夹内
5 在对应的 标签内导入即可
<script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
2)CDN 在线安装
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
so easy!
2.2 jQuery 语法
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
2.3 文档就绪函数
所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
2.4 jQuery 事件函数
jQuery 是为事件处理特别设计的。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
<%@ page contentType="text/html; charset=UTF-8" isELIgnored="false" language="java" %>
<html>
<head>
<title>jQuery 测试</title>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
// jQuery 函数需要在一个 document ready 函数中,这也算是一个固定写法
$(document).ready(function(){
// 当按钮的点击事件触发时,会调用 .hide() 函数
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
2.5 jQuery 选择器
语法 | 描述 |
---|---|
$(this).hide() | 隐藏当前 HTML 元素 |
$(“p”).hide() | 隐藏所有 元素 |
$(“p.intro”).hide() | 隐藏所有 class=“intro” 的 元素 |
$(".intro").hide() | 隐藏所有 class=“intro” 的元素 |
$("#intro").hide() | 隐藏 id=“intro” 的元素 |
参考文献:传送门