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属性值

你可能感兴趣的:(javascript,前端,开发语言)