人生苦短，我用python-- Day15 css+js

本节目录　　　　　　　　　　　　　　　　　　　　　　

1.css--position

2.css--overflow

3.css-hover

4.css-background-image

5.css-background-repeat

6.css-background-position

7.本节css功能集体整合案例

8.JavaScript

9.Dom

1.css-position　　　　　　　　　　　　　　　　　　　　　　　　　　

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

人生苦短，我用python-- Day15 css+js

可能的值

人生苦短，我用python-- Day15 css+js

实例演示：

　　案例一：返回顶部的功能；利用position的fixed属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-body{
            background-color: green;
            width: 1270px;
            height: 2000px;
        }
        .pg-top{
            background-color: red;
            width: 40px;
            height: 40px;
            color: white;
            position: fixed;
            right: 30px;
            bottom: 30px;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="pg-body">
        这是第一层的效果
    </div>
    <!--这是position的第二层div-->
    <div class="pg-top" onclick="back_top()" >
        返回顶部
    </div>

    <script>
        function back_top() {
            document.body.scrollTop = 0
        }
    </script>
</body>
</html>

　　案例二：在网站的头部加一个导航栏的功能，不管怎样滑动滚轮，头部的导航栏始终在那个位置；利用position的fixed属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*当dvi的position等fixed的时候,div标签也就成了类似行内标签的效果,所以我们使用它top、left、right等来设置他的宽度*/
        .pg-head{
            background-color: blue;
            height: 20px;
            position: fixed;
            top:0;
            left: 0;
            right: 0;
        }
        /*当dvi的position等fixed的时候,两个div成了两层,所以上面的div遮住了下面div的部分内容,所以内容div要加一个外边距*/
        .pg-body{
            background-color: #C7C4C4;
            height: 2000px;
            width: 1300px;
            margin-top: 20px;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="pg-head">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>

　　案例三：

　　absolute这个属性也可以定位，但是定位是一次性的，单独使用absolute属性的地方很少，当absolute配合relative使用，relative单独是使用没有任何意义二者放到一起就牛逼了

　　使用relative+absolute属性，来实现子类标签放在父类标签的某个位置（相对于父类标签定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            border: 1px red solid;
            height: 200px;
            width: 300px;
            margin: 0 auto;
            position: relative;
        }
        .son{
            height: 50px;
            width: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="father">
        <!--相对于父亲,在父亲的右上方-->
        <div class="son"  style="top: 0; right: 0"></div>
    </div>
    <div class="father">
        <!--相对于父亲,在父亲的右下方-->
        <div class="son"  style="bottom: 0; right: 0"></div>
    </div>
</body>
</html>

效果图：

　　人生苦短，我用python-- Day15 css+js

案例四：

　使用relative+absolute

　　来实现一个模态框的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dis{
            display: none;
        }
        .info_layer{
            height: 1000px;
            width: 1300px;
            background-color: green;
        }
        .mask_layers{
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.4;
            z-index: 9;
        }
        .alert_layers{
            position: fixed;
            height: 400px;
            width: 500px;
            z-index: 10;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -250px;

        }
    </style>
</head>
<body style="margin: 0 auto">
    <div class="info_layer">
        账户信息
        <input type="button" value="添加" onclick="remove_dis()">
    </div>
    <!--同时使用两个样式,后面那个样式是用来隐藏前面两个div的-->
    <div id =2 class="alert_layers dis" >
        用户:<input type="text">
        <br>
        密码:<input type="text">
        <br>
        <input type="button" value="取消" onclick="add_dis()">
        <input type="button" value="确定">
    </div>
    <!--同时使用两个样式,后面那个样式是用来隐藏前面两个div的-->
    <div id=1 class="mask_layers dis"></div>
    <script>
        //当点击添加动作的是,显示前面两个div
        function remove_dis() {
            document.getElementById("2").classList.remove('dis')
            document.getElementById("1").classList.remove('dis')
        }
        //当点击取消动作的时候,隐藏前面两个div
        function add_dis() {
            document.getElementById("2").classList.add('dis')
            document.getElementById("1").classList.add('dis')
        }
    </script>
</body>
</html>

css-overflow属性　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

说明：

overflow 属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

人生苦短，我用python-- Day15 css+js

可能出现的值：

人生苦短，我用python-- Day15 css+js

我们来说一下auto和hidden这两种方式

方式一：auto方式

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

效果：如果div放不下会出现滚动条

人生苦短，我用python-- Day15 css+js

方式二：hidden模式

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

效果：如果div放不下内容，那么直接显示div所能显示的大小

人生苦短，我用python-- Day15 css+js

css-hover　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

说明：

选择鼠标指针浮动在其上的元素，并设置其样式：

定义和用法

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

这里主要看一下hover这个属性，它主要是用于设置鼠标悬停的后的效果

案例：

写一个网站的头，写成http://dig.chouti.com 这个网站头的样子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*页面头部样式*/
        .pg-head {
            background-color: #2459a2;
            position: fixed;
            top: 0;
            left: 0;
            right:0;
            height: 48px;
            line-height: 48px;
        }
        /*页面头部里面内容的样式*/
        .pg-head-info {
            margin-left: 200px;
            margin-right: 200px;
        }
        /*页面头部内容除了logo字样的样式*/
        .mue {
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        /*页面头部内容除了logo字样鼠标悬停后的样式*/
        .mue:hover{
            background-color: blue;
        }
        /*页面身体的样式*/
        .pg-body{
            height: 2000px;
            background-color: #8E1717;
            margin-top: 48px;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div class="pg-head">
        <div class="pg-head-info">
            <a>Logo</a>
            <a class="mue"> 全部</a>
            <a class="mue"> 42区</a>
            <a class="mue"> 段子</a>
            <a class="mue"> 图片</a>
            <a class="mue"> 挨踢1024</a>
            <a class="mue"> 你问我答</a>
        </div>
    </div>
    <div class="pg-body">
        这里是内容
    </div>
</body>
</html>

看一下效果：鼠标悬停后，字体的背景色改变

人生苦短，我用python-- Day15 css+js

background-image　　　　　　　　　　　　　　　　　　　　　　　　　　

定义和用法

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

详细说明

background-image 属性会在元素的背景中设置一个图像。

根据 background-repeat 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。

初始背景图像（原图像）根据 background-position 属性的值放置。

人生苦短，我用python-- Day15 css+js

案例一：

　　我们来写一个案例，放一张小图，实现x轴和y轴无限重复（直到把所在div沾满为止）

原图：

人生苦短，我用python-- Day15 css+js

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img{
            width: 1300px;
            height: 400px;
            /*这里设置一个北京颜色,就算背景图不能正常访问,北京颜色也是可以生效的*/
            background-color: #8E1717;
            background-image:url("../img/eg_bg_04.gif");
        }
    </style>
</head>
<body style="margin: 0 auto;">
    <div class="img">
       
    </div>
</body>
</html>

效果显示：

人生苦短，我用python-- Day15 css+js

案例二：

　　时候用background-repeat 属性来定义如何重复，如：只横向重复、只纵向重复、横纵都不重复

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img{
            width: 1300px;
            height: 400px;
            /*这里设置一个北京颜色,就算背景图不能正常访问,北京颜色也是可以生效的*/
            background-color: #8E1717;
            background-image:url("../img/eg_bg_04.gif");
            /*左右都不重复*/
            background-repeat: no-repeat;
            /*横向重复*/
            /*background-repeat: repeat-x;*/
            /*纵向重复*/
            /*background-repeat: repeat-y;*/
        }
    </style>
</head>
<body style="margin: 0 auto;">
    <div class="img">
       
    </div>
</body>
</html>

实现效果：

人生苦短，我用python-- Day15 css+js

background-position　　　　　　　　　　　　　　　　　　　　　　　　　　　

我们在网站上看到好多过好的小图标，比如点赞图标，关注图标等，这些图标可以使用这个属性来搞定，当然他需要配合background-image属性一起才能发挥更好的效果

定义和用法

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

人生苦短，我用python-- Day15 css+js

实验案例：

　　一个图片包括好多小图标，我们可以通过变换background-position的值，来进行显示不同的小图标

原有图片：

人生苦短，我用python-- Day15 css+js

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .window_div {
            height: 20px;
            width: 20px;
            border: 1px solid red;
            background-image: url("../img/icon_18_118.png");
            background-repeat: no-repeat;
            background-position-x: 0;
            /*笔者这里的图片是竖着的,所以只需要挑中y轴的数值就能来实现效果了*/
            background-position-y: -10px;
            /*也可这样写*/
            /*background-position: 0 10px;*/
        }
    </style>
</head>
<body>
    <div class="window_div">

    </div>
</body>
</html>

效果展示：

人生苦短，我用python-- Day15 css+js

综合实验案例：

　　要求：

　　　　写一个登录页面，要求用户输入用户名，并且在输入框的右边有相应的小图标

　提供图片：

人生苦短，我用python-- Day15 css+js

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div style="width: 400px;height: 30px; position: relative">
       <span>用户名:</span> <input type="text" style="width: 300px;height: 30px;
       padding-right: 25px">
        <span style="background-image: url(../img/i_name.jpg);
        display: inline-block;width: 16px;height: 16px;
        position: absolute;top: 10px;right: 22px;"></span>
    </div>

</body>
</html>

效果：

人生苦短，我用python-- Day15 css+js

8.JavaScript介绍

　　1.首先JavaScript和java没有半毛钱关系；

　　2.JavaScript是一门独立的语言；

　　3.JavaScript运行也需要一个解释器进行解释，恰好的是，浏览器就是一个解释器；

　　4.JavaScript的存在形式

　　　　第一种：在head中放一个<script> JavaScript代码</script>，还可以这样写<script type=‘text/javascript’> JavaScript代码</script>,需要注

　　　　　　　　意的是，如果写type这个属性，那么后面一定要写对了text/javascript，如果写错了，那么浏览器就不按javascript进行解析了，加与不加没有任何

　　　　　　　　区别

　　　　第二种：存放在文件中，创建一个js结尾的文件，在head中引入一个js文件就行了格式如下：

　　　　第三种：JS可以引用线上的其它网站的js，html是从上往下执行的，如果我们引用js的话不存在或者访问速度超级慢，那么就会导致用户访问的时候，大部

　　　　　　　　部分时间在等待js的调用，所以script建议放到下面（body的最后面，这样用户访问的时候就会先看到内容，然后在加载js）来增加界面的友好度；

9.JavaScript注释的使用

　　单行注释使用 //需要注释的内容

　　多行注释使用 /* 需要注释的内容 */

10.JavaScript变量

　　全局变量 name='sean'

　　局部变量 var name='sean'

11.JavaScript基本数据类型

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

转换：

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

12.新大陆，变js代码的方法

　　A，我们可以写在html中，但是这样写很麻烦，每次写都要刷新浏览器

　　B，在chrome浏览器检查元素中编写临时的js代码

　　C，在chrome中的console中编写临时的，这样效果更方便直接

13.JavaScript中字符串的操作

obj.length                           获取长度
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
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个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号

实例：

人生苦短，我用python-- Day15 css+js

14.JavaScript定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //定义一个方法方法名叫f1
        function f1() {
            console.log(1)
        }
        //创建一个定时器,第一个参数是每个定时生效后,执行f1函数,后面的2000是指每隔2000毫秒执行f1函数
        setInterval("f1()",2000)
    </script>
</body>
</html>

效果：

人生苦短，我用python-- Day15 css+js

　　实验案例：写一个LED屏幕的效果，字不停地往后转移

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1" style="border: 1px solid red;width: 170px">欢迎主席同志莅临指导!</div>
    <script>
        // 定义一个方法
        function f1() {
            // 获取到html中id等于i1的标签
            var tge = document.getElementById('i1');
            // 获取这个标签中的文本信息
            var info = tge.innerText;
            // 获取文本信息的第一个关键字
            var f = info.charAt(0);
            // 获取文本信息中的第二个到最后一个关键字
            var l = info.substring(1,info.length);
            // 把文本信息中的第二个到最后一个关键字和文本信息的第一个关键字相加
            var new_str = l + f;
            // 把新获得到的字符串赋值给id等于i1的标签的文本信息中
            tge.innerText = new_str;
        }
        // 创建一个方法定时器,每隔500毫秒执行一次
        setInterval('f1()',500)
    </script>
</body>
</html>

动态效果无法演示，需要看效果，还是把html复制到文件中，查看结果

15.JavaScript 字符串（String）常见操作

obj.length                           长度
 
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
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个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号

16.JavaScript 布尔类型（Boolean）常见操作

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

== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且

17.JavaScript 数组常见操作

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( )         对数组元素进行排序

splice讲解：

//定义一个数组a
a = [11,22,33,44,55]
[11, 22, 33, 44, 55]
a
[11, 22, 33, 44, 55]
//从第一个开始，删除一个元素
a.splice(1,1)
[22]
a
[11, 33, 44, 55]
//从第一个开始，删除零个元素，插入一个元素为99
a.splice(1,0,99)
[]
a
[11, 99, 33, 44, 55]
//从第一个元素开始，删除一个元素，并插入一个元素为88
a.splice(1,1,88)
[99]
a
[11, 88, 33, 44, 55]

18.JavaScript中的字典操作，

　　注释：字典的操作和py的操作完全一样

19.JavaScript中的for循环(js中for循环有两种)

第一种介绍：

// 这个循环打印的都是元素的索引
for (var item in a_list){console.log(item);}
// 结果
 0
 1
 2
 3
 4

如果想循环这个列表中的所有数据使用这种方法

for (var item in a_list){console.log(a_list[item]);}
//结果
11
22
33
44
55

如果想循环字典用这种方法：

for (var item in a_dic){console.log(a_dic[item]);}
 //结果
 1
 2

第二种介绍：

需要注意，这种循环不支持循环字典

for (var i=0;i<a_list.length;i++){console.log(a_list[i]);}
 11
 22
 33
 44
 55

20.JavaScript if语句

if(条件){
 
    }else if(条件){
         
    }else{
 
    }

if(条件){
 
    }else if(条件){
         执行代码
    }else if(条件){
        执行代码
    }else{
        执行代码
    }

if(条件){
 
    }else if(条件){
         执行代码
    }else if(条件){
        执行代码
    }else{
        执行代码
    }

21.JavaScript switch语句

switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }

switch语句

22.JavaScript 条件语句

&& 且的意思

|| 或的意思　　

22.JavaScript 两等号和三等号的区别

1=='1'
true
1==='1'
false

两个等号不判断类型，三个等号要判断类型

22.Dom操作

　　Dom操作，一般就是找到标签，操作标签

　　1）.查找标签

　　　　直接查找：

　　　　获取单个元素 document.getElementById('i1')

　　　　获取多个元素（列表） document.getElementsByTagName('div')

　　　　获取多个元素（列表） document.getElementsByClassName('c1')

　　　　根据name属性获取标签集合 document.getElementsByName 　　　

　　　　间接查找：

　　　　parentElement / / 父节点标签元素

　　　　children / / 所有子标签

　　　　firstElementChild / / 第一个子标签元素

　　　　lastElementChild / / 最后一个子标签元素

　　　　nextElementtSibling / / 下一个兄弟标签元素

　　　　previousElementSibling / / 上一个兄弟标签元素

　　2).操作标签

原有html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id = 1>我是div id=1</div>
        <a>sdf</a>
        <a>222</a>
        <a>s444df</a>

</body>
</html>

在console中进行修改并查看效果

document.getElementById(1)
<div id="1">我是div id=1</div>
tge = document.getElementById(1)
<div id="1">我是div id=1</div>
tge.innerText
"我是div id=1"
tge.innerText = '我是修改的div1的内容'
"我是修改的div1的内容"

修改后的效果：

人生苦短，我用python-- Day15 css+js

在console中进行修改并查看效果

document.getElementsByTagName('a')
[<a>sdf</a>, <a>222</a>, <a>s444df</a>]
tges = document.getElementsByTagName('a')
[<a>sdf</a>, <a>222</a>, <a>s444df</a>]
for (var i =0;i<tges.length;i++){console.log(tges[i].innerText)}
sdf
222
s444df

for (var i =0;i<tges.length;i++){tges[i].innerText = 777;}
777

查看效果：

人生苦短，我用python-- Day15 css+js

实验案例一：

　　使用上面的模态框写一个全选、反选、取消的界面

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .held{
            display: none;
        }
        .c1{
            position: fixed;
            top:0;
            right:0;
            left: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -300px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" value="添加" onclick="f2()">
        <input type="button" value="全选" onclick="ChooseAll()">
        <input type="button" value="反选" onclick="CancleAll()">
        <input type="button" value="取消" onclick="ReverseAll()">
        <table>
            <thead>
                <tr>
                    <th>请选择</th>
                    <th>主机IP</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id = 'tb'>
                <tr>
                   <td><input type="checkbox"></td>
                   <td>192.168.1.1</td>
                   <td>3306</td>
                </tr>
                <tr>
                   <td><input type="checkbox"></td>
                   <td>192.168.1.2</td>
                   <td>22</td>
                </tr>
                <tr>
                   <td><input type="checkbox"></td>
                   <td>192.168.1.3</td>
                   <td>8108</td>
                </tr>
                <tr>
                   <td><input type="checkbox"></td>
                   <td>192.168.1.4</td>
                   <td>9999</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--遮罩层开始-->
    <div id = i1 class="c1 held">
    </div>
    <!--遮罩层结束-->

    <!--弹出框开始-->
    <div id = i2 class="c2 held">
        <p><input type="text"></p>
        <input type="button" value="取消" onclick="f3()">
        <input type="button" value="确定">
    </div>
    <!--弹出框层结束-->
    <script>
        function f2() {
            document.getElementById('i1').classList.remove('held')
            document.getElementById('i2').classList.remove('held')
        }
        function f3() {
            document.getElementById('i1').classList.add('held')
            document.getElementById('i2').classList.add('held')
        }
//        把所有的checked改成true
        function ChooseAll() {
            var tb_div = document.getElementById('tb');
            var tr_list = tb_div.children;
            for (i =0;i<tr_list.length;i++){
                tr_list[i].children[0].children[0].checked = true;
            }
        }
//        把所有的checked改成galse
        function ReverseAll() {
            var tb_div = document.getElementById('tb');
            var tr_list = tb_div.children;
            for (i =0;i<tr_list.length;i++){
                tr_list[i].children[0].children[0].checked = false;
            }
        }
//        反选择的方法,判断选择状态是不是为true,如果是改成false,如果不是改成true
        function CancleAll() {
            var tb_div = document.getElementById('tb');
            var tr_list = tb_div.children;
            for (i=0;i<tr_list.length;i++){
                var check_status = tr_list[i].children[0].children[0];
                if(check_status.checked){
                    check_status.checked = false;
                }else{
                    check_status.checked = true;
                }
            }
        }
    </script>
</body>
</html>

Dom

这里要说一个知识点，当对一个checkbox标签操作的时候，sob.checked = false表明这个框没被选中，反之相反；

实验案例一：

　　后台管理的左侧菜单，点一个菜单其余关闭，以此类推

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .held{
            width: 300px;
            height: 30px;
            background-color: blue;
            color : white;
            line-height: 30px;
        }
        .yc{
            display: none;
        }
    </style>
</head>
<body>
    <div>
    <div class="item">
        <div id = i1 class="held" onclick="showinfo('i1')">菜单1</div>
        <div class="content">
            <div>内容1</div>
            <div>内容1</div>
            <div>内容1</div>
            <div>内容1</div>
        </div>
    </div>
    <div class="item">
        <div id = i2 class="held" onclick="showinfo('i2')">菜单2</div>
        <div class="content yc">
            <div>内容2</div>
            <div>内容2</div>
            <div>内容2</div>
            <div>内容2</div>
        </div>
    </div>
    <div class="item">
        <div id = i3 class="held" onclick="showinfo('i3')">菜单3</div>
        <div class="content yc">
            <div>内容3</div>
            <div>内容3</div>
            <div>内容3</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div id = i4 class="held" onclick="showinfo('i4')">菜单4</div>
        <div class="content yc">
            <div>内容4</div>
            <div>内容4</div>
            <div>内容4</div>
            <div>内容4</div>
        </div>
    </div>
    </div>
    <script>
        function showinfo(uid) {
//            找到传入的id的div
            var held_div = document.getElementById(uid);
//            找到传入iddiv的父亲的父亲的div的所有孩子,是一个列表
            var item_list =held_div.parentElement.parentElement.children;
//            循环上面那个列表,中每个元素的第二个孩子,并加上yc属性
            for (var i =0;i<item_list.length;i++){
                item_list[i].children[1].classList.add('yc');
            }
//            删除传入的div下一个兄弟标签的yc属性
            console.log(held_div.nextElementSibling.classList.remove('yc'));
        }
    </script>
</body>
</html>

Dom

秒客网

人生苦短，我用python-- Day15 css+js

本节目录

1.css-position

css-overflow属性

css-hover

background-image

background-position

相关文章