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>
实现效果如下图所示
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="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操作的更多相关文章
- MVC中处理Json和JS中处理Json对象
MVC中处理Json和JS中处理Json对象 ASP.NET MVC 很好的封装了Json,本文介绍MVC中处理Json和JS中处理Json对象,并提供详细的示例代码供参考. MVC中已经很好的封装了 ...
- js中的json对象详细介绍
JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Ob ...
- 在js中使用json
在js中使用json var obj = { "1" : "value1", "2" : "value2" ...
- 在JavaScript中使用json.js：使得js数组转为JSON编码
在json的官网中下载json.js,然后在script中引入,以使用json.js提供的两个关键方法. 1.数组对象.toJSONString() 这个方法将返回一个JSON编码格式的字符串,用来表 ...
- js中 给json对象添加属性和json数组添加元素
js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...
- js中的json操作
js中的json操作 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScr ...
- 【微信小程序】在js中导入第三方js或自己写的js，使用外部js中的function的两种方法 import和require的区别使用方法 【外加：使用第三方js导出的默认function的调用方法】
如下 定义了一个外部js文件,其中有一个function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync( ...
- 【转】MVC中处理Json和JS中处理Json对象
事实上,MVC中已经很好的封装了Json,让我们很方便的进行操作,而不像JS中那么复杂了. MVC中: public JsonResult Test() { JsonResult json = new ...
- js中的json
1.什么是JSON? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 2.JSON语法是JavaScr ...
随机推荐
- linux的文件处理(匹配 正则表达式 egrep awk sed)和系统、核心数据备份
文件处理 1.处理方式 匹配 正则表达式 egrep awk sed 2.文件中的处理字符 \n 新行符 换行 \t 制表符 tab键 缺省8个空格 \b 退格符 backspace键 退格键 ...
- 并发|WEB服务器并发
面试中容易被问到你们服务器的并发是多少?但是这个问题我问过许多人,没有得到一个准确的答案!我总结了一些不错的回答,分享给大家! 面试题: 你们公司的服务器并发是多少? 我的回答: 1.并发这个词,许多 ...
- Qt自定义控件之仪表盘3--雷达扫描图
1.设计思想 雷达扫描图,在影视作品中见到较多,比如飞机雷达.舰艇雷达,有一个扫描线转圈代表雷达一周旋转或一个批次的收发,发现目标就在表盘上标记位置.和汽车仪表盘类似,汽车仪表盘有底盘背景图.同圆.刻 ...
- 苹果挖矿恶意程序处理（OSX/CoinMiner.X）
背景 近期通过流量告警发现多起外连矿池的告警,均外连至43.249.204.231 威胁情报信息如下: 系统表象 1.通过ps -ef|grep osascript发现在/library/Launch ...
- 微信公众号怎么发PDF文件？
微信公众号怎么发PDF文件? 我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件. 以下是公众 ...
- ECMAScript6新增数据类型symbol数据类型
25.Symbol目的:为了解决对象之间属性名冲突的问题,Symbol它是引用数据类型. Symbol( ),它代表着一个独一无二的值 [name]: '小红',//加中括号代表默认创建了一个Symb ...
- 自动发布-asp.net自动发布、IIS站点自动发布（集成SLB、配置管理、Jenkins）
PS:概要.背景.结语都是日常“装X”,可以跳过直接看自动发布 环境:阿里云SLB.阿里云ECS.IIS7.0.Jenkins.Spring.Net 概要 公司一个项目从无到有,不仅仅是系统从无到有的 ...
- 将Asp.Net Core3.1项目，使用Docker 部署到Centos 8
一.准备工具 Win 10 Centos 8 Visual Studio 2019 Docker Desktop 下载地址:https://download.docker.com/win/stabl ...
- 《Java从入门到失业》第一章：计算机基础知识（三）：程序语言简介
1.3程序语言简介 我们经常会听到一些名词:低级语言.高级语言.编译型.解释型.面向过程.面向对象等.这些到底是啥意思呢?在正式进入Java世界前,笔者也尝试简单的聊一聊这块东西. 1.3.1低级语言 ...
- unity探索者之微信支付，非第三方插件
版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/8404604.html 相比微信的登录和分享功能,微信支付sdk的接入显得相当简单, ...