javaScript简介

javaScript

js 功能：通过浏览器内置的JavaScript引擎进行解释执行，把一个原本只用来显示的页面转变成支持用户交互的页面程序

js 引擎：是JavaScript语言的解释器，用于读取网页中的JavaScript代码，对其处理后执行，如Chrome浏览器的V8引擎

js 特点：

是一种脚本语言，特点是简单、易学、易用，语法规则比较松散

可以跨平台，它不依赖操作系统，仅需要浏览器的支持 (现阶段如此，有兴趣的可以了解一下node)

支持面向对象，可以使JavaScript开发变得快捷和高效，降低开发成本

js 书写位置：1.行内式 2.内嵌式 (嵌入式) 3.外部式 (外链式)

ECMAScript (语法标准)

是javaScript的核心，规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准

1. 注释方式

• 单行注释 // 代码
• 多行注释 /* 代码 */

2. 变量

• 命名规范 (4必须2建议)
  • 由字母、数字、下划线和美元符号（$）组成
  • 严格区分大小写
  • 不能以数字开头
  • 不能是关键字、保留字
  • 要尽量做到见其名知其意
  • 建议遵循驼峰命名法
• 代码

    // var 声明变量
    var age       	// 声明一个名称为age的变量
    age = 10      	// 为age变量赋值
    var age = 18  	// 声明变量的同时赋值
    // conts   let  也能声明变量，es6的语法
    const num = 20	// 声明一个变量，该变量是不可变的常量
    let name = 'zs'	// 声明一个变量，该变量为局部变量
  

• 数据类型 (弱类型语言，不用提前声明变量的数据类型)
  • 分类：
    • 基本数据类型
      • String (字符串)
      • Number (数字)
      • Boolean (布尔)
      • Undefined (未定义)
      • Null (空)
    • 复杂数据类型
      • Object (对象)
  • 检测：typeof

3. 字符串

• 使用单引号(‘’)或双引号(“”)或(``)来包裹，
  • 单引号里如果还想用引号，必须使用双引号，同理双引号里如果还想用引号，必须使用单引号
  • 如果必须同种引号嵌套使用，里面的引号必须加上转义符(\)，即：

    var str = "我叫\"张三\""
    console.log(str.length)     // 6
    

    注：如果计算字符串长度，转义符不包括在内

4. 数字

包括整型和浮点型 (整数、小数)

var num = 10

5. 布尔

只有两个值 true/false

var bool = true

6. undefined

可以给变量赋值为undefined，或者申明变量但不赋值

var val1 = undefined
var val2

7. null

可以给变量赋值为null

var val = null
console.log(typeof val)   // Object

8. 数据类型转换

• 简单数据类型转换成字符串的一般方式 (3种)

  var num = 10
  console.log(num+'')           // 1.利用+拼接一个空字符串（最常用的一种方式）
  console.log(num.toString())   // 2.利用toString()，null和undefined无法使用toSting()方式进行转换
  console.log(String(num))      // 3.利用String()
  

• 简单数据类型转换成数字的一般方式 (4种)

  var str = '10.1'
  console.log(str-0)              // 1.利用算术运算符（-、*、/）隐式转换
  console.log(parseInt(str))      // 2.使用parseInt()将字符串转为整数
  console.log(parseFloat(str))    // 3.使用parseFloat()将字符串转为浮点数
  console.log(Number(str))        // 4.使用Number()将字符串转为数字型
  

• 转换成布尔的一般方式 (2种)

  var str = ''
  console.log(!!str)              // 1.两次取反
  console.log(Boolean(str))       // 2.Boolean()
  // 空字符串、0、NaN、null和undefined 在转换时是false，其他都是true
  

9. 递增和递减

• ++/-- 在前：先进行自增/自减，然后参与运算
• ++/-- 在后：先参与运算，然后进行自增/自减

10. 三元运算

语法：条件表达式 ? 表达式1 : 表达式2

11. 流程控制

• if…else

  if(条件1){
    
  }else if(条件2){
    
  }else{
  
  }
  

