二、js

 一、js基础

 1.js引入方式
 js是脚本语言，可以在浏览器中执行。js文件是以.js为结尾的，引入html文件中时使用script标签，这时script需要添加一个属性src，src中写js文件的路径；但是js还可以直接写在html当中，在html中需要使用<script></script>标签中写js代码

 在html内部写js时，script标签可以放在head中，可以放在body中，还可以放在body后

 2.js基本语法
  js执行顺序，默认是顺序结构，是从上到下，从左到右执行
  js一般一行放一条语句，语句后结束标识是 ";" ,但是结束标识不强制写
  js中换行要求：没有换行要求，最标准的缩进是一个tab。
  js中 if选择/for循环/函数function 后面的语句块都是由 {} 包裹的

 3.变量和常量
  定义变量：var 变量名
     let 变量名
  定义常量：const 常量名
  变量名的命名规范：
   1.组成：字母、数字、下划线、$
   2.首字符不能是数字
   3.不能使用关键字
   4.建议使用驼峰命名法

  使用变量或常量：
   1.直接访问：变量名或常量名
   2.重新赋值：常量不能被重新赋值。变量可以重新赋值，变量中只会保存最后一次赋值。

 4.注释：
  第一种：单行注释： // 注释内容
  第二种：多行注释： /* 中间注释内容 */
  第三种：多行文本注释： /** 注释内容 */

 5.基本数据类型
  1.数字类型(int float) : 1,2,3  3.14
  2.字符串类型(string) : 单引号或双引号引起来的字符，单引号双引号作用一样，没区别
  3.布尔类型(bealoon): true(1) 表示真  false(0) 表示假
  4.undefined类型(undefined)： 变量或对象的属性没有赋值时，默认值就是undefined
  5.null类型(null):表示空
  6.对象类型：
   数组(array): 类似python中的List，定义方式 [1,'a',true]，通过下标访问元素
   对象(object):类似python中的dict ，定义{"username":"小明","age":18}，通过键名访问
   正则表达式:同python
  检查数据类型方法：typeof
   注意：typeof 检测对象类型时，不管是数组还是对象，返回的都是Object

 6.输出方式：
  alert()：小括号中写变量或语句，窗口弹出
  console.log():在控制台输出 F12->console

 7.运算符：
  1.算数运算： + - * / %
   除法： 会运算到小数位 ，没有 // 求整
   取余： 运算到该加小数点时的余数
  2.关系运算： > >= < <= == === != !==
   ===和==区别:
    ==是不判断数据类型： 1 == '1'   返回值 true
    ===判断数据类型： 1 === '1' 返回值 false
  3.逻辑运算： &&(逻辑与)  ||(逻辑或)  !(逻辑非)
   没有and / or
   逻辑与、逻辑或都会存在短路运算：
    逻辑与 左边为false，右边不判断直接返回false，左边为true，返回值是右边
    逻辑或 左边为true，右边不判断直接返回 true，左边为false，返回值是右边

  4.赋值运算： = += -= *= /= %= ++(自增) --(自建)
   ++ 、 --：
    用法1： 变量名++ ： 本次不改变，下次使用时改变
    用法2： ++变量名 ： 先改变后使用，当次生效

 8.parseInt() parseFloat()
  parseInt() ： 取小括号中整数部分
  parseFloat() : 取小括号中整数+小数部分

2.流程控制语句
 1.选择结构
  if
   单分支：if(表达式){}
   双分支：if(表达式){语句} else{语句}
   多分支：if(表达式1){} else if(表达式2){} else{}

  switch
   switch(表达式){
    case 值: 语句块 ;break;
    case 值2: 语句块； break；
    default:语句
   }
 2.循环结构
  for
   普通for循环：
    for(表达式1;表达式2;表达式3){循环体}
    表达式1：循环条件的初始值
    表达式2：循环条件的终止值
    表达式3：循环条件的步长

    for(let i=0; i<3 ; i+=1){

    }

   for-in循环：
    for(let i in [1,2,3]){

    }
  while
   表达式1
   while(表达式2){
    循环体;
    表达式3
   }

 3.数学方法：
  Math.random() [0,1)
 4.获取字符串或数组的长度：
  通过.length 属性获取
  'abcd'.length
  [1,2,'a','b'].length

