Java前端技术总结

最新推荐文章于 2024-04-01 04:33:35 发布

王上大人

最新推荐文章于 2024-04-01 04:33:35 发布

阅读量439

点赞数

分类专栏： Java技术总结文章标签：前端 java css

本文链接：https://blog.csdn.net/Survivor_susu/article/details/126679422

版权

Java技术总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML及CSS

常用标签

标题标签<h>
断落标签 <p>
换行标签 <br>
横线标签<hr>
加粗标签<strong>
倾斜标签<em>
删除线标签<del>
下划线标签<ins>
其他标签<div>,<span>,<img>
超链接标签<a>
- #自跳转
- \ #'id’锚点跳转

功能标签

表格标签<table>
- table属性
  - border 设置表格外边框
  - cellspacing设置表格与表格间得距离
  - cellpadding设置内容与表格的距离
- <tr>行
- <th>表头格
- <td>数据格
- 合并表格
  - 合并行 rowspan 合并上下表格
  - 合并列 colspan 合并左右表格
列表
- 有序列表<ul>
  - 列表项<li>
- 无序列表<ol>
  - 列表项<li>
- 自定义列表<dl>
  - 列表项<dd>
  自定义列表没有默认样式
表单宇标签<from>
- 属性
  - action=“服务器地址” http链接或者链接地址
  - method=“” 可选值 GET和 POST get ：得到，从服务
  - name=“” 表单的名字当网页中存在多个form表单域时，可以通过name区分表单域
- <input>存在于<from>表单域中,且必须带name属性
  - type=“button” 按钮
  - type=“checkbox” 多选框(必须带name,对于属性的单选框name必须相同)
  - type=“radio” 单选框 (必须带name,对于属性的单选框name必须相同)
  - type=“file” 文件选择
  - type=“submit” 提交表单
  - type=“reset” 重置
  - type=“color” 选择颜色
  - type=“date” 选择日期
  - type=“time” 选择时间
  - type=“datetime-local” 选择日期时间
  - label标签 <label for="user">账号：</label><input type="text" id="user"/><br /> label 用for属性，指向对应表单元素input中的id属性,当用户点击对应的label，它的for属性指向的id属性所在输入框就能获取焦点
  - select标签<select name="city"><option>北京</option><option>天津</option><option>上海</option><option selected="selected">重庆</option></select> name属性设置在 select中, value就是option中的字符selected属性,selected =“selected” 下拉选项被默认选中
  - 文本输入框 <textarea rows="10" cols="40"> 请输入文字 </textarea> 针对处理多行文本输入

CSS

选择分类：
- 基础选择器、复合选择器
- 基础选择器：标签选择器、类选择器、id选择器还有通配符选择
- 复合选择器：将上述的基础选择器进行多个组合
CSS引入方式:行内样式,内部样式,外部样式
emmet表达式: ul>li{‘内容’}*数量
CSS优先级:通过选择器进行叠加行内样式表(内联样式) 1000 > id选择器 100 > class选择器 10> 标签选择器 1同时可以设置属性!important设为比最高优先级还高
calc()函数:符号前后需要’ '空格
浮动float: 脱离文档流,
行内块元素: display: inline-block文字与图片存在水平基准线问题,会影响对齐vertical-align: middle设置文档流中,文字与行内块元素在同一基准线

JavaScript

JavaScript 概述

JavaScript ！= Java （GC机制…）

轻量级：解释语言，需要浏览器解释

弱类型：代码的分号可加可不加；标签属性的大小写均可以… 语法的严格程度不高

面向对象：

//构造函数
function Test（）{

}
let test = new Test()

JS 作用：处理网页幕后逻辑（JS）（页面设计交给 HTML/CSS）

举例：要求密码前三位是英文字母，且不能小于10位（表单验证）

JS在页面中输出： write 只能被document使用，指定定义文本

innerHTML可以被所有标签使用，识别标签的文本内容

变量初始化

var 没有块级作用域（在区域中的值会向外扩散）

let 块级作用域（只能在当前区域中生效）

变量提升

//var a = undefined
a = 1
console.log(a)

变量类型

null 清空引用类型“对象”

undefined 初始化每个变量在内存中的状态、

在数据类型中： NaN（不是一个数）、Infinity（无穷大）

类型的转化

var a = String(内容)

var a = Number(内容) parseInt paseFloat

var a = Boolean(内容)

运算符

逻辑与与短路与

& &&

