04前端开发js开始
溢出属性
#文本内容超出了标签的最大范围
overflow: hidden; 直接隐藏文本内容
overflow： auto\scroll; 提供滚动条查看
#溢出实战案例
div{
overflow: hidden; #例如可以把头像多余溢出部分隐藏
}
div img{
width: 100%; #把头像比例放在和div差不多
}
常用于头像
定位操作
#1.定位的状态
1.静态定位 static
所有的标签默认都是静态定位，即不能通过定位操作改变位置
2.相对定位 relative
相对于标签原来的位置做定位
3.绝对定位 absolute
相对于已经定位过的父标签做定位
4.固定定位 fixed
相对于浏览器窗口做定位
#2.定位操作
position
left/right/top/bottom
绝对定位
如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位
eg:小米商城购物车
固定定位
eg：右下方回到底部
position: fixed
right: 0;
bottom:50px; #比如小米购物车无论如何滑动，一致再页面贴在右边距离下面50px的位置（固定位置）
z-index属性
"""前端界面其实是一个三维坐标系 z轴指向用户"""
动态弹出的分层页面 我们也称之为模态框
#补充知识
rgba（128，128，128，0.5）#前面三个数字正好调成灰色，0.5表示透明度，0-1之间调节
position： fixed;
left: 50%
top: 50%
margin-left: -200px;
margin-top: -100px;
课堂练习
1.先用div和span勾勒出页面轮廓
标签的class和id值最好也做到见名知意
2.再编写html
3.最后编写css
"""
我们现在所写的页面 没有做响应式布局 页面内容会随着浏览器窗口的变化而出现错乱现象
这个目前不要考虑 后面框架自带处理机制
"""
#无序列表
list-style-type: none;
padding-left：0；
#阴影渲染
box-shadow
JavaScript简介
#1.JavaScript与Java没有半毛钱关系
之所以叫这么个名字纯粹是为了蹭当时Java的热度
#2.JavaScript简称JS 也是一门前端的编程语言
前端由于非常受制于后端，所以有一些人异想天开想要通过js来编写后端代码一统江湖
由此开发了一个叫nodejs的工具（支持js跑在后端服务器上）>>>:不好用
#3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug
为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方（成了大家墨守成规的东西）
#4.JavaScript与EMASScript
JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名
#5.版本问题
ECMA5
ECMA6
变量与注释
"""
编写js代码的位置
1.pycharm提供的js文件
2.浏览器提供的js环境（学习阶段）
"""
#1.注释语法
//单行注释
/*多行注释*/
#2.结束符号
分号结束 console.log("hello world"); #相当于python里面的input
#3.变量声明
在js中定义变量需要使用关键字声明
1.var
var name = "jason"
2.let
let name = 'jason'
'''var声明都是全局变量 let可以声明局部变量'''
#4.常量声明
const pi = 3.14 #无法修改
数据类型
"""
查看数据类型的方式
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、
#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中布尔值是全小写
ture 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]
1.追加元素
js中使用push() python中使用append()
2.弹出元素
js和python都用的pop()
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)})
'''
VM169:1 jason
VM169:1 tony
VM169:1 kevin
VM169:1 oscar
VM169:1 jerry 相当于枚举法
'''
l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
'''
VM265:1 jason 0
VM265:1 tony 1
VM265:1 kevin 2
VM265:1 oscar 3
VM265:1 jerry 4 第一个参数按照顺序，第二个参数为所在位置
'''
l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
'''
VM332:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM332:1 tony 1 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM332:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM332:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM332:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] 第三个参数是数据来源值
'''
7.splice
splice（起始位置，删除个数，新增的值）
浙公网安备 33010602011771号