html、js、jsp开发记录

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" onchange="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];

}