三水清jquery

自己写的一个轻量级javascript框架的设计模式

三水清 — Mon, 14 Mar 2011 09:15:39 +0000

公司一直使用jQuery框架，一些小的项目还是觉得jQuery框架太过于强大了，于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式，不得不说说js的类继承机制，javascript不同于PHP可以轻松的实现类继承，不过javascript的类继承方法还是有的，常见的有构建函数、原型扩展、综合……，也有一些专门写类的函数，例如jQuery的作者有个类继承函数。关于类继承写法可以简单看看这篇文章。

我自己写的框架也不知道叫什么名字，刚开始写的时候随手写了个W（姓拼音，之前写过jQuery弹出框插件wBox），现在写这篇文章重新整理了一下思想，换了YQ（名字拼音，你懂的~）。

核心代码

框架设计的时候尽量做到了支持链式写法，也就是返回this，可以$(selector).handler1().handler2()……无限写下去，只要不是有返回值的就可以继续。包括了event，dom，css，还有fadeIn，fadeOut动画（因为再重构爱墙[html5+css3]版，所有顺手加上了这个功能）。如果配合sizzle选择器就更牛了！

下面说说框架的核心代码，等完善了之后跟新版html5爱墙一起放出，主要的代码如下：

(function(window,document){
	var DOC = document,YQ = window.$ = function(selector){
		if(!selector){
			return YQ.elems
		}
		typeof selector === 'string' && (selector = getElements(selector));//简单的判断是dom对象，还是字符串，字符串则开始选择器
		return superElems(selector);
	}
	function superElems(elems){
		if(elems){
			if(elems.nodeType){//判断是否为DOM
				if(typeof elems.getAttribute !=="unknown"){
					var temp = elems;
					elems = [];
					elems[0] = temp;//把本身作为超级对象的第一个，其他方法进行扩展
					for(var i in YQ.elems){
						//扩展对象，保留已有的方法
						typeof elems[i] === "undefined" && (elems[i] = YQ.elems[i])
					}
				}
			}else{//如果为对象，则对对象进行扩展
				elems = YQ.extend(elems,YQ.elems);
			}
		}
		return elems;
	}
	function getElements(selector){
		//伟大的选择器，可以使用sizzle
		var dom = DOC.getElementById(selector);//……
		return dom;
	}
	YQ.tool = {
		isFunction:function(obj){//简单的判断是否为函数
			return obj && typeof obj ==="function";
		}
	}
	//此处为超级对象一些扩展
	YQ.elems = {
		each:function(dom,callback){//强大的each
			if(YQ.tool.isFunction(dom)){
				arguments.callee.call(this,this,dom);
			}else{
				for (var i = 0, len = dom.length; i < len; i++) {
					callback.call(dom, i, dom[i]);
				}
			}
			return this;
		},
		find:function(selector){
			var doms = [];
			this.each(function(i,dom){
				doms.push(YQ.DOM.find(selector,dom));
			})
			return superElems(doms);
		}
	}
	YQ.each = window.Array.prototype.each = YQ.elems.each;//扩展Array
	YQ.extend = function(subClass,baseClass){
		for(var i in baseClass){
			subClass[i] = baseClass[i];
		}
		return subClass;
	}
	YQ.AJAX = {}
	YQ.CSS = {
		names:{
			'float':'cssFloat',//区分cssFloat or styleFloat
			opacity:'opacity'
			//……
		}
	}
	YQ.browser = {
		isIE:'',
		isFirefox:'',
		version:'3.6'
		//……
	}
	YQ.event = {
		names:{
			mousewheel:YQ.browser?"DOMMouseScroll":"mousewheel"
		},
		fix:function(e){
			if(e && e.clone) return e;//如果已经处理了，直接返回
			e = window.event || e;//event是全局变量
			var fixE = {
				clone:true,
				stop:function(){//冒泡
					if(e&&e.stopPropagation){
						e.stopPropagation();
					}else{
						e.cancleBubble = true
					}
				},
				prevent:function(){//默认动作
					if(e && e.preventDefault){
						e.preventDefault();
					}else{
						e.returnValue = false;
					}
				},
				target:e.target || e.srcElement,
				x:e.clientX || e.pageX,
				Y:e.clientY || e.pageY,
				//鼠标滚轮事件统一处理
				wheel:e.wheelDelta/120 || -e.detail/3
			}
			return fixE;
		}
	}
	YQ.DOM = {
		find:function(selector,parentDom){
			//do something
		}
	}
})(window,document);

