写在前面:相关方法在已上线项目中实际使用,部分方法摘录自其它博客。
1、JQuery选择器选中的对象为DOM对象,如果定义一个var box = 当前选中对象(比如在each中用this关键字),这个box可以直接使用DOM拥有的属性,比如form中的input的value,可以用box.value,name可以用box.name。为了避免在多个each中的this混用。可以在另一个each开始前,定义一个this为box之类的。
2、对于要向后台传对象的,可以直接采用Jquery中的serialize()方法,不过,必须是form中的元素,且该form中要序列化的DOM都有name,name为对象 . 属性的方式命名,可以方便Struts2的应用。
3、页面执行停一定时间:
function sleep(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime) {
return;
}
}
}
4、JQuery判断元素是否存在:
if ( $("#someID").length > 0 ) {
$("#someID").text("hi");
}
如果不采用JQuery,可以用:
obj = document.getElementById("someID");
if (obj){
obj.innerText("hi");
}
PS:jQuery对象永远都有返回值。
5、JQuery.Validate的控件可以自定义校验规则,可以查看相关文档使用。
6、<s:property>标签的escape属性默认值为true,即不解析html代码,直接将其输出。也可以写作:
<s:property value='notice.msg' escapeHtml='false' escapeJavaScript='true'/>
7、ueditor插件的使用,要注意:
<textarea id="editor" name="notice.msg"
maxlength=4000><s:property value='notice.msg'/></textarea>
<script type="text/javascript">
UE.getEditor('editor', {
autoFloatEnabled: true,
initialFrameWidth: '100%',
initialFrameHeight: 350,
});
</script>
需要直接将JS写在引入位置下方。其他赋值等设置可以查看相关文档。
8、IE中,showModalDialog会有不重新加载的问题,可以加随机串来刷新模态对话框,否则,IE很又可能会读取临时文件夹中的数据信息,造成误解。
9、取select的文本信息:
var ideaName = $('#ideaField').find('option:selected').text();
10、页面的dom的ID唯一的时候,可以用ID直接调用dom的属性和方法:
<div id="test"></div>
<script type="text/javascript">
test.style = "";
test.click();
</script>
11、each(JQuery中的循环)中,要跳出循环,采用return false等同于break,如果采用return true,等同于 continue。
12、<form>在IE中,经过验证各项内容后,调用提交,产生的重复提交问题,可以采用如下方法:
$("#form").submit();
return false;
13、easyUI的combogrid的动态查询功能,输入中文查询有异常,可以将delay设置大一些。
14、有引用JQuery的情况下,判断一个 var box = {} ,可以采用:$.isEmptyObject(box)
原型如下:
function isEmptyObject(e) {
var t;
for (t in e)
return !1;
return !0
}
即为:为空返回true,不为空返回false。此问题,一般是用于ajax的返回值设定为json时,出现取值与预期不符的情况。
15、在JS中,进入方法时,会将方法中带有var 的变量全部初始化为undefined。此时全局变量可以采用window.该变量名的方式进行赋值等操作,即为全局变量将会附在window上。
16、需要注意onchange() 事件实际是在onbulr()之后发生的,所以部分的赋值操作可能无法激活onchange()事件,需要通过其他方式调用onchange()事件的关联函数。
17、如果采用数组的方式不便于动态赋值,可以改为基本的{}对象,对{}赋值,在ajax中也很方便使用,可以直接放在data的位置,其本质是
Key/value的map。
18、如果有需要在进入页面就调用的事件,比如select的onchange事件,可以采用如下方式:
var obj = document.getElementById("xxx");
if (obj.fireEvent) {
// 判断是否有IE特有的fireEvent
obj.fireEvent("onchange");
} else {
// 采用chrome和Firefox可以使用的事件调用
var e = document.createEvent('HTMLEvents');
e.initEvent("change", false, false);
obj.dispatchEvent(e);
}
需要注意此方法要在dom加载完成后调用,可以在页面的底部,body和html标签结尾处加此方法。
19、在函数中,有each循环的,无法直接结束函数,可以使用try-catch的方法:
try {
$(".setColor").each(function() {
$(this).focus();
throw "请修改此金额,此金额超出余额。";
return false;
});
} catch (e) {
alert(e);
return;
}
20、还有一种each的用法是:
$.each(selectIndexs, function(k, v) {
if ($("#adjuetSel_" + name + " option").length > 0) {
$("#adjuetSel_" + name + " option").get(v).remove();
}
});
21、根据20可以看出,在清除select的option的时候,可以采用如20中的写法:
$("#adjuetSel option").get(option的index).remove();
22、根据21,可以知道获取select的option的索引可以采用:
var selectIndex = $("#adjuetSel").get(0).selectedIndex;
这里的get(0)是获取到整个select中的首项,也就是option,同理,可以写作:
$("#adjuetSel option").selectedIndex;
23、一个好用的将form中带有name的form元素格式为json对象的方法:
//将表单数据序列化成json对象
$.fn.serializeJSON = function() {
var jsonObj = {};
var a = this.serializeArray();
$.each(a, function() {
if (jsonObj[this.name]) {
if (!jsonObj[this.name].push) {
jsonObj[this.name] = [ jsonObj[this.name] ];
}
jsonObj[this.name].push($.trim(this.value) || '');
} else {
jsonObj[this.name] = $.trim(this.value) || '';
}
});
return jsonObj;
}
该方法可以方便使用在ajax中的data位置。
24、键盘点击事件要兼容火狐浏览器,需要在激发事件前,为事件函数加入参数:event,并进行判断,示例如下:
<script language="javascript" type="text/javascript">
function inputNum(evt){
evt = (evt) ? evt : ((window.event) ? window.event : "");
var k = evt.keyCode?evt.keyCode:evt.which;
if((k<=57) && (k>=48)){
return true;
}else{
alert("只能输入数字!");
return false;
}
}
</script>
<input type="text" onKeyPress="return inputNum(event);" >
需要注意的地方:
1. 取得keyBoardEvent对象
2. 取得keyBoardEvent对象的键值
3. οnkeypress="myKeyPress(event)" 函数需要一个参数,并且参数的名称为event。
25、在使用JS的Number(任意数字),进行计算时,不要加toFixed(任意数字),该使用方式,在tomcat6中解析后,浏览器无法正确计算。
26、JS中浮点数的四则运算:
//----------------------------JS精确计算浮点数方法
// 加法
function add(a, b) {
var c, d, e;
try {
c = a.toString().split(".")[1].length;
} catch (f) {
c = 0;
}
try {
d = b.toString().split(".")[1].length;
} catch (f) {
d = 0;
}
return e = Math.pow(10, Math.max(c, d)), (mul(a, e) + mul(b, e)) / e;
}
// 减法
function sub(a, b) {
var c, d, e;
try {
c = a.toString().split(".")[1].length;
} catch (f) {
c = 0;
}
try {
d = b.toString().split(".")[1].length;
} catch (f) {
d = 0;
}
return e = Math.pow(10, Math.max(c, d)), (mul(a, e) - mul(b, e)) / e;
}
// 乘法
function mul(a, b) {
var c = 0,
d = a.toString(),
e = b.toString();
try {
c += d.split(".")[1].length;
} catch (f) {}
try {
c += e.split(".")[1].length;
} catch (f) {}
return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
}
// 除法
function div(a, b) {
var c, d, e = 0,3
f = 0;
try {
e = a.toString().split(".")[1].length;
} catch (g) {}
try {
f = b.toString().split(".")[1].length;
} catch (g) {}
return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), mul(c / d, Math.pow(10, f - e));
}