• switch

  switch (表达式){
    case 值1: 
      执行代码1;
      break;
    case 值2: 
      执行代码2;
      break;
    ...
    default:
      执行代码;
  }
  

12. 循环控制

• for

  for (初始化变量; 条件表达式; 操作表达式) {
    // 循环体
  }
  

• while

  while (条件表达式) {
    // 循环体
  }
  

• do…while

  do {
    // 循环体
  } while(条件表达式)
  

• continue/break
  • continue: 立即跳出本次循环，也就是跳过了continue后面的代码，继续下一次循环
  • break: 立即跳出整个循环（将循环结束），用于for/while/do…while/switch

13. 数组

• 创建数组

  var arr1 = []
  var arr2 = [1,2,3]
  var arr3 = new Array()
  var arr4 = new Array(4,5,6)
  

• 索引，通过索引获取某一项的值，索引从0开始

  console.log(arr2[0])
  

• 数组的长度

  console.log(arr2.length)    // 获取数组长度
  arr2.length = 4             // 修改数组长度
  

• 冒泡算法 (重点，会默写)

  function fun(arr){
    for (var i = 1; i < arr.length; i++) {            // 控制需要比较的轮数
      for (var j = 0; j < arr.length - i; j++) {      // 控制参与比较的元素
        if (arr[j] > arr[j + 1]) {                    // 比较相邻的两个元素
          var temp = arr[j + 1];
          arr[j + 1] = arr[j];
          arr[j] = temp;
        }
      }
    }
    return arr
  }
  console.log(fun([1,3,5,4,2]))     // [1,2,3,4,5]
  

• 插入排序

  function fun(arr){
    for (var i = 1; i < arr.length; i++) {
      //遍历并比较一个无序数组元素与所有有序数组元素
      for (var j = i; j > 0; j--) {if (arr[j - 1] > arr[j]) {
        var temp = arr[j - 1];
        arr[j - 1] = arr[j];
        arr[j] = temp;
      } }
    }
    return arr
  }
  

14.对象

对象是由属性和方法组成的一个集合

• 创建

  var obj1 = {}
  var obj2 = new Object()
  

• 代码

  var user = {
    name: '张三',
    age: 18,
    'user-name': 'zs',
    run: function(){
      console.log(this.name+'跑步')
    }
  }
  console.log(user.name)
  console.log(user.['user-name'])
  user.run()
  

• 构造函数

  // 编写构造函数
  function 构造函数名() {
    this.属性 = 属性;
    this.方法 = function() {
      // 方法体
  }
  }
  // 使用构造函数创建对象
  var obj = new 构造函数名();
  

• 遍历

  for (var k in obj) {
    // 通过k可以获取遍历过程中的属性名或方法名
    console.log(k+': '+obj[k]);
  }
  

• 内置对象
  • Math
    • Math.random()：获取大于或等于0.0且小于1.0的随机值
    • Math.floor(x)：向下取整，获取小于或等于x的最大整数
    • Math.ceil(x)：向上取整，获取大于或等于x的最小整数
    • Math.round(x)：获取x的四舍五入后的整数值
    • …
  • Date
    • new Date()：获取当前日期对象
    • 获取年月日时分秒毫秒

      var date = new Date()
      console.log(date.getFullYear())         // 年(4位数字)
      console.log(date.getMonth())            // 月，范围0~11（0表示一月，1表示二月，依次类推）
      console.log(date.getDate())             // 日
      console.log(date.getHours())            // 时
      console.log(date.getMinutes())          // 分
      console.log(date.getSeconds())          // 秒
      console.log(date.getMilliseconds())     // 毫秒
      console.log(date.getDay())              // 星期，范围0~6（0表示星期日，1表示星期一，依次类推）
      console.log(date.getTime())             // 时间戳，从1970-01-01 00:00:00距离date对象所代表时间的毫秒数
      

  • Array

    了解数组对象的一些常用方法，可以通过Array.prototype，查看

    • push/unshift/pop/shift
    • reverse
    • sort
    • indexOf/lastIndexOf
    • join
    • splice/slice
    • concat
    • …
  • String

    了解字符串对象的一些常用方法，可以通过String.prototype，查看

    • indexOf/lastIndexOf
    • toLowerCase/toUpperCase
    • split
    • substring/substr/slice
    • concat
    • …