简单的分析

代码中的注释还算详细，结合注释就可以看懂，下面我再啰嗦几句，高手飘过，欢迎拍砖……
总得来看是个匿名函数，定义了全局变量$（似乎都喜欢美元，如果有喜欢的人民币的，下次加上），函数里面有个YQ的对象，有很多function，包括一些私有的。

使用$可以作为选择器，如果为空，则返回YQ.elems对象，选择后的DOM根据YQ.elems进行扩展，最后得到的就是注释里面说的superElems（此处创建superElems方法参考了下jRaiser），跟jQuery的superElems类似，绑定了很多方法，可以方便的进行操作，YQ的方法可以通过YQ.elems扩展到选择器选择的对象上去，而选择器主要的函数getElements，可以使用sizzle，这样就方便了dom操作，不过sizzle似乎也是代码太多，此处将来会支持简单的标签,#ID,.class,标签+class选择器。

另外框架中中对一些Array，string进行了扩展，例如上面的Array.each方法，YQ.elems.each是重量级的函数方法，可以支持superElems的遍历（返回本身），还可以支持简单数组的遍历。

框架中还对一些兼容性进行了处理，例如YQ.event.fix处理事件，css中处理float

基本就这些了，今天就先说核心的部分，其实通过这段代码已经很清晰的了解到这个框架的思想了，后续继续给力的coding，补充扩展……
目前为止，框架不到800行代码，包括了常见的jQuery方法，压缩后不到9k，gzip 4.5K~

写在最后

本想写一系列的文章，可是敲了几个字又不知道说啥，今后学习下司徒正美追求短小精悍的博文~呵呵

声明：文章未声明为原创文章，本文链接 http://js8.in/677.html. 转载请注明转自 JS8.IN ™

随机文章

三种常见jQuery幻灯片（jQuery slider）制作教程

三水清 — Sat, 22 Jan 2011 07:25:54 +0000

好久没正儿八经的写写js代码了，再不写就生疏了，昨天无意中发现cityhouse的首页幻灯片有问题，于是今天就写了三个幻灯片实例，如果还不会用jquery写幻灯片的可以参考我之前的文章：《CSS+jQuery实现滑动幻灯片实例详解》以及两个jQuery幻灯片实例。

今天的三个jQuery幻灯片其实还是两个，只不过第一种滚动的幻灯片有两种形式：分别是上下滚动和左右滚动。兼容IE6+，FF，chrome等主流浏览器。
效果和淘宝首页的幻灯片效果相同，自动播放时是一直往一个方向前进。
布局方面还算比较简洁，大家可以根据自己的需要添加内容，另外这次的幻灯片加上了文字，其实不光图片可以slider，文字也可以slider一会的。另外加了一点CSS3，就是控制按钮圆角化了（FF3.6+和chrome下有效果）。

截图

三种常见jQuery幻灯片（jQuery slider）实例

教程

可以研究其中的代码，原来与之前的文章教程类似：《CSS+jQuery实现滑动幻灯片实例详解》

实例

查看幻灯片演示

声明：文章未声明为原创文章，本文链接 http://js8.in/668.html. 转载请注明转自 JS8.IN ™

随机文章

javascript简单实现checkbox的全选与反选

三水清 — Wed, 24 Nov 2010 12:23:35 +0000

今天上网遇到有个网友在论坛问input的checkbox全选和反选的问题，顺手总结了一下，然后写了个简单的jQuery checkbox全选反选插件，希望对大家有用。
如果是简单的实现checkbox的全选与反选可以使用下面的函数：

 function checkall(obj,cName)
 {
     var checkboxs = document.getElementsByName(cName);
     for(var i=checkboxs.length;i--;){
             checkboxs[i].checked = obj.checked;
     }
 }
