day41(JavaScript)
今日内容详细
《溢出属性》
溢出属性
文本内容超出了标签的最大范围
overflow: hidden;显然直接隐藏有点不对劲·
overflow: auto\scroll; 提供滚动条查看
hidden
隐藏 隐蔽性
overflow
溢出 溢流
overflow: hidden
相对位置和溢出隐藏
scroll
滚动 滚屏
overflow:scroll
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day4.27</title>
<style type="text/css">
p{
height: 100px;
width: 100px;
border:5px solid seagreen;
overflow: hidden;
overflow: auto;
overflow: scroll;
}
body{background-color: dimgray;}
div{
height: 300px;
width: 300px;
border-radius: 50%;
border: 5px solid red;
overflow: hidden;
float: right;
}
div img{width: 100%;}
#ctx{height: 200px;
width: 200px;
border-radius: 50%;
border: 3px solid green;
overflow: hidden;
float: left;}
#ctx img{width: 100%;}
</style>
</head>
<body>
<p>懵逼树上懵逼果懵逼树下你和我</p>
<div>
<img src="img/ctx1.png" >
</div>
<div id="ctx">
<img src="img/ctx.jpg" >
</div>
</body>
</html>
今日内容详细
《定位属性》
定位属性
static
静态的 静态 静止的
relative
相对的 相关的
absolute
绝对的 纯粹的 绝对定位、
fixed
固定 定点 固定定位
position
位置 职位 定位 部位
static：代表默认值，没有定位，也可以用来取消之前设置的定位值。
relative：相对定位，它的参照物是自己本身，可以通过left、top、right、bottom设置偏移值。它并没有脱离文档流，所以原来所占的位置依然会保留。相对定位并不会影响其他元素的布局。
absolute：绝对定位，它的参照物是包含块，也就是离自己最近的有定位属性的祖先级元素。如果祖先元素都没有定位属性，则默认按照浏览器的窗口（body）来定位。我们可以通过给祖先元素设置position：relative/absolute/fixed来让祖先元素变成包含块，通常情况下，我们会用position：relative来设置祖先元素为包含块，因为它不会脱离文档流，不会对布局造成影响。通过left、top、right、bottom来给绝对定位的元素设置偏移值。绝对定位是脱离文档流的，它原来所占位置不会保留。
fixed;固定定位，fixed参照物是浏览器的整个窗口。也会使元素脱离文档流。也是通过设置left、top、right、bottom来确定位置。
sticky：黏性定位。设置该属性后，只有当滑动到这个位置时，才会生效。生效后效果相当于固定定位fixed。也是通过设置left、top、right、bottom来确定位置。
# 1.定位的状态
1.静态定位 static
所有的标签默认都是静态定位即不能通过定位操作改变位置
2.相对定位 relative
相对于标签原来的位置做定位
3.绝对定位 absolute
相对于已经定位过的父标签做定位
4.固定定位 fixed
相对于浏览器窗口做定位
# 2.定位操作
position
left\right\top\bottom
绝对定位
如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位
eg:小米商城购物车
固定定位
eg:右下方回到底部
position: fixed;
right: 0;
bottom: 50px;
今日内容详细
《z-index属性》
z-index属性
Z-index
层级 空间位置
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
"""前端界面其实是一个三维坐标系 z轴指向用户"""
动态弹出的分层界面 我们也称之为叫模态框
记得加定位属性
<!-- Z-index层叠性原则：
1.同层级元素(或position:static)默认情况下文档流后面的元素会覆盖前面的。（后来居上）
2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，
即z-index越大优先级越高。 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index Demo</title>
<style type="text/css">
div{
width: 200px;height: 200px;
text-align: center;
font-size: 50px;
line-height: 200px;
position: absolute;
}
#red{left: 100px;top: 100px;}
#green{left: 200px;top: 200px;}
</style>
</head>
<body>
<!-- Z-index层叠性原则：
1.同层级元素(或position:static)默认情况下文档流后面的元素会覆盖前面的。（后来居上）
2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，
即z-index越大优先级越高。 -->
<div id="red" style="background: red;z-index: 0;">A</div>
<div id="green" style="background-color: green;">B</div>
<div id="blue" style="background-color: blue;z-index: -1;">C</div>
</body>
</html>
今日内容详细
《JavaScript》
JavaScript简介
JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如：用户名的长度，密码的长度，邮箱的格式等。但是，有的同学可能会有疑问，这些验证，后端不也可以进行验证吗？确实，后端程序的确可以进行这些验证，但你要清楚，在1995年那个年代，网速是非常慢的，向后端发送一个请求，浏览器很久才能得到响应，那这无疑是一种非常不好的用户体验。
JavaScript的使用
标签引用
在HTML中在script标签中就可以编写JavaScript代码，以下是一个简单演示。
<script>
alert('你们怎么突然这么安静 怎么了!!!')
console.log(123)
<!--窗口弹出-->
alert("Hello,World!");
console.log(123)
</script>
变量与注释
"""
编写js代码的位置
1.pycharm提供的js文件
2.浏览器提供的js环境(学习阶段推荐)
"""
# 1.注释语法
单行注释：// 注释内容
多行注释：/* 注释内容 */
# 2.结束符号
分号结束 (;) console.log('hello world');
变量声明
变量的作用是给某一个值或对象标注名称。比如我们的程序中有一个值123，这个值我们是需要反复使用的，这个时候 我们最好将123这个值赋值给一个变量，然后通过变量去使用123这个值。
变量的声明： 使用var关键字声明一个变量。
# 3.变量声明
在js中定义变量需要使用关键字声明
1.var
var name = 'jason'
2.let
let name = 'jason'
'''var声明都是全局变量 let可以声明局部变量'''
4.常量声明
const pi = 3.14
数据类型
数据类型决定了一个数据的特征，比如：123和”123”，直观上看这两个数据都是123，但实际上前者是一个数字，而后者是一个字符串。对于不同的数据类型我们在进行操作时会有很大的不同。
"""
JavaScript查看数据类型的方式用typeof
使用typeof操作符可以用来检查一个变量的数据类型。
"""
JavaScript中一共有5种基本数据类型：
字符串型（String）
数值型（Number）
布尔型（Boolean）
undefined型（Undefined）
null型（Null）
Number数值类型
Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。
Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity。
NaN:属于数值类型 意思是'不是一个数字'(not a number)
parseInt('abc') 不报错返回NaN
parseFloat('abc')不报错返回NaN
Infinity：正无穷
-Infinity：负无穷
NaN：非法数字（Not A Number）
注意：使用typeof检查一个Number类型的数据时（包括NaN 和 Infinity），会返回"number"。
String字符串类型
默认只能是单引号和双引号
var name1 = 'jason'
var name2 = "jason"
格式化字符串小顿号（`）
var name3 = `jason`
1.字符的拼接
js中推荐使用加号
2.统计长度
js中使用length python中使用len()
3.移除空白(不能指定)
js中使用trim()、trimLeft()、trimRight()
python中使用strip()、lstrip()、rstrip()
4.切片操作
js中使用substring(start,stop)、slice(start,stop)
前者不支持负数索引后者支持
python中使用[index1:index2]
5.大小写转换
js中使用.toLowerCase()、.toUpperCase()
python中使用lower()、upper()
6.切割字符串
js中和python都是用split() 但是有点区别
ss1.split(' ')
['jason', 'say', 'hello', 'big', 'baby']
ss1.split(' ', 1)
['jason']
ss1.split(' ', 2)
['jason', 'say']
7.字符串的格式化
js中使用格式化字符串(小顿号)
var name = 'jason'
var age = 18
console.log(`
my name is ${name} my age is ${age}
`)
my name is jason my age is 18
python中使用%或者format
3.布尔类型(相当于python中的布尔值bool)
Boolean
js中布尔值是全小写
布尔型也被称为逻辑值类型或者真假值类型。
布尔型只能够取真（true）和假（false）两种数值。除此以外， 其它的值都不被支持
Null
Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。
undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。
注意：从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。
null的意思是空 undefined的意思是没有定义
Undefined
Undefined 类型只有一个值，即特殊的 undefined。
在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。
注意：使用typeof对没有初始化和没有声明的变量，会返回“undefined”。
对象(相当于python中的列表、字典、对象)
Object类型，我们也称为一个对象，是JavaScript中的引用数据类型。它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个名/值对。对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。除了字符串、数字、true、false、null和undefined之外，JavaScript中的值都是对象。
#创建对象有两种方式：
#1.第一种方式：
var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);
#2.第二种方式：
var person = {
name: "孙悟空",
age: 18
};
console.log(person);
数组
数组也是对象的一种，数组是一种用于表达有顺序关系的值的集合的语言结构，也就是同类数据元素的有序集合。
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据。但是在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关，此处不用纠结，我们大多数时候都是相同类型元素的集合。数组内的各个值被称作元素，每一个元素都可以通过索引（下标）来快速读取，索引是从零开始的整数。
数组(相当于python中的列表)Array
var l1 = [11, 22, 33]
使用typeof检查一个数组对象时，会返回object。
1.追加元素
push()方法演示：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
js中使用push() python中使用append()
2.弹出元素
js和python都用的pop()
pop()方法演示：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回不能指定弹出
3.头部插入元素
unshift()方法演示：该方法向数组开头添加一个或多个元素，并返回新的数组长度
js中使用unshift() python中使用insert()
4.头部移除元素
js中使用shift() python中可以使用pop(0) remove()
shift()方法演示：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回
js中使用shift() python中可以使用pop(0) remove()
5.扩展列表
js中使用concat() python中使用extend()
concat()方法演示：该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响
强烈建议使用赋值操作符（+, +=）代替 concat 方法
代码：
const arr = [1, 2, 3].concat([4, 5])
console.log(arr) // [1,2,3,4,5]
6.forEach
forEach()方法演示：该方法可以用来遍历数组
forEach()方法需要一个函数作为参数，像这种函数，由我们创建但是不由我们调用的，我们称为回调函数。数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传递进来，我们可以来定义形参，来读取这些内容，浏览器会在回调函数中传递三个参数：
value：当前的值
index:当前的索引
array：整个数组
splice()方法演示：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
参数：
第一个参数：表示开始位置的索引
第二个参数：表示要删除的元素数量
第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.splice(3, 2);
console.log(arr);
console.log(result);
result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");
console.log(arr);
console.log(result);
版权声明：本文为赵其辉原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。