笔记整理-JQuery心得

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

猜你喜欢

转载自blog.csdn.net/qq_34407542/article/details/80678327
今日推荐