//使用方法:给全选的按钮加onclick事件：onclick="checkall(this,'all[]');"

下面的jQuery checkbox插件是在网上找的：

$.fn.checkbox = function(){
    var t = this;
    /*
     * 切换全选/反选
     * @example $("#checkAll").checkbox().toggle($("input[name='selectAll']"));
     */
    this.toggle = function(el){
        $(el).click(function(){
            $(t).attr('checked', false);
        });
        $(this).click(function(){
            $(el).attr('checked', $(this).attr('checked') == true ? true : false);
        });
    };
    /*
     * 全选
     */
    this.check = function(el){
        $(el).attr('checked', true);
    };
    /*
     * 反选
     */
    this.uncheck = function(el){
        $(el).attr('checked', false);
    };
    return t;
};

声明：文章未声明为原创文章，本文链接 http://js8.in/605.html. 转载请注明转自 JS8.IN ™

随机文章

jQuery教程之鼠标事件篇

三水清 — Sun, 03 Oct 2010 06:12:56 +0000

jQuery除了选择器之外，还封装了很多事件的处理，比如鼠标事件，所谓的鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键而触发的事件，jQuery中封装了几乎所有的鼠标事件，包括点击，双击，移出，移入等鼠标事件，下面断桥残雪简单的介绍下jQuery的鼠标事件

jQuery的click事件

经典鼠标click的实例：

$("sel").click(function(){
    alert('哈哈 !');
});

jQuery的dbclick事件

一般dbclick事件的同时也会触发两次click事件。。以前我写过一篇博客简单的介绍了下jQuery的鼠标双击事件

$('p').dbclick(function(){
alert('鼠标双击!');
});
$('p').click(function(){
alert('点击了一下!');
});//大家看看结果是怎么样的？

jQuery的mousedown事件

mousedown就是在按下鼠标时触发的事件
$(’p').mousedown(function(){
alert(’按下了鼠标 !’);
});

jQuery的mouseup事件

同上就是松开鼠标时候触发的事件,如果在于按下鼠标的相同元素上松开,那么也会触发click事件,mousedown和mouseup事件一般有在div拖拽等效果中

$('p').mouseup(function(){
alert('鼠标起来了 !');
}).click(function(){
alert('点击了下鼠标!');
});

jQuery的mouseover事件

mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性

jQuery的mouseout事件

mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。

jQuery的mouseenter事件

和mouseover事件类似,但两者有区别

jQuery的mouserleaver事件

同上和mouseout事件类似.

hover事件

其实hover事件内部就是使用了mouseenter和mouseleaver事件,我们可以使用jQuery的hover这个函数来代替上面的两个函数

$('p').hover(function(){
alert('这个function里放mouseenter 的事件!');
},function(){
alert('这里是mouseleaver function!');
});

这里我们没有鼠标右键事件?其实使用jQuery的mousedown事件然后再函数里判断就OK了

声明：文章未声明为原创文章，本文链接 http://js8.in/600.html. 转载请注明转自 JS8.IN ™

随机文章

解决jQuery中dbclick事件触发两次click事件

三水清 — Mon, 27 Sep 2010 00:40:37 +0000

在jQuery事件绑定中，dbclick可以触发两次click事件。例如一个DOM元素div，既绑定了 click 事件，又绑定了 dblclick 事件，这两个事件分别要做独立的事情。事件处理上没有冲突，都可以各自完成各自的操作。双击的时候虽然是执行了 dblclick 事件，但是在这之前，也执行了click 事件，那么，如何来禁止或者说屏蔽这次多余的 click 事件呢？本文将提供给您一个比较好的解决办法。

产生原理分析

　　首先，来了解一下点击事件发生的先后顺序：

单击：mousedown, mouseup, click
双击：mousedown, mouseup, click, mousedown, mouseup, click, dblclick
　　由此看来，dblclick 事件发生之前，实际上发生了两次 click 事件。其中，第一次的 click 是会被屏蔽掉，但是第二次则不会，所以就出现在双击的时候，也触发 click 事件。

