Python工城师的成长————css（溢出属性、定位、z-index）、js简介

今日学习目标

• 熟悉css中剩下的修改属性的方法，开始学习JS内容。

---

---

学习内容

• CSS—溢出属性
• CSS—定位
• CSS—z-index
• JavaScript

---

一、CSS—溢出属性

当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。 【在父标签上进行设置】

overflow的设置项

• visible 默认值, 显示子标签溢出部分。
• hidden 隐藏子标签溢出部分。
• auto 如果子标签溢出，则可以滚动查看其余的内容。

小结

• overflow样式属性是设置子标签溢出的显示方式
• 常用使用overflow:hidden;来解决元素溢出

二、CSS—定位属性

1.定位的状态

1. 静态定位 static
   所有的标签默认都是静态定位即不能通过定位操作改变位置
2. 相对定位 relative
   相对于标签原来的位置做定位
3. 绝对定位 absolute
   相对于已经定位过的父标签做定位
4. 固定定位 fixed
   相对于浏览器窗口做定位

2.定位操作

position：  属性状态
left\right\top\bottom

补充
绝对定位
如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位

三、CSS—z-index

知识前提

1.前端界面其实是一个三维坐标系 z轴指向用户
2.动态弹出的分层界面 我们也称之为叫模态框

作用

定位元素，主要是z轴上的元素。即定义了position为非static的元素

四、JavaScript

1.JavaScript简介

1.JavaScript与Java没有半毛钱关系
之所以叫这么个名字纯粹是为了蹭当时Java的热度

2.JavaScript简称JS 也是一门前端的编程语言
前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用

3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug
为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西)

4.JavaScript与ECMAScript
JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名

5.版本问题
目前主要流行的就是这两个版本，因为IT行业中是有稳定的版本绝不使用最新的版本
ECMA5
ECMA6

2.变量与注释

1. 注释语法

   // 单行注释
   /*多行注释*/
   

2. 结束符号

   分号结束   console.log('hello world');
   

3. 变量声明
   在js中定义变量需要使用关键字声明

   1.var
   var name = 'jason'
   2.let
   let name = 'jason'
   

var声明都是全局变量 let可以声明局部变量
4. 常量声明

const pi = 3.14

补充
编写js代码的位置

1.pycharm提供的js文件
2.浏览器提供的js环境(学习阶段推荐)

3.数据类型

补充

查看数据类型的方式
typeof

1. 数值类型(相当于python里面的整型int和浮点型float)

Number

NaN:属于数值类型 意思是’不是一个数字’(not a number)
parseInt(‘abc’) 不报错返回NaN
parseFloat(‘abc’)不报错返回NaN

2. 字符类型(相当于python里面的字符串str)

String
默认只能是单引号和双引号

var name1 = 'jason'
var name2 = "jason"

格式化字符串小顿号

	var name3 = `jason`

2.1字符的拼接

js中推荐使用加号

2.2. 统计长度

js中使用length python中使用len()

2.3. 移除空白(不能指定)

js中使用trim()、trimLeft()、trimRight()
python中使用strip()、lstrip()、rstrip()

2.4. 切片操作

js中使用substring(start,stop)、slice(start,stop)
	前者不支持负数索引后者支持
python中使用[index1:index2]

2.5. 大小写转换

js中使用.toLowerCase()、.toUpperCase()
python中使用lower()、upper()

2.6. 切割字符串

js中和python都是用split() 但是有点区别
	ss1.split(' ')
  	['jason', 'say', 'hello', 'big', 'baby']
  ss1.split(' ', 1)
  	['jason']
  ss1.split(' ', 2)
  	['jason', 'say']

2.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
  布尔值为false的 0 空字符串 null undefined NaN
python中布尔值时首字母大写
	True False
	布尔值为False的 0 None 空字符串 空列表 空字典...

补充·
null的意思是空 undefined的意思是没有定义

var bb = null;
	bb
null

var aa
	aa
undefined

4. 对象(相当于python中的列表、字典、对象)

数组(相当于python中的列表)

Array
	var l1 = [11, 22, 33]

4.1.追加元素

js中使用push()  python中使用append()

4.2.弹出元素

js和python都用的pop()

4.3.头部插入元素

js中使用unshift()  python中使用insert()

4.4.头部移除元素

js中使用shift()    python中可以使用pop(0) remove() 

4.5.扩展列表

js中使用concat()   python中使用extend()

4.6.forEach
forEach 是操作数组的一种方法，主要功能是遍历数组，其实说穿了，就是 for 循环的加强版，该语句需要一个回调函数，作为参数。回调函数的形参，依次为，value：遍历的数组内容；index：对应的数组索引，array：数组本身。

<script type="text/javascript">
// 分别对应：数组元素，元素的索引，数组本身
var arr = ['a','b','c'];	
arr.forEach(function(value,index,array){
	console.log(value);
	console.log(index);
	console.log(array);
	})
</script>

总结
for 循环比较步骤多比较复杂，forEach 循环比较简单好用，不容易出错。

4.7.splice

splice方法可以用来对js的数组进行删除，添加，替换等操作。

1. 删除功能，第一个参数为第一项位置，第二个参数为要删除几个。

   用法：array.splice(index,num)，返回值为删除内容，array为结果值。
   

2. 插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）。

   用法：array.splice(index,0,insertValue)，返回值为空数组，array值为最终结果值。

   

3. 替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）。

   用法：array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。
   

---