JSday01

溢出属性

# 文本内容超出了标签的最大范围
	overflow:hidden;	隐藏溢出部分
	overflow: auto\scroll;  提供滚动条查看

# 实例
	div {
            overflow: hidden;
        }
	div img {
            width: 100%;
        }

定位属性

# 1.定位的状态
  1.静态定位		static
  	所有的标签默认都是静态定位即不能通过定位操作改变位置,不能当作绝对定位的参照物
  2.相对定位		relative
  	相对于标签原来的位置做定位
  3.绝对定位		absolute
  	相对于已经定位过的父标签做定位
  4.固定定位             fixed
  	相对于浏览器窗口做定位
# 2.定位操作
	position
  left\right\top\bottom
  绝对定位
  	如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位
    	

z-index属性

"""前端界面其实是一个三维坐标系 z轴指向用户"""
动态弹出的分层界面 我们也称之为叫模态框
# 补充知识
	rgba(128,128,128,0.5)  最后一个参数可以调整颜色透明度
'''
	z-index默认值为0 数值大的压住数值小的 
	值一样或为0 则写在后面的元素压在前面的元素
	只有定位了的元素才能有z-index
''''''

JavaScript简介

# 1.JavaScript与Java没有半毛钱关系
	之所以叫这么个名字纯粹是为了蹭当时Java的热度
# 2.JavaScript简称JS 也是一门前端的编程语言
	前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用
# 3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug
	为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西)
# 4.JavaScript与ECMAScript
	JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名
# 5.版本问题
	ECMA5
  	ECMA6

变量与注释

"""
编写js代码的位置
	1.pycharm提供的js文件
	2.浏览器提供的js环境(学习阶段推荐)
	
"""
# 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

数据类型

"""
查看数据类型的方式
	typeof
"""

# 1.数值类型(相当于python里面的整型int和浮点型float)
	Number
	NaN:属于数值类型 意思是'不是一个数字'(not a number)
	parseInt('abc')  不报错返回NaN
	parseFloat('abc')不报错返回NaN

# 2.字符类型(相当于python里面的字符串str)
	String
    默认只能是单引号和双引号
    	var name = 'cc'
        var name = "cc"
    格式化字符串	#小顿号 `
    	var name = `cc`
1.字符串拼接	# 能 Number + String
	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() 但是有点区别
    str2.split('')	# 没空格的话切成单个字符
	str2.split(' ')
    
    str2 = 'ni shi wo di shen'
    str2.split(' ',2)
    # Array [ "ni", "shi" ]		切成数组  
7.字符串的格式化
	js中使用格式化字符串(``)
    	var name = '欧豪'
        var str1 = '神'
        console.log(`
    ${name} 你是我滴 ${str1}
`)

# 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]
1.追加元素
	js中使用push()  python中使用append()
2.弹出元素 # 最后一个元素
  	js	pop()只能移除数组最后一个元素
    python 	pop()默认移除列表最后一个 可加索引
3.头部插入元素
  	js中使用unshift()  python中使用insert()
4.头部移除元素
  	js中使用shift()    python中可以使用pop(0) remove()     
5.扩展列表
  	js中使用concat()   python中使用extend()
    
6.forEach()
	# function(当前元素 必需, 当前索引 可选, 当前元素所属的数组对象 可选)
	var l = ['aa', 'bb', 'cc', 'dd', 'ee']
    # 一个参数
    l.forEach(function(arg1){console.log(arg1)})
    '''
   		aa 
		bb 
		cc 
		dd 
		ee
	'''
	# 两个参数 
    l.forEach(function(arg1,arg2){console.log(arg1,arg2)})
    '''
		aa 0
		bb 1
		cc 2
		dd 3
		ee 4
	'''
    # 三个参数
    l.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
	aa 0 Array(5) [ "aa", "bb", "cc", "dd", "ee" ]
	bb 1 Array(5) [ "aa", "bb", "cc", "dd", "ee" ]
	cc 2 Array(5) [ "aa", "bb", "cc", "dd", "ee" ]
	dd 3 Array(5) [ "aa", "bb", "cc", "dd", "ee" ]
	ee 4 Array(5) [ "aa", "bb", "cc", "dd", "ee" ]

7.splice
  	splice(起始位置,删除个数,新增的值)
    var l = ['aa', 'bb', 'cc', 'dd', 'ee']
    l.splice(0,2,11,22,33)
    # Array(6) [ 11, 22, 33, "cc", "dd", "ee" ]