前端微讲解(四)
作者：互联网
前端微讲解(四)
溢出属性
当内容超出的了标签的最大范围，就会造成溢出现象，就象一碗水多了就会漫出来。
# 溢出属性标签
overflow: hidden; # 直接隐藏溢出的内容
overflow: auto/scroll; # 提供滚动条查看
定位属性
# 1.定位状态
1.static:静态定位，所有的标签默认的都是静态定位，意思就是不能通过定位操作改变位置
2.relative:相对定位，相对于标签原来的位置做定位
3.absolute:绝对定位，相对于已经定位过的父标签做定位，如果没有父标签或者父标签没有定位，就以body为准，相当于变成了相对定位
4.fixed:固定定位，相对于浏览器窗口做定位
z-index属性
前端界面其实是一个三维坐标系，z轴指向用户，动态弹出的分层界面我们也称之为模态框。
# 调整颜色透明度
rgba(128,128,128,0.3) # 最后一个参数可以调整颜色透明度，默认是1
# 模态框代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(128,128,128,0.3);
z-index: 10;
}
.c2 {
height: 200px;
width: 200px;
background-color: wheat;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
position: fixed;
z-index: 20;
}
</style>
</head>
<body>
<div>最底层</div>
<div class="c1"></div>
<div class="c2">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
</div>
</body>
</html>
JavaScript简介
JavaScript简称js,js与java没有一点关系，之所以叫这个名字就是为了蹭当时Java的热度。js是一门前端的编程语言，js最初是由一个程序员花了七天时间开发的，里面有很多的bug，为了解决这些bug一直在编写相应的补丁，可是补丁本身又有bug，所及就导致了js中有很多不符合逻辑的地方，最后成了大家墨守成规的东西。由于前端非常受制于后端，所以就想要通过js来编写后端，然后就发明了nodejs，支持js跑在后端服务器，但是不好用。
js变量与注解
# 1.注解
1.单行注解://
2.多行注解:/**/
# 2.结束符号
分号结束';'
# 3.变量声明
js定义变量需要用关键字声明
1.var
用法:var name = 'oscar'
2.let
用法:let name = 'oscar'
'''var声明的都是全局变量，let可以声明局部变量'''
# 4.常量声明
const pi = 3.14
'''const定义的常量只有const可以修改，其他关键字不可做修改，否则就会报错'''
js数据类型
# 1.js查看数据类型的方式
typeof(变量名/变量值)
# 2.数值类型(相当于python里面的整型int和浮点型float)
Number:数值类型
NaN:属于数值类型，意思是不是一个数字
praseInt(变量名/变量值):是整数就会返回整数，带小数点只会返回小数点前面的数字，不是数字不会报错，返回NaN
praseFloat(变量名/变量值):只要是数字无论是整型还是浮点型都会返回相同的数字，不是数字不会报错，返回NaN
# 3.字符串类型
String:字符串类型，默认只能是单引号和双引号
1.格式化字符串(小顿号)
var name = `oscar`
2.字符的拼接
js推荐使用加号
3.统计长度
js中使用length,python使用len(),length的用法是变量名或者变量值加点调用length即可
4.移除空白
js中使用的是trim()、trimLeft()、trimRight()，python中使用的是strip()、lstrip()、rstrip()。但是js中的方法不能指定字符，python中的方法可以。
5.切片操作
js中使用substring(start,stop)、slice(start,stop)，前者不支持负数索引，后者支持，python中使用的是[index1:index2]
6.大小写转换
js中使用.toLowerCase()、.toUpperCase()，python中使用lower()、upper()
7.切割字符串
js中和python中使用的都是split(),但是有区别
8.字符串的格式化
js中使用小顿号格式化字符串，python中使用%或者format
var name1 = 'oscar'
console.log(`myname:${name1}`)
# 4.布尔类型(相当于python中的布尔值)
Boolean:布尔类型，js中的布尔类型的值全是小写
布尔值为false的:0、空字符串、null、undefined、NaN
null的意思是空，undefined的意思是没有定义。
# 5.对象(相当于python中的列表、字典、对象)
Array:数组，相当于python的列表
1.追加元素
js使用push(),python使用append()
2.弹出元素
js和python都用pop()，但是js中的不能指定弹出
3.头部添加元素
js中使用的是unshift()，python中使用的是insert()
4.头部移除元素
js中使用shift()，python中使用pop(0)或者remove()
5.扩展列表
js中使用concat(),python中使用extend()
6.forEach():方法用于调用数组的每个元素，并将元素传递给回调函数，对于空数组不会执行回调函数。
var l2 = ['jason', 'tony', 'kevin', 'oscar', 'jerry']
l2.forEach(function(arg1){console.log(arg1)})
jason
tony
kevin
oscar
jerry
l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
jason 0
tony 1
kevin 2
oscar 3
jerry 4
l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
tony 1 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
7.splice
splice(起始位置,删除个数,新增的值),前两个参数都是必须填写的，而且必须是数字，第三个参数不必须填写。
这里是IT小白陆禄绯，欢迎各位大佬的指点！！！
标签：jason,python,oscar,前端,js,讲解,tony,kevin 来源： https://www.cnblogs.com/pyqsy/p/16200054.html