JavaScript学习(一)

news2024/11/24 0:53:25

一、JavaScript的背景及知识结构

1、三个问题

  1. 什么是JavaScript?
  2. JavaScript能干什么?
  3. 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

  1. 浏览器原理
  2. JS时间线
  3. 弹窗
  4. 获取导航栏的数据
  5. 网页前进后退、屏幕大小
  6. 计时器——让浏览器定时做某事

(一)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操作

  1. DOM是什么
  2. 如何在js里面获取页面HTML元素
  3. 如何修改页面元素的内容
  4. 如何增加页面元素

(一)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树的组成

  1. document节点:只有一个
  2. 标签节点:又称为元素节点
  3. 文本节点

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. 事件是什么?
  2. 如何监听事件
  3. 如何给事件绑定特定函数
  4. 事件流的原理

(一)事件基本概念及事件注册实例解析

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()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/489027.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年2月573名学员通过国家信息安全水平考试其中CISP218名,NISP二级355名

北京PER20230217HEBAN3 考试时间&#xff1a;2023年02月17日 地点&#xff1a;北京 王佳俊、王后月、程鹏、王海洋、牛麒盛、张飞、禹晓瑞、李鹏卫、柳位世、李霖、刘志超、刘峰、张广军、刘鑫博、王琳、翟栋、刘高军、康寅哲、夏中玲、冯光豪、程岩辉、白玉强、遆盼明、李淼…

IDEA部署tomcat项目

文章目录 只是部署一下看到这里即可war和war exploded的区别warwar exploded update的动作update resourcesupdate classes and resourcesredeployrestart server 解决了拿到了一个tomcat项目后如何将它部署到IDEA里面的问题。 file->open 选中pom.xml并open as project …

【网站架构】Nginx 4层、7层代理配置,正向代理、反向代理详解

大家好&#xff0c;欢迎来到停止重构的频道。 本期我们讨论网络代理。 在往期《大型网站 安全性》介绍过&#xff0c;出于网络安全的考虑&#xff0c;一般大型网站都需要做网络区域隔离&#xff0c;以防止攻击者直接操控服务器。 网站系统的应用及数据库都会放在这个网络安全…

js实现归并排序(mergeSort)

理解归并排序 归并排序是一种基于分治思想的排序算法&#xff0c;它将一个待排序的序列分为两个子序列&#xff0c;分别对子序列进行排序&#xff0c;然后将排好序的子序列合并成一个有序的序列。这个过程可以递归地进行&#xff0c;直到序列被划分为只有一个元素时停止递归。 …

版本控制 | 如何使用虚幻引擎的多用户编辑(MUE)功能

随着现代虚拟制作技术的发展&#xff0c;电影制片厂不再需要完全依赖实际场景&#xff0c;而是可以在拍摄期间就让虚拟制作设计团队将实景与计算机生成的虚拟内容融合在一起。虚幻多用户编辑&#xff08;Unreal Multi-User Editing&#xff0c;简称MUE&#xff09;可以帮助简化…

【产品方案】后台管理系统设计思路

第一章 前言 相比前端设计&#xff0c;我更喜欢设计后台管理系统。如果说前端设计考验的是共情能力&#xff0c;那后台管理系统设计考研的就是逻辑能力&#xff0c;前者需要站在用户的角度&#xff0c;后者是站在管理者的角度思考。 有幸参与了公司不少业务系统从“0-1”的设计…

使用prometheus时发现mongodb exporter的/metrics数据展示很慢,延迟高

项目场景&#xff1a; 使用prometheusgrafana搭建对mongoDB集群的监控。 问题描述 使用prometheus时发现mongodb exporter的/metrics数据展示接口很慢&#xff0c;延迟高。 看了一下大概是10s 原因分析&#xff1a; 由于是在云服务器上进行搭建的。 经过尝试之后发现创建mo…

Apache Doris学习记录

1. Doris基础学习 中文官网:https://doris.apache.org/zh-CN/docs/dev/summary/basic-summary/ 1.1 doris 简介 Apache Doris 是一个现代化的 MPP(Massively Parallel Processing&#xff0c;即大规模并行处理) 分析型数据库产品 亚秒级响应时间即可获得查询结果 可以支持 10PB…

Python每日一练:最长递增的区间长度(一行代码花样解法)

文章目录 前言一、题目二、一行超人三、分析一下思路 总结 前言 很显然&#xff0c;Python的受众远远大于C&#xff0c;其实笔者本人对Python的理解也是远强于C的&#xff0c;C纯粹是为了假装笔者是个职业选手才随便玩玩的&#xff0c;借着十多年前学的C的功底&#xff0c;强行…

