1.常见问题 (以下问题基于JQuery1.5、HTML4、css2)
如果从struts中传过来的是null,在js中既等于undefined又等于null,且,比较的true或false的时候要打括号,不然结果不对。
至于是为什么是这样,我也不清楚。例如:
alert("ruleId--undefined---"+ (ruleId == undefined));//输出true
alert("ruleId--null----"+ (ruleId == null));//输出true
只有值等于""或者undefined的时候,传到action才会被struts2把java中的各中数据的包装类(如Integer、Long)设置为null
声明一个js变量且不赋值,那么此时它即是是null又是undefined。
如果文本框中没有填入值,用JQuery获取的值为""
如果document Object的某个属性没有值,用JQuery的attr方法获得的就是""
alert("$(#sssssss) 2== " + $("#sssssss"));//即使id="sssssss"的元素不存在,也是Object,而不是null
var sendData = {};//此时sendData == Object,但sendData.length == undefined
2.//JQuery添加聚焦和失焦的方式
$("#limitStuCount").hover(function(){
setCheckbox($("#limitStuCountRadio"),"checked");
},function(){
if($(this).val() == "") setCheckbox($("#limitStuCountRadio"),"");
});
Juery中聚焦事件:
$("#id").focus(function(){
});
失焦事件:
$("#id").blur(function(){
});
但是文本改变事件却不能这样写:
$("#id").change(function(){
});
文本改变事件可以这样写,propertychange是属性改变时触发事件
$("#id").bind("propertychange",function() {
});
3.js数组作为data传到Action,action接收不到或者说struts不知道怎么处理传来的数组。
有的人说,那直接把js数组作为data传到Action不是很方便?答案是不能这样传,这样action接收不到或者说struts不知道怎么处理传来的数组。
只能通过集合的形式传数组
数字集合:data:{
"termSchoolCourseIdList[0]": 1,
"termSchoolCourseIdList[1]": 2
}
对象集合:data:{
lstStu[0].num:"1",lstStu[0].name:"xy1",
lstStu[1].num:"2",lstStu[1].name:"xy2",
lstStu[2].num:"3",lstStu[0].name:"xy3"
}
4.在引用的js、jsp、css、html等文件的地址后面加上参数的作用:
第一、脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示区别。
第二、客户端会缓存这些css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏览器就会重新下载新的js或css文件 ,刷性缓存的作用。大家可能有时候发现修改了样式或者js,刷新的时候不变,就是客户端缓存了css或者js文件,因此加上参数还是有好处的!
第二种情况最多,也可能两种同时存在。
5.JQuery的each
$.each(data.datas,function(i,item){
if(item.isCuur == 1 ){
currentTermId=item.id;
}
$("#select_termId").append("<option value='"+item.id+"' >"+item.termName+"</option>");
});
$(".schoolElectiveCourseRow:checked").each(function(index,domEle){//此时的domEle是document 对象而不是JQuery对象
alert("index == " + index);
sendData["termSchoolCourseIds["+ index +"]"] = $(this).val();
});
在JQuery each循环中,return只是退出循环,并不是让整个执行过程结束。
6.在JQuery的$.ajax();
在JQuery的$.ajax();中
return true或false,只是给ajax()这个方法一个返回值并会执行ajax()后面的代码,并不是给ajax()上面的function返回一个值。
7.阻止元素的默认行为,
如下:
//禁用删除申请按钮,并设置为灰色
var aObj = $("#delete"+ sendData["termSchoolCourseDto.ids["+ i +"]"]);
aObj.attr("class","grayFont");
aObj.click(function (domEle){
domEle.preventDefault();//阻止元素的默认行为,这里是取消a标签的href事件
});
8.浏览器兼容问题:
8.1.在I8下面,如果input标签设置为只读的,按键盘上的“退格键”就会使浏览器直接返回上一个浏览页面
8.2.IE8不支持$("#addCourseTr").html(),可以用<script id="addCourseTr" type="text/x-jquery-tmpl"></script> 中的tmpl(),如:$("#addCourseTr").tmpl()
Jquery.tmpl.min.js:
8.3.在IE8中,通过live绑定的change事件只有在单击页面的某个地方后才会触发,可以把$("#importInputFile").live("change",function(){}); 改成→ $("#importInputFile").change(function(){});
8.4.在I8下面,如果input标签设置为只读的,按键盘上的“退格键”就会使浏览器直接返回上一个浏览页面
8.5在IE8中,如果input的value没有设置默认值(即value=””或value=”xxx”),那么用纯js的数组获取其中元素的value值的时候,就会报错:SCRIPT5007: 无法获取未定义或 null 引用的属性“value”,如:
①var classRooms = $( addCourseTBody.find("input[name='classRoom']") );
var classRoom = $.trim( classRoomObj.value );
if(isNotEmpty(classRoom) && classRoom.length >100){
alert("教室长度不能超过100个字符!");
classRoomObj.focus();
return;
}
①这种方式会报错,classRoomObj.value》SCRIPT5007: 无法获取未定义或 null 引用的属性“value”
②var classRooms = $( addCourseTBody.find("input[name='classRoom']") );
var classRoomObj = $(classRooms[i]);
var classRoom = $.trim( classRoomObj.val() );
if(isNotEmpty(classRoom) && classRoom.length >100){
alert("教室长度不能超过100个字符!");
classRoomObj.focus();
return;
}//② 这种用JQuery对象获取value的方式就没问题
9.JQuery绑定change事件问题
通过JQuery绑定<input id="importInputFile" type="file"/>的change事件($().change)只能被触发一次,,,不管上传失败还是成功,(谷歌、火狐也一样)
还是只能在标签上绑定了:<input id="importFile" οnchange="javascript:$('#importFileName').val(this.value)"
10. css中的min-height属性只能通过js对象赋值
$(".content_center")[0].style.minHeight=Number(dataListHeight.substring(0,dataListHeight.length-2)) + 200+"px";
11.js中的字符串数字比较问题
在js中,如果“两个字符串数字(例①)”进行比较,会出现问题,比较的并不是数字值,而是ascii 码,只能先转成数字再比较。但如果是一个数字和一个字符串数字比较,就没问题。例如:
①"100" < "9" == true;
②Number("100") < Number("9") == false。
③100< "9" == false。
详情:http://www.cnblogs.com/icerainsoft/p/3448161.html
12.JQuery 选择器中“>”和“ ”
$(“#xx > xxx”) 表示查找#xx下一个等级里面的xxx元素,$(“#xx xxx”)是查找#xx里面所有的xxx元素
13. JQuery 的attr和prop区别和用途
在JQuery1.6以上的版本中的,prop无法设置<img>的src属性,attr可以。
(下面的资料来源于:http://www.jb51.net/article/41170.htm,尊重原创。)
jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。
大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么,什么时候使用attr(),什么时候使用prop()?
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点!
以下是官方建议attr(),prop()的使用:
Attribute/Property | .attr() | .prop() |
accesskey | √ |
|
align | √ |
|
async | √ | √ |
autofocus | √ | √ |
checked | √ | √ |
class | √ |
|
contenteditable | √ |
|
draggable | √ |
|
href | √ |
|
id | √ |
|
label | √ |
|
location ( i.e. window.location ) | √ | √ |
multiple | √ | √ |
readOnly | √ | √ |
rel | √ |
|
selected | √ | √ |
src | √ |
|
tabindex | √ |
|
title | √ |
|
type | √ |
|
width ( if needed over .width() ) | √ |
|
14. 关于js中if的表达式
14.1. if的表达式如果是字符串,空字符串(””)为false,字符串长度大于0为true。
14.2. if的表达式如果是数字,大于或小于 0为true,等于0为false。
var _recruitId = 0;
if(_recruitId){//等于false
alert(true);
}else{
alert(false);
}
14.3. if的表达式如果为null或者undefined为false。
14.4. (“” == 0);//该表达式的结果为true。
14.5. 拼接字符串后在去拼接一个表达式的布尔值时,这个表达式要用括号括起来。
例如:
alert("ruleId--undefined---"+ (ruleId == undefined));//输出true,比较的对象是ruleId和 undefined;如果不加括号,alert("ruleId--undefined---"+ ruleId == undefined); 比较的就是"ruleId--undefined---"+ ruleId 和 undefined
14.6. Js中的布尔值: “true” != true ,但“true” == “true”,而且prop设置checked、disabled等布尔类型的值时,第二个参数必须为布尔值,而不是“布尔值的字符串”(即必须是obj.prop(“checked”,true),而不是obj.prop(“checked”,”true”))。
15. 关于js中的函数传参
如果函数有3个参数,你只传前面两个,这样是不会报错的,但第三个参数就为undefined。
16. action的数据转换问题
16.1. No result defined for action xxx and result error 一般是因为json数据转换错误,例如:service层的对象也被转成json格式的返回到AJax就会报这个错。
16.2. 如果从struts中传过来的是null,在js中既等于undefined又等于null。
16.3. 只有值等于""或者undefined的时候,传到action才会被struts2把java中的各中数据的包装类(如Integer、Long)设置为null。
17. Js获取<img />的实际宽高的方法:
bigImgObj = $(".bigImg");
bigImgObj.onload = function(){
//获得包含图片实际宽和高的数组
widthAndHeightArray = getImgNaturalDimensions(bigImgObj);
console.log(widthAndHeightArray[0] +" , "+ widthAndHeightArray[1]);
};
function getImgNaturalDimensions($imgObj) {
var nWidth, nHeight,
imgDomObj = $imgObj[0];//把JQuery对象转成DOM对象
if (imgDomObj.naturalWidth) { // 现代浏览器
nWidth = imgDomObj.naturalWidth;
nHeight = imgDomObj.naturalHeight;
} else { // IE6/7/8
var image = new Image();
image.src = imgDomObj.src;
nWidth = image.width;
nHeight = image.height;
}
return [nWidth, nHeight];
}