JavaScript知识点1
文章目录
- 一.复习HTML
-
- 1.面试题（行内元素和块级元素区别）
- 2.面试题（盒子模型）
- 3.面试题（元素隐藏的方式）
- 4.代码演示
- 二.JavaScript热身阶段
-
- 1. 表达式
- 2. 符号
- 3.JavaScript的三种输出格式
- 4.JavaScript交换变量的两种方法
- 三.JavaScript的运算符代码演示
-
- 1.算数运算符
- 2.比较运算符
- 3.逻辑运算符
- 4.赋值运算符
- 5.三目运算符
- 6.位运算符
- 篇章
一.复习HTML
1.面试题（行内元素和块级元素区别）
①行内元素：a、 img 标签一行可以显示多个元素。
②块级元素：p 、div、 ul 、li 、h1-h6标签 独占一行，一行显示一个元素。
2.面试题（盒子模型）
①margin+padding+border+内容部分
3.面试题（元素隐藏的方式）
①.display:none; 设置之后我们的元素不占位置，直接从页面消失。
②.visibility:hidden; 设置之后依然占位置，只是我们的视觉上看不见而已。
③.opacity:0；（透明度为0）
4.代码演示
<html>
<head lang="en">
<meta charset="UTF-8">//编码格式为UTF-8
<title>学习title>
<style>
div{
width: 200px;
height: 200px;
}
.first{
background-color: aqua;
/*
display: none;
是否可见
不可见之后，不会在网页中占着位置
*/
}
.second{
background-color: black;
/*
visibility: hidden;
是否可见
不可见之后，会在网页中占着位置
*/
}
.third{
background-color: red;
/*opacity: 0;*/
/*
opacity的取值范围： 0-1
0完全透明
1完全不透明
*/
}
style>
head>
<body>
<p>快乐每一天p>
<a href="http://www.baidu.com">跳转到百度a>
<div class="first">div>
<div class="second">div>
<div class="third">div>
body>
html>
二.JavaScript热身阶段
1. 表达式
由运算符连接的操作数据。
2. 符号
3.JavaScript的三种输出格式
①控制台输出
<script>
console.log("code");
</script>
②在网页上输出
<script>
document.write("code");
</script>
③通过id在网页中输出
<html>
<head>
<meta charset="UTF-8">
<title>快乐学习每一天</title>
</head>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML
="code";
</script>
</html>
4.JavaScript交换变量的两种方法
<html>
<head>
<meta charset="UTF-8">
<title>快乐学习每一天</title>
</head>
<script>
document.write("方法一:用第三个变量"+"
");
var a=1;b=2;
document.write(a,b+"
");
var temp;//临时变量
var temp;
temp=a;
a=b;
b=temp;
document.write(a,b+"
")
document.write("方法二：不用第三个变量"+"
");
var a2=1;b2=2;
document.write(a2,b2+"
");
a2=a2+b2;//3=1+2
b2=a2-b2;//1=3-2
a2=a2-b2;//2=3-1
document.write(a2,b2+"
")
</script>
</html>
三.JavaScript的运算符代码演示
1.算数运算符
<html>
<head>
<meta charset="UTF-8">
<title>快乐学习每一天</title>
</head>
<script>
var a=1,b=2,c=3;
var value=(b+c-a)*2/2%2;
document.write(value);//0
value++;
value++;
document.write("
"+value);//2
value--;
document.write("
"+value);//1
</script>
</html>
2.比较运算符
①;在JavaScript中，字母串会自动转成数值。
②简单来说：2个=代表相同 ，3个=代表严格相同。
③理解方式： 当进行双等号比较时候： 先检查两个操作数的数据类型是否相同，如果相同， 就进行3个=比较， 如果不同， 就要进行一次类型转换， 转换成相同类型后再进行比较， 而3个=比较时， 如果类型不同，直接就是返回false。
<html>
<head>
<meta charset="UTF-8">
<title>快乐学习每一天</title>
</head>
<script>
document.write(1<2);//true
document.write("
");
document.write(1<"2");//true
document.write("
");
document.write(1>2);//false
document.write("
");
document.write(1>=1);//true
document.write("
");
document.write(1==1);//true
document.write("
");
document.write(6<6>8);//代码无任何意义，所以返回false
document.write("
");
document.write(1===1);//true
document.write("
");
document.write(1!==1);//flase
document.write("
");
</script>
</html>
3.逻辑运算符
<html>
<head>
<meta charset="UTF-8">
<title>快乐学习每一天</title>
</head>
<script>
var x=1,y=2;
document.write(x < 10 && y > 1);//true
document.write("
");
document.write(x >10 || y < 1);//false
document.write("
");
document.write(!(x==y));//true
</script>
</html>
4.赋值运算符
<html>
<head>
<meta charset="UTF-8">
<title>快乐学习每一天</title>
</head>
<script>
var a=1;b=2;
document.write(a=b);//2
document.write("
");
document.write(a+=b);//4
document.write("
");
document.write(a-=b);//2
document.write("
");
document.write(a*=b);//4
document.write("
");
document.write(a/=b);//2
document.write("
");
document.write(a%=b);//0
document.write("
");
</script>
</html>
5.三目运算符
<html>
<head>
<meta charset="UTF-8">
<title>快乐学习每一天</title>
</head>
<script>
var age=20;
var value = (age < 18) ? "未成年":"已成年";
document.write(value);
</script>
//鼠标右键检查→点击console→便能看到控制台的登录效果
<script>
var username='root';
var password=123456;
var bool=username=='root'&& password==123456;
bool?console.log('登录成功'):console.log('登录失败');
</script>
</html>
6.位运算符
参考教程：https://www.w3school.com.cn/js/js_bitwise.asp
<html>
<head>
<meta charset="UTF-8">
<title>快乐学习每一天</title>
</head>
<script>
document.write(5&1);//1
document.write("
");
document.write(5|1);//5
document.write("
");
document.write(5^1);//4
document.write("
");
document.write(5<<1);//10
document.write("
");
document.write(5>>1);//2
document.write("
");
document.write(5>>>1);//2
document.write("
");
</script>
</html>
篇章
下一篇：JavaScript知识点2