目录
补充: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>
实现效果如下图所示
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">></span> </a> </li> <li> <a href=""> <span>手机 手机卡</span> <span class="dayuhao">></span> </a> </li> <li> <a href=""> <span>手机 手机卡</span> <span class="dayuhao">></span> </a> </li> <li> <a href=""> <span>手机 手机卡</span> <span class="dayuhao">></span> </a> </li> <li> <a href=""> <span>手机 手机卡</span> <span class="dayuhao">></span> </a> </li> <li> <a href=""> <span>手机 手机卡</span> <span class="dayuhao">></span> </a> </li> <li> <a href=""> <span>手机 手机卡</span> <span class="dayuhao">></span> </a> </li> <li> <a href=""> <span>手机 手机卡</span> <span class="dayuhao">></span> </a> </li> <li> <a href=""> <span>手机 手机卡</span> <span class="dayuhao">></span> </a> </li> <li> <a href=""> <span>手机 手机卡</span> <span class="dayuhao">></span> </a> </li> </ul> </div> <div class="main-content-right"> <img src="1.PNG" alt="" style=" 100%" > </div> </div> </div> </body> </html>
CSS部分
/* 清除左上的小空白 */ body{ margin: 0; padding: 0; } /* 长方形黑框 */ .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: 0; 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: 0; } /* 搜索框右边的搜索按钮的样式 */ .search-button{ width: 50px; height: 50px; padding: 0; 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: 0; } /* 主内容左侧区域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; }