day15_css补充、js基础、dom基础

最新推荐文章于 2022-02-12 11:05:31 发布

Ali--

最新推荐文章于 2022-02-12 11:05:31 发布

阅读量306

点赞数

分类专栏： python_web前端

本文链接：https://blog.csdn.net/liyanan8514/article/details/79478718

版权

python_web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS内容之position

我们今天来学习css里面比较重要的一个知识点，position，这个是干嘛的呐，是将页面分层的，就是说，我们所有的标签默认都是在一层，但是使用了position之后，就可以把页面分层了，废话不多说了，下面我们就来看看，实际的

固定在页面某个位置

说明：position：fixed 表示固定在页面某个位置，但是这个要结合上(top)、下(bottom)、左(left)、右(right) 样式使用

1、固定在右上角

<body>
    <div style="width: 50px;height: 50px;background-color: red;
    position: fixed;   #position把跟底部页面分开，然后固定在某个位置
    top: 0;   #position结合top和right使用
    right: 0;"
    >顶部</div>
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

2、固定在右下角

<body>
    <div onclick="gotop()" style="width: 50px;height: 50px;background-color: red;
    position: fixed;
    bottom: 20px;  #固定在右下角
    right: 20px;"
    >顶部</div>
    <div style="height: 5000px;background-color: skyblue;"></div>

    <script>
        function gotop(){   //返回顶部的js
            document.body.scrollTop = 0;
        }
    </script>
</body>

