复习
1.字体图标
用i标签, 设置类名, 与第三方字体图标库进行图标匹配
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<i class="fa fa-shopping-cart cart-tag"></i>
.cart-tag {
font-size: 20px;
}
2.盒子的显隐
.box {
height: 0;
overflow: hidden;
}
display: none|block; 不能动画|隐藏是不占位|显示时占位
opacity: 0|1; 能动画|隐藏显示均占位
要对显隐的盒子做定位处理, 目的是让盒子在隐藏显示状态下,都脱离文档流,不影响其他盒子布局
3.overflow: auto | scroll | hidden
4.伪类设计边框 => 不占位
.box {
width: 200px;
height: 200px;
position: relative;
}
.box:after {
content: "";
width: 1px;
height: 180px;
background: black;
position: absolute;
top: 10px;
left: 0;
}
5.盒子阴影
/*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/
box-shadow: 220px 0 0 20px red, 0 -220px 0 -20px blue, ...;
6.2d形变
transform: 旋转deg | 偏移px | 缩放
旋转: transform: rotateZ(360deg);
偏移: transform: translateX(300px) translateY(-300px);
缩放: transform: scale(2, 0.5)
顺序可能导致过程不一样:
transform: translateX(300px) rotateZ(360deg);
transform: rotateZ(360deg) translateX(300px);
js 导读
js属于编写运行在浏览器上的脚本语言
js采用ECMAScript语法
操作BOM: 浏览器对象模型
操作DOM: 文档对象模型
js属性名书写标准按照大驼峰体来书写
js引入(*)
<style>
#box, #wrap, #temp, #res {
width: 200px;
height: 200px;
background-color: red;
margin-top: 10px;
}
</style>
<!--1.行间式: 就是代码块书写在全局事件属性中-->
<!--this就是激活该代码块(脚本)的页面标签(页面元素对象)-->
<div id="box" onclick="this.style.borderRadius = '10px'"></div>
<div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div>
<div id="temp"></div>
<!--2.内联式-->
<script>
// id为标签的唯一标识, 使用可以识别到html的具体标签
temp.onclick = function () { // 完成某一项功能
this.style.width = "400px"; // this => temp
}
</script>
<div id="res"></div>
<!--3.外联式-->
<script src="js/1.js">
// js/1.js
res.onclick = function () { // res点击会触发一个功能
this.style.height = "100px"; // this => res
this.style.backgroundColor = "yellow";
this.style.borderRadius = "50%";
}
js中用//表示单行注释,/**/表示多行注释
js选择器
<div id='box' class="bb"></div>
<div class='box1 bb'></div>
<div class='box1 bb'></div>
<script>
// getElement系列
// box
var box = document.getElementById('box');
// [] | [.box1] | [.box1, ..., .box1]
var boxs = document.getElementsByClassName('box1');
// [] | [div] | [div, ..., div]
var divs = document.getElementsByTagName('div');
// 总结: 参数采用的是id名或类名或标签名,不需要带符号(#|.)
</script>
<script>
// 只能获取检索到的第一个满足条件的标签(元素对象)
var div = document.querySelector('.bb');
// 获取的是满足条件的有双类名的.box1.bb
var divs = document.querySelectorAll('body .box1.bb');
// 总结: 参数采用的就是css选择器语法
</script>
用内联式写js遇到相同id的对象,都无法处理对象,因为无法找到唯一的对象
getElement能获取到相同id对象的第一个内容
例子:
<body>
<div id="box"></div>
<!--虽然id可以重复, 但是js中就无法唯一标识识别, 所以约定俗成标签id名一定不能重复-->
<div id="box"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box2">1</div>
<div class="box2">2</div>
</body>
<script>
// 事件绑定这函数的地址, 使用激活事件, 就会通过函数地址找到函数功能体, 完成指定功能
// 页面如果有两个id="box", 一个都匹配不上
// box.onclick = function () {
// this.style.borderRadius = "50%";
// }
// document对象
// getElement系列选择器
// 能获得到第一个id="box", 但是第二个永远取不到, 所以id还是不能重复
document.getElementById('box').onclick = function () {
this.style.borderRadius = "50%";
}
// js变量的定义
// 关键字(var) 变量名 = 变量值;
var num = 10;
// 如何查看变量名
var a = num;
// print(num); // 调用浏览器使用打印机
// 弹出框查看(*)
// alert(num);
// alert(a);
// 浏览器控制台查看(***)
// console.log(num);
// console.log(a);
// 将内容书写到页面(*)
// document.write(num);
// document.write(a);
// 断点调试(***)
// 断点调节(debug)
var box = document.getElementById('box');
// 上面和下面获取的都是第一个box, box的点击事件最终绑定到的是改变背景颜色的函数地址
box.onclick = function () {
this.style.backgroundColor = "green";
}
// 通过类名 => 类名可以重复 => 获取的结果是数组(列表)
var boxs = document.getElementsByClassName('box1');
console.log(boxs);
boxs[0].onclick = function () {
this.style.backgroundColor = 'blue'
}
boxs[1].onclick = function () {
this.style.backgroundColor = 'pink'
}
// 通过标签名 => 标签名 => 获取的结果是数组(列表)
var divs = document.getElementsByTagName('div');
console.log(divs);
divs[1].ondblclick = function () {
divs[1].style.borderRadius = "50%";
}
</script>
<script>
// 参数: css语法的选择器
var box2s = document.querySelectorAll('body .box2');
console.log(box2s);
var box2 = document.querySelector('body .box2');
console.log(box2);
</script>
js变量的定义
关键字(var) 变量名 = 变量值
var sum = 10;
queryselectorall 输入css的选择器格式
事件
var box = document.querySelector('.box');
// 元素对象.事件名 = 函数
box.onclick = function() {
// 具体功能代码块; this代表就是激活该事件的元素对象
this.style.color = 'red'; // 将box的字体颜色修改为红色
}
操作页面文档(*****)
// 1. 通过选择器获取页面元素对象(指定的标签)
// 2. 为该对象绑定事件
// 3. 通过事件中的功能操作元素对象
// i) 修改内容: innerText | innerHTML
// ii) 修改样式
// iii) 修改类名
var box = document.querySelector('.box'); // 获取页面元素
box.onclick = function () { // 绑定事件
// 修改内容
// this.innerText = "innerText"; // 不能解析html标签
// this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签
// 修改样式 => 修改的是行间式 => 优先级高于所有内联外联样式(没有设置!important)
// this.style.color = "green";
// this.style.fontSize = "12px";
// 修改类名
// this.className = "box1"; // 直接修改类名, 会丢失之前类名下的属性们
// 在原类名基础上添加类型
this.className += " box1"; // 多类名之间用空格隔开, 所有做字符串拼接时一定需要添加空格
// 清除类名
this.className = ""; // 将类名等于空字符串就是置空类名
}
例子:
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
font: 900 30px/200px "STSong";
text-align: center;
color: red!important;
margin: 0 auto;
}
.box.box1 {
color: greenyellow!important;
font-size: 12px;
font-weight: lighter;
}
</style>
<body>
<div class="box">文本内容</div>
</body>
<script>
// 1. 通过选择器获取页面元素对象(指定的标签)
// 2. 为该对象绑定事件
// 3. 通过事件中的功能操作元素对象
// i) 修改内容: innerText | innerHTML
// ii) 修改样式
// iii) 修改类名
var box = document.querySelector('.box');
box.onclick = function () {
// 修改内容
// this.innerText = "innerText";
// this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签
// 修改样式 => 修改的是行间式
// this.style.color = "green";
// this.style.fontSize = "12px";
// 修改类名
// this.className = "box1"; // 直接修改类名, 会丢失之前类名下的属性们
// 在原类名基础上添加类型
this.className += " box1";
// var cName = this.className;
// console.log(cName);
// cName = cName + " " + "box1";
// console.log(cName);
// this.className = cName;
// 清除类名
this.className = "";
}
</script>
计算后样式
内联或外联设置的(行间式设置getComputedStyle也能获取到)
.box {
font-size: 100px;
}
// 如何获取计算后样式
// getComputedStyle(元素对象, 伪类).属性名
var box = document.querySelector('.box');
var ftSize = getComputedStyle(box, null).fontSize;
console.log(ftSize); // 100px
例子:
<style>
/*计算后样式: 内联式和外联式书写的样式都叫计算后样式*/
.box {
width: 200px;
height: 200px;
background-color: orange;
font-size: 100px;
}
</style>
<div class="box" style="font-size: 30px">12345</div>
<div class="box">12345</div>
<script>
// 如何获取提取设置好的样式属性值
var box = document.querySelector('.box');
var ftSize = box.style.fontSize; // 这种方式操作的永远是行间式
console.log(">>>>>>>>>>>>>>>>" + ftSize);
// 如何获取计算后样式
// getComputedStyle(元素对象, 伪类).属性名
ftSize = getComputedStyle(box, null).fontSize;
console.log("=================" + ftSize);
</script>
JS基础语法
数据类型
// Number: 数字类型
var a1 = 10;
var a2 = 3.14
// String: 字符串
var s1 = "123";
var s2 = '456';
// undefined: 未定义
var u1;
var u2 = undefined;
// Boolean: 布尔
var b1 = true;
var b2 = false;
// typeof() 来查看类型
例子:
// 1.定义变量
var num = 10;
var s = "hello js";
console.log(num, "<<>>", s);
console.log("%d %s", num, s);
// 将字符串赋值给页面元素对象
box.innerText = s;
//命名规范：
// 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
// 区分大小写
// 不能出现关键字及保留字
// var var = 30; // 出错
// 数据类型
// 值类型
// 数字类型 | 字符串类型 | 未定义类型 | 布尔类型
// 用typeof()函数可以查看变量类型
引用类型
// Object
var obj = {};
// Function
var func = function(){}
// Null
var n = null;
例子:
<script>
// 1.定义变量
var num = 10;
var s = "hello js";
console.log(num, "<<>>", s);
console.log("%d %s", num, s);
// 将字符串赋值给页面元素对象
box.innerText = s;
//命名规范：
// 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
// 区分大小写
// 不能出现关键字及保留字
// var var = 30; // 出错
// 数据类型
// 值类型
// 数字类型 | 字符串类型 | 未定义类型 | 布尔类型
// 用typeof()函数可以查看变量类型
// 1.Number
var a = 10;
console.log(a, typeof(a));
a = 3.14;
console.log(a, typeof(a));
// 2.String
a = '123';
console.log(a, typeof(a));
a = "456";
console.log(a, typeof(a));
// 3.undefined
var b;
console.log(b,typeof(b));
a = undefined;
console.log(a, typeof(a));
// 4.boolean
a = true;
console.log(a, typeof(a));
b = false;
console.log(b, typeof(b));
// 引用类型
// 5.Function
a = function () {
return 0;
}
console.log(a, typeof(a));
// 6.Object => 当做字典
a = {
name: "Bob",
age: 18
}
console.log(a, typeof(a));
// 7.Null => 空对象
a = null;
console.log(a, typeof(a));
// 其他
// 数组对象
a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof(a));
a = [5, 4, 3, 2, 1]; // 语法糖
console.log(a, typeof(a));
// 时间对象 (cookie)
a = new Date(); // 当前时间
// a = new Date("2019-3-1 12:00:00"); // 设定的时间
console.log(a, typeof(a));
var year = a.getFullYear();
console.log(year)
console.log(a.getDay()) // 周几
console.log(a.getMonth()) // 月份(从0)
console.log(a.getDate()) // 几号
// 正则
var re = new RegExp('\\d{3}', 'g');
var res = "abc123abc123".match(re);
console.log(res);
re = /\d{2}/g;
res = 'a1b23c456'.match(re);
console.log(res);
re = /[abc]/gi;
res = 'aBc'.match(re);
console.log(res);
// 总结:
// 1.正则 /正则语法/
// 2.参数g 全文匹配
// 3.参数i 不区分大小写
// 数组与对象(字典)的使用
var arr = [3, 5, 2, 1, 4];
console.log(arr[2]);
var dic = {
"name": "Bob",
age: 18,
"little-name": "b"
}
console.log(dic['name']);
console.log(dic['age']);
console.log(dic.name);
console.log(dic.age);
console.log(dic["little-name"])
// dic中所有的key都是string类型, value可以为任意类型
// dic中key可以通过中括号及.语法访问值,但key不满足js命名规范时,只能使用中括号语法
</script>
小米商城导航栏例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米导航栏</title>
<style>
body, ul, h1, h3 {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.nav {
/*background-color: pink;*/
}
.wrapper {
width: 1226px;
margin: 0 auto;
}
.wrapper:after {
content: "";
display: block;
clear: both;
}
h1, .nav-list {
float: left;
}
h1 {
padding-top: 22px;
}
h1 a {
display: block;
width: 55px;
height: 55px;
text-indent: -9999px;
background: url("img/logo.png");
}
.nav-list {
margin-left: 160px;
}
.nav .list-li {
float: left;
padding: 0 10px;
line-height: 100px;
}
.nav-list .list-li:hover {
cursor: pointer;
}
.nav-list .list-li:hover a {
color: #ff6700;
}
.nav {
/*辅助list-ul*/
position: relative;
}
.nav .list-ul {
/*display: none;*/
width: 100vw;
height: 0px;
/*height: 200px;*/
overflow: hidden;
background-color: orange;
/*需要参考nav来定位*/
position: absolute;
top: 100px;
left: 0;
transition: .3s;
}
.nav .list-li:hover ~ .list-ul {
height: 200px;
}
.nav .list-ul:hover {
height: 200px;
}
</style>
<style>
.list-ul li {
float: left;
}
.list-ul a {
display: block;
width: 160px;
height: 200px;
background-color: red;
margin-right: 1px;
position: relative;
}
.list-ul a h3 {
width: 50px;
border: 1px solid #ff6700;
font-size: 16px;
font-weight: normal;
text-align: center;
margin-left: 55px;
position: absolute;
}
.list-ul a img {
width: 160px;
margin: 35px 0 0;
}
.list-ul a p {
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<div class="wrapper">
<h1>
<a href="">小米官网</a>
</h1>
<ul class="nav-list">
<li class="list-li">
<a href="">小米手机</a>
</li>
<li class="list-li">
<a href="">红米</a>
</li>
<li class="list-li">
<a href="">电视</a>
</li>
<li class="list-li">
<a href="">笔记本</a>
</li>
<li class="list-ul">
<ul class="wrapper">
<li>
<a href="">
<h3>新品</h3>
<img src="" alt="">
<p>小米 MIX3</p>
</a>
</li>
<li>
<a href="">
<h3>新品</h3>
<img src="" alt="">
<p></p>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
<script>
var datas = [ // 该数组对应的是 小米 红米 电视 笔记本 (list-li们)
[ // 该数组对应的是 "小米" 悬浮显示商品展示的列表 (.list-ul下的ul)
{ // list-ul 下的第一个 li下的 h3, img, p数据
h3: true,
img: "img/xmsj3.png",
p: "小米 MIX3"
},
{ // list-ul 下的第二个 li下的 h3, img, p数据
h3: false,
img: "img/xmsj6.png",
p: "小米8 青春版"
}
],
[ // 该数组对应的是 "红米" 悬浮显示商品展示的列表 (.list-ul下的ul)
// 和 "小米" 悬浮的显示的标签是公用的, 变得只是数据
{ // list-ul 下的第一个 li下的 h3, img, p数据
h3: false,
img: "img/xmsj3.png",
p: "红米 123"
},
{ // list-ul 下的第二个 li下的 h3, img, p数据
h3: true,
img: "img/xmsj6.png",
p: "红米 456"
}
],
[
// 电视
],
[
// 笔记本
]
]
// 小米 红米 电视 笔记本们的 .list-li li们
var listLis = document.querySelectorAll('.nav-list .list-li');
// 小米悬浮事件
listLis[0].onmouseenter = function () {
// 拿到 "小米" 悬浮对应的显示商品展示的列表数据
var arr = datas[0];
// list-ul wrapper下的第一个a下的h3, img, p
var h3 = document.querySelector('.list-ul li:nth-child(1) h3');
var img = document.querySelector('.list-ul li:nth-child(1) img');
var p = document.querySelector('.list-ul li:nth-child(1) p');
// "小米" 悬浮对应的显示商品展示的列表中第一个字典
var dic1 = arr[0];
if (!dic1.h3) { // 通过数据的布尔值决定是否是新品, h3是否显示
h3.style.display = "none";
} else {
h3.style.display = "block";
}
img.setAttribute('src', dic1.img); // 为img标签的全局属性src设置属性值
p.innerText = dic1.p; // 设置p标签的内容
// list-ul wrapper下的第二个a下的h3, img, p
h3 = document.querySelector('.list-ul li:nth-child(2) h3');
img = document.querySelector('.list-ul li:nth-child(2) img');
p = document.querySelector('.list-ul li:nth-child(2) p');
// "小米" 悬浮对应的显示商品展示的列表中第一个字典
var dic2 = arr[1];
if (!dic2.h3) {
h3.style.display = "none";
} else {
h3.style.display = "block";
}
img.setAttribute('src', dic2.img);
p.innerText = dic2.p;
}
// 红米悬浮事件
listLis[1].onmouseenter = function () {
// 拿到 "红米" 悬浮对应的显示商品展示的列表数据
var arr = datas[1];
var h3 = document.querySelector('.list-ul li:nth-child(1) h3');
var img = document.querySelector('.list-ul li:nth-child(1) img');
var p = document.querySelector('.list-ul li:nth-child(1) p');
var dic1 = arr[0];
if (!dic1.h3) {
h3.style.display = "none";
} else {
h3.style.display = "block";
}
img.setAttribute('src', dic1.img);
p.innerText = dic1.p;
h3 = document.querySelector('.list-ul li:nth-child(2) h3');
img = document.querySelector('.list-ul li:nth-child(2) img');
p = document.querySelector('.list-ul li:nth-child(2) p');
var dic2 = arr[1];
if (!dic2.h3) {
h3.style.display = "none";
} else {
h3.style.display = "block";
}
img.setAttribute('src', dic2.img);
p.innerText = dic2.p;
}
listLis[2].onmouseenter = function () {
}
listLis[3].onmouseenter = function () {
}
</script>
</html>
