标签归档:jquery

jquery触发两次onchange事件

因为项目中需要校验信息,又不想给服务器带来较大负荷,就使用onchange来实现校验。使用jquery绑定change事件,如下面的代码:


<script type="text/javascript">
        $(document).ready(function()
        {
            $('#test1').bind("change", function()
            {
                alert(this.value);
                this.value = this.value+"aa";
            });
        });

</script>
<input id="test1" type="text" />

演示地址:http://runjs.cn/detail/1r4wltof

测试环境

目前仅在IE8下发现此类问题,我仅测试了IE8/Chrome25/Firefox19

原因分析

google了下,有人将此问题归类为jqueryBUG,存在于1.4 – 1.6.4.版本,详见原帖内容
个人认为,在操作中js改变了input的内容,导致再次触发change事件。那么再次处罚了change事件后,内容也发生了改变,理论上应该进入死循环,但实际上只触发了2次。另外我也尝试了直接给input添加onchange属性来触发,开始时,也是触发了2次,但不知道改变了什么,后来仅触发了1次。

解决方法

我尝试了先解绑,再绑定的方法。注,#test1的方法是正确的,#test2的方法则是没实现的,作对比。setTimeout的方法来自这里.

$(document).ready(function(){
	$('#test1').bind("change", function(){
		var thatFun=arguments.callee;
		var that=this;

		$(this).unbind("change",thatFun);

		//you can do something here
		alert(this.value);
		this.value=this.value+"aa";

		//rebind again
		setTimeout(function(){$(that).bind("change",thatFun)},0);//why use setTimeout? sorry, I don't know...
	});

	//without setTimeout, it will not work. just like this.
	$('#test2').bind("change", function(){
		$(this).unbind("change",arguments.callee);
		alert(this.value);
		this.value=this.value+"aa";
		$(this).bind("change",arguments.callee);
	});
});

WP修改自带jquery加载方式

调用自带jquery方法

<?php wp_enqueue_script("jquery"); ?>

但要注意的是: wp_enqueue_script(“jquery”); 务必加在 wp_head(); 的前面。

同时,需要注意的是wordpress自带的jquery和官方的jquery是有区别的,自带的jquery则需要这样使用:

jQuery(document).ready(function($) {
// "$"符号在这里才能被识别
});

WP 的 jQuery 和原版唯一的不同, 就是在最后一行加了 jQuery.noConflict();这个noConflict() 就是为了与其它的library 兼容性, 如:Prototype, MooTools, 或 YUI。

调用其他jquery方式

1.最直接的:

<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/jquery.js”></script>

2.调用谷歌 Google 的 API库:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
//最好再加上以下代码,一边在连接google的API库是失效时调用本地的jQuery文件:
<script>
!window.jQuery && document.write('<script src="jquery-1.6.1.min.js"><\/script>');
</script>

取消使用自带jquery

网上最多的方法是在/wp-includes/script-loader.php的119行,将

$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.7.1' );

//修改为

if(is_admin()){
 $scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.7.1' );
}

这个方法不支持wp升级,因为升级后会将这个文件修改回来。另外jucelin想到的最简单的方法就是,将官方的jquery替换自带的jquery文件(这个方法会导致后台无法使用自带jQuery!)当然这也应该不支持wp的升级,升级后会被新的jquery覆盖掉。

参考来源:

1.在WordPress调用jQuery的方法及注意事项

2.去掉wordpress自带的jquery 及 附属信息

jquery.bgiframe使用方法

jquery.bgiframe是用来处理IE6下select的z-index最高无法被透明层遮罩的BUG,原理也是利用IE6下的BUG,iframe可以遮罩住select,而DIV可以遮罩iframe,这样DIV也就遮罩住了select。

网上转载这个插件的文章很多,但大多都是复制过来的,来基本的错别字都没有修改。jucelin看到这个插件时就下载到了JS代码,但不知道初始化时对谁操作,于是网络中找了一会,很是失望的是,没有找到,也许是我找到的太匆忙。最后还是下载的官方包(在明河的博客上下载的),演示有,但代码中连jQuery地址错了,八成不是官方的演示代码。