3、菜单栏固定在顶部

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            right:0;
            left: 0;

        }
        .pg-body{
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body"></div>
</body>
</html>

小结：position：fixed 表示固定在页面某个位置

固定在相对位置

我们不能把所有标签固定在一个页面上的某个位置，我们还想把标签固定在某个div的某个位置，那么这个位置就是相对位置，相对个父标签div而固定的位置，那这个怎么弄呢？下面我们就来一起研究一下

1、absolute单独使用

说明：之前我们用的是fixed的，现在用absolute使用看看，跟fixed的有什么区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 50px;width: 50px;background-color: red;
    position: absolute;
    right: 0;
    bottom: 0;
    "></div>
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>
</html>

①滚轮没有滑动的效果：
这里写图片描述
②我滑动滚轮的效果：

所以说position:abosolute是一锤子买卖，最开始固定在哪里，我以后跟着滚动条的时候，也跟着滑轮动起来。

2、relative+absolute结合起来使用

说明：absolute一般情况下没啥软用，但是跟relative结合起来用就牛逼了，它的意思就是，absolute所在子标签，相对relative的父标签位置去定位的。

<body>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">  #父标签用position: relative
        <div style="position: absolute;  #字标签用：position: absolute，意思：根据父标签去固定位置
        top: 0;
        right: 0;
        width: 50px;height: 50px;background-color: skyblue"></div>
    </div>
</body>

这里写图片描述

注意了：如果想让div居中的话，则使用 margin： 0 auto；
问：如果把上面的absolute改成fixed的话，会出现什么效果呢？

这里写图片描述

所以说fixed是固定在页面的某个位置，不会随着滚轮的滑动而改变，absolute是相对于父标签的所在位置去固定位置，是相对的。
问：如果right或者top为负像素的话，会出现什么现象？

就会跑到外面去了，这个没有关系的，它还是依据它的父标签去固定的，只是right的值不一样而已。

CSS内容position之3层页面

我们之前经常遇到，点击一个按钮就会弹出一个框，然后除了框内的东西，其他的都不可以操作了，这个是怎么做的呐？今天我们就来亲手做一个，如何实现这种搞到上的效果。
这里写图片描述

实现两层页面

说明：先实现下面两层的，最外层白色的，我们下面继续研究。那说起第二层，就是把第一层全部包裹起来，然后无法点击第一层页面。意思就是说在第一层页面的基础上，我把position： fixed，然后我让他的上下左右的都为0像素。

<body>
    <div style="position: fixed;top:0;right: 0;left: 0;bottom: 0;background-color: black;"></div>  #用fixed固定，然后上下左右为0像素
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

这里写图片描述
好像不是我们要的效果：我们要的效果是第二层是半透明状态啊，这边用到一个css的一个属性：opacity: 0.5。opacity的值是0-1,1:表示完全遮住了，0表示没有遮住。中间值0.5相当于半透明状态，所以我们代码改成这样：

<body>
    <div style="opacity: 0.5;   #透明度设置0.5表示半透明状态
    position: fixed;top:0;right: 0;left: 0;bottom: 0;background-color: black;"></div>
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

这里写图片描述
注意了，这边需要使用opacity属性。

3层页面实现

既然2层我们都已经搞定了，现在我们来看看，3层是如何搞定的，无非就是在2层外面在固定一层，但是第三层不是全部覆盖而已，只是占了某一块。

<body>
    <div style="position: fixed;background-color: white;height: 400px;width: 500px;"></div> #在外面再加上一层
    <div style="opacity: 0.5;
    position: fixed;top:0;right: 0;left: 0;bottom: 0;background-color: black;"></div>
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

这里写图片描述
但是感觉，这个没啥效果，这个是随机性的，哪个在上面在下面不一定，所以这边又要引用一个：z-index，这个值越大，优先级越高，页面就越往上。

<body>
    <div style="z-index:10;   #z-index值为10
    position: fixed;background-color: white;height: 400px;width: 500px;"></div>
    <div style="z-index:9;  #z-index值为9
    opacity: 0.5;
    position: fixed;top:0;right: 0;left: 0;bottom: 0;background-color: black;"></div>
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

这里写图片描述
好像已经达到我们想要的效果了，但是好像白色的页面不在中间啊，所以我们现在居中一下：

<body>
    <div style="z-index:10;
    top:50%;left: 50%;margin-left: -250px;margin-top: -200px;  #位置居中一下
    position: fixed;background-color: white;height: 400px;width: 500px;"></div>
    <div style="z-index:9;
    opacity: 0.5;
    position: fixed;top:0;right: 0;left: 0;bottom: 0;background-color: black;"></div>
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

这里写图片描述
ok完成了，如果将来我们想通过按钮来判断是否显示这两个框，就令这两个div的display:none就行，如果不显示就把none去掉，显示，就把none加上。

小结

1、在页面基础上再封一层一面，用position: fixed
2、显示页面的透明度：opacity: 0.5，opacity的值是0-1,1:表示完全遮住了，0表示没有遮住。中间值0.5相当于半透明状态。
3、显示页面的优先级用：z-index，这个值越大，优先级越高，页面就越往上。

CSS内容补充之overflow

我们在设置图片的时候，如果只设置外面div的，高度和宽度，但是里面的img的图片的高度和宽度没有变化，那我们想如何在外层div这边去控制它的高度和宽度呐，今天我们就来学习一下overflow。

overflow

1、不设置overfl的情况

说明：显示了图片的本身的大小，不受外层div的控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;width: 200px;">
        <img src="static/zhangtianai.jpg">
    </div>
</body>
</html>

这里写图片描述

2、overflow：hidden

说明：隐藏效果，只显示div的高度和宽度，图片多余的部分隐藏掉了

<body>
    <div style="height: 200px;width: 200px;overflow: hidden;">
        <img src="static/timg.jpg">
    </div>
</body>

这里写图片描述

3、overflow：auto

说明：图片超过外层的div的高度和宽度，就会显示滚动条

<body>
    <div style="height: 200px;width: 200px;overflow: auto;">
        <img src="static/timg.jpg">
    </div>
</body>

这里写图片描述

显示图片的全部内容

我如果想显示图片的全部内容，那咋办呐？这个只能修改图片本身的属性了，代码如下：

<body>
    <div style="height: 200px;width: 200px;">
        <img src="static/timg.jpg" style="height: 200px;width: 200px;"> #修改图片本身的大小
    </div>
</body>

这里写图片描述

CSS内容补充之hover

我们之前一些网站，就是点击菜单栏的时候，会出现一些我们想要的效果，鼠标放上去的时候，颜色和其他的菜单栏不一样，这个是为啥呢？我们也想做这个东西，看起来好炫酷的感觉
这里写图片描述

没有hover的情况

我们鼠标放上去没有效果的情况，然后样式表是如何做的:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            top:0;
            right: 0;
            left: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;  #垂直居中
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;  #把a标签变成又是块级标签又是行内标签
            padding: 0 10px;  #上下内边距为0，左右边距是10px
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">图片</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">a</div>
    </div>
</body>
</html>

这里写图片描述

有hover的效果

刚刚我们只是展示了鼠标放上去没有任何效果的情况，现在我们要用hover的情况：有了它表示这个样式只要我的鼠标一点击，这个里面的样式就应用上了
用法

.pg-header .menu:hover{    #标签的样式：hover后，点击鼠标就会使用下面样式
            background-color: #5fb57d;
            color: white;
        }

实例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            top:0;
            right: 0;
            left: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px;
        }
        /*当鼠标移动当前标签上时，以下css属性才会生效*/
        .pg-header .menu:hover{
            background-color: #5fb57d;
            color: white;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">图片</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">a</div>
    </div>
</body>
</html>

这里写图片描述

小结

1、标签：hover{具体样式} 指的是：表示这个样式只要我的鼠标一点击的时候，这里面的样式就应用上了。

CSS内容补充之background

之前我们一直用的是background-color，但是一直没有研究过backgroup的其他的属性，今天我们来研究一下背景图片，已经固定一个大图标下的某个小图标，在这个经常在我们的网站中使用，下面我们就来搞一下吧。

背景图片

1、默认背景图片

说明：用backgroud-image: url(‘图片地址’)来添加背景图片，默认div多大，则图片重复访问

<body>
    <div style="background-image: url('static/111.jpg');height: 220px; "></div>
</body>

这里写图片描述
问：我如果高度设置大一点呐？

<body>
    <div style="background-image: url('static/abc.jpg');height: 440px;"></div>#高度设置440px
</body>

这里写图片描述

2、背景图片是否重复

1、背景图片不重复
说明：设置背景图片，但是我不想重复，使用方法：backgroup-repeat: no-repeat。

<body>
    <div style="background-image: url('static/abc.jpg');height: 440px;
    background-repeat: no-repeat"></div>  #no-repeat设置背景图片不重复
</body>

这里写图片描述
2、背景图片水平重复
说明：设置背景图片，但是我只想水平重复，使用方法：backgroup-repeat: repeat-x。

<body>
    <div style="background-image: url('static/abc.jpg');height: 440px;
    background-repeat: repeat-x"></div>   #repeat-x  水平重复
</body>

这里写图片描述
3、背景图片垂直重复
说明：设置背景图片，但是我只想垂直重复，使用方法：backgroup-repeat: repeat-y。

<body>
    <div style="background-image: url('static/abc.jpg');height: 440px;
    background-repeat: repeat-y"></div> #repeat-y垂直背景图片重复
</body>

这里写图片描述

固定块级标签中图片的位置

比如说一个div中的一个图片中N多的图标，但是我只想在有限的div中显示某个图标，那咋办呐？如何移动这些图标呢？

<body>
    <div style="background-image: url('static/icon_18_118.png');height: 200px;
    background-repeat: no-repeat;border: 1px solid red;"></div>
</body>

这里写图片描述
这样，我们设置一下div的宽度和高度，使它只显示一个图标：

<body>
    <div style="background-image: url('static/icon_18_118.png');
    height: 20px;width: 20px;  #只设置适当高度和宽度只显示一个小图标
    background-repeat: no-repeat;border: 1px solid red;"></div>
</body>

这里写图片描述
但是我想div里面的图片，如果我使用margin或者padding的话，我只移动div本身，根本改变不了div内部的效果，所以我们使用backgroup-postion这个属性

1、水平移动背景图片

说明：backgroup-postion-x，正数表示向左移动，负数表示向右移动

<body>
    <div style="background-image: url('static/icon_18_118.png');
    height: 20px;width: 20px;background-position-x: 20px; #向左水平方向移动背景图片
    background-repeat: no-repeat;border: 1px solid red;"></div>
</body>

2、垂直方向移动

说明：backgroup-postion-y，正数表示向下移动，负数表示向上移动

<body>
    <div style="background-image: url('static/icon_18_118.png');
    height: 20px;width: 20px;background-position-y: 20px; #向下移动20px
    background-repeat: no-repeat;border: 1px solid red;"></div>
</body>

3、用backgroup-postion直接表示

说明：backgroup-postion：0 0，表示x，y的坐标的值

<body>
    <div style="background-image: url('static/icon_18_118.png');
    height: 20px;width: 20px;background-position: 20px  20px; #向下和向左各移动20px
    background-repeat: no-repeat;border: 1px solid red;"></div>
</body>

根据上面的图的情况，我们其实x坐标不需要移动，只需要把y坐标改成负数，就可以把下面的图标移上来：
这里写图片描述

小结

1、backgroud-image: url(‘图片地址’)；默认，根据div的大小。背景图片水平和垂直重复访问
2、backgroud-repeat: no-repeat:背景图片不重复，repeat-x:背景图片水平重复，repeat-y:背景图片垂直重复
3、backgroud-position-x:水平移动背景图片，backgroud-position-y:垂直移动背景图片，backgroud-position:x y。
4、backgroud: red url(‘图片地址’) -105px -212px no-repeat。分别指的是backgroup: 背景色背景图片背景图片x位置坐标背景图片y位置坐标重复度

JavaScript代码存在形式

之前我们讲了css和html，下面我们来学习学习javascript，JavaScript代码存在以怎样的形式展现给我们的，今天我们就来研究一下。

在head中展现

1、直接在js代码

<head>
    <script type="text/javascript">  //type="text/javascript",表示是js代码，如果不写的话，默认就是这个属性
        //js代码
    </script>
</head>

2、直接引用js文件

说明：src=”本地js文件或者是其他网站的js文件链接”

<head>
　　//引用js文件，这个js文件也可以是其他网站的js文件链接,这个里面不能执行任何脚本，单纯的引用，想执行脚本，需要另写<script>
    <script src="js/s1.js"></script>
</head>

这里写图片描述

html文件执行的顺序

html文本是从上到下依次执行，先执行js文件，等上面执行完了，再执行下面的body中的html的文本

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">   #head中执行js
        alert(123)
    </script>
</head>
<body>
    <h1>ehofqwo</h1>   #body中h1标签
</body>
</html>

这里写图片描述
由此看到，先执行了js，然后等点击确定之后，才能执行出html
问：这样的话，有啥坏处呐？
其实从这个里面我们就能看出不合理性，这样不能让用户先看到页面，而是先加载页面，不能带来友好度，所以，我们不建议这样做。
问：那我们如何做呐？
为了让页面快速的让用户看到，增加了用户的友好度，就把js放在body的最下面，因为页面是从上到下解释的，所以页面先加载内容，最后去加载js，所以应该写在body的最下面。
这里写图片描述
ps：JS代码需要放置在标签内部的最下面。

js注释

1、注释

// 单行注释
/*   多行注释  */

这里写图片描述

JavaScript字符串操作以及跑马灯示例

今天我们就来说说Javascript的字符串操作，以及跑马灯的示例，这个场景我们经常用到，所以好好研究一下。

定义变量

1、定义局部变量

说明：99%的情况下，都是定义的局部变量。定义局部变量：var 变量名=”值”

>>var name = "alex"   //定义局部变量

2、定义全局变量

说明：这个情况下，一般不能乱定义，只有确定下来之后才能定义。定义全局变量：变量名=”值”

>>name = "alex"  //定义全局变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

// 全局变量
name = 'seven';

function func(){
  // 局部变量
   var age = 18;

   // 全局变量
    gender = "男"
    }

数字和字符串数据类型

1、数字类型

说明：JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

<script>
     var age=18  //定义数字类型的变量
</script>

转换：
parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN

>>age='18'
"18"
>>parseInt(age)
18
>>parseFloat(age)
18

特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

>>isNaN('18')
false
>>isNaN("dbjdw")
true

更多数值计算：

常量

Math.E
常量e，自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。

2、字符串

说明：字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常见功能：

obj.charAt(n)                     　 返回字符串中的第n个字符
obj.length                           长度
obj.substring(from, to)       　　　　根据索引获取子序列
obj.trim()                           移除两边空白
obj.trimLeft()                       移除左边空白
obj.trimRight()                      移除右边空白
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.slice(start, end)                切片
obj.toLowerCase()                    小写
obj.toUpperCase()                    大写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                     $数字：匹配的第n个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号

1、charAt(n)
说明：返回字符串中的第n个字符

>>name ="zhangqigao"
"zhangqigao"
>>name.charAt(0)  //返回第1个字符
"z"

2、substring(from, to)
说明：根据索引获取子序列，顾头不顾尾

>>name ="zhangqigao"
"zhangqigao"
>>name.substring(1,5) //返回从2位到第4位的字符串，顾头不顾尾
"hang"

3、lenght
说明：获取当前字符串的长度

>>name ="zhangqigao"
"zhangqigao"
>>name.length #返回name字符串的长度
10

4、trim()
说明：移除字符串两边的空白

>>name = "  zhangqigao  "
"  zhangqigao  "
>>name.trim()
"zhangqigao"

5、trimLeft()
说明：移除字符串左边的空白

>>name = "  zhangqigao  "
"  zhangqigao  "
>>name.trimLeft()
"zhangqigao  "

6、trimRight()
说明：移除字符串右边的空白

>>name = "  zhangqigao  "
"  zhangqigao  "
>>name.trimRight()
"  zhangqigao"

7、concat(value, …)
说明：拼接字符串

>>first_name = "zhang"
"zhang"
>>middle_name = "qi"
"qi"
>>last_name = "gao"
"gao"
>>full_name = first_name.concat(middle_name,last_name)
"zhangqigao"

8、indexOf(substring,start)
说明：从头往后计算子序列的位置

>>name = "zhangqigao"
"zhangqigao"
>>name.indexOf("qi")
5

9、slice(start, end)
说明：切片，遵循顾头不顾尾原则

>>name = "zhangqigao"
"zhangqigao"
>>name.slice(1,3) //顾头不顾尾
"ha"

10、toLowerCase()
说明：小写

>>a = "ZHANGQIGAO"
"ZHANGQIGAO"
>>a.toLowerCase()
"zhangqigao"

11、 toUpperCase()
说明：大写

>>name = "zhangqigao"
"zhangqigao"
>>name.toUpperCase()
"ZHANGQIGAO"

12、split(delimiter, limit)
说明：分割，delimiter：分割符，limit：拿前几个值

>>name = "zhang,qi,gao"
"zhang,qi,gao"
>>name.split(",")   #按逗号分割
["zhang", "qi", "gao"]
>>name.split(",",1)
["zhang"]
>>name.split(",",2)  //分割之后拿前2个值
["zhang", "qi"]
>>name.split(",",3)
["zhang", "qi", "gao"]

定时器

1、定时器

说明：我们每隔多长时间执行一下某个程序，我们成为定时任务，setInterval(“定时任务名”，间隔时间)，时间是以ms为单位的。

<script>
     function f1(){   //定义一个函数f1
         console.log(1);   //会在浏览器console控制台输出日志
     }
    setInterval("f1()",1000);   //每隔1秒执行一下f1()函数
</script>

这里写图片描述

跑马灯示例

　　我们用上面的知识，来写一个跑马灯示例，这个我们经常会用到，特别我们在某个网站上看到欢迎*来莅临指导，然后这个字返回出现，那这个是怎么做的呐？我们就来写一个。

1、代码调试

这里写图片描述
js的代码为：

<body>
    <div id="i1">欢迎帅高高莅临指导</div>
    <script>
        function  f1(){
            //根据ID指定的标签的内容，定义局部变量
            var tag = document.getElementById("i1");
            //获取标签内部的内容
            var content = tag.innerText;
            //获取第一个字符
            var f = content.charAt(0);
            //获取除第2个到在最后1个的字符串
            var l = content.substring(1,content.length);
            // 重新拼接，获取新的字符串
            var new_content = l + f;
            //替换标签内之前内容
            tag.innerText = new_content;
        }

        setInterval("f1()",1000) //每秒执行一次定时任务
    </script>
</body>

如果你想把函数重新写到js文件中，那就可以这样做：
这里写图片描述
就是你先用script引入外联script文件，不会执行中间的内容，只引入js文件->再用另外一个script去编写当前页面的js.

JavaScript数组和字典以及for循环

布尔类型

布尔类型仅包含真假，与Python不同的是其首字母小写。

符号	解释
==	比较值相等
!=	不等于
===	比较值和类型相等
!===	不等于
\|\|	或
&&	且

>>a = true  //小写的true
true
>>a = false   //小写的false
false

数组

JavaScript中的数组类似于Python中的列表

>>aa = [11,22,33]
[11, 22, 33]

常见功能：

obj.length          数组的大小

obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替换元素
                    obj.splice(n,1)     指定位置删除元素

obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

1、obj.length

说明：数组的长度

>>a = [11,22,33]
[11, 22, 33]
>>a.length  //数组a的长度
3

2、obj.push(ele)

说明：追加元素

>>a = [11,22,33]
[11, 22, 33]
>>a.push(44) //追加元素44
4   //返回数组长度
>>a
[11, 22, 33, 44]

3、obj.pop()

说明：尾部获取一个元素，并且删除

>>a = [11,22,33,44]
[11, 22, 33, 44]
>>a.pop()    //获取尾部值，并且删除
44
>>a
[11, 22, 33]

4、obj.unshift(ele)

说明：头部插入元素

>>a = [11,22,33]
[11, 22, 33]
>>a.unshift(10)  //头部插入元素
4
>>a
[10, 11, 22, 33]

5、obj.shift()

说明：头部移除元素

>>a = [11,22,33]
[11, 22, 33]
>>a.shift()    //头部移除数据
11
>>a
[22, 33]

obj.splice(start, deleteCount, value, …)

说明：插入、删除或替换数组的元素。start：起始位置，deleteCount：删除的个数，value：插入的值

>>a = [11,22,33]
[11, 22, 33]
>>a.splice(1,0,99)  //在索引为1的位置插入99元素
[]
>>a
[11, 99, 22, 33]
>>a.splice(0,1,10)    //索引为0的值替换成10
[11]
>>a
[10, 99, 22, 33]
>>a.splice(3,1)   //删除索引为3后1个数
[33]
>>a
[10, 99, 22]

7、 obj.slice( )

说明：切片

>>a = [11,22,33,44]
[11, 22, 33, 44]
>>a.slice(1,3)   //切片，顾头不顾尾
[22, 33]

8、obj.join(sep)

说明：将数组元素连接起来以构建一个字符串

>>a = [11,22,33,44]
[11, 22, 33, 44]
>>a.join("-")
"11-22-33-44"

9、 obj.concat(val,..)

说明：连接数组

>>a = [11,22,33]
[11, 22, 33]
>>b = [44,55,66]
[44, 55, 66]
>>a.concat(b)  //连接数组
[11, 22, 33, 44, 55, 66]

10、obj.sort( )

说明：对数组元素进行排序

>>a = [9,3,5,6,2,1]
[9, 3, 5, 6, 2, 1]
>>a.sort()    //数组排序
[1, 2, 3, 5, 6, 9]

字典

1、字典定义

>>a = {"k1":"v1","k2":'v2'}
{k1: "v1", k2: "v2"}

2、字典的取值

>>a = {"k1":"v1","k2":'v2'}
{k1: "v1", k2: "v2"}
>>a["k1"]   //取k1的值
"v1"
>>a["k2"]   //取k2的值
"v2"

for循环

1、采用自身索引循环

1、循环数组

items = [11,22,33,44]

for(var item in items){
        console.log(items[item]); //获取元素
}

2、循环字典

a = {"k1":"v1","k2":'v2'}
for(var item in a){
        console.log(a[item]);
}

2、采用自增循环

items = [11,22,33,44]
for(var i=0;i<items.length;i++){
　　　　　break；//退出整个循环
        console.log(items[i])
}

也可以写成：

items = [11,22,33,44]
for(var i=0;i<items.length;i=i+1){  //这边如果跳过2个写成 i=i+2
　　 continue； //终止本次循环
    console.log(items[i])
}

3、while循环

while(条件){
       //js代码
}

JavaScript条件语句和函数的定义

跟大多数语言一样，js也有条件语句和函数，那我们今天就来看看，js的if条件判断语句和python的有啥不一样。

条件判断语句

1、语法

1、单独的if条件

if(条件){
    //js代码
}

2、if….else使用

if(条件){
    //js代码
}else {
  //js代码 
}

3、if…else if….else使用

if(条件){
      //js代码
}else if(条件){
      //js代码
}else{
      //js代码
}

2、switch…case

var name='3';
switch(name){
    case "1":
        var age = "123";
        break;  //case和break搭配起来使用
    case "2":
        var age = "456";
        break;
    default:
        var age = "777";
}

3、条件比较

1、== 和！=
说明：==：值相等，数据类型可以不等，！= ：值不相等。

>>1 == "1"  //只要值相等，数据类型可以不等
true

2、===和 !==
说明：===：值和数据类型都要相等，!==:值和数据类型都不相等。

>>1 === "1"
false
>>1 === 1  //值和数据类型都相等
true

3、&& 和 ||
说明：&& : and，与。||：or，或

1==1 &&  2==2
1!=1 || 2==2

函数定义

1、没有形参定义

function 函数名(){
           //js代码
}


//调用
函数名()

2、有形参定义

function 函数名(a,b,c){
　　　　　　　return a+1;
           //js代码
}


//调用
var result = 函数名(1,2,3);
console.log(result);

Dom直接选择器

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

Dom直接选择器

1、直接查找标签

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

2、操作标签

操作的html内容如下：

<body>
    <div id="i1">我是李亚楠，我要学Python</div>

    <a>人生苦短</a>
    <a>liyanan</a>
    <a>Python</a>
</body>

1、document.getElementById
说明：根据ID获取一个标签

document.getElementById("i1")
<div id="i1">我是李亚楠，我要学Python</div>

2、document.getElementsByTagName
说明：根据标签名获取标签集合

document.getElementsByTagName("a")
HTMLCollection(3) [a, a, a]

3、标签对象.innerText
说明：获取标签中的文本内容

document.getElementById("i1").innerText
"我是李亚楠，我要学Python"

4、标签对象.innerText = “新值”
说明：获取标签中的文本内容重新赋值

document.getElementById("i1").innerText="新内容"
"新内容"

循环多个元素的标签

说明：只要是Elements，表示获取多个元素(返回一个数组)

document.getElementsByTagName('a')
HTMLCollection(3) [a, a, a]
document.getElementsByTagName('a')[1].innerText
"liyanan"
document.getElementsByTagName('a')[0].innerText
"人生苦短"
document.getElementsByTagName('a')[2].innerText
"Python"
tag=document.getElementsByTagName('a')
HTMLCollection(3) [a, a, a]
for(var i=0;i<tag.length;i++){tag[i].innerText=777}
777

Dom间接选择器

之前我们学习过直接选择器，今天我们研究一下间接选择器，通过间接的方法来获取某个标签

间接选择器

1、间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

1、 parentElement
说明：父节点标签元素

tag=document.getElementById('i1')
<div id="i1">
            c2
        </div>
tag.parentElement
<div><div id="i1">
            c2
        </div></div>

2、 children
说明：所有子标签

tag.parentElement.children
HTMLCollection [div#i1, i1: div#i1]

3、 previousElementSibling
说明：上一个兄弟标签元素

tag.parentElement.previousElementSibling
<div><div>
            c1
        </div></div>

操作标签

class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

1、classname
说明：直接对标签整体样式的操作

tag=document.getElementById('i1')
<div id="i1">
            c2
        </div>
tag.className='c1'
"c1"
tag
<div id="i1" class="c1">
            c2
        </div>

2、 classList
说明：返回数据类型的样式，添加和删除某个样式

>>tag.classList  //以数组的方式列举出所有的样式
DOMTokenList ["c2", value: "c2"]0: "c2"length: 1value: "c2"__proto__: DOMTokenList
>>tag.classList.add("c1")  //添加某个样式
undefined
>>tag  //添加后的样式
<div id="i1" class="c2 c1">
            c2
        </div>

事件

说明：当鼠标一点击某个标签的时候，就会触发执行某个js代码

<div onclick="函数(参数);"></div>  //点击这个div，就会触发下面js的代码，称为事件

<script>
    function 函数(参数){
　　　　//js代码
　　}
</script>

示例之模态对话框

当我们点击添加按钮的时候，我们想弹出一个对话框，这个对话框，有我们想要界面，这个叫模态对话框，那这个是怎么实现的呐，能达到什么效果呢？
这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }

        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">
    <div>
        <input type="button" value="添加" onclick="showModel();"/>
        <table border="1">
            <thead>
                <tr>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>192.168.1.1</td>
                    <td>8080</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!--遮罩层开始-->

    <!--弹框层开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text"/></p>
        <p><input type="text"/></p>
        <p>
            <input type="button" value="取消" onclick="hideModel()"/>
            <input type="button" value="确定"/>
        </p>
    </div>
    <!--弹框层结束-->

    <script>
        function showModel(){
            document.getElementById("i1").classList.remove("hide");
            document.getElementById("i2").classList.remove("hide");
        }
        function hideModel(){
            document.getElementById("i1").classList.add("hide");
            document.getElementById("i2").classList.add("hide");
        }
    </script>
</body>
</html>

示例之全选和反选以及取消

我们在使用页面的时候，经常遇到选择多条数据或者取消多条数据，还有就是反选功能，这些是我们经常用的，我们今天就来看看怎么实现的。
这里写图片描述

checkbox获取值

checkbox对象.checked   //获取值
checkbox对象.checked = true //设置值为true

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }

        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">
    <div>
        <input type="button" value="添加" onclick="showModel();"/>
        <input type="button" value="全选" onclick="chooseAll();"/>
        <input type="button" value="取消" onclick="cancleAll();"/>
        <input type="button" value="反选" onclick="reverseAll();"/>
        <table border="1">
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" id="test"/></td>
                    <td>192.168.1.1</td>
                    <td>8080</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>192.168.1.2</td>
                    <td>8090</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>192.168.1.2</td>
                    <td>8090</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!--遮罩层开始-->

    <!--弹框层开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text"/></p>
        <p><input type="text"/></p>
        <p>
            <input type="button" value="取消" onclick="hideModel()"/>
            <input type="button" value="确定"/>
        </p>
    </div>
    <!--弹框层结束-->

    <script>
        function showModel(){
            document.getElementById("i1").classList.remove("hide");
            document.getElementById("i2").classList.remove("hide");
        }
        function hideModel(){
            document.getElementById("i1").classList.add("hide");
            document.getElementById("i2").classList.add("hide");
        }
        function chooseAll(){   //全选
            //获取所有的tr
            var tbody = document.getElementById("tb");
            var tr_list = tbody.children;
            //循环所有的tr，current_tr
            for(var i=0;i<tr_list.length;i++){
                var crrent_tr = tr_list[i];
                var checkbox = crrent_tr.children[0].children[0];
                checkbox.checked = true
            }
        }
        function cancleAll(){   //取消
            var tbody = document.getElementById("tb");
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                var crrent_tr = tr_list[i];
                var checkbox = crrent_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }
        //反选，应该先获取check值，如果是true，则改成false，是false改成true
        function reverseAll(){
            var tbody = document.getElementById("tb");
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                var crrent_tr = tr_list[i];
                var checkbox = crrent_tr.children[0].children[0];
                //checkbox.checked = false;
                if(checkbox.checked){
                    checkbox.checked = false;
                }else{
                    checkbox.checked = true;
                }
            }
        }
    </script>
