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

发布时间：2020-12-20 09:57:23 所属栏目：Python 来源：网络整理

导读：目录 1.补充：CSS中的弹性盒子 2.JS中json的序列化 3.JS中的BOM操作 3.1 location操作 3.2 计时器 4.JS中的DOM操作 4.1 创建标签 4.2 查找标签 4.3 文本操作 4.4 值操作 4.5 事件 5.用CSS实现小米商城导航栏+主内容部分补充：CSS中的弹性盒子弹性盒子的作

补充：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</a href="">kkaimg src="mi-logo.png" alt="" style="background-color: red">
div>

实现效果如下图所示

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( 设置定时器 2000ms后执行function 循环
clearInterval(t);  清除定时器Interval

计时器的示例

<!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"title>Titlestyle>
        .c1{
            background-color: red;
            height 100px
            width;
        }
        /* 相同的属性会覆盖 */
        .c2 blue;

        }

    body="c1" id="d1"></>
    
script>
    var t = setInterval(function ()
          dEle   document.getElementById('d1);// 获取的是id为d1的那个div语句
         dEle.classList.toggle(c2);   将div中class切换成c2 
         如果此时检测div中的类是c1 那么就切换成c2 
        如果此时检测div中的类是c2 那么就删除类c2 切换成c1
    },100)
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

 获取内容（连带着标签都获取）
];
    h.innerHTML

 设置文本内容
h.innerHTML = '<a href="">百度</a>';   能够生成标签效果

值操作

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

值操作的示例

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

>
用户名：input type="text"="username" onblur="f1(this);">
     span id="error"="color:Red;font-size: 12px;">

>

     f1(ths){
         console.log(ths); ths是input标签对象
         username  ths.value ; 通过input标签对象获取到输入框中输入的内容
          console.log(ths.value); ths.value是用户在输入框输入的内容“
         if (username.length < 5){  如果输入内容的长度小于5
             spa  document.getElementById(error);  获取id为error的标签对象span
            spa.innerText = 炒米饭 将span里面的内容改为‘炒米饭’
}
    }
>

事件

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

常用的事件有哪些：

　　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';

 200px}
        .c3 yellow}
     事件绑定：方式2（不常用 ）="f1(this);" onfocus="f2(this);"="d1" class="c1  xx  oo" 输入框长度小于5  失去光标后  提示红字'黄焖鸡米饭'
     ths.value  ;
         ){
            );
            spa.innerText 黄焖鸡米饭;
}
    }
    
     获取光标时 取消红字显示 将input的下一个标签的内容设置为空
     f2(ths){
          ths.nextElementSibling.innerText '';
    }

     d1 );
     事件绑定：方式1
    d1.onclick  (){
          this就是当前绑定事件的标签对象
          css样式操作
          this.style.backgroundColor = 'blue';

           当点击到d1这个id对应的标签（div）时，将d1对应标签的类c1替换成c2
         this.classList.toggle();
        
          当点击到username这个id对应标签（input）时，将username对应标签的类替换成c3
          u username);
         u.classList.toggle(c3)

    }


>

onchange事件示例

 select下拉框 select name="s1"option value="1">xx1option="2">xx2="3">xx3select>


 ths.value  ;
        ;
}
    }

    );
    d1.onclick );
         )

    }
     onchange事件
     s s1);
    s.onchange  (){  域内容发生变化，触发c2
         d1.classList.toggle();
    }

>



>

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

HTML部分

link rel="stylesheet" href="xiaomi.css"="nav">
        ="nav-content clearfix">
            ="nav-left">
                ="nav-link">小米商城> ="shugang">|>MIUI>LoT>云服务>金融>有品>小爱开放平台>企业团购>资质证照>协议规则>智能生活>Select Location="cart-part"="nav-link cart">购物车 (0)="cart-list hide"="nav-right">登录>注册>消息通知="main"="main-top clearfix"="main-top-logo"="a-logo"="main-top-nav">小米手机>Redmi 红米>电视>笔记本>家电>路由器>智能硬件>服务>社区="main-top-search"="search-input"><="submit"="search-button"="main-content clearfix"="main-content-left"ul>
                    li>
                        >
                            >手机 手机卡="dayuhao">&gt;="main-content-right"="1.PNG"="width: 100%" >

CSS部分

 清除左上的小空白 
body{
    margin: 0;
    padding: 0;
}

 长方形黑框 
.nav{ 40px;
    background-color: #333333;
    line-height: 40px;
}

 防止父级标签塌陷 
.clearfix:after{
    content: ''; block;
    clear: both;
}
 让整个内容向右偏移5% 并且内容占90% 所以右边也占5% 保持左右对称 
.nav-content{
    margin-left: 5%; 90%;
    position: relative;
}

 左部分内容和右部分内容浮动 离左右40px 
.nav-content .nav-left{
    float: left; 40px;
}
.nav-content .nav-right{ right; 40px;
}
 设置内容里面所有a标签的样式 
.nav-content a{
    color: #b0b0b0;
    text-decoration: none;
    font-size: 12px;
}
 设置所有竖杠的样式 
.nav-content .shugang{ #424242;
}

 购物车 (0)的位置 
.cart-part{ right;
}
 设置购物车小块块的样式 
.cart-part .cart{ inline-block; 120px; #424242;
    text-align: center;
}

 触碰购物车会出现一个下拉框  原本display是none 当触碰购物车时会变为block状态 在block块级标签状态下可与设置高度宽度等参数 
.cart-part:hover .cart-list{ block;
}
 触碰购物车下拉框的样式 
.cart-list{ 320px; absolute;
    right:
    top: red;
}
 隐藏 
.hide{ none;
}


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

 顶部区域 
.main-top{ 100px;
}
 顶部区域左侧的区域 
.main-top-logo{ left;
}

 顶部区域左侧的小米logo样式 
.a-logo{
    margin-top: 22px; 55px;
    background: #ff6700 url('mi-logo.png') no-repeat 3px 3px;
}

 顶部区域中间的区域 
.main-top-nav{ 180px;
}

 顶部区域中间区域的a标签样式 
.main-top-nav a{ #333; 10px;
}

 顶部区域右边的搜索框区域 
.main-top-search{ 100px;
}

 右边的搜索框样式 
.search-input{ 246px; 46px; 1px solid #e0e0e0;
    border-right: 搜索框右边的搜索按钮的样式 
.search-button{ 50px; white; 1px solid #e0e0e0;
}

 当鼠标触碰查找按钮时  
.search-button:hover{ #ff6700;
}

 主内容区域  
.main-content{ 90%;
}

 主内容左侧区域 
.main-content-left{ rgba(105,101,0.6); 20%;
}
 主内容右侧区域 
.main-content-right{ 80%;
}

 主内容左侧区域的ul竖行 
.main-content-left ul{
    list-style: none;  取出列表每项的前面的点 '·'  主内容左侧区域ul下面的li(每项) 
.main-content-left ul li{ 100%; 每个li里面(每个点里面)都有一个a标签 这个是设置a标签样式 
.main-content-left ul li a{ #fff; 14px; 80%; 10%;
}

 每行内容都有一个大于号 让它在最右边 
.main-content-left ul li a .dayuhao{ right;
}

 触碰每一个小项时，颜色会变成橙色 
.main-content-left ul li:hover{ #ff6700;
}

最终实现效果图

划分区域

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

目录