day45:JS中的json&JS的BOM操作和DOM操作

补充：CSS中的弹性盒子

弹性盒子的作用：和line-height一样，可以将内容进行垂直居中显示，并且在使用效果上比line-height更好用

/* css效果 */

.c1{

    height: 100px;

    width: 400px;

    border: 1px solid red;

    /* 弹性盒子做垂直居中效果 */

    display: flex;

    align-items: center;

}

<!-- html部分 -->

<div class="c1">

    <span>xx</span>

    <a href="">kk</a>

    <img src="mi-logo.png" alt="" style="background-color: red">

</div>

实现效果如下图所示

day45:JS中的json&JS的BOM操作和DOM操作

JS中json的序列化

d = {"name":"libolun",age:18}

var d_json = JSON.stringify(d);  // 序列化 相当于python中的dumps

var c = JSON.parse(d_json);     // 反序列化 相当于python中的loads

JS中的BOM操作

location操作

location.href;  // 获取当前页面的地址

location.href = 'http://www.baidu.com'; // 跳转到这个网址上

location.reload();  // 刷新当前页面

计时器

var t = setTimeout(function(){console.log('xxx')},3000); // 设置定时器 3000ms后执行function 就一次

clearTimeout(t); // 清除定时器Timeout

var t = setInterval(function(){console.log('xxx')},2000);// 设置定时器 2000ms后执行function 循环

clearInterval(t); // 清除定时器Interval

计时器的示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            background-color: red;

            height: 100px;

            width: 100px;

        }

        /* 相同的属性会覆盖 */

        .c2{

            background-color: blue;

        }

    </style>

</head>

<body>

<div class="c1" id="d1"></div>

</body>

<script>

    var t = setInterval(function ()

         var dEle =  document.getElementById('d1');// 获取的是id为d1的那个div语句

         dEle.classList.toggle('c2');  // 将div中class切换成c2

        /* 如果此时检测div中的类是c1 那么就切换成c2

        如果此时检测div中的类是c2 那么就删除类c2 切换成c1*/

    },100)

</script>

</html>

JS中的DOM操作

DOM：文档对象模型 -- 操作html

创建标签

var dEle = document.createElement('a'); // dEle的值是<a></a>

查找标签

直接查找选择器

1.元素选择器

var h = document.getElementsByTagName('h1');// h是个数组:HTMLCollection [h1]

var h = document.getElementsByTagName('h1')[0]; // 索引取值获取标签对象h1

2.类值选择器

var s = document.getElementsByClassName('c1'); // 结果也是数组：HTMLCollection[div.c1]

var s = document.getElementsByClassName('c1')[1]; // 索引取值获取到c1类所对应的标签对象div

3.id选择器

var a = document.getElementById('xx'); // 因为id不能重复，所以直接获取到对应id的标签对象

间接查找选择器

var div1 = document.getElementsByClassName('c1')[0];

div1.nextElementSibling; // 找下一个兄弟标签对象

div1.nextElementSibling.style.color = 'red';  // 找下一个兄弟标签,并改了色

div1.previousElementSibling;  // 找上一个兄弟标签对象

div1.firstElementChild;  // 找第一个儿子

div1.lastElementChild;  // 找最后一个儿子

div1.children;  // 找所有儿子,是一个数组

div1.parentElement;  // 找到自己的父级标签

文本操作

innerText

// 获取文本内容(只获取文本内容，不带标签)

/* 例如<span>111</span> ：获取的就是111 */

var h = document.getElementsByTagName('h1')[0];

h.innerText;

// 设置文本内容

h.innerText = 'xxx' // 只能设置文本内容

h.innerText = '<a href="">百度</a>'  //不能生成标签效果

innerHTML

// 获取内容（连带着标签都获取）

var h = document.getElementsByTagName('h1')[0];

    h.innerHTML

// 设置文本内容

h.innerHTML = '<a href="">百度</a>';  // 能够生成标签效果

值操作

值操作语法：标签对象.value；

值操作的示例

用户在输入框输入内容，如果长度小于5 在输入框右边会有红字‘炒米饭’

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