</body>
</html>

示例之后台管理左侧菜单

接下来我们来做一个左侧菜单，因为我们这个经常用到，接下来我们来看看这个这个咋做的，废话不多说了，进入实战状态吧。
这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="height: 48px;"></div>
    <div style="width: 300px;">
        <div class="item">
            <div id="i1" class="header" onclick="ChangeMenu('i1');">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="header" onclick="ChangeMenu('i2');">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="header" onclick="ChangeMenu('i3');">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id="i4" class="header" onclick="ChangeMenu('i4');">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>
    </div>

    <script>
        function ChangeMenu(hid){
            //当前菜单标题div
            var current_header = document.getElementById(hid);
            //获取所有item的数组
            var item_list = current_header.parentElement.parentElement.children;
            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                //把所有的内容全部隐藏
                current_item.children[1].classList.add("hide");
            }
            //把菜单标题下的隐藏去掉
            current_header.nextElementSibling.classList.remove("hide");

        }
    </script>
</body>
</html>

Ali--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day15_css补充、js基础、dom基础

CSS内容之position我们今天来学习css里面比较重要的一个知识点，position，这个是干嘛的呐，是将页面分层的，就是说，我们所有的标签默认都是在一层，但是使用了position之后，就可以把页面分层了，废话不多说了，下面我们就来看看，实际的固定在页面某个位置说明：position：fixed 表示固定在页面某个位置，但是这个要结合上(top)、下(bottom)、左(l...
复制链接

扫一扫

专栏目录