3.js选择器
 选择器作用：找页面中的标签
   选择器类型：id选择器
       document.getElementById('id名')
       返回值：1个具体的标签元素
       class选择器
        document.getElementsByClassName('class名');
        返回值：所有具有指定class名称的元素，是多个，以类数组形式存在，使用某一个元素时通过下标来获取
       标签选择器
        document.getElmentsByTagName('标签名');
        返回值：所有指定标签的集合

4.操作基本dom
 1.获取标签中值
  第一类：获取双标签中的值(div,span,p)
       .innerHTML 来获取

  第二类：获取input标签中的值()
    .value 来获取
  特殊的一个标签：
   textarea 文本域：是双标签，但是获取他的值时使用.value属性
          设置值使用 .innerHTML

    2.添加点击事件
     事件：是一个具有某些功能的函数
     点击事件：鼠标点击某个元素的时候触发的功能
     添加点击事件方法：
      1.找到元素
      2.元素.onclick = function(){}

    3.设置值
     第一类：设置双标签的值
      元素.innerHTML = '新值'
     第二类：设置input标签的值
      元素.value = '新值'

    4.获取属性和修改属性值
     属性有：id , class , name , src ,href , style
     1.获取属性
      元素.getAttribute('属性名')
     2.设置属性值
      元素.setAttribute('属性名','值')

    5.获取和修改css样式
     1.获取css样式
      第一类 行内样式： 元素.style.样式名称
      第二类 内部、外部样式： window.getComputedStyle(元素)['样式名称']

     2.设置css样式
      元素.style.样式名 = 新值

     注意：获取或设置 font-size 类型的样式时，需要变成驼峰命名法(fontSize)

 体质指数（BMI）= 体重（kg）÷ 身高^2（m）
 当BMI指数为18.5～23.9时属正常

 

 

js对象和函数

1.字符串对象
 var str = 'abcd;edf;'
 属性：
  长度属性：length
 方法：
  indexOf('字符',start) : 检测指定字符在字符串中是否存在，如果存在返回下标，如果不存在返回-1(不是python中的反向找下标，这的意思就是没有找到)，第二个参数：指定从哪个下标开始向后查询

  slice(start,end) 、substr(start,length) 、substring(start,end):字符串截取，返回新字符串，不改变原字符串

  split('分割规则') : 字符串分割,分割后返回数组(列表)

  replace(old,new) : 字符串替换

  match('字符') : 字符串匹配,返回数组

  trim() : 去除字符串左右空白

  toLowerCase() : 把字符串转成小写

  toUpperCase() : 把字符串转成大写
  
2.数组对象(列表)
 属性：
  长度属性：length
 方法：
  头部添加：unshift()   返回值是数组的新长度，改变原数组
  尾部添加：push()   返回值是数组的新长度，改变原数组
  头部删除：shift()  返回值是被删除的元素,改变原数组
  尾部删除：pop()   返回值是被删除的元素,改变原数组
  修改： splice(start,len,el,el...)  执行时分两步，第一步删除(会删除从指定位置开始的指定长度)，第二步添加功能(len后的el是添加的元素，每个元素之间用逗号隔开)
  截取： slice(start,end) 返回新数组，不会改变原数组
  把数组按某种规则转成字符串：join('规则')
  检测指定字符在字符串中是否存在：indexOf()

 数组遍历：
  1.普通for循环
   for(var i=0; i<arr.length; i++){
    i   对应下标
    arr[i] 对应数组中的元素
   }
  2.for-in
   for(var i in arr){
    i   对应下标
    arr[i] 对应元素
   }

3.对象(字典)
 定义对象： var obj = {}
 对象中的数据形式：
  {
   key:value,
   key:value
  }
 对象中的key具有唯一性，如果给已经存在的key赋值，这时是更新功能;如果对象中没有这个key，这时对象中新添加一个key:value键值对

 key一定要是不可变元素

 value可以是任意数据类型

 常用属性：
  长度：Object.keys(对象).length
 访问数据：
  1.访问某一个：对象.key  或者 对象['key']
   如果存在key，同时又对应的值，返回值
   如果不存在key，返回undefined
  2.遍历:for-in