解决办法

　　知道了原因，接下来自然就是想办法把这次 click 给屏蔽掉，但是由于各浏览器均未提供直接去停止事件的方法，所以值得改变思路。
　　由于我们只需要屏蔽一次 click 事件即可，由此联想到，可以利用 setTimeout() 方法来延时完成 click 事件的处理，在需要停止 click 的时候利用 clearTimeout() 方法停止这一事件的处理。这样，就可以比较容易的写出如下的 javascript 代码：

var timer = null; function do_click(event) {
 clearTimeout(timer); // 这里加一句是为了兼容 Gecko 的浏览器 /
if (event.detail == 2) 
return ; 
// 同上句的作用 
timer = setTimeout(function() { 
// click 事件的处理 
}, 300); } 
function do_dblclick(event) { 
clearTimeout(timer);
 // dblclick 事件的处理 
}

问题总结

　　从测试结果来看，如果前后两次点击的时间在 300ms 左右的时候，还是很容易出现 click 和 dblclick 事件被“同时”调用的情况，而如果间隔的时间更短或更长，则只会有 click 或 dblclick 事件。
　　所以，应该说这个方法已经在很大程度上，避免了 click 和 dblclick 事件的“同时”存在问题。当然，它还没有达到完全解决的程度。

注意

windows 的控制面板里是可以调鼠标的双击速度的（Linux 等系统下能不能调，俺就不清楚了），这点对于程序还是有一定影响，大家可以自己调节下试试看～
经过测试，延时 300ms 是一个比较理想的事件，既考虑到对鼠标操作并不十分顺利的朋友，也兼顾 click 事件的响应速度
以上代码，只在 IE6、FF3、Chrome 中测试过，并未出现问题

w3c标准是没有dblclick的，而是通过event.detail来判断是单击或双击

声明：文章未声明为原创文章，本文链接 http://js8.in/610.html. 转载请注明转自 JS8.IN ™

随机文章

Jquery中的offset()和position()方法详解

三水清 — Thu, 16 Sep 2010 02:25:34 +0000

再给普加地图添加搜索提示的时候，我使用了jQuery的offset方法，因为习惯了，结果出现了不对齐的bug，说明offset的方法获取的top和left值是错误的。后来想起了jQuery中offset和position的两个方法有所不同，就查了一下google，原来两者是在父节点的相对绝对定位相关的。于是整理了今天的文章。

我们首先来看看这两个方法的定义。

jQuery的offset()方法

获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

jQuery的position()方法

获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

深入剖析jQuery的源代码

先来看看在jquery框架源码里面，是怎么获得offset()和position()的：

// Get *real* offsetParent
var offsetParent = this.offsetParent(),
 
// Get correct offsets
offset       = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();
 
// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top  -= num( this, 'marginTop'  );
offset.left -= num( this, 'marginLeft' );
 
// Add offsetParent borders
parentOffset.top  += num( offsetParent, 'borderTopWidth'  );
parentOffset.left += num( offsetParent, 'borderLeftWidth' );
 
// Subtract the two offsets
results = {
top:  offset.top  - parentOffset.top,
left: offset.left - parentOffset.left
};

点击下面的链接可以测试一下两个的区别

jQuery的offset()和position()方法差异性测试

通过上面的页面测试的结果可以得出结论

使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置
使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移
使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移

正确使用offset和postion

就我个人的经验，通常获取一个元素（A）的位置是为了让另外的一个元素（B）正好出现在A元素的附近。通常有2种情况：

1.要显示的元素B存放在DOM的最顶端或者最底端（即其父元素就是body）.这个时候用offset()是最好的。示例验证：

用offset 正常显示的例子 | 用position无法正常显示的例子

在以上两个例子中，元素B都存放在Dom 结构的最下面，由于其父元素就是BODY，所以，不管元素A如何定位，只要找的A相当与整个窗口的偏移位置，就可以解决问题。

