JS小记
文章平均质量分 84
关耳佳
love coding,love life...
展开
-
js运动-多物体运动
基本步骤1.通过getElementsByTagName获取到要做多物体运动的元素2.然后for循环遍历元素,添加事件3.定义startMove函数,需要两个参数,当前“做运动”的元素,和目标值target 注意问题:在多物体运动中,所有的东西不能公用; window.onload = function(){ var liT原创 2015-05-16 17:48:11 · 861 阅读 · 1 评论 -
JS事件之绑定事件
JS中的事件是js中很重要的一部分内容,充分理解事件机制是必不可少的。JS中事件分类:鼠标事件:onclick, ondbclick, onmouseover,onmousedown, onmouseup,onmousemove,onmouseout等键盘事件:onkeyup,onkeydown,onkeypress...表单事件:onsubmit,onblur,onfoucs原创 2015-05-11 23:06:48 · 12152 阅读 · 0 评论 -
JS事件之事件对象和事件源
要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流事件对象:当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息。注意事件对象只有在事件发生时才会产生,我们无法手动创建,并且事件对象只能在处理函数内部访问,处理函数允许结束后该对象自动销毁。怎么理解那?? document.onmousemove = function原创 2015-05-11 23:14:18 · 16473 阅读 · 1 评论 -
JS事件之事件流机制
众所周知JS和HTMl元素的交互几乎都是通过“事件”来完成的,事件从触发到完成响应一般分为3个阶段:捕获阶段,目标阶段,和冒泡阶段。那么事件是在捕获阶段响应 还是在冒泡阶段响应那?? 我们是可以手动设置事件是在捕获阶段响应还是在冒泡阶段响应。 理解JS的事件流机制对充分理解JS的事件至关重要,那么什么是JS的事件流那??事件流:可以理解为当事件发生时,响应事件的顺序。这个顺序就原创 2015-05-11 23:18:34 · 6116 阅读 · 0 评论 -
JS事件之事件委托
事件委托:一个事件本来是加到某些元素身上来完成一些事情,但是这些元素却委托其他元素来替它完成;比如 ul下有4个li元素,现在要给这些li添加鼠标移入移出事件完成 “改变背景” 点我 点我 点我 点我常规一般我们会这样写:得到ul然后循环为每个li添加点击事件 window.onload = functi原创 2015-05-12 19:12:49 · 752 阅读 · 0 评论 -
JS神器-函数
JS中的神器-函数函数是JS的灵魂,在JavaScript中函数本身也是对象。今天就扒一扒js的函数,看看她里面到底是什么东东!要想搞函数,先的有函数,那么在JS中怎么搞一个函数出来的? 一 .定义函数的方式:第一种:function test(){ alert("I am a function");}第二种:var a = function test(原创 2015-05-13 22:51:36 · 612 阅读 · 0 评论 -
JS面向对象-原型对象,实例对象,构造函数的关系
JS中每创建一个函数,该函数就会自动拥有一个prototype属性,为什么那?? 因为最根上的object拥有一个prototype属性,而js中所有的对象又都继承自object,所以js中所有的对象都拥有一个prototype属性,而在js中函数也是对象,所以js中每个函数也都有一个prototype属性。例如:function Person(){...} 和function Dog()原创 2015-05-17 22:30:17 · 5008 阅读 · 0 评论 -
JS函数-函数声明和函数表达式之间的恩怨
“函数声明”和“函数表达式”其实说白了 就是定义函数的方式函数声明:function 函数名(){.....}通过上面方式定义的函数就是函数声明 函数表达式:通过函数表达式定义函数的方式比较多1. var a = function test(){...} // 这是命名的函数表达式 var a = function(){...} // 这是匿名的函数表达式2原创 2015-05-19 22:46:28 · 1379 阅读 · 0 评论 -
JS-作用域划分
和其他语言不通的是,js的作用域是按函数来划分的;不像C 语言,java等高级语言,有严格的块级作用域的区分,在java中for或者if都算是一个独立的块级作用域,但是在JavaScript中if、for 语句中的花括号不是独立的作用域。JavaScript 的作用域完全是由函数来决定的。比如if (true) { var name = 'zhangsan';}console.log原创 2015-05-20 14:05:30 · 1010 阅读 · 2 评论 -
JS数组-第一脚
数组的大名可以说是家喻户晓,每一个程序员和数组有着说不清理还乱的关系,数组充斥着各种语言的每个角落,javascript自然也不例外,今天就让我们来踩一踩js中的数组原创 2015-05-22 15:30:58 · 883 阅读 · 0 评论 -
JS-那些年困扰我的offsetT/L/W/H和scrollT/L/W/H......
学习过js的人,相信都曾经被这堆东西困扰:clientWidth,clientHeight,clientX,clientY,offsetX.offsetY ,offsetLeft,offsetTop ,offsetWidth,offsetHeight,scrollTop,scrollLeft 等等,看着这堆东西就开始犯晕呕吐。他们到底是干嘛滴那?今天就来让我们彻底击碎这群玩意,原创 2015-05-23 14:38:13 · 1631 阅读 · 1 评论 -
JS之预解析
javascript 的预解析所谓预解析:(个人理解)就是js代码在执行之前 会在相应的执行环境中 预先把 一些东西解析到内存。如果理解错误,请多多指正那究竟预先解析哪些东西那??答:预先解析 function 和 var还有就是预解析的顺序是怎们样的?1首先是找到标签按照块依次解析(最后会有说明)2 解析执行环境(这个有点难理解,在下面有具体解释)3 对标识符( var原创 2015-05-10 14:16:19 · 9254 阅读 · 4 评论 -
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性,之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反正看完一头雾水,所以自己动手亲自测试了一下;说一下自己的理解;clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性原创 2015-05-09 23:47:21 · 61091 阅读 · 22 评论 -
JS-碰撞检测
一个简单的碰撞检测例子,检测div1是否和div2发生碰撞,当div1碰到div2时,改变div2的颜色,看测试图看一下分析图:当div1在div2的上边线(t2)以上的区域活动时,始终碰不上当div1在div2的右边线(r2)以右的区域活动时,始终碰不上当div1在div2的下边线(b2)以下的区域活动时,始终碰不上当div1在div2的左边线(r2)以左原创 2015-05-25 17:09:53 · 19358 阅读 · 3 评论 -
js运动-改变透明度(单物体)
除了通过改变物体的 宽,高,letf,top位置或者是运动方向来实现物体运动效果之外,改变物体的透明度,也是运动特效 window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmousemove = function () {原创 2015-05-16 16:27:58 · 2407 阅读 · 0 评论 -
JS事件-鼠标滚轮事件
之前学习了onmouseover,onmousedown等鼠标事件,今天来看看鼠标的滚轮事件,浏览器兼容一直是让人比较恶心的事情,今天就让我们将恶心进行到底,看看这个恶心的鼠标滚轮事件! 鼠标滚轮事件在IE和谷歌浏览器Chrome下是通过onmousewheel这个事件实现的,但是火狐FF下却不识别onmousewheel,在FF下需要用DOMMouseScroll,并且必须用“事件监听”原创 2015-05-27 12:25:58 · 27120 阅读 · 3 评论 -
js运动-完美运动框架
在上一篇的《js运动-同时运动》中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整oDiv.onmouseover = function () { //startMove(oDiv,{width:300,height:300,opacity:30}); startMove(oDiv,{width:204,height:300,opacit原创 2015-05-17 17:55:10 · 7131 阅读 · 3 评论 -
js运动-同时运动
接着上一篇 《js运动-链式运动》继续折腾 上一篇中我们的运动框架,可以完美的实现让一个物体先变宽,在变高,在变透明度.....,看似很完美了!貌似可以喝喝茶看看美女了。但是老板突然说,让你同时改变一个物体的宽高和透明度,心碎了一地!!!拿过之前的运动框架发现,无法实现让div同时又变宽,又变高,有变透明度!!最后无能为力,只好有请JSON大神出场了,不认识json原创 2015-05-17 16:06:55 · 1868 阅读 · 0 评论 -
js运动-offsetWidth和offsetHeight引发的血案
之前说的js运动不管是单物体运动,多物体运动,还是缓冲运动。在获取元素自身宽,高的时候用的都是offsetWidth,offsetHeight,但是这会引发一些麻烦!!因为在js中offsetWidth,offsetHeight获取的不仅仅是元素样式中定义的width,height还包括给元素设置的border和padding的值看看下面的测试例子: #div1{原创 2015-05-16 23:00:02 · 8837 阅读 · 2 评论 -
js运动-任意值添加运动
回顾一下上个例子: window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;原创 2015-05-17 12:12:23 · 1001 阅读 · 0 评论 -
js运动-链式运动
接着上一篇《js运动-任意值运动》继续折腾链式运动:一个运动接着一个运动。比如:鼠标移入div先让宽变大,接着在让高变大,接着在让透明度变化等等一系列运动连着做。废话不多说,上栗子!! 当鼠标移入div的时候,div先变宽,在变高,然后改变透明度;移出又逐次恢复到原样;实现链式运动,需要对上一篇中的startMove() 函数继续做改进function startMove原创 2015-05-17 14:58:35 · 2509 阅读 · 0 评论 -
JS拖拽(改变物体大小)
拖拽改变物体大小功能:拖拽黄色小div来改变绿色大div的宽和高 主要实现由三大步:1. 通过id获取到大小两个div2. 给小div添加onmousedown事件3. 在onmousedown事件给document添加onmousemove和onmouseup事件 由分析图可知,我们只需要在拖拽的时候,获取到物体不断增加的宽度值,问题就解决了原创 2015-05-22 10:28:52 · 6245 阅读 · 3 评论 -
JS运动-放大缩小物体(从中心)
先来看下效果:要点:1. 将css的float定位,转换成用js的绝对定位2. 从中心放大缩小物体 主要步骤:1. 先通过css的float定位,ul宽度设置成li宽的倍数(例子中li的宽是122,没行显示3 个li,所以ul宽设置 成366)2. 利用js 获取并且设置他们初始的left 和top值3. ul 的position:原创 2015-05-23 12:17:30 · 3675 阅读 · 0 评论 -
JS-自定义滚动条的几个实例
首先要说的就是:怎么实现一个自定义的滚动条主要步骤:1. 定义两个div,一大一小,让小div在大div上滚动2. 利用拖拽原理使小div可以滚动,这里拖拽的时候,只是改变小div的left值;3. 限制小div的滚动范围 #parent{ width: 400px;height: 30px;background原创 2015-05-25 18:41:27 · 5097 阅读 · 2 评论 -
JS-闭包详解
闭包是JS中的一块硬骨头-不好啃,需要我们慢慢去咀嚼才能体会出其中的味道,嚼的不好,一不小心还容易崩牙!今天就让我们好好来咀嚼下这块硬骨头把!!!1.什么是闭包?所谓闭包:在一个函数作用域中 保留 它上级作用域的局部变量,这些局部变量不会随着上级函数的执行完毕而被销毁(个人理解)。简单的理解闭包:子函数可以使用父函数的局部变量(包括参数,因为参数也是局部变量); function原创 2015-05-23 20:24:12 · 4438 阅读 · 0 评论