目录
一、类的操作
先写一个基础页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类的操作</title>
<style>
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
height: 200px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<button id="btn01">点击按钮后修改box样式</button>
<br><br>
<div id="box" class="b1 b2"></div>
</body>
</html>
用 JS修改box样式,有两种,way1每次都要重新加载,用类的方式修改box,只加载一次,性能好很多。
<script>
window.onload = function(){
/*
通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面
这样执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便
*/
var box = document.getElementById("box");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 修改box样式
//way1:
/* box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor="yellow"; */
/*
way2:
我希望一行代码,可以同时修改多个样式
*/
// 修改box的class属性
/*
通过修改元素的class属性来间接修改样式
这样一来,只需修改一次就可以修改多个样式,
浏览器只需要重新渲染页面一次,性能较好,
并且这种方式,可以使得表现和行为进一步分离
*/
// 注意:这里用+=,是在原来类的基础上加上一个类,且新类前要有空格隔开
// box.className += " b2";
// 用函数修改box
// addClass(box,"b2");
// alert(hasClass(box,"okk"));
// removeClass(box,"b2")
toggleClass(box,"b2");
};
};
};
</script>
定义上面调用到的函数,分别是类的,增、删、改、查(判断是否有这个类);
// 定义一个函数,用来向一个元素中添加指定的class属性值
/*
参数:
obj 要添加class属性的元素
cn 要添加的class值
*/
function addClass(obj,cn){
if(!hasClass(obj,cn)){
obj.className += " "+cn;
}
};
/*
判断一个class中是否有指定的class属性值
参数:
obj 要添加class属性的元素
cn 要添加的class值
返回值:
有返回true,没有返回false
*/
function hasClass(obj,cn){
// 判断obj中有没有cn class
// 创建一个正则表达式,\b是单词边界表示b2独立存在
// var reg = /\bb2\b/;
// 注意:这里是\\b
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
};
// 删除一个元素中指定的class属性
function removeClass(obj,cn){
// 创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
// 删除class,用空串代替class
obj.className = obj.className.replace(reg,"");
};
/* toggleClass用来切换一个类
如果元素中有该类,则删除
如果元素中没有该类,则添加
*/
function toggleClass(obj,cn){
// 判断obj中是否含有cn
if(hasClass(obj,cn)){
// 有,则删除
removeClass(obj,cn);
}else{
// 没有,则添加
addClass(obj,cn);
}
基础JS到这里差不多了,开始高级一点的JS,也是从基础开始,刚好可以回顾复习一下,那我们从最基础的数据类型开始吧 ~
二、数据类型
1、分类
基本(值)类型
string 任意字符串
number 任意数字
boolean true/false
undefined undefined
null null
对象(引用)类型
一般对象:Object:任意对象
两种特殊对象:Funciton:可以执行
Array:有数值下标
2、判断
typeof
可以判断:undefined、数值、字符串、布尔值、function
不能判断:null和object(都返回object),object和Array(都返回bject)
用法:typeod 元素名;
instanceof :instance:实例,判断对象的具体类型。
用法:A nstanceof B 判断A是不是B的一个实例,那么B是一个构造函数
一般是 A instanceof Functon/Object/Array
=== 全等 / (== 相等(会做数据转换,最好用全等))
可以判断:undefined null(因为他们都只有一个值,所以可以用===判断)
<script type="text/javascript">
// 1、基本
var a
/* console.log(a,typeof a);//undefined 'undefined'
console.log(typeof a === 'undefined',a===undefined);//true true
console.log(typeof a === undefined,typeof a === 'undefined');//false true,所以判断要加''
console.log(undefined==='undefined');//false
*/
/* a = 4;
console.log(typeof a === 'number');//true
a='first';
console.log(typeof a === 'string');//true
a=true;
console.log(typeof a==='boolean');//true
a=null;
console.log(typeof a,a===null);//object
*/
// 2、对象
var b1 = {
b2:[1,'abc',console.log],
b3:function(){
console.log('b3');
return function(){
return 'ook';
}
}
};
/* console.log(b1 instanceof Object);//true
console.log(b1 instanceof Array);//false
console.log(b1.b2 instanceof Array);//true
console.log(b1.b2 instanceof Object);//true
console.log(b1.b3 instanceof Function);//true
console.log(b1.b3 instanceof Object);//true
console.log(typeof b1.b3);//function
console.log(typeof b1.b3==='function');//true
*/
console.log(typeof b1.b2);//数组类型返回object
console.log(typeof b1.b2[2]==='function');//true
//执行函数console.log,加小括号
b1.b2[2](4);
//这里加2个括号,第一个括号表示执行b3这个函数,然后返回第二个函数,
// 这个时候b1.b3()表示第二个函数,执行它,再加小括号就可以,最后返回ook,用console.log输出
console.log( b1.b3()());//ook
3.面试可能会问的问题
1.undefined 与 null 的区别?
undefined:表示定义了未赋值
null:表示定义并赋值了,只是值为null
2.什么时候给变量赋值为null?
初始赋值,表明将要赋值为对象
结束前赋值,让对象成为垃圾对象;
3.严格区别变量类型与数据类型?(了解即可)
数据的类型
基本类型
对象类型
变量的类型(JS是弱类型的语言,var是没有类型的,变量类型实际上是变量内存值的类型,)
基本类型:保存基本类型数据
引用类型:保存地址值
<script>
// 实例:全称实例对象
// 类型:类型对象
// 构建Person构造函数,构造函数类型:函数→对象;
function Person(name,age){
this.name = name;
this.age = age;
};
var p = new Person('Joy',12);//根据类型创建的实例对象
// 1.undefined 与 null 的区别?
var a;
console.log(a);//undefined
a = null;
console.log(a);//null
// 2.什么时候给变量赋值为null?
// 疑问,定义为null后用typeof检查,输出object
var b = null;//初始赋值为null,表明将要赋值为对象
b=['ook',12];
//最后
b=null//让b指向的对象成为垃圾对象(被垃圾回收器回收),垃圾对象:没有变量(栈内存)指向(变量里存放它的地址)它(堆内村)的对象
// 3.严格区别变量类型与数据类型?
var c = function(){
}
console.log(typeof c)//function
</script>
参考:
1.bilibili视频:尚硅谷JavaScript基础&实战|JS入门到精通全套完整版