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 + 内容”;
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属性值