用户名：<input type="text" id="username" onblur="f1(this);">

     <span id="error" style="color:Red;font-size: 12px;"></span>

</body>

<script>

    function f1(ths){

        // console.log(ths); ths是input标签对象

        var username = ths.value ;// 通过input标签对象获取到输入框中输入的内容

         // console.log(ths.value); ths.value是用户在输入框输入的内容“

         if (username.length < 5){ // 如果输入内容的长度小于5

            var spa = document.getElementById('error'); // 获取id为error的标签对象span

            spa.innerText = '炒米饭';// 将span里面的内容改为‘炒米饭’

}

    }

</script>

</html>

事件

什么是事件：捕获用户行为，触发相应的动作

常用的事件有哪些：

　　1.onblur 失去光标时触发的事件

　　2.onfocus 获取光标时触发的事件

　　3.onclick 左键单击事件

　　4.onchange 域内容发生变化时触发的事件

类值操作

var d = document.getElementById('d1');

d.classList; // 查看类值

d.classList.add('ppp'); // 添加类值

d.classList.remove('ppp'); // 删除类值

d.classList.toggle('pppp'); // 切换 有就删除 没有就添加

style样式操作示例

格式：标签对象.style.backgroundColor = 'blue';

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            background-color: red;

            height: 200px;

            width: 200px;

        }

        .c2{

            background-color: blue;

        }

        .c3{

            background-color: yellow;

        }

    </style>

</head>

<body>

<!-- 事件绑定：方式2（不常用 ）-->

<input type="text" id="username" onblur="f1(this);" onfocus="f2(this);">

<span id="error" style="color:Red;font-size: 12px;"></span>

<div id="d1" class="c1  xx  oo"></div>

</body>

<script>

    // 输入框长度小于5  失去光标后  提示红字'黄焖鸡米饭'

    function f1(ths){

        var username = ths.value  ;

         if (username.length < 5){

            var spa = document.getElementById('error');

            spa.innerText = '黄焖鸡米饭';

}

    }

    // 获取光标时 取消红字显示 将input的下一个标签的内容设置为空

    function f2(ths){

          ths.nextElementSibling.innerText = '';

    }

    var d1 = document.getElementById('d1');

    // 事件绑定：方式1

    d1.onclick = function (){

         // this就是当前绑定事件的标签对象

         // css样式操作

         // this.style.backgroundColor = 'blue';

          // 当点击到d1这个id对应的标签（div）时，将d1对应标签的类c1替换成c2

         this.classList.toggle('c2');

         // 当点击到username这个id对应标签（input）时，将username对应标签的类替换成c3

         var u = document.getElementById('username');

         u.classList.toggle('c3')

    }

</script>

</html>

onchange事件示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            background-color: red;

            height: 200px;

            width: 200px;

        }

        .c2{

            background-color: blue;

        }

        .c3{

            background-color: yellow;

        }

    </style>

</head>

<body>

<input type="text" id="username" onblur="f1(this);" onfocus="f2(this);">

<span id="error" style="color:Red;font-size: 12px;"></span>

<div id="d1" class="c1  xx  oo"></div>

<!-- select下拉框 -->

<select name="" id="s1">

    <option value="1">xx1</option>

    <option value="2">xx2</option>

    <option value="3">xx3</option>

</select>

</body>

<script>

    function f1(ths){

        var username = ths.value  ;

        if (username.length < 5){

            var spa = document.getElementById('error');

            spa.innerText = '黄焖鸡米饭';

}

    }

    function f2(ths){

          ths.nextElementSibling.innerText = '';

    }

    var d1 = document.getElementById('d1');

    d1.onclick = function (){

         this.classList.toggle('c2');

         var u = document.getElementById('username');

         u.classList.toggle('c3')

    }

    // onchange事件

    var s = document.getElementById('s1');

    s.onchange = function (){ // 域内容发生变化，触发c2

         d1.classList.toggle('c2');

    }

</script>

</html>

用CSS实现小米商城导航栏+主内容部分

HTML部分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="xiaomi.css">

</head>