2.若要显示的元素B存放在元素A的同一父元素下（即B为A的兄弟节点），这个时候使用position() 是最合适的。

用position正常显示的例 | 用offset无法正常显示的例子

综上所述，应该使用position()还是offset()取决于你被控制的元素B DOM所在的位置。

声明：文章未声明为原创文章，本文链接 http://js8.in/602.html. 转载请注明转自 JS8.IN ™

随机文章

关于wBox iFrame回调关闭问题的解决方案

三水清 — Tue, 07 Sep 2010 05:05:39 +0000

最近很多使用我的jQuery弹出框插件wBox的人问我，关于wBox的关闭问题，例如一个页面中使用wBox iframe进来一个页面，而这个页面是进行用户登录，登录成功就关闭wBox，其实实现回调关闭wBox的方法很简单，就是使用iframe的DOM操作即可，例如我们的代码这样写：

//wbox赋值出来，然后使用wbox对象的close的方法关闭
var wbox=$("#iframe").wBox({
   	requestType: "iframe",
	target:"b.html"
   });

那么我们在页面b.html中进行了用户登录验证，我们验证成功，要关闭wBox，就可以在b.html中使用parent.wbox.close()来进行关闭，就像下面的代码，只要我们验证完毕运行closewBox就可以关闭了iframe：

function closewBox(){
    parent.wbox.close()
}

关于iframe子页面与父页面之间的DOM操作可以参考下面的文章：《使用JavaScript在IE和Firefox下进行iframe的DOM操作》

声明：文章未声明为原创文章，本文链接 http://js8.in/620.html. 转载请注明转自 JS8.IN ™

随机文章

解决IE6不支持max-height的bug

三水清 — Fri, 03 Sep 2010 05:06:30 +0000

罪恶的IE6不支持max-height属性，不过我们可以通过jQuery来解决IE6不支持max-height，jQuery的代码如下：

$(".entry").each(function(){
    if($(this)[0].scrollHeight>500)
     $(this).css({"height":"500px"});
});

原理: 在IE6中可以通过设定height来达到max-height的效果. 循环所有要加max-height属性的DOM元素,判断他的scrollHeight大于你要设置的最大高度如果超过了就通过设置height为最大高度，我这里使用的是[0]，获取的是的DOM对象，而不是jQuery对象，详细说明见：《jQuery选择器使用详解》

上面的代码还没有加入IE6的判断,完整代码如下:

if($.browser.msie&amp;&amp;($.browser.version === "6.0")){
$(".entry").each(function(){
if($(this)[0].scrollHeight>500)
$(this).css({"height":"500px","overflow":"hidden"});
});}

当然你也可以通过css表达式来实现IE6支持max-height属性

.entry{
//我烧验证woshao_985140e4b71711df9e5e000c295b2b8d
height: expression( this.scrollHeight > 500 ? "500px" : "auto" ); /* sets max-height for IE */
}

声明：文章未声明为原创文章，本文链接 http://js8.in/606.html. 转载请注明转自 JS8.IN ™

随机文章

关于jQuery ready()方法一些用法解释

三水清 — Tue, 31 Aug 2010 02:27:27 +0000

jQuery的ready方法的是开发中经常用到的，作用相当于我们的body onload，是当页面DOM准备就绪的时候才运行的代码，最常用的就是在DOM渲染加载之前，先给document绑定ready事件，然后当页面DOM都准备好之后才运行这个事件。
关于jQuery的ready有以下几种用法

最常用也是最标准的ready方法

$(document).ready(){
});

简写的jQuery ready()

$(function(){
});

这是因为jQuery的选择器第一个参数假如为空，那么默认的是document

不建议使用的ready()方法

$().ready(handler);

在jQuery1.4发布公告中提到了：在jQuery1.4中仍然保留这种方法，但是不推荐使用，并且jQuery1.3的ready会返回一个jQuery的对象，而1.4中则不会又返回

解决jQuery（$）库冲突的ready方法

这一种方式一般用在处理jQuery的$和别的库冲突的时候用的,可以通过jQuery.noConflict()这个方法,我们就可以直接在代码中通过jQuery来代替$来使用,但又习惯了使用$怎么办?看下面的代码:

