一:
1 JavaScript基础语法
1.1 定义变量和数据类型
定义常量:const
定义变量:let 变量名=值;
数据类型:
基本类型/原始类型
number 数字类型(包括小数和整数)
string 字符串类型
boolean 布尔类型
undefined 未定义类型,如果变量没有赋值,那么默认类型就是undefined。
null 空对象的占位符
原始类型:js对象
let date=new Date();
let person={}
1.2 运算符
和=的区别?
== : 只比较值,值相等结果就是true。
===: 比较值和类型,只有值和类型都相同结果就是true。
在js中,非boolean类型的数据可以自动转换成boolean类型。
let div=document.querySelector("#div");
if(div!=null){} ===>等价于 if(div){}
lei str=调用某个方法,得到一个字符串结果;
if(str!=null && str.length>0){}====>等价于 if(str){}
目的:简化代码书写。
结论:undefined、null、0/NAN、"",会自动转成false,其他都转成true
举例: if(-1){} if("false") if(" "){} //都是true。
特殊数字:NAN,是一个number类型的标记,表示当前变量不是一个数字。
判断一个变量是不是NAN,使用isNaN()方法判断
1.3 流程控制语句
和java基本一致。
for(let i=0;i<100;i++){}
1.4 数组
let arr=[100,"hello",true];
数组的遍历:
for(let i=0;i<arr.length;i++){}
for(let el of arr){
//el表示遍历出来的每一个元素。
}
1.5 函数的定义方式
普通函数:
function 函数名(变量名,变量名,...){
//方法体
//如果需要返回结果,就是使用return关键字。
}
匿名函数:
let 变量=function (变量名,变量名,...){
//方法体
//如果需要返回结果,就是使用return关键字。
}
说明:变量名就是函数名称,变量的类型是function类型
箭头函数:类似于java中的lambda表达式
let 变量=(变量名,变量名,...)=>{
//方法体
//如果需要返回结果,就是使用return关键字。
}
说明:变量名就是函数名称,变量的类型是function类型
不同函数的使用场景:
普通函数最常用,没有固定的使用场景,经常用来封装一些通用的操作。
匿名函数常用在事件绑定和作为方法的参数传递。、
元素对象.onclick=function(){}
setTimeout(function(){},3000);
箭头函数通常作为方法的参数传递使用。
setTimeout(()=>{},3000);
2 DOM操作
2.1 获取元素对象
let el=document.querySelector("css选择器"); //根据选择器只能获取一个元素对象
let els=document.querySelectorAll("css选择器"); //根据选择器获取多个元素对象
2.2 操作标签的属性、样式、内容体。
操作属性: setAttribute(name,value);//了解
赋值:元素对象.属性名=值;
例如:img.src="img/1.jpg"
取值:let变量=元素对象.属性名
操作样式:
设置样式:元素对象.style.样式名="样式值";//设置一组样式
例如:div.style.backgroundColor="pink"
设置样式:元素对象.className="class属性值";//设置多组样式
操作标签内容:
内容体:
元素对象.innerHTML="html代码"; //设置内容体
元素对象.innerHTML+="html代码"; //追加内容体
表单输入框内容:
let 变量=input元素对象.value;
例如:let username=document.querySelector("#username").value;
3 事件
3.1 事件的绑定方式
方式1:
<input type='button' value="按钮" onclick="fun()"/>
function fun(){//进行相关的DOM操作}
方式2:
<input type='button' value="按钮" id="btn"/>
document.querySelector("#btn").onclick=function(){//进行相关的DOM操作}
3.2 常用的事件
单击事件onclick、失去焦点事件onblur、表单提交事件onsubmit、页面加载完成事件onload
表单提交事件onsubmit:
document.querySelector("#form").onclick=function(){
//进行相关的DOM操作
//最后需要通过return true或者false表示是否允许提交,如果不写返回值,那么默认提交。
}
页面加载完成事件onload:
window.onload=function(){//当页面加载完成之后执行这个匿名函数}
二:
1 js中的面向对象和继承【了解】
直接量/字面量方式定义js对象?
let 对象名={key:value,key:value,...} //说明:value可以是任意类型。
2 常用API
Number、String、Math、Date、Array、RegExp、JSON
如何使用正则对象?
//1 定义正则对象
let regExp=new RegExp("正则表达式");//了解
let regExp=/正则表达式/; //掌握,不能使用引号引起来。
//2 调用正则对象的test方法进行校验
let flag=regExp.test("要校验的字符串");//如果返回true表示校验通过,否则表示校验失败
JSON类:
定义json字符串:
let json='{"name":"snake","age":20}';
json字符串转换成js对象:
let person=JSON.parse(json); //let person={name:"snake",age:20}
js对象转json字符串
let json=JSON.stringIfy(person); //let json='{"name":"snake","age":20}';
3 BOM对象
window对象:
弹框:window.alert("")-->简写:alert(""); 【掌握】
window.confirm("您确定要删除吗?") -->简写:confirm("您确定要删除吗?")【掌握】
定时器:常用于制作动画特效。【了解】
一次性定时器:
let timmerId=setTimeout(函数对象/要执行的js代码字符串,时间毫秒值);
clearTimeout(timmerId);//清除定时器
循环定时器:
let timmerId=setInterval(函数对象/要执行的js代码字符串,时间毫秒值);
clearInterval(timmerId);//清除定时器
例如:
function fun(){
alert(100);
let num=100;
}
setInterval("fun",3000); //错,字符串中的代码不符合js的语法
setInterval("fun()",3000); //对,字符串符合js的语法,表示调用fun()方法
setInterval(fun(),3000);//错,调用方法,将方法的返回值作为参数传递给setInterval()定时器方法,没用。
setInterval(fun,3000);//对,函数名就是函数对象
location对象:【重点】
设置地址栏地址实现页面跳转:location.href="url路径"。