Web前端核心重点JavaScript函数BOM、D

Web前端核心重点JavaScript函数BOM、DOM必会知识总结

S高级核心知识点和常用方法总结，应同学需求，整理了前端实际开发中必会的最最核心的 JS函数，BOM，DOM，定时器，延时器等常用方法和属性值，这些内容都是必学内容，已经全部整理出来了，方便我们查缺补漏，建立好知识库。

总结：JS函数的定义调用，参数，返回值，闭包，立即执行函数，BOM，DOM，定时器，延时器等常用方法，必学版；

函数的定义与调用

单词：function

注释：定义函数。有如下两种方式；

1、function 函数名() {}; 这种声明方式，预解析阶段函数会提升；

2、var 函数名=function() {}; 这种声明方式，预解析阶段只会提升函数名，后面的函数体function() {}不会提升；

3、函数调用是在函数名后面添加括号；示例： fn()表示调用函数fn；

函数的参数

单词：arguments

注释：接收传入函数的实参列表，是一个类数组对象（与数组类似，拥有length属性，可以通过下标访问某个值，但是不可以使用数组的方法）

1、形参：定义函数时设置的参数；

2、实参：调用函数时传入的参数；

函数的返回值

单词：return

注释：设置函数的返回值，调用函数时，遇到return语句会立即退出函数，并设置函数的返回值；

闭包

单词：closure

注释：函数本身和该函数声明时所处的环境状态的组合，简单理解就是闭包可以在一个内层函数中访问到其外层函数的作用域。

示例：下面这段代码中的f2函数，就是闭包，可以访问到外层函数f1作用域的中变量n的值

function f1(){

var n=999;

function f2(){

alert(n);

}

return f2;

}

var result=f1();

result(); // 999

立即执行函数

单词：IIFE

注释：Immediately Invoked Function Expression的首字母缩写，立即调用函数表达式，是一种特殊的JavaScript函数写法，一旦被定义，就立即被调用。示例：

(function(){

//函数体

})()

DOM的基本概念

1).单词：DOM

注释：文档对象模型(Document Object Model)，是JavaScript操作HTML文档的接口，它最大的特点就是将文档表示为节点树。

2).单词：document

注释：document对象表示整个HTML文档，它是DOM节点树的根

节点类型

单词：nodeType

注释：返回节点的类型（不常用，了解即可）

常见的返回值如下：

1、nodeType 属性返回 1，表示节点是一个元素节点

2、nodeType 属性返回 3，表示节点是一个文本节点

3、nodeType 属性返回 8，表示节点是一个注释节点

4、nodeType 属性返回 9，表示节点是document节点

5、nodeType 属性返回 10，表示节点是DTD节点

节点的关系

1）. 单词：firstChild

注释：返回第一个子节点，包括文本节点、注释节点和元素节点等所有类型的节点

2）. 单词：firstElementChild

注释：返回第一个子元素节点

3) . 单词：lastChild

注释：返回最后一个子节点，包括文本节点、注释节点和元素节点等所有类型的节点

4) . 单词：lastElementChild

注释：返回最后一个子元素节点

5) . 单词：lastElementChild

注释：返回所有的子节点，包括文本节点、注释节点和元素节点等所有类型的节点（不常用，了解即可）

6) . 单词：children

注释：返回所有的子元素节点

7) . 单词：parentNode

注释：返回父元素节点

8) . 单词：previousSibling

注释：返回前一个兄弟节点，包括文本节点、注释节点和元素节点等所有类型的节点（不常用，了解即可）

9) . 单词：previousElementSibling

注释：返回前一个兄弟元素节点（不常用，了解即可）

10) . 单词：nextSibling

注释：返回同级的后一个节点，包括文本节点、注释节点和元素节点等所有类型的节点（不常用，了解即可）

11) . 单词：nextElementSibling

注释：返回同级的后一个元素节点（不常用，了解即可）

访问元素节点常用的方法

1) . 单词：document.getElementById()

注释：通过id获取元素，返回一个dom对象

例如：document.getElementById(""demo"");获取id属性值为demo的元素

2) . 单词：document.getElementsByTagName()

注释：通过标签名获取元素，以集合的形式返回

例如：document.getElementsByTagName(""p""); 获取所有的p标签元素

3) . 单词：document.getElementsByClassName()

注释：通过类名获取元素，以集合的形式返回

例如：document.getElementsByClassName(""box"");获取所有类名为box的元素

4).单词：document.querySelector()