if(a > 0 && 1 / 0 > 1)
if(a > 0 & 1 / 0 > 1)

数组

创建方式：1、var a = [1,2,3] 2、var a = new Array() ; a[0] = 1

length 数组的长度

push 向后添加一个元素或者数组

pop 将数组末尾去掉并返回一个元素

shift 将数组头部去掉并返回一个元素

unshift 向前添加一个元素或者数组

join 将所有数组的元素·通过某个字符进行组合

内置对象

new Date() 过时了

现在建议的事件获取方式：Date.now()

System.currentMillons

DOM

获取元素的方式：

document.querySelector 根据选择器获取标签

document.querySelectorAll 根据选择器获取所有标签

document.getElementXXXXX

监听事件

onmousedown up over out move

onkeypress

onclick

设置事件的方式（绑定事件的方式）

1、div.onclick = function(){}

2、div.addEventListener(‘click’,function(){})

设置元素的属性样式

<div style=“color:red”></div> 内联样式

color -> style -> div

div.style.color = 字符串属性

div.style.background-color 错误=> div.style.backgroundColor 正确

div.style[‘background-color’] = 字符串属性

div.class 错误=> div.className 正确

value

1、表单标签中的属性所以只能用于标签标签

2、不同的type属性标签，那么value的意义的不同

3、既可以用来设置value属性，也可以用来获取value属性（get set）

输入 type = “text” “password” “number”…

value 输入的内容

单/多项框 type = “radio” “check’box”

value 输入的内容就是value中定义的内容

选项框 select + option

value option的标记内容

按钮 type=“button”

value 按钮的名称

style.属性

只能设置标签的属性，不能获取标签的属性（除非该标签定义的是行内样式）

获取属性值的函数： document.getComputedStyle(标签对象，属性名称)

设置一个标记的属性，

如果标记定义了行内样式，那么“标记.style.属性” 可以获取属性

Chrome浏览器 Edge浏览器 FireFox getComputedStyle

IE8 IE7 IE6 currentStyle 使用格式“ 标记对象.currentStyle[属性] ”

class属性 “style.className”

函数

函数的定义

常用

function abc(){

}

变量的方式

let abc = function(){

}

注意点：事件设置

box.onclick = abc
box.onclick = abc() 错误  abc()会提前执行

形参自动接收的数组对象 => 重载

arguments

函数会被浏览器引擎解析，当HTML结构加载完成，引擎会事先将函数加载至缓存中

（函数无论定义在调用前还是后，都可以使用）

对象

对象中也有属性和方法

JS中对象就是以键值对的方式组合，用花括号包裹起来的内容

对象调用

student.age => student[‘age’]

对象属性自定义

如果需要在对象中新增一个属性

对象. 属性 = 属性值（新增了一个属性）

对象包含了 document.querySelector 中取出的标签对象

因此我们时常可以在标记存入一些具有特殊意义的变量

定时器的使用

1、setInterval（function(){}, duration）执行函数和间隔时间

2、clearInterval

DOM 节点

节点树（文本、属性、元素）

元素节点树（元素（标记））

创建标记

createElement(标记名称)

append 父元素末尾添加子元素（appendChild）

prepend 父元素开头添加子元素

删除标签

remove 将标签本身删除

empty 将标记的内容清空

removeChild 父元素将指定的子元素删除

设置标记属性

对象.属性 = 属性值

对象.setAttribute(属性，属性值)

事件使用

onmouseover

onmouseout

onmousedown

onmouseup

onmousemove

onclick

ondblclick

onchange 针对输入框标记有效

onblur 失去焦点

onfocus 获取焦点

事件event

clientX 当前元素在显示区域中的X坐标位置

clientY 当前元素在显示区域中的Y坐标位置

offsetX 当前元素在具有定位级的父元素中的X坐标位置

offsetY 当前元素在具有定位级的父元素中的Y坐标位置

event 在不同事件中事件中的属性的个数。类别是不同的

onmousemove中 X,Y…

onkeypress 中 key keyCode…

事件绑定

addEventListener（事件名称，函数）绑定

removeEventListener(事件名称，函数) 解绑

一个事件可以绑定多个函数

一个函数绑定多个事件

组织事件冒泡

 //阻止事件冒泡
event.cancelBubble = true

window

window.document

window.history go(数字) 跳转到对应的缓存页面 forward back …

window.location reload 重新加载当前网页 replace将网页内容替换

window.open 打开一个新的网页

window.localStorage 本地储存（关闭浏览器消失）