jQuery.noConflict();
jQuery(function($){
    alert($("#ready1").html());   //这样我们就可以使用$了
});

后记

一般在开发中断桥残雪是不会推荐使用jQuery的ready方法的，因为绑定ready事件之后，jQuery需要添加DOMContentLoaded监听事件，对于页面加载渲染是有一定影响的，所以建议我们在逼不得已的情况下才使用jQuery的ready。

在实际开发中我推荐把ready中要执行的函数放在DOM的HTML代码之后，也就是当DOM渲染过去之后再执行handler，或者把代码直接放在页面的末尾

订阅更“健康”

声明：文章未声明为原创文章，本文链接 http://js8.in/603.html. 转载请注明转自 JS8.IN ™

随机文章

javascript在光标位置插入内容

三水清 — Fri, 14 May 2010 04:46:30 +0000

之前我写过一篇文章是通过javascript获取光标的位置——javascript获取光标位置以及设置光标位置。由于产品需要在留言板的光标处上插入表情，这样就用到了javascript在光标位置插入内容的功能了~其实原理很简单，IE下可以通过document.selection.createRange();来实现，而Firefox（火狐）浏览器则需要首先获取光标位置，然后对value进行字符串截取处理。不多说了~直接上我写的一个jQuery在光标位置插入内容插件吧~

jQuery在光标位置插入内容插件代码

(function($){
	$.fn.extend({
		insertAtCaret: function(myValue){
			var $t=$(this)[0];
			if (document.selection) {
				this.focus();
				sel = document.selection.createRange();
				sel.text = myValue;
				this.focus();
			}
			else 
				if ($t.selectionStart || $t.selectionStart == '0') {
					var startPos = $t.selectionStart;
					var endPos = $t.selectionEnd;
					var scrollTop = $t.scrollTop;
					$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
					this.focus();
					$t.selectionStart = startPos + myValue.length;
					$t.selectionEnd = startPos + myValue.length;
					$t.scrollTop = scrollTop;
				}
				else {
					this.value += myValue;
					this.focus();
				}
		}
	})	
})(jQuery);

使用方法

$(selector).insertAtCaret("value");

声明：文章未声明为原创文章，本文链接 http://js8.in/538.html. 转载请注明转自 JS8.IN ™

猜你喜欢：
jQuery选择器使用详解	jQuery实现拖拽功能	jQuery教程之鼠标事件篇	jQuery 1.4的十五大新功能实例精讲
无觅

猜你喜欢：
CSS+jQuery实现滑动幻灯片实例详解	jQuery浏览器判断一个bug，以及修改建议	jQuery 1.4的十五大新功能实例精讲	jQuery插件--wBox发布
无觅

猜你喜欢：
简单代码实现checkbox全选	真正的jQuery的radio与checkbox取值	jQuery浏览器判断一个bug，以及修改建议	jQuery插件--wBox发布
无觅

猜你喜欢：
jQuery实现拖拽功能	jQuery1.4浏览器判断函数bug仍然存在	jQuery选择器使用详解	jQuery 1.4的十五大新功能实例精讲
无觅

猜你喜欢：
两个简单的jQuery幻灯片实例	jQuery选择器使用详解	jQuery实现拖拽功能	jQuery1.4 Alpha 2发布
无觅

猜你喜欢：
两个简单的jQuery幻灯片实例	25大实用的jQuery技巧和解决方案	jQuery 1.4的十五大新功能实例精讲	jQuery 1.4.1 中文参考文档下载
无觅

猜你喜欢：
jQuery插件--wBox发布	jQuery插件wBox准备更新	jQuery弹出框插件wBox 1.0正式发布	jQuery弹出框wBox的一个使用实例
无觅

猜你喜欢：
IE6中a标签触发图片和ajax请求被abort	IE6中a标签location.href失效解决方法	最新版wBox 解决IE6 背景太小bug	解决IE6 select z-index无效，遮挡div的bug
无觅