javascript

JS组成

1. ECMAScript(js的核心语法)
2. 内置对象
   • BOM:Brower Object Model 浏览器对象模型，提供操作浏览器的方法
   • DOM:Document Object Model 文档对象模型，提供操作文档的方法

3. js自定义对象

   html中引入js的方式：

4. 将js代码以事件的形式绑定在元素上。
   
   <h1 onclick="alert;">点击</h1>
5. 文档内嵌，使用<script></script>标签

6. 引用外部js文件
   
   使用<script src=""></script>标签在文档中引入

   常用js语句

7. alert() 以警告框的形式提示信息
8. prompt() 接收用户输入的弹窗
9. console.log() 在控制台输出

10. document.write()

    1. document.write()方法会根据当前的书写位置在网页中插入内容
    2. 如果以元素绑定事件的方式在网页中写入内容，
       οnclick="document.write();",会清空当前页，只显示 写入的内容。
    3. 使用document.write()方法写入内容，其中的HTML标签可以被识别

js语法规则

1. js语句以分号结尾（语句：关键字，运算符，表达式组成）
2. js区分大小写
3. //单行注释   /*多行注释*/

js变量与常量

变量

1. 声明 var a;
2. 声明的同时赋值 var age = 20
3. 命名规范
   1. 由数字，字母，下划线和$组成，禁止以数字开头
   2. 避免与关键字，保留字冲突（name var new for if
      do while function class break switch... ）
   3. 做到见名知意
   4. 严格区分大小写
   5. 多个单词组成的变量名，采用小驼峰标识 goodsCount
4. 使用注意
   1. 变量声明可以省略关键字var,直接使用变量名赋值，
      不推荐省略关键字，涉及到变量作用域。
   2. 变量如果只声明，未赋值，默认值为undefined
   3. 赋值符号表示将右边的值赋给左边变量，要求左边必须是变量。
      • var a = 10;
      • a = 10 + 10;

常量

1. 使用 const 关键字创建常量，声明的同时必须赋值
2. 常量名采用全大写的形式
3. 小数操作
   1. 小数在计算机的存储中是不精确的，存在误差

   2. 指定保留小数位number.toFixed(n);n表示要保留的数

      js基本数据类型

4. number
   整数4个字节，小数8个字节
   
   可以使用十进制，八进制，十六进制表示整数
   
   不管是哪一种进制表示的整数，在使用控制台输出时都会转换为10进制输出显示
   小数表示方式： 3.14;   1.5e3;
5. string
   1. JS中字符串使用引号引起来，单双引号都可以

   2. 字符串中每个字符都有对应的Unicode码值

      查看字符串中下标对应的字符的Unicodestring.charCodeAt(index)

object.toString() 将其他类型转成string类型
      
      number.toString(16) 将十进制的数字转换为string类型的十六进制
      

6. boolean
   • true = 1
   • false = 0
   • 任何非零值都真
7. udefined
   1. 变量声明未赋值，默认为undefined
   2. 访问对象不存在的属性时，也为undefined
8. null

   • 空类型，一般用来解除对象的引用

     js复杂数据类型

     对象 函数

typeof() 判断数据类型

函数

function 函数名 (参数列表) {
    函数体
    return;
}

return 只能返回一个值，可以返回一个函数
函数声明和调用时的参数个数可以不匹配

匿名函数

var fn = function () {
    pass;
    return;
}

函数自执行

(function () {
    pass;
    return;}) ();

---

数组

var arr1 = [];
var arr2 = new Array();
var arr3 = [1, 2, 3];创建的同时初始化元素
var new Array(1, 2, 3);使用new关键字初始化
var arr6 = new Array(5);初始化数组长度

arr[0]; 访问元素
arr.length; 获取数组长度
arr.length = 0; 清空数组

数组方法