<body>

    <div class="nav">

        <div class="nav-content clearfix">

            <div class="nav-left">

                <a href="" class="nav-link">小米商城</a> <span class="shugang">|</span>

                <a href="" class="nav-link">MIUI</a> <span class="shugang">|</span>

                <a href="" class="nav-link">LoT</a> <span class="shugang">|</span>

                <a href="" class="nav-link">云服务</a> <span class="shugang">|</span>

                <a href="" class="nav-link">金融</a> <span class="shugang">|</span>

                <a href="" class="nav-link">有品</a> <span class="shugang">|</span>

                <a href="" class="nav-link">小爱开放平台</a> <span class="shugang">|</span>

                <a href="" class="nav-link">企业团购</a> <span class="shugang">|</span>

                <a href="" class="nav-link">资质证照</a> <span class="shugang">|</span>

                <a href="" class="nav-link">协议规则</a> <span class="shugang">|</span>

                <a href="" class="nav-link">智能生活</a> <span class="shugang">|</span>

                <a href="" class="nav-link">Select Location</a>

            </div>

            <div class="cart-part">

                <a href="" class="nav-link cart">购物车 (0)</a>

                <div class="cart-list hide"></div>

            </div>

            <div class="nav-right">

                <a href="" class="nav-link">登录</a> <span class="shugang">|</span>

                <a href="" class="nav-link">注册</a> <span class="shugang">|</span>

                <a href="" class="nav-link">消息通知</a>

            </div>

        </div>

    </div>

    <div class="main">

        <div class="main-top clearfix">

            <div class="main-top-logo">

                <a href="" class="a-logo"></a>

            </div>

            <div class="main-top-nav">

                <a href="">小米手机</a>

                <a href="">Redmi 红米</a>

                <a href="">电视</a>

                <a href="">笔记本</a>

                <a href="">家电</a>

                <a href="">路由器</a>

                <a href="">智能硬件</a>

                <a href="">服务</a>

                <a href="">社区</a>

            </div>

            <div class="main-top-search">

                <input type="text" class="search-input"><input type="submit" class="search-button">

            </div>

        </div>

        <div class="main-content clearfix">

            <div class="main-content-left">

                <ul>

                    <li>

                        <a href="">

                            <span>手机 手机卡</span>

                            <span class="dayuhao">&gt;</span>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <span>手机 手机卡</span>

                            <span class="dayuhao">&gt;</span>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <span>手机 手机卡</span>

                            <span class="dayuhao">&gt;</span>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <span>手机 手机卡</span>

                            <span class="dayuhao">&gt;</span>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <span>手机 手机卡</span>

                            <span class="dayuhao">&gt;</span>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <span>手机 手机卡</span>

                            <span class="dayuhao">&gt;</span>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <span>手机 手机卡</span>

                            <span class="dayuhao">&gt;</span>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <span>手机 手机卡</span>

                            <span class="dayuhao">&gt;</span>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <span>手机 手机卡</span>

                            <span class="dayuhao">&gt;</span>

                        </a>

                    </li>

                    <li>

                        <a href="">

                            <span>手机 手机卡</span>

                            <span class="dayuhao">&gt;</span>

                        </a>

                    </li>

                </ul>

            </div>

            <div class="main-content-right">

                <img src="1.PNG" alt="" style="width: 100%" >

            </div>

        </div>

    </div>

</body>

</html>

CSS部分

/* 清除左上的小空白 */

body{

    margin:;

    padding:;

}

/* 长方形黑框 */

.nav{

    height: 40px;

    background-color: #333333;

    line-height: 40px;

}

/* 防止父级标签塌陷 */

.clearfix:after{

    content: '';

    display: block;

    clear: both;

}

/* 让整个内容向右偏移5% 并且内容占90% 所以右边也占5% 保持左右对称 */

.nav-content{

    margin-left: 5%;

    width: 90%;

    position: relative;

}

/* 左部分内容和右部分内容浮动 离左右40px */

.nav-content .nav-left{

    float: left;

    height: 40px;

}

.nav-content .nav-right{

    float: right;

    height: 40px;

}

/* 设置内容里面所有a标签的样式 */

.nav-content a{

    color: #b0b0b0;

    text-decoration: none;

    font-size: 12px;

}

