目录
补充：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操作
计时器
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 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
值操作
值操作语法：标签对象.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">>="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; }
最终实现效果图
划分区域
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
