JavaScript知识点1

最新推荐文章于 2023-12-23 11:09:23 发布

梦幻之光_dream

最新推荐文章于 2023-12-23 11:09:23 发布

阅读量750

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/William_fang/article/details/103664810

版权

JavaScript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文复习了HTML中的行内元素与块级元素的区别、盒子模型及元素隐藏的方法，并介绍了JavaScript的基础，包括表达式、符号、输出格式以及交换变量的方法。接着详细探讨了JavaScript的运算符，如算数、比较、逻辑、赋值、三目和位运算符，提供了代码演示。

摘要由CSDN通过智能技术生成

一.复习HTML

1.面试题（行内元素和块级元素区别）

①行内元素：a、 img 标签一行可以显示多个元素。
②块级元素：p 、div、 ul 、li 、h1-h6标签独占一行，一行显示一个元素。

2.面试题（盒子模型）

①margin+padding+border+内容部分

3.面试题（元素隐藏的方式）

①.display:none; 设置之后我们的元素不占位置，直接从页面消失。
②.visibility:hidden; 设置之后依然占位置，只是我们的视觉上看不见而已。
③.opacity:0；（透明度为0）

4.代码演示

<!DOCTYPE html>
<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>
<!--Ctrl+d 复制-->
<!--Ctrl+/ 注释-->
<!--Alt 多行编辑-->
<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("方法一:用第三个变量"+"<br>");
    var a=1;b=2;
    document.write(a,b+"<br>");
    var temp;//临时变量
    var temp;
    temp=a;
    a=b;
    b=temp;
    document.write(a,b+"<br>")

    document.write("方法二：不用第三个变量"+"<br>");
    var a2=1;b2=2;
    document.write(a2,b2+"<br>");
    a2=a2+b2;//3=1+2
    b2=a2-b2;//1=3-2
    a2=a2-b2;//2=3-1
    document.write(a2,b2+"<br>")
</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("<br>"+value);//2
    value--;
    document.write("<br>"+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("<br>");
    document.write(1<"2");//true
    document.write("<br>");
    document.write(1>2);//false
    document.write("<br>");
    document.write(1>=1);//true
    document.write("<br>");
    document.write(1==1);//true
    document.write("<br>");
    document.write(6<6>8);//代码无任何意义，所以返回false
    document.write("<br>");
    document.write(1===1);//true
    document.write("<br>");
    document.write(1!==1);//flase
    document.write("<br>");
</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("<br>");
    document.write(x >10 || y < 1);//false
    document.write("<br>");
    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("<br>");
    document.write(a+=b);//4
    document.write("<br>");
    document.write(a-=b);//2
    document.write("<br>");
    document.write(a*=b);//4
    document.write("<br>");
    document.write(a/=b);//2
    document.write("<br>");
    document.write(a%=b);//0
    document.write("<br>");
</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("<br>");
    document.write(5|1);//5
    document.write("<br>");
    document.write(5^1);//4
    document.write("<br>");
    document.write(5<<1);//10
    document.write("<br>");
    document.write(5>>1);//2
    document.write("<br>");
    document.write(5>>>1);//2
    document.write("<br>");
</script>
</html>