JS常用知识点总结

最新推荐文章于 2024-05-25 13:46:03 发布

笑魇依然

最新推荐文章于 2024-05-25 13:46:03 发布

阅读量64

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/CFJCSDN/article/details/133148520

版权

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.引入方式：

<!--1.内部式：将js脚本写在script标签中-->
             <script>
                xxx
             </script>
<!--2.外部式：将js脚本写在单独的.js文件中，需要使用js脚本的页面引入外部.js文件。-->
             <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="函数名()">xxx</button>

2.方式二：

<button id="btn">xxx</button>
<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 + 内容”;