JavaScript

最新推荐文章于 2023-03-23 14:10:47 发布

落花新月

最新推荐文章于 2023-03-23 14:10:47 发布

阅读量372

点赞数

分类专栏： Web前端文章标签： JavaScript基础 JS 水平菜单选项卡

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50903027

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1. CSS hack：针对不同的浏览器写的不同的CSS代码，就叫CSS hack。

2.结构层——HTML——语义描述

样式层——CSS——美化渲染

行为层——JavaScript——交互（响应事件）

3.JavaScript脚本随着HTML页面的请求，会保存到本地。是运行在客户端的脚本语言，当然现在还有可以编写在服务器端的js。

另外，JavaScript代码是可以通过浏览器查看到的。

4.webstorm中的一个快速编写的方式：（多行编辑）

<!--ul>li*8+Tab+按住鼠标滚轮，实现快速编写下面的内容-->
<ul>
    <li>按住鼠标滚轮，可以实现同时编辑多行内容</li>
    <li>按住鼠标滚轮，可以实现同时编辑多行内容</li>
    <li>按住鼠标滚轮，可以实现同时编辑多行内容</li>
    <li>按住鼠标滚轮，可以实现同时编辑多行内容</li>
    <li>按住鼠标滚轮，可以实现同时编辑多行内容</li>
    <li>按住鼠标滚轮，可以实现同时编辑多行内容</li>
    <li>按住鼠标滚轮，可以实现同时编辑多行内容</li>
    <li>按住鼠标滚轮，可以实现同时编辑多行内容</li>
</ul>

5.JavaScript是大小写敏感的，对换行、空格是不敏感的。

6.对象、属性、方法：

（该截图截自传智公开课视频）

7.JavaScript练习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript练习</title>
    <style>
        div{
            width:100px;
            height: 100px;
            /*margin:100px auto;*/
            background-color: red;
        }
        #warn{
            border:1px solid blue;
        }
        .relocation{
            border: 1px solid yellow;
        }
        #changeBox{
            border:1px solid green;
        }
    </style>

    <script type="text/javascript">
//        实现点击红色方块后，页面的title也就是浏览器打开后左上角的内容发生变化
        function change(){
            document.title="哈哈，测试成功";
        }
//        弹出警告
        function  warn(){
            alert("哈哈，提醒你了哦！");
        }
//        页面跳转
        function relocation(){
            window.location="http://www.baidu.com";
        }
//        通过点击一个盒子，改变另一个盒子的背景色
        function changeColor(){
            document.getElementById("changeBox").style.backgroundColor="blue";
        }
    </script>
</head>
<body>
  <div οnclick="change()"></div>
  <div id="warn" οnclick="warn()"></div>
  <div class="relocation" οnclick="relocation()"></div>
  <div οnclick="changeColor()"></div>
  <div id="changeBox"></div>
</body>
</html>

运行效果分别为：

刷新页面后：

1）点击第1个盒子之后，

2）点击第2个盒子之后：

3）点击第3个盒子之后，跳转到百度网页：

4）点击第4个盒子之后：

8.JavaScript事件（该图片来自传智公开课视频截图）

9.JavaScript中常用驼峰命名法，如myBox。

10.练习2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript练习2</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript">
      function change(){
          document.getElementById("box1").style.backgroundColor="green";
          document.getElementById("box2").style.backgroundColor="red";
          document.getElementById("box2").style.width="400px";
          document.getElementById("box2").style.height="300px";
          document.getElementById("box2").style.backgroundImage="url(images/daiyu.jpg)";
      }
    </script>
</head>
<body>
<div id="box1" οnclick="change()"></div>
<div id="box2"></div>
</body>
</html>

运行效果：

点击第一个盒子之后，会有如下效果：

11.练习3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript练习3</title>
    <style>
       div{
           width: 200px;
           height: 200px;
           margin: 10px 20px;
           background-color: red;
       }
        #box2{
            display: none;
        }

    </style>
    <!--实现鼠标移动到盒子1时，盒子1变成黄色，盒子2显示出来；当鼠标离开时，恢复默认-->
    <script type="text/javascript">
        function  change(){
            document.getElementById("box1").style.backgroundColor="yellow";
            document.getElementById("box2").style.display="block";
        }
        function recovery(){
            document.getElementById("box1").style.background="red";
            document.getElementById("box2").style.display="none";
        }
    </script>
</head>
<body>
<div id="box1" οnmοusemοve="change()" οnmοuseοut="recovery()"></div>
<div id="box2"></div>
</body>
</html>

运行效果：

页面一打开：

图一

鼠标移动到红色的盒子1之后，出现以下效果：

图二

鼠标离开后，有恢复图一效果。

12.display:none; 是不占用位置的

visibility:hidden; 不显示出来，但是是占用位置的。

13.水平菜单

（来自传智播客公开课视频截图）

落花新月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

1. CSS hack：针对不同的浏览器写的不同的CSS代码，就叫CSS hack。2.结构层——HTML——语义描述样式层——CSS——美化渲染行为层——JavaScript——交互（响应事件）3.JavaScript脚本随着HTML页面的请求，会保存到本地。是运行在客户端的脚本语言，当然现在还有可以编写在服务器端的js。另外，JavaScript代码是可以通过浏览器
复制链接

扫一扫

专栏目录