4.函数
 定义函数：
  1. function 函数名(形参列表){
    功能体
    return 可以有，也可以没有
   }
  2. var 变量名 = function(){
    功能体
   }
 调用函数：
  函数名(实参列表)

 和python中不一样的：
  形参和实参个数要求：在python中少传参数报错，在js中少传参数没问题(没有参数的地方自动接收undefined)

  js中只有简单的传参，python中的高级传参方式都没有；
  js中可以给形参默认值
  js函数中有一个特殊的关键字，作用是获取函数调用时传入的所有实参 arguments

 

 js定时器和DOM

1.Math数学方法
 js中数学方法都被封装在Math对象中，使用时调用Math.方法名称即可
 常用的方法：
  Math.random()  随机数 [0,1) ,没参数
  Math.floor()  向下取整 ，没有参数
  Math.ceil()  向上取整 ，没有参数
  Math.round() 四舍五入
  Math.max()  最大值 ，可以接收多个参数，然后判断出最大值
  Math.min()  最小值 ，可以接收多个参数，然后判断出最小值
  Math.PI()  π   ，没参数

2.时间
 js时间是由 Date() 构造函数生成的，使用时需要通过 new 关键字创建
 new Date() 当前时间
 可以通过它的方法取到里面的每一个独立项
 获取年份：new Date().getFullYear()
 获取月份：getMonth() 0~11
 获取日期：getDate()  1~31
 获取星期：getDay()   0~6
 获取小时：getHours() 0~23
 获取分钟：getMunites() 0~59
 获取秒数：getSeconds() 0~59
 时间戳：getTime() 毫秒数

 世界时：toGMTString() /toUTCString()
 转换本地时间：toLocalString()
3.定时器
 定时器的时间是毫秒单位
 1.间隔定时器
  每隔一段时间就执行定时器的功能
  var time1 = setInterval(funciton,time)

  关闭间隔定时器：
   clearInterval(time1)
 2.延时定时器
  等待指定的时间，然后执行唯一一次功能
  var time2 = setTimeout(function,time)

  关闭延时定时器：
   clearTimeout(time2)
4.DOM增删改查
 DOM ： document object model ,主要操作的就是页面结构，DOM把页面当成一个结构树(tree)，结构树是由节点(标签)组成的

 DOM树的根： document->document type + html
            |
           head   +       body
            |      |
      title+meta+link+script   div+div+div+div
 操作DOM就是对DOM树中的节点(标签)进行操作

 已经学过：操作单个DOM的 内容的获取和设置 ， 属性的获取和设置  ，样式的获取和设置
 内容的获取和设置 ：
  获取：
  1.双标签(div) ： innerHTML
  2.input  : value
  设置：
  1.双标签 :innerHTML = 新值
  2.input ：value = 新值
 属性的获取和设置：
  获取：
   getAttribute('属性名称')
  设置：
   setAttribute('属性名称','新值');
 样式的获取和设置：
  获取：
   行内：元素.style.属性名
   内部、外部样式： window.getComputedStyle('元素')['属性名']
  设置：
   元素.style.属性名 =新值

 DOM节点的增删改查
  增加：向DOM中添加新的标签
   第一步：创建新标签
    1.标签节点：document.createElement('标签名')
    2.内容节点：document.createTextNode('内容')
   第二步：添加到页面
    1.添加到指定父级的最后： 父级.appendChild('新标签')
    2.添加到指定父级的指定位置: 父级.insertBefore('新标签','要插入到这个标签前')

   新创建的标签是一个完整的DOM，所以可以给新创建的标签进行属性和样式、内容操作
   新创建标签操作：
    内容操作：双标签的.innerHTML
       input.value
    属性操作：标签.属性名=属性值
    样式操作：标签.style.样式名称 = 值

  增加的另外一种方案：
   字符串方法：具体某个元素中要添加的内容，使用innerHTML形式，添加指定字符串。
   字符串方法和创建标签法的区别：
    1.创建标签法创建的是DOM元素 ;字符串方式创建的是普通字符串,不具备DOM操作功能
    2.创建标签可以决定标签添加到那个位置，不删除原来的元素; 字符串方式把父级标签中所有元素删除，然后再添加字符串

 删除:
  从DOM中删除某一个节点
  元素.removeChild('要删除的节点')

 修改(替换):
  把原来的节点换成新节点
  元素.replaceChild('新节点','旧节点')

 查询：
  前面学过id选择器、class选择器、标签选择器：他们的作用是查找到某一个或某一类标签元素
  今天学习几个快速查询节点的方式：
   查询第一个子节点：元素.firstChild
   查询最后一个子节点：元素.lastChild
   查询当前元素的下一个节点：元素.nextSibling
   查询当前元素的上一个节点：元素.previousSibling
   查询当前元素的父节点：元素.parentNode
   查询所有子级节点：元素.children
   查询当前元素是否有子节点：元素.hasChildNodes()

 

 js事件响应

