Warren

不积跬步,无以至千里

  • 2013-06-25 12:21:54.0月
  • 2013-06-25 12:21:54.0

分类:JavaScript / 标签:javascript,js,eval,括号

由于Ajax的兴起,JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来,进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象。利用eval函数无疑是一种简单而直接的方法。在转化的时候需要将JSON字符串的外面包装一层圆括号:

var jsonObject = eval("(" + jsonFormat + ")");

为什么要加括号?

......

2013-06-25 12:21:54.0 / 全文阅读
  • 2013-06-09 16:17:57.0月
  • 2013-06-09 16:17:57.0

分类:JavaScript / 标签:js,javascript,事件冒泡

什么是JS事件冒泡?

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

如何来阻止Jquery事件冒泡?

通过一个小例子来说明一下:

<div id="divOne" onclick="alert('我是最外层');">
<div id="divTwo" onclick="alert('我是中间层!')">
<a id="hr_three" href="http://www.wglong.com" mce_href="http://www.wglong.com" onclick="alert('我是最里层!')">点击我</a>
</div>
</div>

比如上面这个页面,
分为三层:divOne是第外层,divTwo中间层,hr_three是最里层;
他们都有各自的click事件,最里层a标签还有href属性。

运行页面,点击“点击我”,会依次弹出:我是最里层---->我是中间层---->我是最外层---->然后再链接主页.

这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。 事件冒泡过程(以标签ID表示):hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。

......

2013-06-09 16:17:57.0 / 全文阅读
  • 2013-06-07 18:20:43.0月
  • 2013-06-07 18:20:43.0

分类:JavaScript / 标签:js,javascript,前端,继承,拖拽

继承,其可以最大限度的重用代码,在较大的项目中,可以使代码更具可读性,并且易维护。

下面就来整理一下,js中继承是如何实现的:

拿一个拖拽的小例子来说,代码如下:

......

2013-06-07 18:20:43.0 / 全文阅读
  • 2013-06-06 18:28:32.0月
  • 2013-06-06 18:28:32.0

分类:JavaScript / 标签:js,javascript,前端,面向对象,原型,prototype

面向对象编程(OOP)的特点

抽象:抓住核心问题

封装:不考虑内部实现,只考虑功能使用

继承:从已有对象上,继承出新的对象

对象的组成

方法——函数:过程、动态的

属性——变量:状态、静态的

工厂方式

什么是原型——prototype?

Json方式的面向对象

命名空间

......


2013-06-06 18:28:32.0 / 全文阅读
  • 2013-06-01 21:12:21.0月
  • 2013-06-01 21:12:21.0

分类:JavaScript / 标签:js,javascript,drag,前端

拖拽原理:

与鼠标保持距离不变,并设置onmousedown,onmousemove,onmouseup三个事件方法。

拖拽框架:

var oDiv=document.getElementById('div1');	
	var disX=0;
	var disY=0;	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
		disY=oEvent.clientY-oDiv.offsetTop;
		
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			
			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};
		
		return false;	//chrome、ff、IE9
	};

......

2013-06-01 21:12:21.0 / 全文阅读
分享按钮