前端开发(4)

• 溢出属性

• 定位

• z-index

• JavaScript简介

• 数据类型

• 控制流程

• 函数与对象

• BOM与DOM操作

 

溢出属性

# 文本内容超出了标签的最大范围
overflow：hidden;        直接隐藏文本内容
overflow: auto\scroll;      提供滚动条查看
   
# 溢出实战案例
    div{
            overflow:hidden;
    }
    div img{
        width:100%
    }

定位属性

# 1.定位的状态
    1.静态定位      static
        所有的标签默认都是静态定位即不能通过定位操作改变位置
    2.相对定位      relative
        相对于标签原来的位置做定位
    3.绝对定位      absolute
        相对于已经定位过的父标签做定位
    4.固定定位      fixed
        相对于浏览器窗口做定位
# 2.定位操作
    position
    left\rigth\top\bottom
    绝对定位
        如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位
    固定定位
        eg：右下方回到底部
            position：fixed;
            rigth:0;
            bottom:50px;
                

z-index属性

"""前端界面其实是一个三维坐标系 z轴指向用户"""
动态弹出的分层界面 我们也称之为模态框
# 补充知识
    rgba(128,128,128,1) 最后一个参数可以调整颜色透明度
  
position：fixed；
left：50%；
top：50%；
margin-left: -200px;
margin-top: -100px;

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 = 'faker'
    2.let
        let name = 'faker'
    '''var声明都是全局变量 let可以声明局部变量'''
# 4.常量声明
    const pi = 3.14

数据类型

"""
查看数据类型
    typeof
"""
# 1.数据类型(相当于python里面的整形int和浮点型float)
    Number
    NaN:属于数值类型 意思是'不是一个数字'(not a number)
    parseInt('aaa') 不报错返回NaN
    parseFloat('abc') 不报错返回NaN
   
# 2.字符类型(相当于python里面的字符串str)
    String
    默认只能是单引号和双引号
        var name1 = 'faker'
        var name2 = "faker"
   格式化字符串小顿号
        var name3 = `faker`
    1.字符的拼接
        js中推荐使用加号
    2.统计长度
        js中使用length python中使用len()
    3.移除空白
        js中使用trim() trimLeft() trimRigth()
        python中使用strip() lstrip() rstrip()
    4.切片操作
        js中使用substring(start,stop) sline(start,stop)
            前者不支持负数索引后者支持
        python中使用[index1:index2]
    5.大小写转换
        js中使用.toLowerCase() .toUpperCase()
        python中使用lower() upper()
    6.切割字符串
        js中和python都是用split() 但是有点区别
            1、在js中，"".split("")会返回[],
                在py中，"".split()会返回[]，
            2、在js中，split不传递分隔符的话，会这么返回，"xxxxxx".split()  返回   ["xxxxxx"]
            在py中，split不传递分割符的话，会这么处理：whitespace 或者连续的whitespace 会被当作是分隔符
             在js中，"".split()返回[""]，在py中，"".split()返回[]
            在js中，"       ".split()返回["        "]，在py中，"           ".split()返回[]
            var s1 = 'baby come on oh god'
            s1.split('')
                ['baby','come','on','oh','god']
            s1.split('',1)
                ['baby']
            s1.split('',2)
                ['jason','say']
     7.字符串的格式化
        js中使用格式化字符串(小顿号)
            var name = 'faker'
            var age = 18
            console.log(`my name is ${name} my age is ${age}`)    my name is faker my name is 18
            python中使用%或format
   
# 3.布尔类型(相当于python中布尔值bool)
    Boolean
    js中布尔值全是小写
        true false
        布尔值为false的 0 空字符串 null underfined NaN
    python中布尔值首字母大写
        True False
        布尔值为False的 0 None 空字符串 空列表 空字典...
       
    """
    null的意思是空 undefined的意思就是没有定义
    var shadiao = null;
    shadiao
    null
    
    var shaniao
    shaniao
    aa
    underfined
    """
    # 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)})
    VM3143:1 jason
    VM3143:1 tony
    VM3143:1 kevin
    VM3143:1 oscar
    VM3143:1 jerry
      
    l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
    VM3539:1 jason 0
    VM3539:1 tony 1
    VM3539:1 kevin 2
    VM3539:1 oscar 3
    VM3539:1 jerry 4
     
    l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
VM3663:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 tony 1  ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
    7.splice
    splice(起始位置,删除个数,新增的值)