OK,不发牢骚了。

插件官网及介绍原地址  https://github.com/brandonaaron/bgiframe

下载地址太长,点这里  ||  网盘下载 (都为2.1.3-pre版本)

官方演示http://sandbox.runjs.cn/show/dooztchz(下载地址中的test.html)

使用方法:

<!--[if lte IE 6]>

<script type="text/javascript" src="Js/jquery.bgiframe.min.js"></script>

<script language="javascript">

$(document).ready(function(){

$("#bg").bgiframe();//#bg是遮罩层,即设置半透明的那个DIV,其他都没用

});

</script>

<![endif]-->

使用后

jucelin在使用后,因为设置position的问题,导致遮罩层打开后select不可见,关闭时可见,这个也没去深究。另外,有网友说此插件也有BUG,详情可看这里:bgiframe的bug

2012.8.22更新

看很多朋友都有在搜索这个插件,我给下我最后的解决方法,方法很简单,在有遮罩层打开的时候将后面的select的visibility设置为hidden,关闭时可见,一般而言,我们可以专门设置IE6下的JS来设置。因为我没有使用这个插件,所以没有深入探究上面的BUG。

如果你有好的方法也可以留言。

2012.11.29更新

将官方的演示文档放在了runjs.cn上,供大家直接测试使用。演示地址:http://sandbox.runjs.cn/show/dooztchz,源码地址:http://runjs.cn/code/dooztchz

用JS实现表格行合并

在我们现在做的OA系统中,表格已经成为不可缺少的重要组成部分,如果没有表格,我们的工作可能会增加很多。为了美观表格,常常需要将表格中相同内容的行进行合并,表格中的专用标签就是rowspan,描述一下就是将相邻2行或多行中相同位置的列进行合并,当然合并使用前提的,如内容相同,ID相同等等。这里jucelin写了个用JS实现表格行合并的代码,主要使用ID来判断的,不足是出现了相同的ID,但如果调用getElementById的话,在合并之后调用即可。

整个代码都比较简单,jucelin加入了各种判断,主要是为了匹配各种情况,也没找到相关的优化方案。

核心代码(双击代码可以编辑复制):

<script language="javascript">
function TableRowsSpan(tableID, ColList) {
	var ColArray = ColList.split(",");
	var TableName = document.getElementById(tableID);
	var TableRowsCount = TableName.rows.length;
	for (j = ColArray.length - 1; j >= 0; j--) {
		PreId = "";
		CurId = "";
		TempCount = 1;
		for (i = 0; i <= TableRowsCount; i++) {
			if (i != TableRowsCount) {
				CurId = TableName.rows[i].cells[ColArray[j]].id;
				if (CurId != "") {
					if (CurId == PreId) {
						TempCount += 1;
					}
					 else {
						if (TempCount > 1) {
							SpanRows(TableName, i, j, TempCount, ColArray[j]);
						}
						PreId = CurId;
						TempCount = 1;
					}
				}
				 else {
					if (TempCount > 1) {
						SpanRows(TableName, i, j, TempCount, ColArray[j]);
					}
					PreId = CurId;
					TempCount = 1;
				}
			}
			 else {
				if (TempCount > 1) {
					SpanRows(TableName, i, j, TempCount, ColArray[j]);
				}
				PreId = CurId;
				TempCount = 1;
			}
		}
	}
}
function SpanRows(TableName, i, j, TempCount, ColArrayj) {
	TableName.rows[i - TempCount].cells[ColArrayj].rowSpan = TempCount;
	for (m = i - TempCount + 1; m <= i - 1; m++) {
		TableName.rows[m].deleteCell(ColArrayj);
	}
}
</script>

参数说明

tableID : 表格的ID,即选择要被操作的表格

ColList : 被选表格中需要需要合并的列,从第0个开始,即第一列则填0,以半角逗号分割,超出最大值出错

演示页面

https://jucelin.com/wp-content/uploads/2012/01/TableRowsSpan.html

版权说明

