一半设计一半前端

学习了拖拽后，那么碰撞就是拖拽一个对象去碰另一个对象，检测是否碰上了。这里的碰撞是两个矩形对象的碰撞，如果是圆形或者不规则形状，方法又不一样了。这个小案例是拖动老鼠去碰撞灯，老鼠只能在可视区内移动，碰上了灯，灯变亮了。具体效果点击查看知识点：1、利用getBoundingClientRect( )方...

HTML5现在已经有了拖放的API，也就是说拖放已经成为了HTML5的标准，不过还是先了解一下JavaScript最原始的拖拽原理。一、拖拽的基本原理拖拽是基于三个事件触发的：onmousedown : 选择元素onmousemove : 移动元素onmouseup   : 释放元素oDi...

一、事件流当浏览器发展到第四代时（IE4和Netscape Communicator 4）,浏览器团队遇到一个很有意思的问题：页面的哪一部分会拥有特定的事件？想象下在一张纸上有一组同心圆，如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致...

以前都是直接为对象绑定一个事件处理函数，但是这种方法会导致事件的覆盖。//给一个对象绑定一个事件处理函数的第一种形式 //obj.onclick = fn; function fn1() {     ale...

event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的时候调用。这个有点像飞机的黑匣子。事件对象必须在一个事件调用的函数里面使用才有内容。事件函数：事件调用的函数，一个函数是不是事件函数，不在定...

基于事件的响应，让页面和用户之间产生交互行为是JavaScript的一大特征。比如，当下面的事件发生的时候，就产生了一个JavaScript事件。当用户单击鼠标时当网页已加载时当图像被加载时当鼠标移动到元素上时当输入字段更改时提交HTML表单时当用户敲击一个键时HTML DOM事件允许JavaScr...

查找到html元素之后，很大一部分操作都需要修改元素的css样式。一般操作CSS样式的方法有如下几种：一、style对象element.style.properties这个style对象的属性是可读可写的，只是它只能读取和设置元素对象的行间样式表。比如：element.style.color=&qu...

元素节点可谓是关键，对于元素节点的增删改查是最常用的。一、获取元素节点的方法document.getElementById()  document(Element).getElementsByClassName()document(Element).getElementsByTa...

因为只讨论HTML DOM，所以，html文档下面的所有对象都是document下面的对象。html最外面的对象就是document了。所以，我们也只讨论document下面的对象的属性和方法。通过这些对象的属性和方法，我们就可以对html所有的元素进行操作。比如增删改查html元素，操作html元...

如果说ECMAScript是JavaScript语言的硬核部分的话，那么DOM就是JavaScript的宿主环境之一。使用HTML DOM，JavaScript可以访问和更改HTML文档的所有元素。DOM（Document Object Model）:文档对象模型当一个html页面被加载后，浏览器就...

在ES6之前，匿名函数一般是这样的：var fn=function(x,y){     return x+y; }ES6提供了一种更简单的函数写法，就是箭头函数：参数 => 函数体var f ...

要理解var和let的区别，先了解一下关于变量的声明以及作用域。一、变量的声明和提升在ES6之前，都是用var关键字来声明变量。var x; // 声明 x如果还没有为变量赋值，此时的变量是undefined。也可以先赋值，再声明，这就是变量提升。也可以理解为...

我们常说“面向对象的编程”，在JavaScript中，对象就是最重要的内容。在老家常把谈恋爱说成“找对象”，那么这里的对象是一个人，在JavaScript中，几乎“所有事物”都是对象。布尔是对象（如果用 new 关键词定义）数字是对象（如果用 new 关键词定...

如果函数只是一段重复执行的代码块，那就不够强大了，最多就是节约了一点重复代码。函数的强大在于通过获得不同的参数，从而得到不同的结果。一、函数的参数1、形参和实参function functionName(parameter1, parameter2, parameter...

记得大学学习C语言的时候，刚毕业的研究生老师讲到函数，什么构造函数，形参，实参，把我搞得晕乎乎的。结果，期末考试C语言没及格，当然，全班几乎都没有及格。第二学期换了一个资历深厚的教授给我们补了一学期的C语言，大家的期末成绩几乎都是80分以上，看来，姜还是老的辣。所以，我们多学了一学期的C语言，导致C...

for循环是一个很强大的流程结构，如果你要重复做某件事情，每次处理的值不一样，就可以用循环。循环要满足一个基本的条件：那就是必须在某个时刻停止循环，否则陷入死循环是要死机的。循环的流程结构图如下：一、不同类型的循环for循环       在代码块中循环多次wh...

js有三种流程结构，顺序、选择、循环。顺序结构：默认的流程结构。按照书写顺序从上至下执行每一条语句。比如我们的html文档就是常见的顺序流程结构，浏览器默认从上往下渲染页面。比如我们在加载外部文件的时候，如果后面加载的文件需要使用前面某个文件的组件或者函数，要确保加载顺序，否则调用不成功。除了一条道...

Math和Array一样，算是JavaScript的一种内置对象，自带了很多的函数可以处理数字方面的任务。Math也有属性和方法。与其他全局对象不同，数学对象没有构造函数。方法和属性是静态的。所有方法和属性（常量）都可以在不首先创建Math对象的情况下使用。也就是不需要new一个对象的实例。一、常用...

这些新增的方法只有IE9或者Edge及chrome等现代浏览器才支持，IE8及以下就不支持了。不过，老的东西肯定是要被抛弃的，学习新东西是常态。技术总是一波接一波更新，所以持续学习是技术人必须的技能。不然很容易被拍死在沙滩上。数组迭代方法对每个数组项都要进行操作。1、forEach()为每个数组元素...

数组是JavaScript中一个很重要的概念。数组是一种特殊的变量，因为它一个变量里面可以存储多个值。一、创建数组var array_name = [item1, item2, ...];  比如： var imgURL=[&...