Jquery中attr和prop属性

今天着手demo的时候发现了一个奇怪的问题,将Jquery的版本更新到最高版本的时候(之前还是1.3)全选框出现了怪异的问题,就是第一次点击全选OK,然后点击取消OK,当我第二次点击全选的时候功能失效了

:(

代码小样:

1
2
3
4
5
$('.check-all').click(
 function(){
  $(this).parent().parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
  }
);

后来找到Jquery的官方说明,发现在1.6后新增了prop,后来释然了
修改后如下

1
2
3
4
5
$('.check-all').click(
 function(){
  $("#tbody :checkbox").prop('checked', $(this).is(':checked'));   
 }
);

表面上看起来attr和prop没有什么区别,但是细微地方和不同的浏览器还是会有差异的,这里附带官方的建议,方便留意:

attrprop

Uncaught TypeError: Object [object Object] has no method ‘validate’

一个Jquery的血案 🙁

Uncaught TypeError: Object [object Object] has no method ‘validate’

昨天开荒者现网升级,某位基佬正洋洋自得,我说你给我点点,我看看,果不出所料,在编辑页面显示异常,UE加载不下来,表单验证也挂了……

j1

看报错像是Jquery的$冲突,这里解释一下:
jQuery 使用 $ 符号作为 jQuery 的简写,

其他一些 JavaScript 框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写(就像 jQuery),如果您在用的两种不同的框架正在使用相同的简写符号,有可能导致脚本停止运行。

正因为如此,JQuery采取了noConflict() 方法。

eg:

noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。

例如

$.noConflict();
jQuery(document).ready(function(){
jQuery(“button”).click(function(){
jQuery(“p”).text(“jQuery 仍在运行!”);
});
});

也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量。

例如

var jq = $.noConflict();
jq(document).ready(function(){
jq(“button”).click(function(){
jq(“p”).text(“jQuery 仍在运行!”);
});
});

如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。

例如

$.noConflict();
jQuery(document).ready(function($){
$(“button”).click(function(){
$(“p”).text(“jQuery 仍在运行!”);
});
});

那么很容易就可以在页面排除了这个问题,但是并不是解决一个页面就会搞定的,svn 被还原到上一个版本,没有这个异常,那么开始比对

结果在freme文件夹下发现header.jsp被某位小朋友添加了Jquery的引用-.-那么在资源文件再次include到这个页面的时候造成了冲突,导致

$失效,但是在页面view-source的时候看到<script src=”/style/js/jquery-1.8.3.min.js” type=”text/javascript”></script>

只有一个显示,真是没想到。

删除header.jsp的Jquery引用,问题解决。

大家以后引以为戒……

利用jquery互换select下拉框的值

今天一个站有用户提议弄个左右下拉框互换的功能,这样可以提高用户体验度,之前也考虑过最近加上,但是事情比较多,所以弄了个简单的jquery来实现,功能够用即可,至于网站剩下的完善,我将继续下去:)
需求:页面有两个下拉框,有时候需要左右互换一下,这样可以方便
实现:利用jquery真的很简单