注释：通过css选择器获取第一个符合条件的元素，返回一个DOM元素

例如：document.querySelector("".item"") 获取类名为item的第一个元素

5).单词：document.querySelectorAll()

注释：通过css选择器获取所有的元素，以集合的形式返回

例如：document.querySelectorAll("".item"") 获取类名为item所有的元素；

节点的创建、添加、移出和克隆

1）单词：document.createElement()

注释：创建一个指定标签名的 HTML 元素

2) 单词：appendChild()

注释：将一个节点作为最后一个子节点添加到指定的父节点

3) 单词：removeChild()

注释：删除指定的子节点

4) 单词：insertBefore()

注释：在已有的子节点前插入一个新的子节点

5) 单词：cloneNode()

注释：克隆节点，如果传递给它的参数是 true，则该节点的所有后代节点也都会被克隆。如果为false，则只克隆节点本身。

节点的操作

1）单词：innerText

注释：以纯文本的形式设置或者获取元素的文本内容（不常用，了解即可）

2）单词：className

注释：元素节点的一个属性，用来设置或返回元素的class属性值

示例：oBox.className="active"

3）单词：style

注释：元素节点的一个属性，用来设置元素节点的css样式

例如：box.style.color=""red"" 改变box元素节点的字体为红色

3）单词：src

注释：元素节点的一个属性，用来设置元素节点src属性值

例如： oImg.src="./images/2.jpg"

4）单词：href

注释：元素节点的一个属性，用来设置元素节点href属性值

例如： oLink.href="http://www.***.com"

5）单词：setAttribute()

注释：给元素节点设置指定的属性，并为其赋指定的值

例如：oBox.setArrtibute('data-n', 10)

6）单词：getAttribute()

注释：获取元素节点指定的属性值

例如：oBox.getArrtibute('data-n')

7）单词：dataset

注释：元素节点的一个属性，用来设置或返回元素以data-*方式自定义的属性

常见的鼠标事件

（DOM0级事件监听方式：on +事件名）

1）单词：onclick ；注释：监听鼠标单击事件

2）单词：ondblclick； 注释：监听鼠标双击事件

3）单词：onmousedown； 注释：监听鼠标按下事件

4）单词：onmouseup； 注释：监听鼠标松开事件

5）单词：onmousemove； 注释：监听鼠标移动事件

6）单词：onmouseenter； 注释：监听鼠标移入事件，不存在事件冒泡

7）单词：onmouseleave； 注释：监听鼠标离开事件，不存在事件冒泡

8）单词：onmouseover； 注释：监听鼠标移入事件，存在事件冒泡

9）单词：onmouseout； 注释：监听鼠标离开事件，存在事件冒泡

10）单词：onmousewheel； 注释：监听鼠标滚轮事件（不常用，了解即可）

键盘事件（DOM0级事件监听方式：on +事件名）

1）单词：onkeydown ；

注释：监听某个键盘按键被按下，可以监听上下左右箭头等系统按键；

2）单词：onkeypress；

注释： 监听某个键盘按键被按下，无法监听到系统按键；

3）单词：onkeyup；

注释： 监听某个键盘按键被松开，可以监听上下左右箭头等系统按键；

常见的表单事件（DOM0级事件监听方式：on +事件名）

1）单词：onchange ；注释：当表单元素的内容发生变化所触发的事件；

2）单词：onfocus ；注释：当元素获得焦点时触发的事件，例如：tab键或者点击鼠标；

3）单词：onblur ；注释：当元素失去焦点时触发的事件；

4）单词：onsubmit； 注释：当提交表单时触发的事件；

5）单词：onreset； 注释：当重置表单时触发的事件；

常见的页面监听事件（DOM0级事件监听方式：on +事件名

1）单词：onload ；注释：监听页面或图像加载完成事件

2）单词：onunload ；注释：监听用户退出页面事件（不常用，了解即可）

DOM2级事件监听

单词：addEventListener()

注释：监听事件并添加到指定的元素

1、方法中接收三个参数如下：

（1）第一个参数是字符串，表示要监听的事件名，必须传入

（2）第二个参数是函数，指定事件触发时要执行的函数，必须传入

（3）第二个参数是布尔值，指定事件是否在捕获或冒泡阶段执行，可选

2、示例：oBox.addEventListener('click', function() {}, true) 在捕获阶段监听oBox的点击事件

事件的传播

1）单词：capturing phase