• 认识值类型和引用类型

  简单数据类型（如字符串型、数字型、布尔型、undefined、null）又称为值类型，复杂数据类型（对象）又称为引用类型

  引用类型的特点是：变量中保存的仅仅是一个引用的地址，当对变量进行赋值时，并不是将对象复制了一份，而是将两个变量指向了同一个对象的引用

15. 函数

• 代码结构

  /*
    function: 声明函数的关键字
    fun: 函数名
    data1/data2/...：形参
    arguments：所有传递过来的实参的值，它是一个数组
    return：返回调用函数后，返回的值，不一定要有
    param1/param2/...：实参
    注：
      fun()：调用fun函数，括号不能省略
      形参和实参个数可以不一致，只要一一对应即可，对应不带即为undefined
  */
  function fun(data1, data2, ...){
    // 函数体代码
    console.log(arguments)
    return 返回值
  }
  fun(param1, param2, ...)
  

• 函数表达式 (了解)
• 回调函数 (了解)
• 递归函数 (了解)
• 闭包 (了解)

DOM (文档对象模型)

是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作

顶级对象是document

1. 获取元素的方式

• document.getElementById()
• document.getElementsByClassName()
• document.getElementsByTagName()
• document.getElementsByName()
• document.querySelector()
• document.querySelectorAll()

2. 事件

• 三要素
  • 事件源：触发事件的元素
  • 事件类型：如 click 单击事件
  • 事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数
• 示例

  document.querySelector('div').onclick = function(){
    // 具体处理的代码
  }
  

• 事件监听

    document.querySelector('div').addEventListener('click',function(){
  
    })
  

• 传统方式和事件监听的区别
  • 传统方式，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
  • 事件监听，可以给同一个DOM对象的同一个事件添加多个事件处理程序

3. 操作节点

• element.innerHTML：设置或返回元素节点（element）开始和结束标签之间HTML。包括HTML标签，保留空格和换行
• element.innerText：设置或返回文本节点，在返回的时候会去除HTML标签和多余的空格、换行
• element.textContent：设置或返回文本节点，在返回的时候会去除HTML标签，但保留空格和换行
• document.write()：创建元素节点，如果页面文档流加载完毕，再调用会导致页面重绘
• document.createElement() + ( node.appendChild()或node.insertBefore() )：创建元素节点并添加到dom树种

  var div = document.createElement('div')   // 创建节点，创建好后，该节点并不在DOM树中
  var box = document.querySelector('.box')
  box.appendChild(div)                      // 将创建的div节点，添加到指定父节点（box）的子节点列表末尾
  box.insertBefore(div, box.children[0])    // 将创建的div节点，添加到指定父节点（box）的指定子节点（box.children[0]）前面
  

• node.cloneNode()：复制节点，
  • 参数为空或false，则是浅拷贝，即只复制节点本身，不复制里面的子节点
  • 参数为true，则是深拷贝，即会复制节点本身及里面所有的子节点

4. 操作元素属性

• 操作样式
  • style：element.style.样式属性名
  • className：element.className
• 获取/设置内置的属性：element.属性
• 获取/设置/删除内置和自定义的属性：
  • element.getAttribute('属性名')
  • element.setAttribute('属性名', '属性值')
  • element.removeAttribute('属性名')
• h5 新增规范，通过data-属性名的方式设置自定义属性
  • element.dataset.属性名
  • element.dataset.属性名 = '属性值'

注：获取class时，可使用element.className或element.getAttribute('class')

5. 节点操作

