前端零碎知识点
dotted line虚线
1 | Div:hover{ 鼠标停留时样式改变 |
Italic倾斜,斜体
字间距:
Letter-spacing: -2px;
范围:最大数值为自大小
单位:像素
设置按钮跳转:
1 | <input type="botton" value"我是一个按钮" onclick="location.href='http://www.baidu.com'"> |
onclick=”location.href=’跳转本地地址’”
onclick点击时的动作
1 | 单独添加一个链接,实现跳转: |
border:double(双线)
border:dashed(虚线)
border:dotted(点线)
List-style:none (列表样式——无)
position位置
size尺寸
background-position:
(背景)
雪碧图、精灵图,当背景,减少http请求次数
通过定位设置图片
10月15日
Transparent 透明
odd(奇数)
even(偶数)
设置
Box-sizing:border-box
设置box-sizing width和 height是盒子的实际宽高,不是内容的宽高,设置之后内容将自动调整
Outline:none
设置input输入标签被选中时的边框无
Display:none
显示隐藏
10月17日周六
定位
用于元素的定位
三个类型:
- 相对定位(属性值relative):参照自身位置进行定位
- 绝对定位(absolute):参照有定位设置的第一级父级元素位置进行定位
- 固定定位(fixed):参照浏览器窗口位置(body区域)进行定位
position语法
1 | div{ |
“应用说明:先确定定位类型,后输入值
10.22
hydrasender
user:itxiaowei
Password:
Text-indent(文本缩紧)
只针对块元素,不可用于行内元素
10.12
label标签(扩大点击范围)
cheaked伪类选择器(当input选中时)
+并排(隔壁)兄弟选择器
1 | <p> |
~隔行兄弟选择器
currentcolor(目标元素颜色)
current(英文单词现在的)
1 | .box{ |
自适应宽高
1 | .box{ |
calc计算
最大最小宽高
Min-width 最小宽度
Max-width 最大宽度
min-height 最小高度
max-height 最大宽度
文字对其方式
text-align:justify—–属性值(文字两端对其)
文字显示超出用省略号现实
White-spance:nowrap ; (文字不换行)
text-overflow:hidden (文字隐藏)
需要搭配overflow:hidden使用
writing书写 mode模式
Writing-mode: vertical-rl (文字从右往左显示)
Writing-mode: vertical-lr (文字从左往右)
Writing-mode: vertical-tb(文字从上往下)
Writing-mode: vertical-lr (文字从下往上)
input输入框的value限制长度
maxlength=”10”
target a标签的目标属性
target 目标
1 | 当a标签点击之后跳转,:target(伪类选择器),target目标激活,设置样式改变 |
伪类选择器
:first-letter{}
选择器:第一个字母{样式}
:first-line{}
选择器:段落第一行{样式}
第一行
letter:
*letter 信;函;字母
1英寸(in)=2.54.cm
10月26日
浮动兼容(IE浏览器)
需要添加属性
zoom:1
图片文字对其方式
Vertical-align:middle
(基线对其)
斜体标签
加粗标签
斜体标签
删除线标签
10月28日
文字和图片基线对齐
1 | vertical-align: middle |
字体行高复合写法
1 | Font:12px/1.5 |
字体大小12px,行高为字体大小1.5倍
强制一行显示&多出内容用省略号(…)代替
1 | white-space: nowrap; |
11月4日
字间距
1 | letter-spacing:2px |
点击伪类
设置鼠标点击按下不松手的样式效果
1 | .p:active{ |
元素鼠标停留变小手:
元素:hover{
cursor:pointer
}
css动画:
前置:
需要给要设置动画的元素写上css动画属性animation
animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
---|---|
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。 |
animation-timing-function | 规定动画的速度曲线。 |
animation-delay | 规定在动画开始之前的延迟。 |
animation-iteration-count | 规定动画应该播放的次数。 |
animation-direction | 规定是否应该轮流反向播放动画。 |
animation复合写法一共有5个属性值
属性值1 :动画名称(自定)
属性值2 :每次播放时长(单位秒s)
属性值3 :动画播放速度
值 | 描述 |
---|---|
linear | 匀速 |
ease | 慢快慢 |
ease-in | 慢快 |
ease-out | 匀速减慢 |
ease-in-out | 慢速开始,先加速后减速 |
属性值4 :动画播发延迟(单位秒)
属性值5 :动画播放次数(无限重复infinite、forwards保持动画停止后的效果)
设置动画进度css样式的改变:
@keyframes 动画名 {}
1 | div{ |
css3动画:
transform
1 | 旋转: |
旋转:
transform
用于将元素旋转
1 | div{ |
12.17
Div可输入属性:
contenteditable=”true”
Css属性选择器 [ ]:
1 | Input[type=checked]2{ |
中括号里写属性和属性值,精准选择对应的input标签
允许块元素输入内容:
contenteditable属性
1 | <div contenteditable='true'> |
通过value属性直接获取输入的内容
2021.3.16
2021.3.18
css3渐变
线性渐变:
linear-gradient为 线性 渐变颜色(括号内颜色可以添加多个,多种颜色渐变)
注意事项:
- 第一个参数定义方向,渐变的方向(选填)
- 第二个往后为颜色参数,有多少个颜色就填多少个参数
- 括号第一个参数填写度数可让渐变旋转角度
- 括号里颜色后面跟数值可以让颜色纯色位置保持数值大小,从而使渐变区域变小、可控
1 | .box{ |
镜像渐变:
radial-gradient
除第一参数,其余同上
第一参数:
1 | .box{ |
11.18(javascript)
变量交换:
方式1
1 | a = a + b |
方式2
1 | var c = a + b; |
方式3
1 | [a,b] = [b,a] |
次方计算:
Math.pow(x,y) = x^y
Math.pow(2,2) = 4
Math.pow(2,3) = 8
Math.pow(2,4) = 16
11.20
定义数组 var arr = [1,1,5,5,6,8,4,7,5,6]
多维数组转一(指定数值)维数组
flat(x)
语法:数组名.flat(x)
多维数组
二维数组[[12,13],[20,30]]
三维数组[iii,didi,bilibili,[acac,[45,46],[12,15],48],aaa,bbb]
….多维数组
删除数组数据
数组名.length = x
x为删除数组数据到第几项
11.23
js块级域
使用花括号括起来的代码为块级域
1 | { |
let —— 作用于块级域中的变量定义
ECMAscript 6(ES6)中的语法
1 | { |
11.24
数组常用方法
1 | 增加数据: |
栈内存和堆内存
Item
forEach
map排序(冒泡排序)
1 | map() |
Sort升降序
sort ( function(a,b){ return a-b; } )
filter(塞选、过滤)
11.25
创建随机数[0,1). 范围为0~1的范围
1 | 创建随机数[0,1). 范围为0~1的范围 |
字符串
字符串分割(可讲字符串转成数组)
1 | 字符串分割(可讲字符串转数组) |
字符串截取
1 | substring: |
字符串替换(也可用于数据替换)
1 | str.replace(要替换的字符串,替换上去的字符串) |
字符串转大小写
1 | var 变量名 = 'good good study,day day up' |
去除空格:
1 |
|
string字符串形具有不可变性
some循环查找(只要有一个条件成立将退出循环)——方法
相当于while循环查找指定值,查得到为true(查到第一个后续不在查找)查不到为false,并返回布尔值,可用变量存储
1 | 语法: |
=>指向
a => b
相当于将一个判断条件,或者运算值附给变量
1 | a => b // 将b的值附给a |
11.26
时间获取Date()
1 | 创建时间对象: |
11.27
对象解构附值
1 | var 对象名 = {name:'小明',age:20,sex:'男',love:'study'} |
11.30
对象名.属性名 和 对象名[属性名] 的区别
区别:前者的属性名有要求,属性之间不能有空格,并且为固定值
后者用中括号的一般是变动的值(比如变量,和变化的键名key)
1 | 对象名[属性名] 和 对象名['属性名'] 的区别 |
12.1
this
1 | this 表示 当前对象 |
set去重
去除数组中重复的项
1 | var arr = [1,2,4,4,5,4,6,7,8] |
12.3
数组填充
给数组填充内容
1 | 数组名.fill(填充内容) |
12.4
用变量填充对象的键名需使用[a] 中括号框起来
1 | var arr = [] |
12.8
立即执行函数:
自适应函数.
作用:避免变量冲突
1 | // 立即执行函数()(); |
12.10
let区域变量定义:
let不存在预解析,使用时需要在使用变量之前使用let定义变量
12.14
Array.from()转数组
作用 : 用于将伪数组转为正常数组
语法:Array.from(伪数组) 伪数组可以是变量存的伪数组
语法:
1 | function fn1(){ |
…数组解构:
通过在数组前写…
可将数组解构成()包裹的形式,也就是单个单个的项
1 | var arr = [1,30,20] |
…[‘数’,’组’,’解’,’构’] ==>. (‘数’,’组’,’解’,’构’)
…字符串解构 ==> 字 符 串 解 构
注意⚠️:将数组或字符串框架拆碎,元素掉落
…还可以用于对象
…转数组
javascript确认框
1 | window.confirm("sometext"); |
change事件:
onchange 事件会在域的内容改变时发生,
onchange 事件也可用于单选框与复选框改变后触发的事件。
查找元素下表的方法indexOf.call :
1 | let index = [].indexOf.call(mts.parentNode.querySelectorAll('li'),mts) |
利用数组里的indexOf内容查找下标
语法:
1 | [].indexOf.call() |
对象严格判断:
作用:判断两个对象是否严格意义上一样
Object.is(参数1,参数2)
参数1 和 参数2 比较
例 :
Object.is(NaN,NaN); 返回值为true
Object.is(100,’100’); 返回值为false
jQuery拓展
$.Deferred等待异步代码执行完毕执行其他函数(一般用在定时器)
.done()里边传
1 | let dfd = $.Deferred() |
javascript高级
立即执行函数
像这样两个小括号堆起来的函数就叫立即执行函数
特点 :会立即执行,也可用变量保存起来
1 | // 立即执行函数 |
对象扩充方法assign
assign()
参数1:要扩充的对象
参数2以后的参数为扩充的对象
1 | var obj = {}; |
toString和String的区别
1 | toString不能转undefined和null |
2021
URL.createObjectURL()方法
此方法可以将文件对象生成一个url地址(blob类型地址)
将文件对象放到括号里,就会返回一个地址字符串
一般用于上传图片实时预览
1 | let url = URL.createObjectURL(formdata.flies[0]) |
css新增内置计算方法calc()
用于计算
1 | .box{ |
html块元素限制两行,多余文字显示(…)
-webkit-box-orient元素内容布局方式
-webkit-line-clamp元素内容行数限制
超出内容隐藏text-overflow: ellipsis;
word-break: break-all; 长单词不换行问题
1 | /* 盒子内容垂直布局 */ |
ES6模块化(企业常用)
ES6 模块化导入/导出
注意⚠️:两种方式必须配合着使用,不然会出错。
方式一
1 | // ES6 模块化导出 |
方式二
1 | // ES6 模块化导出 |
导入导出需在运行web服务的情况下才有用
user-select阻止选取内容(css样式)
user-select:auto (默认可选取)
user-select:none(不可选取)
vue
tamplate模版为html5新增标签,但并非dom元素,而是一个结构模版,不会生出DOM,只会根据template标签内容生产DOM
1 | <template> |
output 和 break
用output和break包括的循环嵌套会全部停止
1 | output |
对象的解构赋值
1 | var obj = {name:"张三",age:20,stu:{love:"coding"}} |
对象的删除
1 | delete obj.name |
对象的解构
1 | Object.setPrototypeOf() |
ES6对象内置类
Object.fromEntries() - ES10语法
解决问题:二维数组转对象
用法:
1 | var a = [['name','张三'],['age',20]] |
Number.Max_SAFE_INTEGER 数字整型最大值
=9007199254740991
BigInt() 转大整型
1 | let num = Number.Max_SAFE_INTEGER |
localeCompare()
字符串的api,用来比较字符串的ascii码大小,多用于sort冒泡排序,而中文在ASCII码表中是以字的拼音字母排序的
语法:
1 | str1.localeCompare(用来比较的字符串,locales) |
返回值为一个 1和-1
比如:
1 | let arr = ['李四','阿飞','张三'] |
set[].has()判断set数组中是否包含某项数据
1 | let str = "张三" |
ES10可选参数:
1 | function fn(a){ |
PYTHON
1 | __mro__ 可以打印面过程 |