文章目录
js引用的两种方式
- script
- script src=""
注意：代码执行时是有先后顺序的,从上到下执行 ，在body上面的话无法获取到DOM元素,需要加一个window.onload意思是在代码执行完毕后执行函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// window.onload是在页面加载完成后执行
window.onload=function(){
var box=document.getElementById('box');
console.log(box);
}
</script>
</head>
<body>
<div id="box"></div>
</body>
closole控制台
console.log()
输出
console.dir()
详细输出
window弹窗
alert弹框
会把值转换为字符串
confirm
提示框，有取消与确认两个按钮，并且有返回值,点击确定就是true 取消就是false
var ac=confirm('aaaaa');
cosnoel.log(ac);
prompt
在confirm的基础上增加了信息输入框
返回值，如果点击确定，返回的就是输入的内容，如果没输入点击了确定就是空，如果点击取消就是null
var ac={};
console.log(alert(ac));//undefined
console.log(confirm('准备好了吗'));//确认就是true 取消就是false
console.log(prompt('你是男孩还是女孩'));//输入且确认就是输入内容 取消 null 未输入确认为空
获取属性名对应的属性值，方法：
1.对象.属性名
2.对象[‘属性名’]
注意：数字的属性名不可以用obj.要用另一种,如果对象里面没有的属性，结果为undefined
对象
属性名：一般为数字或字符串
属性值：可以为任何数据类型
// 对象
// 属性名：一般为数字或字符串
// 属性值：可以为任何数据类型
var obj={name:'xiaowang',age:'28',100:'he'};
// 获取属性名对应的属性值，方法：
// 1.对象.属性名
// 2.对象['属性名']
// 注意：数字的属性名不可以用obj.要用另一种
console.log(obj.name);//xiaowang
console.log(obj['name']);//xiaowang
// console.log(obj.100); 会报错，数字的属性名不可以用obj.
console.log(obj[100]);//he
var name="aa";
console.log(obj[name]);//undefined
添加、更改与删除
// 更改,添加与删除
var obj={name:'xiaowang',age:'28',100:'he'};
obj.name='didi';//更改
obj.user='wowowo';//添加
obj.age=null;//删除 把值变为空
delete obj.age;//彻底删除
console.log(obj);
基本数据类型与引用数据类型的区别：背
一个是按值操作，一个是按空间地址操作
思考题:
- 堆内存：
- 主要用来存放引用数据类型，
- 如果是对象，存的就是属性名和属性值，如果是函数，把函数当成字符串存起来
- 栈内存：
- 供js代码运行
- 存基本数据类型的值
var a=12;
var b=a;
console.log(b);//12
var obj1={"name":"lili","age":12};
var obj2=obj1;
obj2.age=18;
console.log(obj1.age);//18
var obj={
n:10,
b:obj.n
};
console.log(obj.b);
// 报错 因为obj还没有存完，是undefined，然后undefined没有属性，所以报错
//TypeError: Cannot read property 'n' of undefined
//n前面的obj为undefined
if判断
只要一个条件成立，下面就不执行了
//if语句
var ad=12;
//单个的一个if
if(ad>10){
alert(1);
}
//if==> else if ==> else else if可以有多个
if(ad<10){
alert(1);
}else if(ad<20){
alert(2);
}
else{
alert(3);
}
//可以进行嵌套
if(ad>10){
if(ad>5){
alert(1);
}
}
判断符号 背
- && 且，代表两边都要满足
- || 或，代表两边满足一个就可以了
三元运算符 背
条件?条件成立执行的语句:条件不成立执行的语句，多条语句用()包起来，用,隔开
特殊情况，else里没有东西，也需要写:否则会有语法错误，可以用null /undefined /void 0来做占位符
var num=5
if(num>=5){
num++;
alert(2);
}else{
num--
}
//改成三元运算符
num>=5?(num++,alert(2)):num--
//num>=5?num++:void 0; else里没有东西时
思考题
var num=12;
if(num>0){
if(num<10){
num++;
}else{
num--;
console.log(num);
}
}else{
if(num==0){
num++;
num=num/10;
}
};
//num>0?(num<10?num++:num--,console.log(num)):(num==0?(num++,num=num/10):null);
switch语句
每个case都要加break防止继续向下执行
case等于三个等号的绝对相等
var num=6;
if(num==5){
num++;
}else if(num==6){
num--;
}else {
num=0;
}；
//改成switch语句
console.log(num);
switch(num){
case 5:
num++;
break;
case 6:
num--;
break;
default:
num=0;
}
== 与=== 的区别
==是比较，可以不用类型相等,如果数据类型不同，会先转换为相同类型再比较
===是绝对比较，必须一模一样
检测数据类型的几种方法 背
- typeof"值"
- 特殊记忆：typeof"null"为"object"
- 返回值一定是字符串，是用""包裹的数据类型
- 无法细分对象数据类型中的数组等
- instanceof
- constructor
- Object.prototype.toString.call()
面试题
typeof[];//"object"
typeof typeof[];//"string"
js设置鼠标悬浮，鼠标离开
- 悬浮:onmouseover
- 离开:onmouseout
Box.onmouseover=function(){
// alert('鼠标悬浮');
Box.style.color="red";
}
Box.onmouseout=function(){
// alert('鼠标离开');
Box.style.color="blue";
}
js设置css样式
属性名.style.样式=‘样式属性’
Box.style.color="red";
js添加/获取文本 js添加/获取结构
innerText
innerHTML
innerText只能识别文字，innerHTML可以识别标签
// console.log(Box.innerHTML);//"<h1>haha</h1>"
// console.log(Box.innerText);//"haha"
// Box.innerText="<h2>didi</h2>";
// Box.innerText="<h2>didi</h2>";
JS点击事件
onclick
注意：this是当前点击事件
Box.onclick=function(){
console.log(this.style.color);
}
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
