一、JavaScript的背景及知识结构
1、三个问题
- 什么是JavaScript?
- JavaScript能干什么?
- JavaScript是由什么构成的?怎样学习JavaScript?
2、什么是JavaScript?
①JavaScript是一种轻量级的编程语言;借鉴了Java的结构、语法,基于Java来进行的改编,可在浏览器中运行的命令,这种命令又称为脚本(script)。
②JavaScript是目前最流行的脚本语言。
编译类语言——C++等
HTML+CSS——设计类语言。
③JavaScript可写在HTML里,意味着在所有浏览器里都可执行,浏览器里要运行JavaScript,需要JavaScript解释器,JavaScript解释器不仅可以在浏览器里使用,也可运行在服务器端、手机端。
④JavaScript很容易学习,入门门槛低,精通需要多练习。学习资料有书、论坛、教程。工作需求大。
3、JavaScript能干什么?
HTML+CSS——网页的内容;HTML负责页面的结构;CSS负责页面的样式。
JavaScript——网页的行为。①改进设计:可增加动态效果。
②验证表单:可提示错误信息。
③检查浏览器:浏览器信息,用的什么浏览器,页面多大等信息。
④创建cookies:在本地做一些存储。
和用户的交互:相互交流。
4、JavaScript是由什么构成的?——三部分组成
①逻辑处理:ECMAscript(欧洲计算机制造协会),负责语法等,包括变量、值、运算、流程控制、数组、对象、类。——语法
②负责DOM操作:修改HTML里的元素。(增删改查)——库或者是方法→API。
③负责浏览器对象(又称为浏览器BOM):与浏览器进行交互,可获得浏览器的信息(大小,名称等浏览器相关信息)。
二、JavaScript值和变量
1、js的值——数字、字符串、布尔值
①数字:无引号
整数
小数 浮点数:1.1111
②字符串:用单引号或者双引号引起来的部分
③布尔值:做条件判断的时候需要用到
是 true 没有 false
2、直接量、变量
变量——可以把变量看做容器,是用老存放各种值的。一个变量只可以存 放一个直接量。
如果想把字符串和数字一起放入容器,需要将两者打包成一个对象。对象里会有地址,可将地址存入变量。
3、变量的声明:var x;(创建了一个变量)
x=“hello world”;
声明和赋值放在一起:var x = “hello world”;
多个变量:var x,y,z;
x=1;
y=2;
z=3;
声明和赋值放在一起:var x=1,y=2,z=3;
4、变量名遵循的规则:
①变量名必须是字母和数字,$或_组成;
②变量的第一个字母以英文开始;
③变量是大小写敏感的。
三、JavaScript语法基础
1、怎样使用js?——三种方式
执行的顺序跟写入的顺序有关
①外部文件引用的方法:
html文件里写:通过script的scr属性来引用外部文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>语法基础</title>
<script src="1.js"></script>
</head>
<body>
</body>
</html>
引用的js文件里写:alert("hello world");
——弹窗
②在HTML中通过标签形式写入:script
页面上会先弹出hello world,之后弹出hello 2020.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>语法基础</title>
<script src="1.js"></script>
<script>
alert("hello 2020");
</script>
</head>
<body>
</body>
</html>
③像CSS一样在标签的属性里写:注意alert括号里用英文状态下的单引号——<body onload="alert('hello');"></body>
。
2、语法
①用字母、数字、特殊符号组成的命令。
②字母的大小写敏感。
③命令之间是如何区分的?——不在一行的时候以行来区分;在一行的时候以分号来区分。
④注释://单行注释
/* */多行注释
⑤输出:alert——弹窗
console.log(“hello”)——在控制台查看
四、JavaScript运算符
1、运算符:常用的有算数运算符(+,-,,/,%)、赋值运算符(+=;-=;=;/=;%=)、比较运算符(<;<=;>;>=;;=;!=)、逻辑运算符(&&与;||或;!非)。
表达式:用运算符来操作的等式。
2、算数运算符的顺序:从左往右,先*,/,%,后+,-;想调整顺序可以使用括号,先从最里面的括号开始运算。
值——数字,字符串,布尔值(true=1,false=0);
3、加号:如果加号左右两边的值有字符串的话,按字符串处理,没有字符串按数字处理
1+“a”=“1”+“a”=“1a”
1+false=1+0=1
false+“a”=“falsea”
+1=1
-,*,/,%运算符直接转成数字
NaN——not a number
(可在任意网页打开控制台验证)
4、比较会得到布尔值
==——比较的是值;
===——类型和值都一样
0==false——true;
0===false——false;
5、逻辑运算符——两边都是布尔值;得到的结果也是布尔值。
&&——两边有一个假,结果即为假;两个都为真则为真;
||——两边有一个真,结果为真;两个都为假则为假;
!a——a为假,结果为真;a为真,结果为假。
6、按位运算(左移动、右移动)>>——可节省磁盘,写数据结构的时候可能用到。
五、JavaScript数据类型和转换
1、运算符中的自增自减(++;–)
一元(即变量)运算符、二元运算符;一元运算符的优先级高于二元运算符。
++a——先自增;
a++——后自增。
var a=1;
var b=a++ +5;
运行结果为b=6,a=2。
var a=1;
var b=++a +5;——a=a+1,b=a+5
运行结果为b=7,a=2
2、数据类型和转换
值:数字,字符串,布尔值
js——是一个弱类型的,即不清楚定义的变量的具体类型
c++,java——强类型的,定义的时候必须写清楚具体数据类型
原始类型:数字(number),字符串(string),布尔值(Boolean),undefined
对象:object——将原始值多重重组后称为对象。
系统自带的对象:数组,函数
自定义的——用{}括起来的
数组:把原始类型按顺序排列好;数组里面的数据类型可不同
var a=[60,61,62];
通过下标来区分,默认下标从0开始——a[0]
自定义对象:
var a1=60;
var a2=61;
var a3=62;
var a={“a1”:60,“a2”:61,“a3”:62}——字符串
a.a1
var a={0:60,1:61,2:62}——数字
a[0];
var a;——undefined
var a= null——代表数据类型为对象,只是对象为空
3、js里可以查看对象类型——typeof(a)
4、数据类型的转换
原始类型:数字(number),字符串(string),布尔值(Boolean)——用这些方法称为显示转换
①Number()
var a=“111”;
var b=Number(a);
②String();
a.toString();
六、流程控制
条件判断(if);选择(switch);循环(for,while)
1、条件判断
if(表达式 条件)
{
语句
}
if里面的条件为真,则执行语句。
2、选择
switch(表达式的值)
{
case 1:语句;
break;——break称为跳转语句
case 2:
break;
default:——默认值
a++;
break;
}
3、循环——重复多次做一件事
for(;;)循环的条件
{
满足条件执行的语句
}
while(条件表达式)
{
满足条件执行的语句
}
do{
}while(条件);
4、break——跳出最外面的大括号
continue——继续;跳至上一个花括号
七、函数的基本概念
1、函数:为了实现代码的复用才产生;把特定功能的语句打包放在一起。简化代码,方便修改。
函数的定义:
function 函数名(零个,一个或多个参数){
执行的语句
}
可用下列方式给函数换名称:
var 名称=函数名;
名称();
2、参数
实参——实际的参数。
形参——自定义的一个变量。
实参与形参一一对应,有多个参数的时候用逗号隔开即可。
3、返回值:return;
function add(x,y){
var z=x+y;
return z;或者是return x+y;
}
var rs=add(1,2);
console.log("1+2="+rs);
八、函数的arguments实例精讲
1、如果实参没有值,可以用if设置默认值。
2、动态参数——数组的遍历。
函数的定义——形参;函数的调用——实参。
arguments——数组
function add(x,y){
var z=0;
for(var i=1;i<arguments.length;i++){
z+=arguments[i];
}
return x+y;
}
九、全局作用域,局部作用域,域解析
1、作用域:可访问变量(对象、函数)的集合。
我们定义了一个变量,这个变量可以被使用的地方,可以使用的范围就是作用域。
以函数来划分:全局作用域(全局变量——在函数外定义的变量),在所有地方都能被访问;局部作用域(局部变量——在函数里面定义的变量),只有在函数里面才能被访问。
两者同时存在时,局部变量的值不会影响全局变量的值。
function add(){
y=100;——y程序默认会认为是全局变量,只有在执行到函数时才会被定义为全局变量
console.log("add():y="+y);
}
函数也是变量。
2、域解析——做的事就是把变量的声明提前。
浏览器获得js文件的时候,不是立刻去执行代码的,首先会全篇快速扫描一遍,主要是针对变量,将变量预先解析。
十、闭包和立即执行实例解析
1、闭包来实现变量的私有化问题。
全局变量——谁都可以访问,修改。
局部变量要实现有全局变量的生命周期。——函数的局部变量里套一个有全局变量的函数
function add(){
var counter=0;
plus=function(){
counter++;
console.log("counter="+counter);
}
return plus;// ①
}
add();
plus();// ②
简化为:
function add(){
var counter=0;
return function(){
counter++;
console.log("counter="+counter);
}
}
2、函数的立即执行——把函数声明跟执行放到一起。
(function (){
var counter=0;
return function(){
counter++;
console.log("counter="+counter);
}
})();
3、闭包的标准写法
var plus=(function (){
var counter=0;
return function(){
counter++;
console.log("counter="+counter);
}
})(); // counter的初始化
十一、对象的创建
1、变量——var;函数——function(一堆语句的集合);
对象——一堆变量+一堆函数的集合。万物皆对象。
一堆变量:
var obj1={
x:0,——“x”:0
y:1,
z:function(){console.log("z fuc");},
}
2、属性——属性名:属性值,(以属性名开头,以逗号结尾)
属性名——实际是string,不管写什么,都会被js隐式的转化为string。
x123——字母+数字结合的,至少要包含字母,且以字母开头,可以不加引号。
属性名如果包含了特殊字符,必须加引号。
3、类——系统自带(array)或者自定义。
十二、对象的属性操作
1、对象属性的基本操作:增删改查(针对单条属性操作);遍历(对全部属性操作)
查——获取属性的值,可通过点(.——以字母开头,不用加引号的才能用点获取)或者[]。
var name=person1.name;
person1["name"];
增——修改属性的时候,如果对象中没有这条属性,则自动加上。
删——delete。只是断开属性或对象之间的关系。
2、遍历:for
for ( var pN in person1) {
var pN=“name”
}
十三、JavaScript引用、自定义类实例解析
ES5标准
1、引用和赋值
创建新的对象:var person2=person1;
person2.name=“xiaoming2”
2、定义对象:
001{
name:"xiaoming",
sex:"male",
age:"19",
slogan:function(){
console.log("wo shi xiaoming");
}
}
定义变量来使用这个对象:
var person1=001;——只是复制了地址的赋值,称之为引用
var 容量很小,可以是值,数字,字符串
3、定义对象:
var person1={
name:"xiaoming",
sex:"male",
age:"19",
slogan:function(){
console.log("wo shi xiaoming");
}
}
4、用类的形式来创建对象:
人的类:var person2=new PersonClass();
5、ES5 function(声明类)->ES6 class
为了区分函数和类:不用var来定义,而是用this
function PersonClass(){
this.name="1";
this. sex="male";
this. age="19";
this.slogan=function(){
console.log("wo shi 1");
}
}
创建对象:
var person1=new PersonClass();
var person2=new PersonClass();
person2.name="2";
构造函数的方法来传参数:
function PersonClass(pName,pSex,pAge){
this.name=(pName;
this. sex=pSex;
this. age=pAge;
this.slogan=function(){
console.log("wo shi 1");
}
}
var person1=new PersonClass("xiaoming","male",18);
6、命名空间:为了解决多个对象名称之间的冲突
var cc={};——创建一个空的空间
cc.Age=100;
7、系统提供很多类,以及类里面的方法
十四、基本包装类型和date、math实例解析
1、对象(值+方法)、类、简单自定义类
2、系统提供很多好用的类
var obj1={};
var obj2=new Object();
都是得到一个空的对象
3、object相当于打包,最底层的类
4、万物皆对象——值、数字、字符串、布尔值。
5、类型的转换
(需要有查看、学习文档的能力)
var n1=123;
var str1=n1.toString();
var a=n1.toPrecision(2);——保留两位小数
6、跟时间相关的对象:date
日期是从0开始,0对应星期一。
7、计算代码的性能:耗时
var time1=new Date();——获取当前电脑的时间
var t=0;
for(var i=0;i<10000;i++){
t++;
}
var time2=new Date();
var n=time2.getTime();——获取至毫秒级别的时间
8、Math——相当于命名空间,也是类。
随机数:Math.radom();——随机出0-1之间的一个浮点数。
for(var i=0;i<10;i++)
console.log(Math.floor(Math.random()*10));
十五、大纲
浏览器原理和BOM
- 浏览器原理
- JS时间线
- 弹窗
- 获取导航栏的数据
- 网页前进后退、屏幕大小
- 计时器——让浏览器定时做某事
(一)BOM弹窗实例解析
DOM、BOM操作
1、js将库放在Windows对象,Windows对象里都是全局变量。
console.log(window.c);
var c=1;
console.log(window.c);——window可省略不写
2、BOM——操作浏览器的
弹窗——浏览器的弹窗
① alert弹窗(很干净,只有一个确定)——同步,有阻断的效果——alert("alert 弹窗");
②confirm弹窗(会有一个返回值,布尔值)——var b=confirm("confirm 弹窗");
③prompt弹窗(涉及到用户的输入)
var strpt=prompt("prompt 输入:","默认是c");
console.log("填了: strpt");
(二)BOM导航栏实例解析
1、获取浏览器导航栏的信息——用到window.location
浏览器的导航栏即地址栏。
host——里面可能有端口号,默认80端口不写,//host/,双斜杠跟单斜杆之间的内容
hostname——不包含端口
origin——单斜杆之前的内容,协议加域名
pathname——单斜杆
port——端口
href——完整的位置
2、属性:URL的各个部分
location.href;
location.toString()
location.reload——刷新页面
location.replace()——跳转打开新页面
var bcf=confirm("C弹窗");
if(bcf){
location.replace("http://www.baidu.com/");
}
else loaction.reload();
(三)BOM版本、前进后退
1、浏览器的历史(history)——前进后退,通过js的BOM里的history.back();history.forward();history.go(-1);
2、浏览器的信息(navigator)——版本、厂家等
userAgent——里面包含当前操作系统,浏览器版本,内核等信息
3、获取浏览器的分辨率(screen)——浏览器本身的大小、屏幕大小等信息
availHeight——浏览器本身的大小,不包含任务栏的大小,不随浏览器大小而改变
height——屏幕大小
(四)BOM计时器实例解析
1、计时器的两种方式:循环执行;执行一次
循环执行——var sil=setInterval(函数名,时间);
停掉:clearInterval(sil);
一次执行——var sil=setTimeout(函数名,时间);
clearTimeout(sil);
2、
var num=0;
function add(){
console.log("num="+ ++num);
}
var sil=setInterval(add,1000); // 1000毫秒即1秒
function end(){
console.log("setTimeout clearInterval");
clearInterval(sil); // 清除/停掉该方法
}
setTimeout(end,10000); // 执行10秒
十六、大纲
DOM操作
- DOM是什么
- 如何在js里面获取页面HTML元素
- 如何修改页面元素的内容
- 如何增加页面元素
(一)DOM和数据结构
动态修改网页内容
1、DOM——文档对象模型
DOM树——浏览器能理解的数据结构,方便浏览器查找,浏览,修改等操作,DOM树就是这样的数据结构,样子像树。
(HTM文件是给写的人看的网页数据)
2、数据结构:线性;树形;网状
(1)线性——单链表,循环链表,队列,栈,数组
(2)树形——二叉树,平衡树,红黑树
(3)网状——有向图,无向图,寻路算法,A*算法
3、HTML文件与对应的DOM树结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
</head>
<body>
<div>
div1
<p>p1</p>
<p>p2</p>
div1
</div>
</body>
</html>
父节点,子节点,document节点
(LZ树状图在线生成器:http://www.lizibuluo.com/tree/)
(二)DOM获取元素节点
1、DOM树的组成
- document节点:只有一个
- 标签节点:又称为元素节点
- 文本节点
2、标签节点,元素节点:修改样式(样子)
3、3种常用的查找节点的方式:
①通过ID查找;
②通过标签名字来查找;
③通过class来查找。
4、示范
①ID具有唯一性,如果有两个相同ID,只认最前面的一个
<div id="div1">div1</div>
在15.js里面写:
var div1=document.getElementById("div1");
——节点
在HTML中引用js文件,写在div标签之后:
<script src="15.js"></script>
②通过标签名来查找:
返回的是一个数组(因为p标签有很多)
var ps=document.getElementsByTagName("p");
var p1=ps[0];——节点
③通过class来获取
在HTML文件里写class:
<p class="txt">p1</p>
在js 里写:
var ps=document.getElementsByClassName("txt");——数组
ps[0]——节点
5、三种方式的区别:
①通过id获取到的是节点;通过标签、class获取到的是数组;
②通过id来获取的只能在document对象来使用;tag和class获取的可以在标签任意节点中使用;
(三)DOM创建添加删除节点
创建节点,添加节点至DOM树,删除节点
在js文件里面写:
1、var p=document.getElementById("div1");
2、创建一个p标签(标签类节点)
var p=document.createElement("p");
3、创建一个文本节点
var ptxt=document.createTextNode("p1");
p.appendChild(ptxt);——将ptxt节点添加至p标签下,子节点添加至父节点下
4、添加节点
div1.appendChild(p);
5、删除节点:removeChild();
①获取对应节点后删除:
var div2=document.getElementById("div2");
div1.removeChild(div2)
②自删:
div2.parentNode.removeChild(div2);——div2的父节点
(四)DOM修改节点属性和内容
1、对节点属性及内容进行操作
html里已经定义好的属性,可以用(.)来获取到并进行修改。
var img1=document.getElementById("img1");
img1.scr="1.jpg";
2、两个特例:
①class也是js的关键词,表示类
img1.className="box1";
②style,可通过style里样式的属性来进行修改,修改的是CSS里的样式
img1.style.width=100
3、自定义的属性
获取属性——getAttribute()
img1.getAttribute("属性名");
设置/添加属性——setAttribute
img1.setAttribute("属性名","属性值");
删除属性——remove
img1.removeAttribute("scr");
4、修改标签内容(.innerHTML),先获取节点,可通过id来获取
var p1=document.getElementById("p1");
p1.innerHTML="这是innerHTML";——添加的是HTML的代码
5、添加纯文本
p1.textContent="这是innerHTML<a href='www.baidu.com'>this is 1</a>";
十七、JavaScript第六天大纲
事件的原理
- 事件是什么?
- 如何监听事件
- 如何给事件绑定特定函数
- 事件流的原理
(一)事件基本概念及事件注册实例解析
1、js的主要作用在于实现人与浏览器的交互。js是通过事件驱动方式来实现人与事件的交互。
用户操控HTML元素,页面会产生一个事件,事件会主动去调用我们设定的方法或函数。
2、事件源:产生事件的地方。
事件的类型:点击事件,键盘事件
事件的对象:可记录当时发生事件的所有相关信息
事件的函数:事件的处理程序
3、注册:把以后可能会发生的事先提前报备。
事件的类型+函数——注册到元素上
4、注册的两种方式
①HTML的属性:
属性名:on+事件的名字 onclick
属性值:方法 (1)直接在HTML中设定
(2)通过js的元素对象来设定
(1)在HTML中写:
<div id="div1" onclick="add()">div1</div>
在js里写:
var num=0;
function add(){
console.log("点击:"+ ++num);
}
(2)在js中写
var div1=document.getElementById("div1");
div1.onclick=add;
div1.onclick-null;——删除事件
②通过调用系统提供的方法:div1.addEventListener(事件类型click,函数add,事件的处理方式 布尔值true或false);——主流方式,可添加多个函数,可以给一个事件绑定多个方法
div1.addEventListener("click",add);
div1.removeEventListener("click",add);——删除事件,删除的所有值需要一一对应
5、兼容性问题
IE8 attachEvent() detachEvent()
(二)事件函数和事件对象实例解析
1、事件函数:当事件发生时所具体执行的操作(function)
var div1=docunment.getElementById("div1");
div1.addEventListener("click",add);
事件对象——event:提供了事件的详细信息(具体发生事件的元素,鼠标的位置,鼠标的坐标,点击的状态,键盘的按键),type,target,screenX,screenY——基于屏幕的左上角
clientX,clientY——基于浏览器的左上角
function add(event){
console.log("事件函数");
}
2、keydown——键盘往下按的时候发生的事件
3、不一样的事件有不一样的默认值,也有部分共同的值
IE8之前不支持传参数,存在在window.event
4、有一些事件会有默认操作,需要取消默认操作时代码如下:
event.preventDefault();
注:只针对点的形式取消默认操作的方法,通过addEventListener(“事件”,事件函数)的方法来添加事件不能用该方法取消默认操作
a1.onclick=add;
return false;
5、IE8——需要用event.returnValue=false来取消默认操作
(三)事件流:捕获和冒泡实例解析
1、事件的传播
页面由多个标签组成,标签之间可以互相嵌套,在点击页面的时候会产生点击事件,点击事件时有可能会触发监听事件的函数。
2、是否只有被点中的标签才能触发点击事件?
style样式:#div{}
先 获取到id,之后绑定事件
3、事件的传播:在默认的情况下,点击页面的一个标签,处在传播路径上的标签都会监听到对应的事件。
div2嵌套在div1里,点击div2 的时候处在其中的div1也会被监听到。
4、传播路径:与两个标签是否重叠在一起无关。是指在DOM树中的路径。
通过TagName获取到标签。
5、事件流:对应标签接收到事件的顺序。(回声)
捕获阶段:从起点到目标位置
冒泡阶段:从目标位置到起始点
6、head1.addEventListener(“click”,head1Click,事件的传播方式——可填false或者true,默认为false)
false——函数会在事件的冒泡阶段执行
true ——函数会在事件的捕获阶段执行
不想让执行,可终止事件(event.stopPropagation();)
7、事件流的作用:可做事件代理——ul里有很多li的时候可以用到冒泡阶段的特点,只要绑定父级元素ul即可。
十八、网站通用二级菜单
1、先写基本的html5结构,div,ul,li,a标签实现基本的布局,在CSS里调整样式。
HTML中的基本布局
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>二级下拉菜单</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<div class="container">
<ul class="nav-list">
<li>
<a href="">首页</a>
</li>
<li>
<a href="">关于蝉壳学院</a>
</li>
<li>
<a href="">新闻与媒体</a>
</li>
<li>
<a href="">产品</a>
</li>
<li>
<a href="">服务与机构</a>
</li>
<li>
<a href="">人才招聘</a>
</li>
<li>
<a href="">联系我们</a>
</li>
</ul>
</div>
</div>
</body>
</html>
初始化CSS:
body,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
2、设置一级菜单的CSS样式
①清理ul的浮动:<ul class="nav-list clearfixed">
对应的CSS样式中写:
.clearfixed::after{
display: table;
content: "";
clear: both;
}
②居中:在CSS中的container中写margin:0 auto;
③在ul中加背景颜色及高度:
.nav-list{
background-color: #808080;
height: 48px;
}
④设置li的样式:边框
.nav-list > li{
float: left;
margin: 0 20px;
}
⑤设置文字的样式:
.nav-list > li >a{
display: block;
padding: 0 12px;
color: #fff;
font-size: 18px;
line-height: 42px;
height: 42px;
}
.nav-list > li >a:hover{
background-color: #fff;
color: #bc0303;
}
⑥给a加边框颜色:
.nav-list > li >a:hover{
background-color: #fff;
color: #bc0303;
border: 1px solid #c9c9c9;
}
3、设置二级菜单样式:用js监听事件
①通过div添加二级菜单的文字内容:
<div>
<ul>
<li><a href="">关于蝉壳1</a></li>
<li><a href="">关于蝉壳2</a></li>
<li><a href="">关于蝉壳3</a></li>
</ul>
</div>
②在div中添加样式:<div class="item">
③添加二级菜单的样式:
.item{
width: 160px;
}
.item-list{
background-color: #fff;
border: 1px solid #c9c9c9;
padding: 2px 0 10px 10px;
}
④设定li里面的a标签:
.item-list>li>a{
color: #6e6e6e;
line-height: 40px;
}
⑤设置2级菜单的下划线:
.item-list>li>a:hover{
text-decoration: underline;
}
⑥设置浮动:
.nav-list{
background-color: #808080;
height: 42px;
position: relative;
}
.nav-list > li >a{
display: block;
padding: 0 12px;
color: #fff;
font-size: 18px;
line-height: 42px;
height: 42px;
border: 1px solid #808080;
border-bottom: none;
position: relative;
}
⑦遮盖调整:
.nav-list > li >a{
display: block;
padding: 0 12px;
color: #fff;
font-size: 18px;
line-height: 42px;
height: 42px;
border: 1px solid #808080;
border-bottom: none;
position: relative;
z-index: 9;
}
.item{
position: absolute;
/* margin: 2px 10px; */
width: 160px;
z-index: 1;
}
⑧上移二级菜单:
.item{
position: absolute;
top: 40px;
width: 160px;
z-index: 1;
}
⑨调整事件,监听事件,通过控制ul的id来实现:
<ul class="nav-list clearfixed" id="navList">
<script>
var navList=document.getElementById("navList").getElementsByTagName("li");
for(var i=0;i<navList.length;i++){
navList[i].onmousemove=function(){
console.log(this);
}
navList[i].onmouseout=function(){
console.log(this);
}
}
</script>
⑩通过display隐藏二级菜单:
.item{
position: absolute;
top: 40px;
/* margin: 2px 10px; */
width: 160px;
z-index: 1;
display: none;
}
⑪通过控制对应一级菜单的class来控制事件:<li class="show">
对应的CSS样式中使显示:
.nav-list.show.item{
display: block;
}
⑫通过在js中改变class的值来使二级菜单显示或者隐藏:
for(var i=0;i<navList.length;i++){
navList[i].onmousemove=function(){
this.className="show";
}
navList[i].onmouseout=function(){
this.className="";
}
}
⑬设置到具体的二级菜单的样式:
.nav-list >.show >a{
background-color: #fff;
color: #bc0303;
border: 1px solid #c9c9c9;
border-bottom: none;
}
⑭代码优化:
<script>
var navList=document.getElementById("navList").getElementsByTagName("li");
for(var i=0;i<navList.length;i++){
navList[i].onmousemove=function(){
if(this.className!="show"){
this.className="show";
}
}
navList[i].onmouseout=function(){
if(this.className!=""){
this.className="";
}
}
}
</script>
4、设置人才招聘的二级内容:
<a href="">人才招聘</a>
<div>
<ul>
<li><a href="">人才招聘1</a></li>
<li><a href="">人才招聘2</a></li>
<li><a href="">人才招聘3</a></li>
<li><a href="">人才招聘4</a></li>
<li><a href="">人才招聘5</a></li>
<li><a href="">人才招聘6</a></li>
</ul>
</div>
添加对应属性:
<div class="item">
<ul class="item-list">
十九、QQ右下角弹窗
1、在HTML中通过src添加腾讯首页:
<iframe src="http://www.qq.com" frameborder="0"></iframe>
2、调整腾讯首页的宽度、高度:
<iframe src="http://www.qq.com" frameborder="0" width="100%" height="100%"></iframe>
3、设置页面的高度:
<style>
body{
height: 900px;
}
</style>
4、去掉两个滚动条中的一个:
<style>
body{
height: 970px;
margin: 0;
padding: 0;
}
</style>
5、通过div添加弹窗图片:
<div class="ad">
<img class="btn" src="close.jpg" alt="">
<a href="#"><img class="bg" src="0.jpg" alt=""></a>
</div>
6、固定弹窗图片的位置,改变大小,改变关闭按钮的位置:
<style>
body{
height: 970px;
margin: 0;
padding: 0;
}
.ad{
position: fixed;
bottom: 0;
right: 0;
width: 400px;
height: 400px;
border: 2px solid black;
}
.btn{
position: absolute;
top: 0;
right: 0;
}
.bg{
width: 400px;
}
</style>
7、鼠标移上去的时候变成小手
.btn{
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
8、设定js:
①获取div,通过改变高度实现弹窗效果:
<div id="myAD" class="ad">
<img id="myClose" class="btn" src="close.jpg" alt="">
<a href="#"><img class="bg" src="0.jpg" alt=""></a>
</div>
<script>
var myAD=document.getElementById("myAD");
var myClose=document.getElementById("myClose");
myClose.onclick=function(){
myAD.style.display="none";
}
</script>
②设置广告逐步上升及下降:
<script>
var myAD=document.getElementById("myAD");
var myClose=document.getElementById("myClose");
var adHeight=0;
myClose.onclick=function(){
myAD.style.display="none";
}
var show=setInterval(func,20);
function adShowFunc(){
if(adHeight<400){
adHeight+=2;
myAD.style.height=adHeight+"px";
}else{
myAD.style.height="400px";
adHeight=225;
clearInterval(show);
}
}
</script>
③页面内容加载完之后再弹出广告:
window.onload=function(){
show=setInterval(adShowFunc,5);
}
二十、 自动切换焦点图
1、左右两侧的图通过div来包裹:
<body>
<div>
<div></div>
<div></div>
</div>
</body>
2、左侧的3张图片包裹在div中:
<div>
<div>
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
</div>
<div>
</div>
</div>
3、给对应的div添加id:
<div id="left">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
</div>
4、添加div对应的CSS样式:
①设置宽度——图片横向排列
<style>
#left img{
width: 140px;
}
#right img{
width: 440px;
}
</style>
②修改div的宽度设置,使图像竖排:
#left {
width: 140px;
}
#right {
width: 440px;
}
③对div做浮动处理:最里面的两个相对于最外面的div做浮动
#left {
width: 140px;
float: left;
}
#right {
width: 440px;
float: left;
}
④最外层的div清理浮动:
首先设置最外层div的class属性:<div class="clearfix">
清理浮动:
.clearfix::after{
content: "";
display: table;
clear: both;
}
⑤通过margin-left使左右两侧图片之前间隔开:
#right {
margin-left: 10px;
width: 440px;
float: left;
}
5、使右侧的图片一开始不显示:
#right img{
width: 440px;
display: none;
}
6、给定class使图片显示:
.show{
display: inline-block;
}
在右侧的div下的img里添加class属性值为show,图片不显示,将对应的CSS样式的权重提升即可
#right .show{
display: inline-block;
}
7、在最里面的两个div之间,添加移动的框选图:<img src="pointer.jpg" alt="" id="pointer">
8、使框选图绝对定位在图片上
二十一、CSS高级
1、练习
(1)可作为媒体查询中的媒体特征有:width、height、orientation、aspect-ratio
(2)transform:scale(20)rotate(45deg)translate(20px)——先右移20px,再顺时针旋转45度,最后放大为2倍
(3)transition属性是transition-property、transition-duration、transition-timing-function以及transition-delay这几个属性的一个简单属性
(4)transition-duration的初始值为0s
(5)transition-delay的初始值为0s
(6)transition:width 2s linear;
transition:width 2s linear 0s;
给width属性添加一个过渡效果:立马开始,持续2S的线性匀速式过渡
(7)响应式设计的三大关键技术分别是流式布局、弹性媒体、媒体查询
二十二、JavaScript基础
1、JavaScript的基础知识
(1)DOM——提供针对HTML的接口
BOM
(2)浏览器内核:渲染引擎+js引擎
(3)常用的工具:开发工具;vscode
(4)标识符
第一个字符必须是一个字母、下划线或一个美元符号
其他字符可以是字母、下划线、美元符号或数字
2、JavaScript数据类型
(1)数据类型(5+1)
undefined(一个变量声明但未被初始化)、null、Boolean、number、string
object
(2)typeof运算符——用来检测数据类型
(3)number数据类型中的NaN
(4)数据类型转化
number()
string()
parseInt()
tostring()
parsefloat()
3、JavaScrip语句
没有返回值的语句
①;(空语句)
②var a=b;(变量声明)
③function a() {}函数声明
④break/continue/label (控制语句)
void返回值是undefined
4、练习
(1)获取5到10之间随机数的正确代码是Math.floor((Math.random() * 6) + 5);
(2)Array、Null数据类型用typeof无法确认
(3)!!null、1 && 0、null == NaN结果为false
(4)将字符串变量num(值为"123")强制转化为数字(123):num - 0、+num、num++
(5)将数字变量num(值为123)强制转化为字符串(“123”):num + “”、String(num)、num.toString()