注释：捕获阶段，由外向内传播的，也就是当前事件触发时，先触发当前元素的最外层的祖先元素的同类型事件，然后再向内传播给后代元素

2）单词：Bubbling phase

注释：冒泡阶段，由内向外传播，也就是当事件触发时，先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，触发祖先元素的同类型事件

事件对象

单词：event；注释： 返回事件的状态

事件对象常用的属性

1）单词：target；注释： 返回当前触发事件的元素

2）单词：current；注释：Target 返回监听事件的元素

3）单词：clientX； 注释：返回鼠标指针相对于浏览器的水平坐标

4）单词：clientY 注释：返回鼠标指针相对于浏览器的垂直坐标

5）单词：pageX ；注释：返回鼠标指针相对于整个网页的水平坐标

6）单词：pageY ；注释：返回鼠标指针相对于整个网页的垂直坐标

7）单词：offsetX； 注释：返回鼠标指针相对于事件源元素的水平坐标

8）单词：offsetY ；注释：返回鼠标指针相对于事件源元素的垂直坐标

9）单词：charCode；注释：通常用于onkeypress事件，返回用户按下按键对应的码值，区分大小写；示例：按下键盘a，对应的值是97，按下键盘A，对应的值是65

9）单词：keyCode；注释：通常用于onkeydown和onkeyup事件，返回用户按下按键的码值，不区分大小写。示例：按下键盘a或A，对应的值是65

9）单词：deltaY； 注释：返回onmousewheel事件触发时，滚轮滚动的方向，向下滚动时返回正值，向上滚动时，返回负值（不常用，了解即可）

事件对象常用的方法

1）单词：preventDefault()； 注释：阻止浏览器默认行为；

2）单词：stopPropagation() ；注释：阻止事件传播；

定时器和延时器

1）单词：setInterval() ；

注释：定时器，重复调用一个函数，在每次调用之间具有固定的时间间隔

2）单词：clearInterval()；

注释：清除定时器

3）单词：setTimeout() ；

注释：延时器，当指定时间到了之后，会执行一次函数，不再重复执行

4）单词：clearTimeout()；

注释：清除延时器

BOM相关的基本概念

1）单词：BOM

注释：浏览器对象模型（Browser Object Model），是js与浏览器窗口交互的接口

2）单词：window

注释：window 对象是浏览器中打开的窗口，注意事项：

1、这个窗口中包含DOM结构，window.document属性就表示document对象

2、全局变量会成为window对象的属性

3、内置函数普遍是window的方法，如：alert()等方法

3）单词：navigator navigator

注释：对象含有关浏览器的信息，是指 window 对象的一部分，可以通过 window.history 属性对其进行访问

4）单词：history history

注释：对象包含用户（在浏览器窗口中）访问过的 URL，是 window 对象的一部分，可以通过 window.history 属性对其进行访问

5）单词：location location

注释：对象包含有关当前 URL 的信息，是 Window 对象的一个部分，可以通过 window.location 属性来访问

window对象的常用属性

1）单词：innerHeight ；注释：返回浏览器窗口的内容区域的高度，包含水平滚动条的高度

2）单词：innerWidth ；注释：返回浏览器窗口的内容区域的宽度，包含垂直滚动条的宽度

3）单词：document.documentElement.clientWidth ；注释：返回浏览器窗口的内容区域的宽度，不包含滚动条

4）单词：outerHeight ；注释：返回浏览器窗口的外部高度，包含水平滚动条的高度和浏览器窗口上下边框的高度（不常用，了解即可）

5）单词：outerWidth ；注释：返回浏览器窗口的内容高度，包含垂直滚动条的宽度和浏览器窗口左右边框的宽度（不常用，了解即可）

6）单词：scrollY ；注释：返回文档当前垂直滚动的距离

7）单词：document.documentElement.scrollTop

window对象的常用事件

1）单词：onresize ；注释：监听窗口改变大小事件；

2）单词：onscroll ；注释：监听窗口滚动事件；

navigator对象的常用属性

1）单词：appName；注释： 返回浏览器官网名称；

2）单词：appVersion；注释： 返回浏览器版本；

3）单词：userAgent ；注释：返回浏览器的用户代理信息；

4）单词：platform；注释： 返回用户操作系统；

history对象的常用方法

1）单词：back() ；注释：表示回退到浏览器历史记录里的上一页，等同于点击浏览器回退按钮；

2）单词：go(-1) ；注释：与history()方法的作用一样；

location对象的常用属性和方法

1）单词：href；注释： 设置或返回完整的URL地址；

