复习
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"> <