1. toString() 将数组内容转换为字符串，并返回。
2. join() 将数组中元素拼接成一个字符串，并返回。默认以逗号连接
   js var arr = [1,2,3]; arr.join(); //返回字符串 "1,2,3" arr.join('-'); //返回字符串 "1-2-3"
3. reverse() 反转数组元素，倒序重新排列元素,返回反转后的数组
   • reverse()是对当前数组结构的调整，不会生成新数组
     
   • 可以不接收返回值
4. sort()
   • 将数组内容进行排序，返回排序后的数组
   • 默认按照Unicode编码升序排列
   • sort()方法也是对数组结构的调整，直接对原数组的元素进行排序，会改变原始数组
   • 参数可以为自定义的排序函数
     js function sortAsc(a,b){ return b - a; } arr.sort(sortAsc);
5. push(data)
   • 表示在数组的末尾追加元素
   • 参数 ：可以是一个，也可以是多个，多参数之间使用逗号隔开。
   • 返回值 ：返回新数组的长度
6. pop()
   • 表示删除数组最后一个元素
   • 返回值：返回被删除的元素
   • 数组的存储结构：数组在内存中使用栈结构存储，先进后出
7. unshift(data)
   • 向数组的头部添加元素
   • 参数 ：可以是一个元素，也可以是多个元素
   • 返回值 ： 返回添加元素之后的数组长度
8. shift()
   • 删除数组的头部元素

   • 返回值 ：返回被删除的元素

     二维数组

     数组中的每一个元素都是一个小数组

   var arr = [["唐僧","悟空"],["宝玉","宝钗"],["伏地魔"]];
   arr[0]; //["唐僧","悟空"]
   arr[0][0]; //"唐僧"

   ---

string 对象

length 属性，获取字符串长度 toUpperCase() 返回新的字符串，不影响原始字符串 toLowerCase() 返回新的字符串，不影响原始字符串 charAt(index) 获取指定位置的字符 charCodeAt(index) 获取指定位置的字符对应的编码

1. indexOf(value[,fromIndex])
作用 ：获取指定字符的下标
参数 ：
    1. value : 必填，设置查找字符
    2. fromIndex : 可选参数，设置从哪个下标位置找，默认值为0
返回值 ：
    返回value第一次出现的下标位置,查找失败，返回-1
2. lastIndexOf(value[,fromIndex])
作用 ：查找指定字符的下标
返回值 ：value最后一次出现的下标

substring(startIndex,endIndex) 根据下标截取字符串 [startIndex,endIndex), endIndex省略时,截至字符串末尾

split(param) 分割字符串，返回数组，存放分割完成后的小字符串。注意：指定的分隔符必须是字符串中存在字符，否则不会对原字符串分割。

模式匹配

正则表达式

• 语法 ：/正则格式/修饰符
• 修饰符 ：
  • i : ignorecase 忽略大小写
  • g : global 全局匹配

字符串方法

1. replace(substr/RegExp,newStr)
   根据给出的substr或RegExp查找对应字符串，并将其替换为newStr;返回替换后的新字符串,不影响原始数据
2. match(substr/RegExp)
   根据指定的substr或RexExp匹配对应字符串,返回数组，数组中存放匹配结果

正则表达式对象 RegExp

RegExp : Regualr Expression

var reg1 = /微软/ig;
var reg2 = new RegExp('匹配模式','修饰符');

属性：lastIndex
由于lastIndex保存再一次匹配的起始下标，重复调用时，不能保证每次都从下标0开始验证，可以手动调整lastIndex为0。

方法：test(str)
验证字符串中是否存在满足正则匹配模式的内容，存在则返回true,不存在返回false,参数为要验证的字符串

---

Math 对象

属性 ：

1. 圆周率 : Math.PI
2. 自然对数 : Math.E

方法 ：

1. 三角函数

• Math.sin(x)
• Math.cos(x)

• Math.tan(x)

  注意 ：参数为角度
  • Math.PI也可以表示180度
  • Math.PI / 180 表示 1度