2）单词：search；注释： 设置或返回从问号 (?) 开始的 URL（查询部分）；

3）单词：reload() ；注释：重新加载当前页面；

以上内容也是整个JS学习中的核心重点，可以作为学习路径，也可作为面试复习的知识清单

有关【HTML/HTML5，CSS/CSS3，JS属性和常用方法】完整版的总结在往期的笔记中已经发布，可以看往期作品！

赶紧收藏，头条超详细Web前端入门到精通必学的标签及属性大全
web前端开发中必会JavaScript属性和常用方法
Web前端入门到精通必会的CSS样式和属性大全

下期笔记总结 JS重难点：

面向对象、构造函数与类、原型原型链，内置对象，继承，设计模式部分的内容，一个个来梳理，喜欢记得点赞关注收藏了做我的粉丝我宠你

还需要总结什么？留言我会记录下来，根据需求来逐一梳理 ^_^

多特效代码请添加HTML5前端交流群581549454

废话不多说，上代码！

网站格式代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

* { margin:0; padding:0; }

body { position:relative; width:100%; height:100%; overflow:hidden; }

button { color:#222; font-size:20px; padding:5px 20px; width:120px; }

#btn1 { position:absolute; top:10px; left:10px; }

#btn2 { position:absolute; top:60px; left:10px; }

#btn3 { position:absolute; top:110px; left:10px; }

#btn4 { position:absolute; top:160px; left:10px; }

#btn5 { position:absolute; top:210px; left:10px; }

#btn6 { position:absolute; top:260px; left:10px; }

#btn7 { position:absolute; top:310px; left:10px; }

#btn8 { position:absolute; top:360px; left:10px; }

#btn9 { position:absolute; top:410px; left:10px; }

#btn0 { position:absolute; top:460px; left:10px; }

</style>

<title>漂亮的Canvas鼠标箭头跟随动画特效</title>

</head>

</div>

$(document).ready(function() {

var canvas=document.getElementById("c");

var ctx=canvas.getContext("2d");

var c=$("#c");

var x,y,w,h,cx,cy,l;

var y=[];

var b={

n:100,

c:false, // 颜色如果是false 则是随机渐变颜色

bc:'#000', // 背景颜色

r:0.9,

o:0.05,

a:1,

s:20,

}

var bx=0,by=0,vx=0,vy=0;

var td=0;

var p=0;

var hs=0;

re();

var color,color2;

if(b.c){

color2=b.c;

}else{

color=Math.random()*360;

}

$(window).resize(function(){

re();

});

var tp1=true,tp2=false,tp3=false,tp4=false,tp5=false,tp6=false,tp7=false,tp8=false,tp9=false,tp0=false;

function begin(){

if(tp1){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=1;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.fillStyle=color2;

ctx.beginPath();

ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

y[i].r+=b.r;

y[i].o-=b.o;

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp2){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=1;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.fillStyle=color2;

ctx.beginPath();

y[i].r=10;

ctx.shadowBlur=20;

ctx.shadowColor=color2;

ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

y[i].o-=b.o;

y[i].v+=b.a;

y[i].y+=y[i].v;

if(y[i].y>=h+y[i].r || y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp3){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

td+=5;

ctx.globalAlpha=1;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.fillStyle=color2;

ctx.beginPath();

ctx.shadowBlur=20;

ctx.shadowColor=color2;

y[i].r=(1-(y[i].y/h))*20;

ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

y[i].o=y[i].y/h;

y[i].v+=b.a;

y[i].y-=b.s;

y[i].x+=(Math.cos((y[i].y+td)/100)*10);

if(y[i].y<=0-y[i].r || y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp4){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=1;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.fillStyle=color2;

ctx.beginPath();

ctx.shadowBlur=20;

ctx.shadowColor=color2;

y[i].vx2 +=(cx - y[i].wx)/1000;

y[i].vy2 +=(cy - y[i].wy)/1000;

y[i].wx+=y[i].vx2;

y[i].wy+=y[i].vy2;

y[i].o-=b.o/2;

y[i].r=10;

ctx.arc(y[i].wx,y[i].wy,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp5){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=.18;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

p+=5;

ctx.globalAlpha=1;

ctx.fillStyle=color2;

ctx.beginPath();

ctx.shadowBlur=20;

ctx.shadowColor=color2;

ctx.arc(cx+50*Math.cos(p*Math.PI/180),cy+50*Math.sin(p*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.arc(cx+50*Math.cos((p+180)*Math.PI/180),cy+50*Math.sin((p+180)*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.arc(cx+50*Math.cos((p+90)*Math.PI/180),cy+50*Math.sin((p+90)*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.arc(cx+50*Math.cos((p+270)*Math.PI/180),cy+50*Math.sin((p+270)*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

}else if(tp6){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=0.2;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.strokeStyle=color2;

ctx.beginPath();

ctx.lineWidth=2;

ctx.moveTo(y[i].x,y[i].y);

ctx.lineTo((y[i].wx+y[i].x)/2+Math.random()*20,(y[i].wy+y[i].y)/2+Math.random()*20);

ctx.lineTo(y[i].wx,y[i].wy);

ctx.closePath();

ctx.stroke();

y[i].o-=b.o;

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp7){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=0.2;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

if(y.length<b.n*2){

hs=Math.random()*2*Math.PI;

y.push({x:cx+((Math.random()-.5)*100*Math.cos(hs)),y:cy+((Math.random()-.5)*100*Math.cos(hs)),o:1,h:hs});

}

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.fillStyle=color2;

ctx.beginPath();

y[i].x+=(cx-y[i].x)/10;

y[i].y+=(cy-y[i].y)/10;

ctx.arc(y[i].x,y[i].y,1,0,Math.PI*2);

ctx.closePath();

ctx.fill();

y[i].o-=b.o;

if(y[i].o<=0){

y[i].h=Math.random()*2*Math.PI;

y[i].x=cx+((Math.random()-.5)*100*Math.cos(y[i].h));

y[i].y=cy+((Math.random()-.5)*100*Math.sin(y[i].h));

y[i].o=1;

};

}

}else if(tp8){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=0.2;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

ctx.fillStyle=color2;

if(cx%4==0){

cx+=1;

}else if(cx%4==2){

cx-=1

}

else if(cx%4==3){

cx-=2

}

if(cy%4==0){

cy+=1;

}else if(cy%4==2){

cy-=1

}

else if(cy%4==3){

cy-=2

}

for(var i=cx-60;i<cx+60;i+=4){

for(var j=cy-60;j<cy+60;j+=4){

if(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))<=60){

ctx.globalAlpha=1-(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))/60);

if(Math.random()<.2){

ctx.fillRect(i,j,3,3);

}

}else if(tp9){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=0.2;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

ctx.fillStyle=color2;

if(cx%4==0){

cx+=1;

}else if(cx%4==2){

cx-=1

}

else if(cx%4==3){

cx-=2

}

if(cy%4==0){

cy+=1;

}else if(cy%4==2){

cy-=1

}

else if(cy%4==3){

cy-=2

}

if(y.length<b.n){

y.push({x:cx,y:cy,xv:0,yv:0,o:1});

}

for(var i=0;i<y.length;i++){

if(y[i].xv==0 && y[i].yv==0){

if(Math.random()<.5){

y[i].xv=3;

}else{

y[i].xv=-3;

}

}else{

if(Math.random()<.5){

y[i].yv=3;

}else{

y[i].yv=-3;

}

}else{

if(y[i].xv==0){

if(Math.random()<.66){

y[i].yv=0;

if(Math.random()<.5){

y[i].xv=3;

}else{

y[i].xv=-3;

}

}else if(y[i].yv==0){

if(Math.random()<.66){

y[i].xv=0;

if(Math.random()<.5){

y[i].yv=3;

}else{

y[i].yv=-3;

}

y[i].o-=b.o/2;

ctx.globalAlpha=y[i].o;

y[i].x+=y[i].xv;

y[i].y+=y[i].yv;

ctx.fillRect(y[i].x,y[i].y,3,3);

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp0){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=0.2;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

ctx.fillStyle=color2;

y.push({x:cx,y:cy,xv:2,yv:1,o:1});

for(var i=0;i<y.length;i++){

y[i].o-=b.o/10;

ctx.globalAlpha=y[i].o;

y[i].x+=(Math.random()-.5)*4;

y[i].y-=1;

ctx.fillRect(y[i].x,y[i].y,2,2);

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

window.requestAnimationFrame(begin);

}

function re(){

w=window.innerWidth;

h=window.innerHeight;

canvas.width=w;

canvas.height=h;

cx=w/2;

cy=h/2;

};

c.mousemove(function(e){

cx=e.pageX-c.offset().left;

cy=e.pageY-c.offset().top;

if(tp4){

if(Math.random()<=.5){

bx=-10;

}else{

bx=w+10;

}

by=Math.random()*h;

}else{

if(Math.random()<=.5){

by=-10;

}else{

by=h+10;

}

bx=Math.random()*w;

}

vx=(Math.random()-.5)*8;

vy=(Math.random()-.5)*8;

}

if(tp1 || tp2 || tp3){

y.push({x:cx,y:cy,r:b.r,o:1,v:0});

}else if(tp4){

y.push({x:cx,y:cy,r:b.r,o:1,v:0,wx:bx,wy:by,vx2:vx,vy2:vy});

}else if(tp6){

y.push({x:cx+((Math.random()-.5)*30),y:cy+((Math.random()-.5)*30),o:1,wx:cx,wy:cy});

}

});

/*c.mousedown(function(){

c.on('mousemove',function(e){

cx=e.pageX-c.offset().left;

cy=e.pageY-c.offset().top;

y.push({x:cx,y:cy,r:b.r,o:1});

});

c.on('mouseup',function(){

c.off('mouseup');

c.off('mousemove');

c.off('moseleave');

});

c.on('mouseleave',function(){

c.off('mouseup');

c.off('mousemove');

c.off('moseleave');

});

});*/

$("#btn1").click(function(){

tp1=true;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn2").click(function(){

tp1=false;

tp2=true;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn3").click(function(){

tp1=false;

tp2=false;

tp3=true;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn4").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=true;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn5").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=true;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn6").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=true;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn7").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=true;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn8").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=true;

tp9=false;

tp0=false;

y=[];

});

$("#btn9").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=true;

tp0=false;

y=[];

});

$("#btn0").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=true;

y=[];

});

(function() {

var lastTime=0;

var vendors=['webkit', 'moz'];

for(var xx=0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {

window.requestAnimationFrame=window[vendors[xx] + 'RequestAnimationFrame'];

window.cancelAnimationFrame=window[vendors[xx] + 'CancelAnimationFrame'] ||

window[vendors[xx] + 'CancelRequestAnimationFrame'];

}

if (!window.requestAnimationFrame) {

window.requestAnimationFrame=function(callback, element) {

var currTime=new Date().getTime();

var timeToCall=Math.max(0, 16.7 - (currTime - lastTime));

var id=window.setTimeout(function() {

callback(currTime + timeToCall);

}, timeToCall);

lastTime=currTime + timeToCall;

return id;

};

}

if (!window.cancelAnimationFrame) {

window.cancelAnimationFrame=function(id) {

clearTimeout(id);

};

}

}());

begin();

});

</script>

</body>

</html>

JS代码过多没有在这里展示，大家可在群内查找

试了阿里、美团与滴滴后，我有了几个重大发现…>>>

html标签是由<>包围的关键词 html标签是成对出现的有部分标签是没有结束标签的，叫单标签，页面中所有的内容，都是要放在HTML标签中的

HTML标签分三部分：

标签名称

标签内容

标签属性

HTML标签具有语义化：

语义化就是仅通过标签名就能判断出该标签的内容

语义化的作用：网页结构层次更清晰更加容易被搜索出来更加让屏幕阅读器读出该页面的内容

标签的内容就是在一对标签内部的内容标签的内容可以是其他标签

标签元素全局标准属性：

class属性：用于定义元素的类名

id属性：用于指定元素的唯一id

style属性：用于指定元素的行内样式

title属性：用于指定元素的额外信息

accesskey属性： 用于指定激活元素的快捷键

tabindex属性：用于指定元素在tab键下的次序

dir属性：用于指定元素中内容的文本方向，属性值为ltr 或 rtl，left to right 和 right to left

leng属性： 用于指定元素内容的语言。

全局事件属性：

onload:在页面加载结束之后触发

onunload：在用户从页面离开时发生，如点击跳转，页面重载，关闭浏览器窗口等。

form：表单事件

onblur：当元素失去焦点时触发

onchange:在元素的元素值被改变时触发

onfocus:当元素获得焦点时触发

onreset:当表单中的重置按钮被点击时

onselect:在元素中文本被选中后触发

onsubmit:在提交表单时触发

keyboard：键盘事件

onkeydown:在用户按下按键时触发

onkeypress:在用户按下按键后，按着按键时触发，该属性不会对所有按键生效

不生效的有：alt, ctrl, shift, esc

onkeyup:当用户释放按键时触发

Mouse：鼠标事件

onclick:当在元素上发生鼠标点击时触发

onblclick: 当元素上发生鼠标双击时触发

onmousedown:当元素上按下鼠标按钮时触发

onmousemove:当鼠标指针移动到元素上触发

onmouseout:当元素指针移出元素时触发

onmouseover:当鼠标指针移动到元素上时触发

onmouseup: 当在元素上释放鼠标时触发

media:媒体事件

onabort:当退出时触发

onwaiting:当媒体已停止播放但打算继续播放时触发

HTML的标签

文本标签

段落标签<p></p>

段落标签用来描述一段文字

标题标签<hx></hx>

标题标签用来描述一个标题

标题标签总有六级。

<h1></h1>标签在每个页面通常只出现一次
强调语句标签 <em></em>

用于强调某些文字的重要性

更加强调标签<strong></strong> 和<em>标签一样，用于强调文本，但它的强调更强一些
无语义标签<span></span> 该标签没有语义
短文本引用标签<q></q> 简短文字的引用
长文本引用标签 <blockquote></blockquote> 定义长的文本引用
换行标签<br/>
<br/>标签作用相当于word文档中的回车，起到文字换行的作用。

多媒体标签

链接标签<a></a> 图片标签<img/> 视频标签<video></video>

<video src="da.mp4" controls="controls">

音频标签<audio></audio>

<audio src="a.mp3"></audio>

列表无序列表标签

<ul><li></li></ul>

<li></li>代表无序列表中的每一个元素

有序列表

<ol><li></li></ol>

定义列表<dl></dl> <dt></dt>定义列表中的项目 <dd></dd>描述列表中的项目

<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>

表格：表格标签<table> 表格的行<tr> 表头<th> 单元格<td>

表格合并

同一行内，合并几列colspan="2"

同一列内，合并几行rowspan="2"

表单标签<form>

<form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form method="传送方式" action="服务器文件">

action:浏览者输入的数据被传送到的地方，比如一个php页面

method:数据传送的方式

输入标签<input>

input name为文本框命名，用于提交表单，后台接收数据用 value为文本输入框设置默认值 type通过定义不同的type类型，input的功能有所不同

type功能： text，password，radio，checkbox，file，button，reset，submit，email，url，number，range，date，color

<button>按钮： button标签的功能与input按钮功能相同，button是双标签，内部可以嵌套其他行内元素。

下拉选择框select

<select>
 <option value="book"></option>
 <option value="go" selected="selected"> go </option>
 <option value="sport"></option>
</select>

文本域textarea cols:多行输入域的列数 rows:多行输入域的行数

其他语义化标签 div盒子俗称盒子,division分割

在网页制作过程中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个div标签的作用就是相当于一个容器。

什么是逻辑部分，它是页面上相互关联的一组的元素，如网页中的独立的栏目版块，就是一个典型的逻辑部分。

网页头部header

html5新增语义化标签，定义网页的头部

主要用于布局，分割页面的结构

底部信息footer

html5新增语义化标签，定义网页的底部

主要用于布局，分割页面的结构

导航nav

html5新增语义化标签，定义一个导航主要用于布局，分割页面的结构

文章article

html5新增语义化标签，定义一篇文章主要用于布局，分割页面的结构

侧壁栏aside

语义化标签，定义主题内容外的信息主要用于布局，分割页面的结构

时间标签time 语义化标签，定义一个时间

网页结构

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <div>
 </div>
</html>

<!DOCTYPE html>定义文档类型，告知浏览器用哪一种标准解释HTML。

<html></html>可告知浏览器其自身是一个Html文档。

head定义文档的头部
头部元素title,script,style,link,meta

title定义文档的标题 link标签将css样式文件链接到html文件内

meta定义文档的元数据

每个网页都是由不同的功能模块组成的，因此在将制作网页的时候，我们要将网页的每个功能模块分开

常见多由头部区，展示图片区域，主题区域，底部信息区域组成。

网页由上到下，由内到外

div,header,footer,nav,article,aside等标签多用于模块划分

css全称为层叠样式表，它主要用于定义HTML内容在浏览器内的显示样式，如文字的大小，颜色，字体加粗等。

css代码通常存放在style标签内

css样式由选择符和声明组成，而声明由属性和值组成

选择符{属性：值}

选择符，叫选择器

css放置直接书写在标签的style属性中，不建议使用

内联样式表外联样式表

css中的继承

不可继承样式： display,margin,border,padding,background,height,min-height,max-height,width,min-width,max-width,overflow,position,left,right,top,bottom,z-index,float,clear

可以继承的样式 letter-spacing,word-spacing,white-space,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction,visibility,cursor

选择器的种类

标签选择器通配符选择器属性选择器后代选择器一级子元素选择器 id选择器 class选择器伪类选择器

选择某个父元素的直接子元素后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素。

:hover鼠标移入某个元素
.box:hover{
 color:red;
}
:before在某个元素的前面插入内容
div:before{
 content: '内容';
 background-color: yellow;
 color: red;
 font-weight: bold;
}
:after在某个元素的后面插入内容
div:after{
 content: '内容';
 background-color: yellow;
 color: red;
 font-weight: bold;
}

群组选择器可以对多个不同的选择器设置相同的样式

选择器的优先级：

权重计算方式：

标签选择器：1, class选择器：10, id选择器：100, 行内样式：100, !important最高级别，提高样式权重，拥有最高级别就近原则

css样式属性

background-color background-image background-position 背景图片不会占位

背景图片重复background-repeat

background-repeat: no-repeat no-repeat: 设置图像不重复，常用 round: 自动缩放直到适应并填充整个容器 space:以相同的间距平铺且填充满整个容器

背景图片定位 background-attachment

background-attachment:fixed

背景图像是否固定或者随着页面的其余部分滚动

background-attachment的值可以是scroll跟随滚动，fixed固定。

字体

font-family字体 font-size font-weight: normal,bold,bolder,lighter,100-900(400=normal,700=bold)

color字体颜色

字体斜体font-style normal文本正常显示 italic文本斜体显示 oblique文本倾斜显示

文本属性行高line-height 文本水平对齐方式 text-align left,center,right

文本所在行高的垂直对齐方式vertical-align

baseline默认 sub垂直对齐文本的下标 super垂直对齐文本的上标 top对象的顶端与所在容器的顶端对齐 text-top对象的顶端与所在行文字顶端对齐

middle元素对象基于基线垂直对齐 bottom对象的底端与所在行的文字底部对齐 text-bottom对象的底端与所在行文字的底端对齐

文本缩进text-indent text-indent: 2em;

字母之间的间距letter-spacing

单词之间的间距word-spacing

文本的大小写： text-transform

capitalize:文本中的每个单词以大写字母开头 uppercase:定义仅有大写字母 lowercase:定义仅有小写字母

文本的修饰text-decoration none默认 underline下划线 overline上划线 line-through中线

自动换行word-wrap

word-wrap: break-word;

基本样式： width height

cursor鼠标样式：定义鼠标的样式cursor:pointer

default:默认 pointer:小手形状 move:移动形状

透明度opacity opacity:0.3

可见性：visibillity

visibility: hidden visible 元素可见 hidden 元素不可见

collapse:当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

溢出隐藏overflow

设置当对象的内容超过其指定高度以及宽度时如何显示内容

visible默认值，内容不会被修剪，会呈现在元素框之外

hidden 内容会被修剪，并且其余内容是不可见的

scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

auto 如果内容被修剪，则浏览器会显示滚动条以便查看

边框颜色： outline

input文本框入框自带边框，我们可以通过outline修改边框

outline: 1px solid #ccc;

outline: none 清除边框

样式重置：

一开始没有css样式，为了界面美观，很多元素自带margin,padding等样式，但这些样式在不同浏览器的值都是不一样的，需要将css样式重置，保证在不同浏览器中显示一致。清除元素的margin和padding 去掉自带的列表符去掉自带的下划线

在线咨询

上一篇：电子商务（四级）单选题（443）
下一篇：什么是APP封装？APP封装如何实现？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Web前端核心重点JavaScript函数BOM、D

函数的定义与调用

函数的参数

函数的返回值

闭包

立即执行函数

DOM的基本概念

节点类型

节点的关系

访问元素节点常用的方法

节点的创建、添加、移出和克隆

节点的操作

常见的鼠标事件

键盘事件（DOM0级事件监听方式：on +事件名）

常见的表单事件（DOM0级事件监听方式：on +事件名）

常见的页面监听事件（DOM0级事件监听方式：on +事件名

DOM2级事件监听

事件的传播

事件对象

事件对象常用的属性

事件对象常用的方法

定时器和延时器

BOM相关的基本概念

window对象的常用属性

window对象的常用事件

navigator对象的常用属性

history对象的常用方法

location对象的常用属性和方法

标签元素全局标准属性：

全局事件属性：

HTML的标签

您的项目需求