前端知识点回顾

简述前端开发三要素

  1. html
    • 超文本标记语言

      网页-结构

  2. css
    • 层叠样式表

      网页-节点-外观

  3. JavaScript
    • 脚本语言

      控制-网页-节点-行为

简述div和span标签的作用

  1. div
    • 块级标签：display-block
    • 可设置宽高，可放置其它标签
  2. span
    • 行内标签：display-inline
    • 不可设置宽高，只能放置文本、图片、表单

简述img、a、form等常见标签用法

  1. img
    • src：本地-相对路径、网络-http开头
    • alt：加载异常
    • title：鼠标悬浮
    • width、height、again
  2. a
    • href：链接地址、JavaScript:void(0);
    • target：_blank、_self
    • title：鼠标悬浮
  3. form
    • 参数

      action：数据提交位置
      method：post、get

    • label：for
    • input

      name、value
      text：文本
      password：密码
      radio：单选框
      checkbox：多选框
      * checked 选中
      submit：提交按钮
      button：按钮
      file：文件
      reset：重置

    • select

      option
      selected 选中
      size 大于1滚动视图
      multiple 多选

    • textarea

      rows
      cols

  4. table
    • tr

      th

    • tr

      td

简述块元素和行内元素各自特点

  1. 块级标签
    • div、p、h、ol、ul、table、form、li
    • 独占一行
    • 可设置宽高
  2. 内联标签
    • 行内标签

      a、span、br、i、em、strong、label
      不换行
      不可设置宽高

    • 行内块状标签

      img、input
      不换行
      可设置宽高

简述CSS在HTML中的引用方式

  1. 定义标签时直接附加属性style
  2. style
  3. link

简述元素的id和class属性含义

  1. id是标签的唯一标识
    • js
  2. class不唯一
    • css

简述什么是选择器及常用选择器

  1. 相当于一个标签过滤装置
  2. 类型
    • 标签、类（css用）、id（js用）
    • 后代、子代、组合
    • 交集（标签.类）
    • 伪类

      ：before
      * 配合content，在之前加入内容
      ：after
      * 配合content，在之后加入内容
      ：nth-child（n）

    • 属性

      input[type="text"]

  3. 优先级
    • 内联 1000
    • id 100
    • 类 10
    • 标签 1

      先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
      如果没有被选中标签元素，权重为0。如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性

简述CSS边框常用样式

  1. border-width: 3px;
  2. border-style: solid、none、double;
  3. border-color: red;
  4. border：10px solid black；

简述如何定义超链接伪类

  1. a:link 访问前
  2. a:hover 鼠标悬浮
  3. a:active 鼠标按住
  4. a:visited 访问后

简述什么是盒子模型

  1. 方便网页-排版-布局
    • 宽高
    • 内边距 padding
    • 外边距 margin
    • 边框 border

简述float、position等用法

  1. float
    • 并排显示

      宽度由内容决定

    • 不区分块状和行内

      block-不再独占一行
      inline-可设置宽高

    • 脱离父元素范围

      不脱离-清除浮动

  2. position
    • relative-位置微调
    • absolutely-脱标-参考点relative父级
    • fixed-脱标-侧边栏

简述什么是JavaScript

  1. 脚本语言-网页节点行为控制
    • ECMAscript6
    • DOM

      文档对象模型

    • Bom

      浏览器对象模型

简述JavaScript在HTML中的引用方式

  1. script-head入口函数-body最底部
  2. script src

如何定义JavaScript变量

  1. var
    • 全局作用域
    • 函数作用域
  2. let
    • 块级作用域{}
  3. const
    • 常量-块级作用域

简述JavaScript基本数据类型

  1. number
  2. string
  3. boolean
  4. null
  5. undefined
  6. Object对象-引用类型
    • Array
    • Function
    • Date

简述JavaScript字符串常用内置属性与方法

  1. String
    • 属性

      length

    • 方法

      charAt（index）指定索引字符
      indexOf（字符）返回下标
      a.concat(b) 字符串拼接
      split（'a'）以字符'a'分隔
      a.replace(b,c) 替换
      slice（1，3）提取
      trim（）去除两边空白
      toLowerCase
      toUpperCase

简述JavaScript数组常用内置属性与方法

  1. Array 数组
    • 属性

      length

    • 方法

      a.concat（b）把数组合并
      a.join（'|'）返回字符串
      pop（移除最后一个元素，返回元素）
      push（数组后面添加一个元素，返回新长度）
      shift（移除第一个元素）
      unshift（第一个元素之前添加一个或多个元素，返回长度）
      slice（返回一段数组）
      splice（删除自定义数组元素）
      sort（数组排序）
      reverse（数组反转）
      indexof（返回元素下标）
      forEach(function(){})

    • 清空数组的方式

      array.splice(0);
      array.length = 0;
      array = [];