1.事件类型
 1.鼠标事件：
  单击事件：click
  双击事件：dblclick
  鼠标经过事件： mouseover  会事件冒泡
  鼠标离开事件： mouseout (会事件冒泡) / mouseleave (不会事件冒泡)
  鼠标进入事件： mouseenter  不会事件冒泡
  hover事件：有两个过程，鼠标进入时执行鼠标进入事件，鼠标离开时执行鼠标离开事件
  鼠标移动事件： mousemove
  鼠标按下事件： mousedown
  鼠标抬起事件： mouseup

 2.键盘事件：
  键盘按下事件： keydown
  键盘抬起事件： keyup
  键盘长按事件： keypress

  可以获取按下的案件的keyCode值
   回车键 13
   空格键 32

 3.表单事件
  获取焦点事件： focus
   元素.onfocus = function(){} 元素获取到焦点后执行的功能
   元素.focus()  让元素获取焦点
  失去焦点事件： blur
  提交事件： submit

 4.事件冒泡
  事件冒泡：从当前触发元素开始，向上级触发具有相同事件类型的事件，直到document，的过程

2.绑定事件的方法
 1.DOM0级
  绑定事件：元素.on+事件类型 = function(){}
  取消事件：元素.on+事件类型 = null

  DOM0级给同一个元素绑定相同的事件，只会执行后面定义事件的功能函数
 2.DOM2级
  绑定事件： 元素.addEventListener('事件类型',fn)
  取消事件： 元素.removeEventListener('事件类型',fn)

  DOM2级绑定事件：同一个元素可以绑定多个相同的事件，多个事件的功能函数都会执行
  取消绑定时需要指定取消的功能函数，要求函数是具名函数
3.事件对象
 事件在被触发时，都会生成一个事件对象，这个事件对象中保存所有和当前事件有关的信息
 event 事件对象
 事件对象经常在事件触发函数中当形参传递到函数内部

 比较常用的几个信息：
  target:触发元素
  type: 什么类型的触发
  keyCode: 键盘事件下的按键keyCode值
  x,y坐标信息：
   offsetX , offsetY : 相对于当前容器左上角的x,y坐标
   clientX , clientY : 相对于可视窗口左上角的x,y坐标

 

4.事件委托
 事件委托是把事件定义在它父级或祖先级元素上，真正触发这个事件执行是我们原来想定义事件的元素。

 使用事件委托的场景：页面中通过js新创建的元素，可以使用事件委托绑定事件

5.滚动事件 scroll
 1）作用整个页面
  当页面发生上下滚动时，浏览器会触发一个滚动事件,发生滚动事件时可以获取到滚动高度和距离左边的滚动距离
    滚动高度： scrollTop
    滚动距左边距离： scrollLeft
    这两个属性是可以读取可以设置
    window.onscroll = function(){
     //获取页面滚动高度
     document.documentElement.scrollTop
     document.body.scrollTop

     var sTop = document.documentElement.scrollTop || document.body.scrollTop
    }

 2）作用于某一个具体的元素
  这个元素必须设置属性 overflow:scroll，才能出现滚动条
  获取滚动距离:
   元素.scrollTop
   元素.scrollLeft