JS简介：

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

JS注释：

//单行注释
/多行注释/

JS标识符：

  1. 什么是标志符 — 变量、函数、属性的名字，或者函数的参数。

  2. 标志符的命名规则

    1. 由字母、数字、下划线(_)或者美元（$）组成
    2. 不能以数字开头
    3. 不能使用关键字，保留字作为标识符

      JS引用方式：

      外部引用
      内部引用

      JS函数使用方式：

      函数声明—— 先使用，后定义
      函数表达式——-必须先定义，在使用

      JS数据类型：

      1、number — 数字类型，整型、浮点型都包括。
      2、string — 字符串类型，必须放在单引号或者双引号中
      3、boolean — 布尔类型，只有true和false 2种值
      4、undefined — 未定义，一般指的是已经声明，但是没有赋值的变量,派生自null值， undefined==null ——> 返回的是true
      5、null — 空对象类型，var a = null; 和 var a = “”;有区别；

      JS特殊类型：

      Object———对象
      Array———-数组
      NaN———是Number里的一种特殊类型
      isNaN语法： isNaN() —-如果是数字返回false，如果不是数字返回true
      NaN与任何值都不相等，包括NaN本身

      JS检测类型：

      typeof————用来检测类型
      语法： type()
      返回值：string number boolean object underfined function

      JS类型转换：

      parseInt() - 转换成整型
      parseFloat() - 转换成浮点类型，带小数点
      Number() - 包括整数和小数
      Boolean() - 转换成逻辑类型
      注意：
      除0之外的所有数字，换换成布尔型都是true
      除””之外的所有字符，转换成布尔型都是true
      null和undefined转换成布尔型是false

      JS变量作用域：

      全局变量和函数变量（局部变量）
      全局变量：随处使用
      函数变量：范围里面使用

      JS比较运算符：

      返回的结果是布尔类型—-true和false
      > >= != < <= 比较值 === 比较值比较类型

      JS逻辑运算符：

  3. 包含逻辑与 或 非 等，返回结果是true或者false

  4. && and || or ! 非

    1. 对于&& 两个都是true结果是true，如果有一个false结果是false
    2. 对|| ，其中一个是true结果就是true，两个都是false结果才为false

      JS三元运算符：

      语法：n<10 ? ''执行结果'' : ''否则的结果''

      JS算术加减符：

    • 加
    • 减
    • 乘
  8. / 除

  9. % 取余

    JS递增递减：

    ++a 先运算，后返回值
    a++ 先返回值，在运算
    递减 同理

    JS条件判断语句：

  10. 条件判断控制语句

    1. if(判断条件){
    2. }else{
    3. }

  11. 多重if嵌套控制语句

    1. if(判断条件){
    2. }else if(){
    3. }else{
    4. }

  12. 多条件分支类控制语句演示

    1. 成绩是100分，显示满分
    2. 成绩大于等于90，显示优秀
    3. 成绩大于等于70，显示良好
    4. 成绩大于等于60分，显示及格
    5. 否则，不及格
    6. var myscore=55;
    7. var str;
    8. var n=parseInt(myscore/10);
    9. switch(n){
    10.  case 10:
    11.      str="manfen";
    12.      break;
    13.  case 9:
    14.      str="youxiu";
    15.      break;
    16.  case 8:
    17.  case 7:
    18.      str="lianghao";
    19.      break;
    20.  case 6:
    21.      str="jige";
    22.      break;
    23.  default:
    24.      str="bujige";
    25.      break;
    26. }

    JS循环：

    for循环
    //1+2+3+4+5+。。。。+100=5050
    // var i;
    // var sum=0;
    // for(i=0;i<=100;i++){
    // // sum=sum+i;
    // sum+=i;
    // }
    // console.log(sum);

while循环 直接判断条件
//1+2+3+4+5+。。。。+100=5050
//while循环是先判断条件，条件满足了再继续执行
var i=0;
var sum=0;
while(i<=100){
sum=sum+i;
i++;
}
console.log(sum);

do while循环： 先运行一次，在判断条件
//1+2+3+4+5+。。。。+100=5050
// do-while: 先执行一次，执行完之后再进行判断
var i=0;
var sum=0;
do{
sum=sum+i;
i++;
}while(i<=100);
console.log(sum);

内置函数

  1. 字符函数
  2. 日期函数
  3. 数学函数
  4. 转化函数

image.png

数组的栈方法

  1. push()
  2. unshift()
  3. pop()
  4. shift()

push()

  1. 参数添加在数组的后面
  2. arr.push(l1,l2…)
  3. 返回值：字符串的新长度。 返回的是number

