写在前面:相关方法在已上线项目中实际使用,部分方法摘录自其它博客。
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. onkeypress="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)); }