function swap(){
var temp = $(“#fromlanguage option:selected”).val();
var temp1 = $(“#tolanguage option:selected”).val();
$(“#fromlanguage”).attr(‘value’,temp1);
$(“#tolanguage”).attr(‘value’,temp);
}

说明:temp为第一个下拉框当前的选取值,同理temp1为第二个下拉框的选取值,
剩下的就是将第一和二的值互换一下,实现的比较简单,但是目的达到了。
嗯,完了,撒花,鼓掌,呵呵~

Jquery映射下拉框和单选框

不再Struts2的框架下下拉框和单选框的映射是非常复杂和麻烦的,这里一个组件,由Vososo站长开发调试,现在免费发布给大家使用,欢迎反馈。
render.js 代码如下:

/*映射 ERadio 脚本
用法:
1、在页面reload的时候配置
jQuery(function(){
	renderERadio();
});
2、在页面中配置
<span>{"val":"男","name":"student","vals":["女","男"]}</span>
<span>{"val":"-1","name":"teacher","vals":["1","0","-1"],"radioTxts":["有","无","其他"]}</span>
即可在<span></span>内部生成
<input type="radio" .... /> radioTxt

配置参数:
val : radio 的值
name : radio 的 name 属性
vals : radio 数组值
radioTxts : 可选参数 ,默认等于 vals
*/
function renderERadio(){
	jQuery.each(jQuery(".eRadio"),function(){
		vv =  jQuery.parseJSON(jQuery(this).html());
		if(vv.radioTxts==undefined){
			vv.radioTxts=vv.vals;
		}else if(vv.vals==undefined){
			vv.vals=vv.radioTxts;
		}
		var html = "";
		jQuery.each(vv.vals,function(i,n){
			if(vv.val==vv.vals[i]){
				html += '<input type="radio" name="'+vv.name+'" value="'+vv.vals[i]+'" checked="true" />'+vv.radioTxts[i];
			}else{
				html += '<input type="radio" name="'+vv.name+'" value="'+vv.vals[i]+'" />'+vv.radioTxts[i];
			}
		});
		jQuery(this).html(html);
	});
}
/*映射 eSelect 脚本
用法通 eRadio:
1、在页面reload的时候配置
jQuery(function(){
	renderESelect();
});
2、在页面中配置
<span>{"val":"男","name":"student","vals":["女","男"]}</span>
或者
<span>{"val":"-1","name":"teacher","vals":["1","0","-1"],"optionVals":["有","无","其他"]}</span>

即可在<span></span>内部生成
<select name="xxx">..optionVal..</select>

配置参数:
val : select 的值
name : select 的 name 属性
vals : select 的数组值
optionVals : 可选参数 ,默认等于 vals
*/
function renderESelect(){
	jQuery.each(jQuery(".eSelect"),function(){
		vv =  jQuery.parseJSON(jQuery(this).html());
		if(vv.optionVals==undefined){
			vv.optionVals=vv.vals;
		}else if(vv.vals==undefined){
			vv.vals=vv.optionVals;
		}
		var html = '<select name="'+vv.name+'">';
		jQuery.each(vv.vals,function(i,n){
			if(vv.val==vv.vals[i]){
				html += '<option value="'+vv.vals[i]+'" selected="true">'+vv.optionVals[i]+'</option>';
			}else{
				html += '<option value="'+vv.vals[i]+'">'+vv.optionVals[i]+'</option>';
			}
		});
		html += '</select>';
		jQuery(this).html(html);
	});
}

演示demo下载地址

jquery 圆角插件

我们为了页面设计的好看,常常需要一个圆角的div ,这里在jquery中就变得轻松多了,
看看jquery的插件吧——jquery.corner.js

jquery.corner

 

 

一、可用的模式

默认的圆角样式表现round

Round

$(this).corner();

Bevel

$(this).corner(“bevel”);

Notch

$(this).corner(“notch”);

Bite

$(this).corner(“bite”);

Cool

$(this).corner(“cool”);

Sharp

$(this).corner(“sharp”);

Slide

$(this).corner(“slide”);

Jut

$(this).corner(“jut”);

Curl

$(this).corner(“curl”);

Tear

$(this).corner(“tear”);

Fray

$(this).corner(“fray”);

Wicked

$(this).corner(“wicked”);

Sculpt

$(this).corner(“sculpt”);

Long

$(this).corner(“long”);

Dog Ear

$(this).corner(“dog”);

Dog2

$(this).corner(“dog2”);

Dog3

$(this).corner(“dog3”);

使用top, bottom, left, right, tl, tr, bl, br 指定上下左右到底哪个角有样式

Top Bevel

$(this).corner(“bevel top”);

Top-Left Bite

$(this).corner(“bite tl”);

Round Bottom

$(this).corner(“bottom”);

Left Notch

$(this).corner(“notch left”);

Top-Right Dog Ear

$(this).corner(“dog tr”);

Top-Left, Bottom-Right Cool

$(this).corner(“cool tl br”);