2020.4.10 Javascrpit

发布于 2020-04-10  17 次阅读


1.复习内容

  • em单位
    • 默认是父元素字体大小,1em=16px
  • 行内元素
    • 是包裹内容的,text-align不生效
    • text-align: justify(是两端对齐)

2.灵感代办

  • 学的东西可以做出什么东西

3.学习内容

  • 文本溢出,背景图片处理

    • 溢出容器,要打点展示

      • 单行文本

        • 三件套 解决单行截断

          • white-space:nowrap 不换行
          • overflow:hidden 超出隐藏
          • text-overflow:ellipsis; 圆点显示
        • 包裹文字的要是块元素
    • 多行文本

      *   后端判断前端展示多少字符
      *   只做截断,不做打点
      
      • overflow:hidden
  • 当网速不好,会屏蔽js和css

    *   动态添加的图片元素一般都是IMG标签的图片,不动的一般都是背景属性设置
    
    • 处理方法:把文字进行缩进,text-indent:,然后不能换行white-space:nowrap;在设置超出隐藏overflow:hidden;文本内容就会被图片顶出去,如果图片不加载,则显示文字
      • padding里面可以填充图片,高度设置为0,padding-top设置为实际宽度,然后设置overflow:hidden;文本内容就会被图片顶出去,如果图片不加载,则显示文字
    • 元素嵌套规则

      • 行级元素只能嵌套行级元素
      • 块级元素可以嵌套任何元素
    • p是例外,不能用p套住div
      • a标签不能套a标签
    • inline inline-block都是文本类元素

      • 具有文本类特点(文本之间会有分隔符)
    • 只要文本类元素途中有空格,就会被分割,(一个空格)
      • 解决办法就是直接去掉空格
    • 自动转换为inline-block的属性

      • position:absolute
    • float:left/right
      • display:inline-block
    • 行内块块元素对其

      • 行内块元素有问题,行内块外的对其是和文本底部对齐
      • verity-align:设置属性
  • Javascript

    • 1.网页中常用在:

      • 网页动态效果,用户交互,实现网络请求,游戏制作等
    • 2.组成(主要的三部分):

      • 核心语法(ECMAScript)版本区别很小
      • BOM(浏览器对象模型)window对象
        • 提供浏览器窗口操作的方法
      • DOM(文档对象模型)document对象
        • 操作HTML文档的方法
    • 3.如何使用:

      • 1.元素绑定事件

        • 事件:用户的行为或者元素的状态:
        • 事件处理:元素监听到时间发生后做出的响应
        • 事件名称(常用):
          • onclick() 单击事件
          • ondblclick(双击事件)
        • 语法:
          • 将事件名称以便签属性的形式绑定到元素上
      • 2.内嵌方式

        • <script type=“text/javascript”></script>书写js语句
        • 标签可以书写任意位置,浏览器解析到script会执行内部脚本代码
        • type属性标明类型,src标明外部路径
      • 3.外链方式

        • 创建外部的JS文件(.js)
        • script src=“引入”,引入就不要再使用内嵌方式书写代码
    • 4.语法规范:

      1. JS区分大小写
      2. JS可以结尾可以加分号,避免意外错误
      3. Js注释 //单行 、/** 多行 **/
    • 5.输出语句

      • console.log(“”) 控制台输出
      • alert(“”) 网页警告框
      • prompt(“”) 带输入框的弹框
      • document.write(“”) 在网页中输出,可以识别标签语法
        1. 代码的书写位置极为添加位置
        2. 使用元素绑定的方式去动态添加,因为页面已经加载完毕,所以会将页面覆盖重写
    • 变量声明

      • 字母数字下换线$组成
      • 变量声明用var,省略var就是全局变量
      • 常量用const来定义
      • undefined 没有赋值的变量
      • 引用未声明对象,报错is not defined
      • 变量提升,先使用 后声明(执行js之前,会检索所有的var关键字声明,只要有声明就不会报错is not defined,显示undefined)
      • 变量声明用多个单词,小驼峰表示,getElementById()
      • 保留n位小数位,toFixed(n)
    • 数据类型

      1. 基础数据类型(值)

        1. number
        2. string
        3. boolean
        4. undefined
        5. null(是object类型)
        6. chrome等浏览器打印类型可能会有一些不同,带引号的是字符串,string也是字符串
      2. 引用类型(对象)

      3. 检测数据类型typeof()

    • 数据类型转换

      1. 强制类型转换

        • 转换字符串 object.toString()
        • 转换number
          1. Number(n) 将变量n转换为number值,返回转换后的结果,如果有非Nomber字符,转换就失败,返回NaN(not a number ,计算机无法操作的数据)
          2. parseInt(n)/parseFloat(n)解析number部分(方法属于字符串类型)传递一个参数,参数不是是字符串会转成字符串类型(true也会被转为字符串类型),每一位都进行转换操作,遇到解析失败,停止解析,返回转换的结果
          3. 转化布尔值
            1. Boolean()将变量转化布尔值,除了空值,其余都是真
      2. 自动类型转换

        1. 字符串与其他类型+运算,一律按照字符串拼接
        2. 其他情况下,自动转成Numer,参与数学运算
          1. 字符串与其他类型做非加法运行
          2. 布尔进行运算
          3. Number值与其他类型进行数学运算
      3. 运算符

        1. 赋值运算符 =
        2. 数学运算符 + -
        3. 复合运算符 += -=
        4. 自增自减运算符 ++ --
          1. 单独使用:就是加一或者减一,字符串自动转换为数字
          2. 复合使用:要看具体情况
        5. 比较运算符/关系运算
          • === 全等:是严格比较,类型一致,值相等
          • !== 不全等:
          • == 综合比较,值相等
          • 关系运算一定是布尔值
          • 运算规则,
            • 字符串之间比较是Unicode编码值,也是一位比较出大小,就返回结果
            • 其他情况(数字跟字符串比较,布尔和数字比较,等等)也是转换Number进行比较
            • NaN参与运算,一律是false
        6. 逻辑运算符 && and ,|| or

4.扩展延伸知识

5.知识内容个人梳理

  • float浮动元素:

    • 最开始是为了展示报纸效果而设立
    • 对行内块元素,行内元素,不遮挡显示,但是不被遮挡的前提是不能设置float属性,要是块元素
  • !important

  • 三大元素总结:行内元素,块元素,行内块元素

    • 行内元素:

      • (1)设置宽高无效
      • (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
      • (3)不会自动进行换行
    • 块状元素

      • (1)能够识别宽高
      • (2)margin和padding的上下左右均对其有效
      • (3)可以自动换行
      • (4)多个块状元素标签写在一起,默认排列方式为从上至下
    • 行内块状元素

      • (1)不自动换行
      • (2)能够识别宽高
      • (3)默认排列方式为从左到右
  • 换行的几种方法

    • 1. 强制不换行

      div{
          white-space:nowrap;
      }

      2. 自动换行

      div{
          word-wrap: break-word;
          word-break: normal;
      }

      3. 强制英文单词断行

       div{
          word-break:break-all;
       }

6.今天都复习了之前的什么内容


Ares个人进阶之路