链表(数据结构)

目录 链表 链表的分类 1、单向或者双向 2、带头或者不带头 3、循环或者非循环 总结&#xff1a; 单链表 创建链式结构 创建新节点 尾插 尾删 头插 头删 查找节点 在pos位置后插入 删除pos位置后的节点 销毁 链表 概念&#xff1a; 链表是一种物理结构上非连续的、非顺序的存储结…

c# 数据保存为PDF(二) (Aspose pdf篇)

文章目录 前言关于Aspose PDF使用Aspose.Pdf常用的命名空间和类库1 创建简单的PDF文档2 美化PDF样式2.1 创建测试数据2.2 项目头部样式2.3 全部代码 小结附录参考 前言 项目中需要将数据导出存为PDF格式&#xff0c;试了一下Aspose组件&#xff0c;仅以此记录一下使用感受。 …

设计模式——原型模式(浅拷贝和深拷贝)

是什么&#xff1f; 用一个已经创建的实例作为原型&#xff0c;通过复制该原型对象来创建一个和原型对象相同的新对象&#xff1b; 结构 抽象原型类&#xff1a;规定了具体原型对象必须实现的Clone&#xff08;&#xff09;方法&#xff1b; 具体原型类&#xff1a;实现抽象…

Elasticsearch:NLP 和 Elastic:入门

自然语言处理 (Natural Language Processing - NLP) 是人工智能 (AI) 的一个分支&#xff0c;专注于尽可能接近人类解释的理解人类语言&#xff0c;将计算语言学与统计、机器学习和深度学习模型相结合。 AI - Artificial Inteligence 人工智能ML - Machine Learning 机器学习DL…

集线器、网桥、交换机

一.集线器 集线器&#xff08;HUB&#xff09;&#xff0c;它是工作在物理层的设备&#xff0c; 由于它只是工作在物理层的设备&#xff0c;所以它并不关心也不可能关心OSI上面几层所涉及的&#xff0c;它的工作机制流程是&#xff1a;从一个端口接收到数据包时&#xff0c;会在…

STL基础

目录 一、STL的诞生 二、STL基本概念 三、STL六大组件 大体分为六大组件&#xff1a;容器、算法、迭代器、仿函数、适配器&#xff08;配接器&#xff09;、空间配置器 四、容器、算法与迭代器的认识 容器container&#xff1a;存放数据地方 算法algorithm&#xff1a;解…

中级软件设计师备考---软件工程2

目录 软件测试分类和要求测试用例设计测试阶段McCabe复杂度软件维护软件过程改进---CMMICMM英文版CMM中文版CMMI 软件测试分类和要求 分类&#xff1a; 灰盒测试&#xff1a;多用于集成测试阶段&#xff0c;不仅关注输出、输入的正确性&#xff0c;同时也关注程序内部的情况。…

MySQL:插入,更新与删除、索引

一、学习目标 掌握如何向表中插入数据掌握更新数据的方法熟悉如何删除数据掌握对数据表基本操作的方法和技巧了解什么是索引掌握创建索引的方法和技巧熟悉如何删除索引熟悉掌握索引的常见问题 二、实验内容 创建表books&#xff0c;对数据表进行插入、更新和删除操作&#x…

SkyWalking集成Logback的使用

SkyWalking集成Logback的使用 将微服务的日志框架去集成SkyWalking&#xff0c;我们希望在我们微服务中日志中&#xff0c;能够记录当前调用链路的id&#xff0c;然后我们再根据这个id去SkyWalking的前端界面中进行搜索找到对应的调用链路记录。 因为springboot默认实现的日志…

Ansible 的脚本 之playbook 剧本

目录 第一章.playbooks的组成 1.1playbooks的组成部分 1.2运行playbook 1.3定义、引用变量 1.4.指定远程主机sudo切换用户 1.6.when条件判断 1.7.迭代 第二章.Templates模块 2.1.准备模板 2.2.修改主机清单文件 2.3.编写 playbook 第三章.tags 模块 3.1.yaml文件编…

操作系统原理 —— 线程的概念、实现方式、多线程模型(十)

什么是线程&#xff0c;为什么要引入线程&#xff1f; 有的进程可能需要 “同时” 做很多事情&#xff0c;而传统的进程只能串行的执行一系列的程序&#xff0c;为此&#xff0c;引入了 “线程” &#xff0c;来增加并发度。 可以把线程理解为 轻量级进程&#xff0c;线程是可…