JS实现表格行合并的代码是手敲的,思路是自己想的,如果你觉得有必要,就在适当的位置添加上jucelin的名字或网址。本代码自由转载,自由修改,自由使用,如果你有改进,发我一份则十分感谢。

最后声明

用JS实现表格行合并的代码你可以自由使用,但建议你根据实际需求修改后再应用到实际生产中去,避免不必要的资源浪费。越强大越智能,功能越强的代码都是以消耗资源为前提的,并不是每个产品都需要写个jQuery类型的功能库。

jQuery插件初识:Title提示插件jTipsShow

jQuery插件多如牛毛,jQuery的高手也是随处可见,作为目前主流javascript框架,jQuery已经是无孔不入。咱也跟上时髦,做点特效,自己观赏观赏,并作为以后参考。高手有时间帮忙指导指导,先谢过。

一、写在前面的话:

jucelin也是初学者,写这么个小插件用了一个上午的时间,真是会者不难,难者不会。虽说Title提示类插件已经有很多高手写出来了,如张鑫旭的jQuery万能浮动框插件,功能很强大,但就是有些代码还看不懂,所以自己用最简单的方法,自己学习写了个。

再者工作中经常要用到使用表格来显示数据,但苦于界面宽度及页面美观的限制,一些内容只能显示部分,显示全部则用title来显示,可惜的是IE的一个怪毛病,鼠标放上去之后一段时间后显示,显示一段时间后就会消失,如果内容较多,使用者准备仔细阅读时,显示的title就消失了。鉴此需求,写个脚本,应该还算值,原本用在单页面的,在对jQuery插件的好奇心下,就封装成一个插件。

二、jQuery插件的基础知识

jQuery为开发插件提拱了两个方法,分别是jQuery自身类的拓展和给jQuery对象添加方法。

1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法

//插件定义
(function($) {
	$.extend({
		trim: function(obj) {
			return (obj + ' trim');
		}
	})
})(jQuery);

//调用
alert($.trim('aa'));

2.jQuery.fn.extend(object);给jQuery对象添加方法

//插件定义

(function($) {

$.fn.alertWhileClick = function() {

$(this).click(function (){

alert($(this).val() + "2");

});

}

})(jQuery); //页面上为:<input id="input1" type="button" value="test"/>

//调用

$('#input1').alertWhileClick();

三、上代码

请直接访问这里:jQuery-tipsShow

四、插件使用方法

1.先引入jQuery,在引入jTipsShow

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery-tipsshow.js"></script>

2.调用插件

<script language="javascript">

$(document).ready(function(){

//span-title,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'span',

tipsTitle: 'title'

});

//span-rel,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'span',

tipsTitle: 'rel'

});

//td=title,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'td',

tipsTitle: 'title'

});

});

</script>

3.初始化参数说明

titleValue: '',//title的默认值,这个基本上没什么用,初始化了也会被替换掉,添加在插件中主要是全局使用

tipsTag: 'span',//需要显示内容的容器

tipsTitle: 'title',//显示框中要显示的内容

delaytime:500//延时,特效用的

另外被查找的容器tipcontain会被定义成position:relative,所以需要注意样式。

五、总结下

原本参考着别人的插件写的,没有查看jQuery插件的基础知识,导致两种方法弄混了,怎么调试都出错,不会走,就想跑了,呵呵,惭愧下。这个插件还是可以继续拓展的,而且效率方面可能也不是最优的,因为我还没学习到这块的内容,以后再看看能不能优化,也希望你能停下脚步,帮俺看看。

下载插件JShttps://jucelin.com/wp-content/uploads/2012/01/jQuery-tipsShow1.js

在线演示文档:https://jucelin.com/wp-content/uploads/2012/01/jTipsShow.html

六、参考资料:

jQuery插件开发:http://www.zhuoda.org/irini/112855.html

jQuery插件开发全解析:http://www.iteye.com/topic/545971

jquery插件开发范例—A Plugin Development Pattern:http://www.iteye.com/topic/349020

更多参考资料请google:http://www.google.com