javaWeb前端三件套

最新推荐文章于 2024-04-22 21:50:44 发布

Cedar_Guo

最新推荐文章于 2024-04-22 21:50:44 发布

阅读量2.1k

点赞数 2

分类专栏：后端开发文章标签：前端 html js

本文链接：https://blog.csdn.net/weixin_43741711/article/details/121830099

版权

后端开发专栏收录该内容

18 篇文章 1 订阅

订阅专栏

文章目录

- 前端三件套：

前端三件套：

对于后端学习者，不要求精通，要求能够通过web层的前后联调，
把静态html页面转化成动态页面，即要求掌握html、js 的基础知识。

1. html （页面内容）

标签规范（了解）
常用标签（重要）：a标签表格表单 div span 列表 img等

1.1 a标签细节

href属性设置连接的地址；
target属性设置哪个目标进行跳转（_self 默认值表示打开当前页面，_blank 表示打开新页面跳转）。

1.2 form标签细节

action属性设置提交的服务器地址；
method属性设置提交的方式 GET(默认值) POST等；
input type=hidden hidden属性是隐藏域 当我们要发送某些信息，且不需要用户参与，可以使用隐藏域（提交的时候同时发送给服务器）；
name属性设置表单项的名称，发起请求后在服务端的request域中可以通过name属性获取该表单项对应的value；
value属性设置默认显示内容，若表单项有输入，则存储输入值；
input type = submit submit属性 向action指定的地址发起请求，并以name=value&name=value格式提交表单内容。

1.3 其它标签

button\ input \select \radio \checkbox \div \ span\ p

2. css（页面样式）

2.1 css常用样式（了解）

2.2 使用css的三种方法

1 在标签的 style 属性上设置”key:value value;” 例如：
<div style="border: 1px solid blue;"> div 标签样式 </div>
2 在head标签中，使用style标签 定义指定元素（选择器）的css样式：选择器 {Key : value value; }。例如：

<head> 
	<meta charset="UTF-8">
 	<title>Title</title>
  	<!--style 标签专门用来定义 css 样式代码--> 
  	<style type="text/css">
    	div{
    		border: 1px solid red; }
   	</style> 
 </head> 
 <body> 
 	<div>div 标签 1</div>
 	<div>div 标签 2</div>
 </body>

3.把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。例如：
href是css样式文件在项目中的资源位置。

<link type="text/css" rel="stylesheet" href="static/css/style.css" >

css 文件内容：

div{border: 1px solid yellow; }

3. javascript（页面行为）

3.1 JavaScript 和 html 代码的两种结合方式

1 在 head 标签或者在body 标签中，使用 script 标签 指定type 来书写 JavaScript 代码：

<script type="text/javascript"> 
	alert("hello javaScript!"); 
</script>

2 使用 script 标签 指定type和src 引入单独的 JavaScript 代码文件：
<script type="text/javascript" src="test.js"></script>

3.2 JavaScript 的变量类型及定义变量格式

JavaScript 的变量类型：
数值类型： number ；字符串类型： string；对象类型： object；布尔类型： boolean ；函数类型： function
JavaScript 中的定义变量格式：
var 变量名; var 变量名 = 值;

3.3 函数定义

两种定义方式：
1 使用function关键字 + 函数名 function 函数名(形参列表){ 函数体 }
2 定义function类型的变量 var 函数名 = function(形参列表) { 函数体 }
函数在js代码块中调用即可执行。
注：在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义。

3.4 js中的事件及其注册

事件是电脑输入设备与页面进行交互的响应。

1 常用事件 ：
onload 页面加载完成事件：页面加载完成之后触发。常用于做页面 js 代码的初始化操作。
onclick 单击事件：光标点击button标签触发。常用于按钮的点击响应操作。
onblur 失去焦点事件：光标离开输入框触发事件。常用于输入框失去焦点后，验证其输入内容是否合法，通常给form的input标签对象注册失去焦点事件，发送ajax请求，局部更新页面。
onchange 内容发生改变事件：下拉列表和输入框内容发生改变后触发。注册的事件通常为发送ajax请求，局部更新页面。
onsubmit 表单提交事件：点击表单的submit按钮触发。常用于表单提交前，验证所有表单项是否合法，如果不合法可以return false，阻止表单提交。

2 事件的两种注册方式：
事件的注册是告知浏览器，当事件响应后要执行哪些操作代码。
注：事件的动态注册要在页面加载完成之后，即onload事件之后，因为得到dom对象的方法需要在页面加载完成之后。

静态注册事件：
先在js中定义事件响应后的函数，

function onclickFun() 
	{ alert("静态注册 onclick 事件"); 
}

再赋于html 标签的事件属性事件响应函数名。

<button onclick="onclickFun();">按钮 1</button>

动态注册事件：
先通过 js 代码得到对于html标签的 dom 对象，
然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码。

//onload 事件动态注册。是固定写法
window.onload = function (){  
// 1 获取标签对象
//document 是 JavaScript 语言提供的一个对象
//getElementById 通过 id 属性获取标签对象
	var btnObj = document.getElementById("btn01"); 
// 2 通过标签对象.事件名 = function(){} 
 	btnObj.onclick = function () { 
 		alert("动态注册的 onclick 事件"); 
 	}

<button id="btn01">按钮 2</button>

3.5 DOM模型

全称是 Document Object Model 文档对象模型，即把html文档中的标签，属性，文本，转换成为对象来管理。

1 document对象及其方法：
document 是一种树结构的文档，有层级关系，把所有的标签都对象化。例如：

<body> 
	<div id="div01">div01</div> 
</body>

class Dom{ 
	private String id; // id 属性 
	private String tagName; //表示标签名 
	private Dom parentNode; //父节点 
	private List<Dom> children; // 子结点列表 
	private String innerHTML; // 起始标签和结束标签中间的内容 
}

我们可以通过 document 访问所有的标签对象。
document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象；
document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象;
document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。
注：以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

2 DOM节点对象的常用属性和方法：
方法：
getElementsByTagName()方法，获取当前节点的指定标签名孩子节点；
appendChild( oChildNode )方法，可以添加一个子节点，oChildNode 是要添加的孩子节点。
属性：
获取节点内容：
className 用于获取或设置标签的 class 属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容，html格式（可读可写）
innerText 属性，表示获取/设置起始标签和结束标签中的文本，纯文本
获取子节点/父节点：
childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild 属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
获取兄弟节点：
nextSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点

Cedar_Guo

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
javaWeb前端三件套

文章目录前端三件套：1. html （页面内容）1.1 a标签细节1.2 form标签细节1.3 其它标签2. css（页面样式）2.1 css常用样式（了解）2.2 使用css的三种方法3. javascript（页面行为）3.1 JavaScript 和 html 代码的两种结合方式3.2 JavaScript 的变量类型及定义变量格式3.3 函数定义3.4 js中的事件及其注册3.5 DOM模型前端三件套：对于后端学习者，不要求精通，要求能够通过web层的前后联调，把静态html页面转化成动态页
复制链接

扫一扫