title: Java前端note
toc: true
comments: true
tags: Java
abbrlink: b12c8e4b
date: 2021-08-01 15:52:04
categories:
这里记录的是对前端的学习 !
[TOC]
HTML-note
>. 学习资料
1. W3School
2. 菜鸟教程
>. HTML: Hyper Text Markup Language,超文本标记语言,解释性语言
超:超链接
文本:文字
标记:标签
语言:web前端语言
>. html文档：网页（web page）
>. html文档结构：
1. 文档类型声明
html5: <!DOCTYPE html>
html4.01
2. 文档主体
<html>
2.1 文档的头部
<head>
<meta charset="utf-8" />
<title></title>
</head>
2.2 文档体
<body>
//可出现其他标签或文本
</body>
</html>
> html 语法：
1. 标签分类：
1.1 方式1
。双标签 <name></name>
。单标签 <name />
1.2 方式2
。行内标签（内联元素）：<font>
。行级标签（块级元素）：<p>
2. 标签三要素：
2.1 标签名
2.2 标签属性:
<font color="red" size="20">hello</font>
标准属性（全局属性）：id、class、title、style、事件属性
2.3 子元素（标签|文本）
>. 常用标签：
1. 注释： <!-- -->
2. 头部： <head></head>
3. 主体： <body></body>
4. 段落： <p></p>
5. 水平线： <hr />
6. 换行： <br />
7. 图片： <img />
8. 标题： <hN></hN> (N: 1-7)
9. 超链接： <a></a>
10. 块：div(块元素) & span(内联元素)
11. 列表：<ol></ol> <ul></ul>
12. 表格：table、table布局
13. 表单：form
14. 框架：frameset、frame、iframe
CSS-note
》CSS初识：
1. 概念：Cascading Style Sheet , 层叠样式表
2.作用：
渲染页面效果
3. 相对于html标签在样式表现上的优势：
a.功能更丰富，更强大
b.可以将样式和内容（html）分离，页面外观的控制更灵活
c.实现样式复用，使页面的更新和维护更方便
》CSS语法：
选择器{
style1：val1;
style2：val2;
}
ps: css对大小写不敏感
*选择器：
1.作用：选择（选中）html元素（一个或多个）
2.分类：
。基本选择器
1.通配选择器：*
2.元素（标签）选择器
3.id选择器
4.class类选择器
5.属性选择器[property='value']
。群组复合选择器
1.群组选择器: selector1,selector2,...,selectorN
2.复合选择器: 复合择器需要同时满足多个条件时使用,selector1[selector2]...[selectorN]
。层级选择器
1.后代选择器：ancestor descendant
2.孩子选择器：parent > child
3.相邻兄弟（选择后面的相邻兄弟）选择器：prev + next
4.通用兄弟（选择后面的所有兄弟）选择器：prev ~ siblings
。伪类选择器 E:val , E代表html
1.动态伪类选择器
E:link
E:visited
E:active
E:hover
E:focus
2.结构伪类选择器
F E:first-child
F E:last-child
F E:nth-child(n) 选中第n个子元素E
F E:nth-child(odd|even) 选中奇数|偶数行元素
》CSS使用样式的3种方式：
1.外部样式：<link rel="stylesheet" href="css/cssFile.css" />
2.内部样式：<style></style>
3.内联样式：<p style="color:red" >inner style</P>
ps: 样式优先级
》常用样式
1. 文本
color:red;
text-align: center;
text-decoration: line-through;
2. 字体
font
font-family: "隶书";
font-size: 20px;
3. 背景
background
background-color: ghostwhite;
background-image: url(img/yc.png);
background-repeat:repeat-x;
4. box模型：margin、border、padding
/*1. 尺寸*/
height: 50px;
width: 50px;
ps: 宽高只对行级元素或浮动元素（float）有效，内联元素是无法设置宽高的。
/*2. 边框*/
border:50px solid red;
border-width: 50px;
border-style:solid ;
border-color: red;
/*3. 内边距*/
padding: 50px;
/*4. 外边距*/
margin: 50px;
/*5. 轮廓：占据margin的位置 */
outline: 20px solid yellow;
5. 定位：
5.1 position
。static: 无定位
。relative: 相对自己原有的位置定位，且自己原有的位置依然占有
。absolute: 相对离自己最近的“已定位父元素”进行定位（如果没有已定位的父元素，则相对body进行定位），且自己原有的位置不再占有。
。fixed: 相对于视口进行定位，且自己原有的位置不再占有。
5.2 z-index
设置 "同一父元素下" 的 "已定位子元素"的堆叠顺序；Z-index值越大，元素出现在越上面；
5.3 float浮动 & clear清除浮动
float
float 属性指定一个元素是否应该浮动. 浮动元素不再占有原来的位置。
float = left | right | none
注意：
绝对定位的元素忽略float属性
clear
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear = left | right | both
注意：
clear = right无效：当执行到第二个div要清除右浮动的时候，第三个div并没有被加载，所以它的清除效果也就无效了，于是第三个div依然会紧跟着第二个div。
5.4 可见性
display = block(块级元素) | inline(内联元素) | none(隐藏元素+腾出自己原有的位置)
visibility = visible(可见) | hidden(隐藏元素，自己原有的位置依然占有)
5.5 overflow
visible
hidden
scroll
auto
JS-note
js-ECMAScript-note
》JavaScript(简称js)
》js初识
1. javascript & java
a. 变量是弱类型的
b. 每行结尾的分号可有可无，但建议保留
2. js 的作用
HTML: 组织内容
CSS: 样式效果
JavaScript: 动态行为
a. 实现动态效果（操作html和css）
b. 表单提交
3. js组成
a. ECMAScript：核心语法
b. BOM： 浏览器对象模型
c. DOM：文档对象模型
4. html中引入js的方式
a. 外部引入
b. 内部引入
c. 内联方式
ps:
内部引入中，JavaScript脚本必须位于 <script> 与 </script> 标签之间。且脚本数量任意，位置任意。
5. js 输出
console.log() 浏览器控制台输出
window.alert() 窗口提示框输出
document.write() DOM文档输出
ps: js 大小写敏感
》ECMAScript 语法
0. 注释：
// 单行注释
/* 多行注释 */
1. 标识符: 字母、数字、下划线、$，数字不能打头。
2. 常量、变量(作用域)
常量：字符串常量可用单引号，也可用双引号
变量：var a;
作用域：仅有在方法中用var声明的变量才是局部变量
3. 数据类型
a. 基本类型(原始类型)：按值访问。操作保存在变量中实际的值。
String
Number: 特殊值NaN，表示非数（Not a Number），不能用于计算，所以 NaN != NaN
Boolean: true、false
Undefined: 它只有一个专用值undefined，即它的字面量。当声明的变量未初始化时，该变量的默认值是 undefined。
Null: 它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
Symbol: 是 ES6 引入的一种新的原始数据类型，表示独一无二的值。
b. 引用类型: 按址访问。实际上是在操作对象的引用而不是实际的对象。
Object
String、Number、Boolean、Date、Math、Array、Function
自定义对象:
1. 使用Object类型创建对象
2. 字面量创建对象
3. 使用函数（构造器）创建对象
//1. 使用Object类型创建对象
var person = new Object();
//添加属性
person.name = "zhangsan";
//删除属性
delete person.name;
//2. 字面量创建对象
var stu = {
name: 'dufu',
age:20,
sex:'男'
};
4. 运算符
。== 和 ===（绝对等:值和类型都相同）、!= 和 !==（不绝对等: 值或类型不同）
。typeof 变量/常量
string - 如果变量是 String 基本类型
number - 如果变量是 Number 基本类型
boolean - 如果变量是 Boolean 基本类型
undefined - 如果变量是 Undefined 基本类型
object - 如果变量是一种引用类型或 Null 基本类型
function - 如果变量是Function函数类型
ps: Null类型进行typeof操作符后，结果是object，原因在于，null被当做一个空对象引用。
。instanceof
判断 “对象实例” 所属的 “引用类型”
eg:
var s1 = 'a';
var s2 = new String('a');
typeof s1 == string
typeof s2 == ojbect
s1 instanceof String == false
s2 instanceof String == true
5. 流程控制语句
>选择结构
if
switch
>循环结构
while
do...while
for
for...in: 遍历对象的属性或数组中的元素的
a. for...in 遍历数组
var arr = new Array(3);
arr[0] = 1;
arr[1] = 3;
arr[2] = 5;
for(var i in arr){
document.write(arr[i]);
}
b.for...in 遍历对象
var person = new Object();
person.name = "zhangsan";
person.age = 23;
person.sex = 'm';
for(var i in person){
document.write(i + "=" + person[i])
}
6. 函数
function show(m,n){
/*
* 局部变量：仅在方法中用var声明的变量才是局部变量
* 所以result是局部变量，如果去掉var声明，result则为全局变量。
*/
var result = m + n;
return result;
}
原型（链）
1. __proto__：对象属性，指向当前对象的原型对象（可理解为父对象）
2. construtor：对象属性，指向当前对象的构造函数。
3. prototype：函数属性，指向这个函数所创建的实例的原型对象。
对象.__proto__ === 函数.prototype === 对象.constructor.prototype
ps:
对于所有的对象，其原型对象默为 Object 实例。
闭包
能够读取其他函数内部变量（局部变量）的函数。在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
js-BOM-note
》BOM: Browser Object Model
》window
属性：
。location
。history
。navigator
。screen
。document(DOM)
。innerWith/innerHeight
方法：
。alert / prompt / confirm
。open / close
。setTimeout / clearTimeout
。setInterval / clearInterval
PS:
1. window的属性和方法，我们可以通过window来调用（window.alert()），也可以直接调用（alert()）
2. 用户自定义的全局属性（变量）和方法，自动成为window的属性和方法。js-DOM-note
》DOM：Document Object Model
核心：document
。属性
。方法
一、DOM元素操作：
1、获取元素节点：
。document.getElementById("id");
。document.getElementsByName("name");
。document.getElementsByTagName("tagName");
。document.getElementsByClassName("className");
。document.querySelector(css 选择器) 获取匹配到的第一个元素
。document.querySelectorAll(css 选择器) 获取匹配到的所有元素
2、增加节点
创建节点：
document.createElement("标签名")
追加节点：
parentNode.appendChild(childNode)
插入节点：
parentNode.insertBefore(newNode,refNode)
克隆节点
node.cloneNode(true)
3、删除节点：
parentNode.removeChild(node)
node.remove()
二、DOM属性操作：
1、获取：
dom.id
dom.className
dom.style
//方法
dom.getAttribute("id");
dom.getAttribute("class")
dom.getAttribute("style")
2、赋值：
dom.id = "newId";
dom.className = "newClass";
dom.style.color = "red";
dom.style.backgroundColor = "blue";
//方法
dom.setAttribute("id","newId");
dom.setAttribute("class","newClass");
dom.setAttribute("style","color:red;background-color:blue");
三、DOM 文本操作：
1、获取：
dom.innerHTML
dom.innerText
2、赋值：
dom.innerHTML = "";
dom.innerText = "";
四、DOM 事件处理：
e.onEvent = function(){};
e.addEventListener("event",function(){});