/* 设置所有竖杠的样式 */

.nav-content .shugang{

    color: #424242;

}

/* 购物车 (0)的位置 */

.cart-part{

    float: right;

}

/* 设置购物车小块块的样式 */

.cart-part .cart{

    display: inline-block;

    height: 40px;

    width: 120px;

    background-color: #424242;

    text-align: center;

}

/* 触碰购物车会出现一个下拉框 */

/* 原本display是none 当触碰购物车时会变为block状态*/

/* 在block块级标签状态下可与设置高度宽度等参数 */

.cart-part:hover .cart-list{

    display: block;

}

/* 触碰购物车下拉框的样式 */

.cart-list{

    height: 100px;

    width: 320px;

    position: absolute;

    right:;

    top: 40px;

    background-color: red;

}

/* 隐藏 */

.hide{

    display: none;

}

/* ---------------------------- */

/* 顶部区域 */

.main-top{

    height: 100px;

    margin-left: 5%;

    width: 90%;

    line-height: 100px;

}

/* 顶部区域左侧的区域 */

.main-top-logo{

    height: 100px;

    line-height: 100px;

    float: left;

}

/* 顶部区域左侧的小米logo样式 */

.a-logo{

    margin-top: 22px;

    display: inline-block;

    height: 55px;

    width: 55px;

    background: #ff6700 url('mi-logo.png') no-repeat 3px 3px;

}

/* 顶部区域中间的区域 */

.main-top-nav{

    float: left;

    margin-left: 180px;

}

/* 顶部区域中间区域的a标签样式 */

.main-top-nav a{

    color: #333;

    text-decoration: none;

    margin-left: 10px;

}

/* 顶部区域右边的搜索框区域 */

.main-top-search{

    float: right;

    height: 100px;

}

/* 右边的搜索框样式 */

.search-input{

    width: 246px;

    height: 46px;

    border: 1px solid #e0e0e0;

    border-right:;

}

/* 搜索框右边的搜索按钮的样式 */

.search-button{

    width: 50px;

    height: 50px;

    padding:;

    background-color: white;

    border: 1px solid #e0e0e0;

}

/* 当鼠标触碰查找按钮时  */

.search-button:hover{

    background-color: #ff6700;

}

/* 主内容区域  */

.main-content{

    margin-left: 5%;

    width: 90%;

}

/* 主内容左侧区域 */

.main-content-left{

    float: left;

    background-color: rgba(105,101,101,0.6);

    width: 20%;

}

/* 主内容右侧区域 */

.main-content-right{

    float: right;

    width: 80%;

}

/* 主内容左侧区域的ul竖行 */

.main-content-left ul{

    list-style: none; /* 取出列表每项的前面的点 '·' */

    padding:;

}

/* 主内容左侧区域ul下面的li(每项) */

.main-content-left ul li{

    height: 40px;

    width: 100%;

    line-height: 40px;

}

/* 每个li里面(每个点里面)都有一个a标签 这个是设置a标签样式 */

.main-content-left ul li a{

    text-decoration: none;

    color: #fff;

    font-size: 14px;

    display: inline-block;

    width: 80%;

    margin-left: 10%;

}

/* 每行内容都有一个大于号 让它在最右边 */

.main-content-left ul li a .dayuhao{

    float: right;

}

/* 触碰每一个小项时，颜色会变成橙色 */

.main-content-left ul li:hover{

    background-color: #ff6700;

}

最终实现效果图

day45:JS中的json&JS的BOM操作和DOM操作

划分区域

day45:JS中的json&JS的BOM操作和DOM操作

秒客网

day45:JS中的json&JS的BOM操作和DOM操作

目录

补充：CSS中的弹性盒子

JS中json的序列化

JS中的BOM操作

location操作

计时器

计时器的示例

JS中的DOM操作

创建标签

查找标签

直接查找选择器

间接查找选择器

文本操作

innerText

innerHTML

值操作

值操作的示例

事件

类值操作

style样式操作示例

onchange事件示例

用CSS实现小米商城导航栏+主内容部分

HTML部分

CSS部分

最终实现效果图

划分区域

相关文章