简述JavaScript对象常用的内置属性和方法

  1. document-文档对象
    • 获取js对象

      getElementById
      getElementsByTagName
      getElementsByClassName

  2. Dom访问关系
    • 父级

      节点.parentNode # 父节点

    • 兄弟级

      节点.nextSibling # 下一个兄弟节点
      节点.previousSibling # 上一个兄弟节点

    • 子级

      节点.firstChild # 第一个子节点
      节点.firstElementChild # 第一个子元素节点
      节点.lastChild # 最后一个子节点
      节点.lastElementChild # 最后一个子元素节点
      节点.childNodes # 获取所有子节点集合
      节点.children # 获取所有子元素节点集合，用的最多

    • 节点.parentNode.children[index] # 获取任意一个兄弟节点
    • 创建节点

      document.createElement("标签名")

    • 插入节点

      父节点.appendChild(子节点)
      父节点.insertBefore(子节点)

    • 删除节点

      父节点.removeChild(子节点)

    • 删除自己

      my.parentNode.removeChild(my)

    • 复制节点

      节点.cloneNode()
      false：只复制本身
      true：复制本身和子节点

    • 获取属性

      节点.属性
      节点[属性]
      节点.getAttribute("属性名")

    • 设置属性

      节点.setAttribute("属性名","属性值")

    • 删除属性

      节点.removeAttribute("属性名")

  3. window.onload()
  4. Date 日期对象
    • date = new Date()
    • date.getFullYear() 年
    • date.getMonth() 月
    • date.getDate() 日
    • date.getDay() 星期
    • date.getHours() 小时
    • date.getMinutes() 分钟
    • date.getSeconds() 秒
    • date.toLocalString()
  5. Math
    • floor
    • ceil
    • max
    • min
    • Math.random() 随机生成0到1之间到数字

简述JavaScript if 判断为false的情况

  1. false
  2. 0、-0
  3. null
  4. ""空字符
  5. NaN = Number（"非数字"）
  6. 未初始化的变量
  7. undefined # 报错

简述JavaScript 循环的基本用法

  1. for(var i=1; i
  2. 数组.forEach(函数（item,index）{})
  3. while
  4. do while

简述JavaScript 函数基本语法格式

  1. function 函数名（形式参数）{}
  2. 函数名（实参）；

简述JavaScript作用域

  1. 全局作用域
  2. 函数作用域
  3. 块级作用域

简述JavaScript typeof 用法

  1. typeof
    • number string boolean object function undefined
  2. 原型对象Object.prototype.toString.call(Array)
    • delete Array.prototype.toString;
    • a.toString();
  3. 实例 instanceof 对象

简述JSON是什么，以及JavaScript实现

  1. json对象 = JSON.parse("字符串")
  2. 字符串 = JSON.stringify(json对象)

简述浏览器常见对象的用法

  1. window对象-js中的顶级对象
    • open(url,target)
    • close()
  2. location对象
    • 属性

      href：跳转
      hash 返回url中#后面的内容，包含#
      host 主机名，包括端口
      hostname 主机名
      pathname url中的路径部分
      protocol 协议 一般是http、https
      search 查询字符串

    • 方法

      reload
      replace("http://www.baidu.com")
      navigator
      userAgent 系统
      platform 支持的系统
      history
      back
      go(-1)
      forward
      go(1)

  3. localStorage对象
    • getitem
    • setItem
    • removeItem

简述AJAX原理

  1. 异步的javascript和XML（Asynchronous Javascript and XML）
  2. 在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON同时您能够把这些外部数据直接载入网页的被选元素中
    • get()方式
       url:'./data/index.txt',
 type:'get',
 dataType:'text',
 success:function(data){
    $('p').html(data);
 },
 error:function(error){
    console.log(error)
 }```
    • post()方式
         url:'/index',
   type:'post',
   data:{name:'张三',age:12},
   success:function(data){
      $('p').html(data);
   },
   error:function(error){
      console.log(error)
}```

简述对this对象的理解

  1. 表示当前作用域的指向对象
    • 全局环境

      默认指向window

    • 局部环境

      对象内调用，指向该对象

  2. call（重定向的对象，实参1，实参2）
  3. apply（重定向的对象，[实参1，实参2]）
  4. bind（重定向的对象，实参1，实参2）()

如何阻止事件冒泡和默认事件

  1. 事件流
    • document.addEventListener（事件，程序，true） # document捕获阶段
    • document.documentElement.addEventListener（事件，程序，true） # html捕获阶段
    • document.body.addEventListener（事件，程序，true） # body捕获阶段
    • oBtn.addEventListener（事件，程序，true） # 具体事件捕获阶段
    • oBtn.addEventListener（事件，程序，false） # 具体事件冒泡阶段
    • document.body.addEventListener（事件，程序，false） # body冒泡阶段
    • document.documentElement.addEventListener（事件，程序，false） # html冒泡阶段
    • document.addEventListener（事件，程序，false） # document冒泡阶段
  2. 阻止事件冒泡
    • event.stopPropagation() # 不再派发事件
    • return false;
  3. 阻止默认事件
    • event.preventDefault() # 通知浏览器不要执行与事件关联的默认动作

jQuery 与 Bootstrap 基本概念

  1. jQuery
    • js库，封装常用功能
    • $('选择器')
    • 优点

      入口函数覆盖问题
      兼容性好
      代码简洁
      动画效果更容易实现

  2. Bootstrap
    • 开发响应式布局

      自适应的页面

    • 官方文档已经实现好的demo
    • 提高开发效率
    • 现成的css样式类

相关

标签