JS

  1. 浏览器两个引擎:渲染引擎,JS引擎
  2. 输入:console.log/alert/prompt
  3. 只要有字符串和其他类型相拼接,那么最后就是字符串类型,所以可以利用来进行转换。(因为很多类似表单之类的值传递过来的时候是字符串。
  4. parseInt。可以把字符型转换成数字型,但是取整。减号:"-"也可。
  5. 数组:

    • 创建数组:new,数组字面量
  6. 作用域:

    • 全局:在函数内部,没有声明的直接复制的变量,也是全局变量
    • 局部:函数的形参也可以是局部变量
    • 全局变量只有当浏览器关闭的时候才会销毁
    • 没有块级作用域,es6才新增,所以就是在类似于if等里面的量,在外面是可以引用的
  7. 预解析(大坑!!!!!!!

    • js会把所有的var和function提升到当前作用域的最前面
    • 代码执行,按照代码书写的顺序
    • 变量预解析(变量提升)和函数预解析(函数提升)

      • 变量提升:把所有的变量声明提升到当前的作用域最前面
      • 函数提升:把所有的函数声明提升到前面
  8. 创建对象

    • var obj = {
      us:1
      sj:function(){
      
      }
      }
  • 构造函数:

    function 函数名(属性......)
    {
        this.属性 = 值;
        this.方法 = function()
        {
            
        }
    }
 new 构造函数名()

Web APIS阶段

DOM

DOM简介

  • 文档对象模型
  • DOM树

    • 文档:一个页面就是一个文档,document
    • 页面里面所有的标签都是元素,DOM中用element表示。
    • 节点:网页中所有的内容都是节点(标签、属性、文本、注释),DOM中用node表示
  • 获取网页元素

    • 根据Id获取:getElementById(字符串)
    • 根据标签名获取:getElementByTagName(字符串),返回的是获取过来元素对象的集合,以伪数组的形式存储。

      • 得到的对象是动态的
      • element.getElementByTagName(字符串),就是元素里面的标签
    • 根据类名获取某些元素:getElementByClassName(字符串)
    • 选择器:document.querySelector(选择器)。返回指定选择器的第一个对象元素。里面的选择器需要加符号

    rE6tcd.png

    • document.querySelectorAll(同上一个)
  • 获取元素

    • 获取body元素:document.body
    • 获取html元素:document.documentElement
  • 事件基础

    • 事件三要素:事件源(被触发的对象),事件类型(如何触发,什么事件),事件处理程序(通过一个函数赋值的方式完成)。

    image-20201206203356509

    • 获取事件源 > 添加事件 > 添加事件处理程序,通过函数赋值的操作
  • 操作元素

​ 我们可以利用DOM操作来改变网页的内容,结构,样式,属性。

    • 改变元素的内容。

      • element.innerText = function(){}不识别html标签还会去除换行和空格
      • element.innerHTML = function(){} 识别html标签

      大量使用

      • 并且这两个属性是可读写的,可以利用这两个属性读写事务。
    • 常用元素属性的操作

      • 图片的src:element.src = "链接"
      • 里面的 title 也要改一下
    • 表单操作元素

      • 利用DOM可以操作如下表单的元素属性:type、value、checked、selected、disabled
      • 上面所用的innerHTML是只有普通盒子才有的,而在表单却要使用value修改
    • 样式属性操作

      • 可以通过JS修改元素的大小、颜色、
      • 可以通过className来修改样式。【this.className = ' '】

    案例1:利用循环来 使用精灵图片
    '0 -' + index + 'px'

    • 如果想要保留原先的类名,我们可以利用多类名选择器。

      rE63tO.png

    • 总结

    image-20201211193948735

    • 排他思想

      • 点击前先把其他按钮元素样式去掉
      • 再把当前的元素背景设置为pink
      • 甚至可以利用到背景图片里面

    案例1:全选反选

    • 自定义属性的操作

      • 获取属性值

        • 先获得元素:利用querySelector找到标签然后复制,再利用element.属性获得
        • element.getAttribute('属性')
        • 第一种:只能获得内置的属性值。第二种:第一种 + 能获得自定义的属性值
      • 设置属性值

        • element.属性 = '值'
        • element.setAttribute('属性',‘值)
        • 同上
      • 移除

        • element.removeAttribute('属性 ')
    • H5自定义属性

      • 目的:是为了保存并使用数据。从而使有些数据可以保存到页面中而不至于保存到数据库中。
      • H5规定自定义属性data-开头
      • 获得属性新增:element.dataset.data(要具体指哪一个)
      • 如果是多个-链接,则用驼峰命名法。
    • 节点操作

      • 目的

        • 利用DOM提供的方法获得元素(缺点:繁琐,逻辑性不强)
        • 利用节点层次关系获得元素(利用父子兄节点)
      • 概述

        • 一般都具有nodeType(节点类型)nodeName(节点名称)nodeValue(节点值)三个基本属性
        • 元素节点 nodeType为1
        • 属性节点 nodeType为2
        • 文本节点 nodeType为3
        • 节点操作主要是元素节点
      • 节点层级

      image-20201211213254697

      • 父级节点:node(用实例替代).parentNode

        • 得到的是离元素最近的,如果找不到就范回null
      • 子节点:parentNode(用实例替代).childNodes

        • 得到的所有子节点:元素节点 + 文本节点
        • 所以如果想要获得里面的元素节点,则必须要单独处理,所以一般不推荐这种标准的做法
      • 推荐的子节点:parentNode(用实例替代).children,因为可以不在乎文本节点

        • 子节点之第一和最后一个

          • parentNode.firstChild(包含文本节点)
          • parentNode.lastChild(包含文本节点)
          • parentNode.firstElementChild(返回第一个元素节点)
          • parentNode.lastElementChild(返回最后一个元素节点)
      • 兄弟节点:node.nextSibling / node.previousSibling

        • 得到下一个节点:文本节点 + 元素节点
        • 得到下一个兄弟元素节点:node.nextElementSibling。
      • 创建节点:document.createElement('tagName'),称动态创建节点
      • 添加节点到末尾:node.appendChild(child) 父级:node 子级:child

        • 将一个节点添加到指定父节点的子节点列表末尾。
      • 添加节点到最前:node.insertBefore(child,指定元素)

        • 将一个节点添加到父节点的指定子节点前面。