编程语言
首页 > 编程语言> > day41(JavaScript)

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>

z-index示例

今日内容详细

《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字符串类型

img

默认只能是单引号和双引号
    	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);

标签:定位,元素,python,JavaScript,js,数组,var,day41
来源: https://www.cnblogs.com/ister/p/16201013.html