1. 计算函数 Math.sqrt(x) 对x开平方 Math.log(x) 求对数 Math.pow(x,y) 求x的y次方

2. 数值操作
   Math.abs(x) 求x的绝对值 Math.max(x1,...xn) 求一组数据的最大值 Math.min(x1,...xn) 求一组数据的最小值 最常用的操作 Math.random() 生成0-1之间的随机数 Math.ceil(x) 对x向上取整,忽略小数位,整数位+1 Math.floor(x) 对x向下取整,舍弃小数位,保留整数位 Math.round(x) 对x四舍五入取整数

3. Date 对象 var date1 = new Date(); //获取当前的日期时间

   创建指定日期的对象
   python var date2 = new Date("2011/11/11"); var date3 = new Date("2011/11/11 11:11:11");

• getTime()
  返回当前日期时间距1970-01-01 00:00:00之间间隔的毫秒数
• setTime(s)
  根据指定的毫秒数s,计算日期

1. getFullYear()
   获取当前日期对象中四位的年份信息
2. getMonth()
   获取当前日期对象中的月份信息,返回值范围 0-11 对应12个月，在使用时需要手动调整
3. getDate()
   获取当前日期对象中的天数（某日）
4. getDay()
   获取当前日期对象中的星期数,返回值范围 0-6 对应星期天 - 星期六，星期天需要特殊处理
5. getHours() 获取当前日期对象中的小时数
6. getMinutes() 获取分钟数
7. getSeconds() 获取秒数

8. getMilliseconds() 获取毫秒数

   设置日期的显示方式
   1. toString();
   2. toLocaleString();
   3. toLocaleTimeString();
   4. toLocaleDateString();

---

window对象

自定义的全局变量和全局函数，默认都是window对象的属性和方法，使用时可以省略window

1. window.alert();
   普通警告框，参数为提示信息
2. window.prompt();
   带有输入框的弹框，参数为提示信息，返回用户输入的字符串

3. window.confirm();
   带有 确定/取消 按钮的提示框，参数为提示信息，返回布尔值，true表示用户点击确定，其他一律为false

   定时器

   周期性定时器（间歇调用）

• 特点 ：每隔一段时间，自动执行某段代码 window.setInterval(fun,duration)

1. fun : 表示要周期执行的代码
2. duration : 间隔时长，默认以毫秒为单位。1秒 = 1000毫秒
   返回当前定时器的ID，实际上就是整数值取消定时器时，根据定时器ID进行取消

• 取消间歇调用 clearInterval(timerID); timerID 表示要取消的定时器ID

一次性定时器（超时调用）

特点：超过指定的时间间隔之后，执行一次给定代码 setTimeout(fun,duration)

1. fun : 要执行的代码段
2. duration : 间隔时长，默认毫秒为单位
   返回值 ：定时器id

• 取消超时调用 clearTimeout(timer) 参数：要取消的定时器ID

注意：在给定的时间间隔内，程序不会阻塞或等待，而是向下执行其他语句

window 对象

1. screen
   • screen.width/height: 获取屏幕的宽高
   • screen.availWidth/availHeight: 获取屏幕实际可用的高度、宽度
2. history
   • history.length: 当前窗口访问过的URL的数量
   • history.back(): 后退
   • history.forward(): 前进
   • history.go(num): 跳转
3. location
   • location.href: 获取当前页面的URL
   • location.reload(param): 重载页面, param默认为false,表示从缓存中加载。true表示向服务器重新请求
4. navigator
   • 浏览器相关对象

document对象

1. 元素节点的常用属性

• innerHTML: 用来设置或读取元素节点的标签内容，赋值时，可识别HTML标签。
• innerText: 设置或读取元素节点的标签内容，赋值时，不能识别HTML标签。
• value: 用来设置或读取表单元素的值。

1. 操作元素节点的属性：

• getAttribute('attrName');
• setAttribute('attrName', 'value');