unshift()

  1. 参数添加在数组的前面
  2. arr.unshift(l1,l2…)
  3. 返回值：字符串的新长度。 返回的是number

pop()

  1. 删除数组的最后一个元素
  2. 语法：arr.pop()
  3. 返回值：被删除的那个元素

shift()

  1. 删除数组的第一个元素
  2. 语法：arr.shift()

  3. 返回值：被删除的那个元素

    join()

  4. 用于把数组中的所有元素放入一个字符串

  5. 语法：arr.join()
  6. 返回值：字符串

reverse()

  1. 用于颠倒数组
  2. 语法：arr.reverse()

  3. 返回值：数组

    sort()

  4. 用于对数组的元素进行排序

  5. 语法：arr.sort()

  6. 返回值：数组

    concat()

  7. 用于连接多个数组

  8. 语法：arr.concat(arr1,arr2…)
  9. 返回值：数组

slice()

  1. 从已有的数组中返回选定的元素
  2. 语法：arr.slice(start,end) — 截取

  3. 返回值：数组

    DOM基础

  4. JavaScript由ECMAScript+DOM+BOM组成的。

  5. DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写

    掌握基本的DOM查找方法

  6. document.getElementById() — 根据id获取唯一的一个元素

  7. document.getElementsByTagName() — 返回所有的tag标签引用的集合 — 返回的是数组
  8. document.getElementsByName() — 返回所有的name属性引用的集合 — 返回的是数组

  9. document.getElementsByClassName() — 返回包含带有指定类名的所有元素的集合 — 返回的是数组

    设置元素的样式（css）

  10. 语法：ele.style.stylName = ‘’styleValue’’

    innerHTML

  11. 语法：ele.innerHTML

  12. 功能：返回ele元素开始和结束标签之间的HTML
  13. 语法：ele.innerHTML=“html”

className

  1. 语法：ele.classname
  2. 功能：返回ele元素的class属性

  3. 语法：ele.classname = “cls”

    如何设置DOM元素属性或添加属性

    获取属性

  4. 语法：ele.getAttribute(“attribute “)

  5. 功能：获取ele元素的属性
  6. 说明;
    1. ele — 要操作的DOM对象
    2. attribute — 是要获取的html属性（id type class）

添加属性

  1. 语法：ele.setAttribute(“attribute”,value)
  2. 功能：在ele元素上设置属性
  3. 说明：
    1. ele — 要操作的dom对象
    2. attribute — 要设置的属性名称
    3. value — 要设置的attribute属性值

删除属性

  1. 语法：ele.removeAttribute（“attribute”）
  2. 功能：删除ele元素上的attribute属性

  3. 说明：

    1. ele — 要操作的对象
    2. attribute — 要删除的属性名称

      HTML事件:

      在标签里添加事件————-语法：

      鼠标事件

  4. onload — 页面加载时触发

  5. onclick — 鼠标点击时触发
  6. onmouseover — 鼠标滑过时触发
  7. onmouseout — 鼠标离开时触发
  8. onfocus — 获得焦点时触发 — input标签type为text password / textarea标签
  9. onblur — 失去焦点时触发

  10. onchange — 域的内容发生改变时触发 — 一般作用在select、checkbox、radio

    鼠标事件 — 拓展

  11. onsubmit事件 — 表单中的确认按钮被点击时发生 — 不是加在按钮上而是表单上

  12. onmousedown — 鼠标按钮在元素上按下时触发
  13. onmouseup — 在元素上松开鼠标按钮时触发 — 2和3成就了onclick事件
  14. onmousemove — 在鼠标指针移动时触发
  15. onresize — 当调整浏览器窗口大小时触发

  16. onscroll — 拖动滚动条滚动时触发

    关于this的指向

  17. 当前对象

    键盘事件与keycode属性

  18. onkeydown — 在用户按下一个键盘按键时触发

  19. onkeypress — 在按下键盘按键时发生（只会响应字母和数字符号）
  20. onkeyup — 在键盘按键松开时发生

  21. keycode：返回onkeypress onkeydown 或者onkeyup事件触发的键的值得字符代码，或者键的代码

    window对象的方法

  22. window.alert();

  23. window.confirm(“message”);
    1. 点击确定，返回true
    2. 点击取消，返回false
  24. window.prompt()
  25. window.open()
  26. window.close()
  27. location对象 — window对象的属性，也是document对象的属性
  28. history.back() — history.go(-1) — 回退
  29. history.forward() — history.go(1) — 前进