• 获取父节点：element.parentNode
• 获取子节点：
  • element.childNodes：获取nodeType为1和3的节点（元素节点和文本节点）
  • element.children：获取nodeType为1的节点（元素节点）
  • element.firstChild：获取第一个子节点，nodeType为1或3的节点（元素节点或文本节点）
  • element.lastChild：获取最后一个子节点，nodeType为1或3的节点（元素节点）
  • element.firstElementChild：获取第一个子节点，nodeType为1的节点（元素节点），有兼容性问题
  • element.lastElementChild：获取最后一个子节点，nodeType为1的节点（元素节点），有兼容性问题
• 获取兄弟节点：
  • element.nextSibling：获取下一个兄弟节点，nodeType为1或3的节点（元素节点或文本节点）
  • element.previousSibling：获取上一个兄弟节点，nodeType为1或3的节点（元素节点或文本节点）
  • element.nextElementSibling：获取下一个兄弟节点，nodeType为1的节点（元素节点），有兼容性问题
  • element.previousElementSibling：获取上一个兄弟节点，nodeType为1的节点（元素节点），有兼容性问题
  • element.parentNode.childNodes：获取当前元素的所有兄弟节点，nodeType为1和3的节点（元素节点或文本节点）
  • element.parentNode.children：获取当前元素的所有兄弟节点，nodeType为1的节点（元素节点）

6. 事件对象

当一个事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是event

• 示例

  <button id="btn">获取event对象</button>
  <script>
    var btn = document.getElementById('btn');
    btn.onclick = function(e) {
      var event = e || window.event;        // 获取事件对象的兼容处理
      console.log(event);
      console.log(event.target);            // 触发事件的对象，即btn
      console.log(event.type);              // 触发事件的类型，即click
      console.log(event.preventDefault());  // 阻止默认事件（默认行为）
      console.log(event.stopPropagation()); // 阻止事件冒泡
    };
  </script>
  

BOM (浏览器对象模型)

提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作

顶级对象是window

1. window.onload

窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数

window.onload = function () {

}

2. window.onresize

调整浏览器窗口大小的时候，就触发window.onresize事件，调用事件处理函数

window.onresize = function () {
  
}

3. 定时器、延迟器 (异步)

• setTimeout、clearTimeout

  var time1 = setTimeout(function(){},1000)     // 一秒钟后执行这个匿名函数
  clearTimeout(time1)                           // 清除掉刚刚的这个延迟器
  

• setInterval、clearInterval

  var time2 = setInterval(function(){},1000)     // 每一秒钟后循环执行这个匿名函数
  clearInterval(time2)                           // 清除掉刚刚的这个定时器
  

4. location (url地址对象)

console.log(location.host)      // URL的主机名和端口
console.log(location.search)    // 当前URL的查询部分（“?”及之后的部分）
console.log(location.hash)      // URL的锚部分（从“#”开始的部分）
console.log(location.href)      // 完整的URL

5. history (当前窗口的历史列表中的网址)

console.log(history.length)     // 历史列表中的网址数
history.back()                  // 后退一页
history.forward()               // 前进一页
history.go(num)                    // 前进(正数)/后退(负数)几页

JQuery

jQuery是一个快速、简洁的JavaScript库

• 特点：
  • jQuery是一个轻量级的脚本，其代码非常小巧。
  • 语法简洁易懂，学习速度快，文档丰富。
  • 支持CSS1~CSS3定义的属性和选择器。
  • 跨浏览器，支持的浏览器包括IE6~IE11和FireFox、Chrome等。
  • 实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护。
  • 插件丰富，可以通过插件扩展更多功能。
• 参考教程：JQuery
• 示例

  <script src="./jquery-3.3.1.min.js"></script>
  <div id="id1" class="box"></div>
  <script>
    $("div")
    jQuery(".box")
    $("#id1").addClass('block'); // 给#id1这个元素添加上block这个class
    $("#id1").reomveClass('block'); // 给#id1这个元素删除block这个class
    $("#id1").toggleClass('block'); // 判断#id1这个元素是否有block这个class，如果有则删除，否则添加
    $("#id1").attr('class'); // 获取#id1这个元素的所有class
  </script>