• removeAttribute('attrName')

  使用点语法访问对象属性

  • elem.id = "eg" 设置id属性值为eg
  • elem.className = "eg" 设置class属性值为eg
  • elem.id 获取id属性的值
  • elem.id = null 移除属性

1. 访问节点对象的style属性，操作元素行内样式
   行内样式：<h1 style="color:red;font-size:20px;"></h1>

• 一个单词构成的CSS属性，可以直接访问
• CSS属性名中出现多个单词，使用‘-’连接时，
  在JS中一律改成驼峰标识
  • elem.style.fontSize = "20px";
  • elem.style.backgroundColor = "red";
• 属性值以字符串形式赋值

1. 动态操作网页
   1. 在网页中插入元素
      • 创建元素节点var div = document.createElement('div');参数：标签名。返回值：创建好的元素节点
      • 为元素添加文本内容：div.innerHTML/innerText
      • 创建文本节点var text = document.createTextNode('');参数 ：文本内容。返回值 ：文本节点
   2. 添加节点, 不管是在网页中追加子节点，还是为元素节点添加文本节点，所有的添加操作都由父元素执行
      • 父节点.appendChild(childNode);默认在父节点的末尾添加子节点。
      • 注意：文本节点是元素节点的子节点
   3. 在指定位置插入元素节点，只有父节点能执行插入，删除操作
      • parentNode.insertBefore(newElem,oldElem);表示在oldElem之前插入newElem

   4. 删除节点parentNode.removeChild(elem);在父节点中删除指定的子节点

      事件

   5. 鼠标事件 ：
      onclick 单击
      ondbclick 双击
      onmouseover 鼠标移入元素
      onmouseout 鼠标移出元素
      onmousemove 鼠标在元素内移动
   6. 加载完毕后执行
      onload 元素或文档加载完毕之后触发
   7. 状态改变事件
      常用于表单元素
      onfocus 表单元素获取到焦点时触发
      onblur 失去焦点时触发
      onchange 元素内容发生改变并且元素失去焦点时触发
      oninput 实时监听输入，只要输入内容发生变化，都会触发
      onsubmit 当表单被提交时触发

   8. 键盘事件
      onkeydown 键盘按键被按下时触发
      onkeyup 按键抬起时触发
      onkeypress 键盘被按压

      事件绑定方式

2. 内联方式在标签中通过属性的方式绑定事件
   
   <button onclick = "alert('单击');">点击</button>
3. js 动态绑定事件
   js div.onclick = function(){ //事件触发后要执行的操作 };

4. W3C 标准事件监听
   ```js
   div.addEventListener('click',function(){});
   function clickEvent(){

   }
   div.addEventListener('click',clickEvent);
   ```
5. this 关键字

• this 表示当前函数或方法的调用者
  1. 全局函数由window调用，所以全局函数中的this指的是window对象

  2. 事件处理函数中使用this，指的是当前事件的触发对象

     事件对象

1. 事件对象伴随事件触发产生,包含当前事件相关的所有信息
2. 获取事件对象，事件对象伴随事件发生，自动产生，由浏览器以参数的形式传入到事件处理函数中，我们只需要设置形参就可以接收参数。
3. 事件对象的属性
   1. event.target/event.srcElement 表示当前事件的触发对象
   2. 鼠标事件对象常用属性
      1. offsetX offsetY 获取鼠标在元素上的坐标位置默认元素左上角为原点
      2. clientX clientY 获取鼠标在网页上的坐标位置
      3. screenX screenY 获取鼠标在屏幕上的坐标信息
   3. 键盘事件对象的常用属性
      1. onkeydown 事件 which 属性获取当前按键的键码对于大小写字母不进行区分
      2. onkeypress 事件
         1. key 属性
            获取当前按键对应的字符
         2. which 属性
            获取按键对应的ASC码 区分大小写

转载于:https://www.cnblogs.com/ravener/p/9848353.html