JS常用知识点总结

JS常用知识点总结

1.介绍

JS：客户端脚本语言，可以使页面和用户产生交互的行为。

2.动态页面：

​ 1.HTML + JS： 动态效果
​ 2.HTML + JSP：动态数据

3.js的组成

ECMAScript（ES）：提供了js的核心语法
BOM：浏览器对象模型
DOM：文档对象模型

4.输出

//1.输出到浏览器控制台
console.log(xxx);
//2.输出到页面中:
document.write(xxx);
//3.弹框输出:
alert(xxx);

5.引入方式：

             <script>
                xxx
             script>

             <script src="外部.js文件的路径">script>

6.注释：

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

7.标识符：

​ java中标识符：包名，类名，方法名，变量名，…
​ js中标识符：类名，方法名，变量名，…
​ 语法规则：数字，字母，_，$ 组成，其中数字不能开头，不能为关键字和保留字。
​ 语法要求：
​ 类名： 大驼峰命名法
​ 方法名：小驼峰命名法
​ 变量名：小驼峰命名法

8.数据类型：

​ 1.数值类型（整数和浮点数）：number
​ 2.字符串类型：string
​ 3.布尔类型：boolean
​ 4.null 空值
​ 5.“” 空串
​ 6.特殊类型：
​ not a number
​ undefined
​ 7.对象类型
​ 8.var可存储所有数据类型

9.变量

//1.先声明，后赋值
    var i;
    i = 1;
    var a,b,c;
    a = 1;
    b = "a";
    c = true;
//2.声明同时完成赋值
    var a = 1;

10.常量

    const PI = 3.14;

11.js中的运算符

​ 1.算数运算符：+ - * / % ++ –
​ 2.赋值运算符：= += -= *= /+ %=
​ 3.比较运算符：> >= < <= == === != !==
​ ==： 两侧数据类型不一致，转换为数字类型进行比较
​ ===：数据类型不一致直接返回false，两侧数据类型相等才进行比较
​ 4.逻辑运算符：|| && !
​ 5.三元运算符：条件 ? 值1 : 值2;
​ 6.类型运算符：
​ 1.typeof：判断存储值的实际类型
​ 2.instanceof：是否为对象

12.流程控制：

​ 1.顺序执行结构：按照顺序依次执行
​ 2.分支结构：
​ 1.if系列：if if else if else if else
​ 2.switch
​ 3.循环结构
​ 1.for循环
​ 2.while循环
​ 3.do while循环
​ 4.循环控制语句：
​ break：终止循环
​ continue：终止本次循环，进入下次循环
​ for使用continue，终止本次循环，执行迭代因子
​ while do while使用continue，终止本次循环，执行boolean表达式（容易造成死循环）

13.函数：

1.自定义函数
    1.无参数，无返回值
        function 函数名(){}
        var 函数名 = function(){}
    2.有参数，无返回值
        function 函数名(参数, ...){}
        var 函数名 = function(参数, ...){}

    3.无参数，有返回值
        function 函数名(){
            return 值;
        }
        var 函数名 = function (){
            return 值;
        }

    4.有参数，有返回值
        function 函数名(参数, ...){
            return 值;
        }
        var 函数名 = function (参数, ...){
            return 值;
        }

2.内置函数（JS对象中提供的函数）
1.Array 对象中的函数
2.Date 对象中的函数
3.Global 全局对象中的函数（直接使用）
eval()： 将字符串中的内容变为可执行的js脚本
isNaN()：是否不是一个数字
parseFloat()：转换为浮点类型
parseInt()：转换为整数类型
Number()：转换为数字类型
4.Math 对象中的函数
5.Number 对象中的函数
6.String 对象中的函数

14.数组

1.创建

​ var arr = [元素,元素,…];
​ var arr = new Array(数组长度);

2.操作数组

​ 1.添加|修改元素：数组名[索引] = 值;
​ 2.获取元素：var 变量名 = 数组名[索引];

3.数组的遍历

​ 1.普通for循环

 for(var i = 0; i < 数组名.length; i++){
                数组名[i] -> 数组中每一个元素
            }

​ 2.增强for循环

 for(var i in 数组名){
                数组名[i] -> 数组中每一个元素
            }

15.事件（事件驱动）

1.介绍

​ 元素绑定事件，监听到元素触发了事件，驱动函数执行。

2.常用事件

​ onclick：单击事件
​ onmouseover：鼠标移入事件
​ onmousemove：鼠标移动事件
​ onmouseout：鼠标移出事件
​ onsubmit：form表单提交事件
​ onfocus：获得焦点事件
​ onblur：失去焦点事件
​ onchange：改变事件（通常用在下拉列表中）
​ onload：页面加载完成的事件

3.事件使用

​ 1.方式一:

       <button onclick="函数名()">xxxbutton>

​ 2.方式二：

<button id="btn">xxxbutton>
<script>
    document.getElementById("btn").onclick = function () {}
script>

16.BOM与DOM

1.BOM（浏览器对象模型，window使用时可以省略）：使用js操作浏览器

​ 1.属性：
​ history：
​ history.back()：回到上一个历史
​ history.forward()：回到下一个历史
​ history.go(数字)：回退指定个数的历史，负数
​ 前进指定个数的历史，正数
​ location：
​ location.reload()：刷新页面
​ location.href：获取地址栏的url
​ location.href = “url”：访问指定的url，当前标签页中打开
​ 2.函数：
​ 1.弹框
​ 1.警告框（只有确认按钮）：alter(xxx)
​ 2.提示框（确认按钮和取消按钮）：confirm(xxx)
​ var b = confirm(xxx);
​ 3.对话框（输入内容，确认按钮，取消按钮）prompt(xxx)
​ var b = prompt(xxx);
​ 2.访问指定的资源
​ open(url)， 打开指定的url，新的标签页中打开
​ 3.setInterval()：周期性执行，循环执行
​ 4.setTimeout()：延时执行，只执行1次

2.DOM（文档对象模型，document对象）

1.获取元素节点：

​ 1.根据id属性值获取，返回唯一元素节点对象

 document.getElementById("id属性值");

​ 2.根据class属性值获取，返回元素节点对象的数组

document.getElementsByClassName("class属性值");

​ 3.根据标签名获取，返回元素节点对象的数组

 document.getElementsByTagName("标签名");

​ 4.根据name属性值获取，返回元素节点对象的数组

document.getElementsByName("name属性值");

2.操作文本节点：

​ 1.操作纯文本
​ 获取元素节点中的文本内容
​ var val = 元素节点对象.innerText;
​ 将新的内容添加到元素节点中，覆盖元素节点中之前的内容
​ 元素节点对象.innerText = “内容”;
​ 2.操作文本或html
​ 获取元素节点中的html和文本内容
​ var val = 元素节点对象.innerText;
​ 将新的内容添加到元素节点中，覆盖元素节点中之前的内容
​ 元素节点对象.innerText = “html + 内容”;

3.操作属性节点：

​ 1.获取元素节点的属性节点值
​ var val = 元素节点对象.属性名;
​ var val = 元素节点对象.getAttribute(“属性名”);

​ 2.修改元素节点的属性节点值
​ 元素节点对象.属性名 = “值”;
​ 元素节点对象.setAttribute(“属性名”, “值”);

4.操作css样式：

​ 1.方式一：修改style属性值
​ var val = 元素节点对象.style.样式名; 获取样式值
​ 元素节点对象.style.样式名 = “值”; 修改样式值

​ 2.方式二：修改class属性值
​ var val = 元素节点对象.className; 获取class属性值
​ 元素节点对象.className = “值” 修改class属性值