JQquery的一些使用心得分享

我昨天的成果--常驻右下角的消息提示

var msgClass = function(){ 
this.init = function(){ 
var msgDiv = "<div id = \"msg_show\" style=\"position: fixed; bottom: 0px; right: 0px; _position: absolute; display: none;\">" + 
"<a id = \"msg_show_a\" href=\"javascript:void(0);\">" + 
"<div style=\"float: left; width: 200px; height: 30px; font-size: 12px; color: #f00; line-height: 30px; text-align: left; position: relative; border: 1px #ccc solid; background-color: #eff;\">" + 
"<img src=\"/common/images/xx.gif\" width=\"11\" height=\"11\" style=\"float: left; margin: 9px; display: inline;\" />" + 
"您有新的消息，请注意查收！" + 
"</div>" + 
" </a>" + 
"</div>" + 
"<div id=\"msg_block\" style=\"position: fixed; bottom: 30px; right: 0px; _position: absolute; display: none;\">" + 
"<div style=\"float: left; width: 200px; height: 140px; position: relative; border: 1px #ccc solid; background-color: #eff; overflow-x:hidden; overflow-y:scroll\">" + 
"<ul class=\"xxx\" id=\"msg_content\">" + 
"</ul>" + 
"</div>" + 
"</div>"; 
$("body", window.parent.document).append(msgDiv) 
$("#msg_show_a", window.parent.document).click(function(){msg_click()}); 
} 
var msg_click = function(){ 
var msgDiv = window.parent.document.getElementById("msg_block"); 
if ("none" == msgDiv.style.display) { 
msgDiv.style.display = "block"; 
} else { 
msgDiv.style.display = "none"; 
} 
} 
this.getMessage = function() { 
$.ajax( { 
tyep : "POST", 
url : "/msg/getPromptMsgInfo.action", 
success : function(msg) { 
var json = eval(msg); 
var num = json.length; 
if (num != 0) { 
$("#msg_show",window.parent.document).css("display", ""); 
$("#msg_content", window.parent.document).empty(); 
for ( var i = 0; i < num; i++) { 
var title = json[i].TITLE.substr(0, 12); 
var sub = "<li title=\"" 
+ json[i].TITLE 
+ "\"><a id =\"a_"+i+"\" href=\"javascript:void(0)\" >" 
+ title 
+ "</a></li>"; 
var MSG_ID=json[i].MSG_ID; 
var RELATION_ID=json[i].RELATION_ID; 
$("#msg_content", window.parent.document).append(sub); 
$("#a_"+i, window.parent.document).click("{'MSGID':'"+MSG_ID+"','RELATIONID':'"+RELATION_ID+"'}", 
function(e){ 
msgSelected(e.data); 
}); 
} 
}else{ 
$("#msg_show", window.parent.document).css("display", "none"); 
} 
} 
}); 
} 
var msgSelected = function(data) { 
var href = ""; 
var json; 
eval("json="+data); 
var msgId = json.MSGID; 
var relationId = json.RELATIONID; 
/*start----write your logic*/ 
if (1 == relationId) { 
href = "/usercenter/showWaitDiagnose.action?isOnClick=3"; 
} 
//........ 
/*end----*/ 
$.ajax( { 
type : "post", 
url : "/msg/updateMsgStatue.action", 
data : "msgId=" + msgId, 
success : function() { 
parent.window.location.href = href; 
} 
}); 
} 
} 
function getMsg(){ 
new msgClass().getMessage(); 
} 
$(document).ready(function(){ 
var msg = new msgClass(); 
msg.init(); 
msg.getMessage(); 
setInterval("getMsg()", 3000); 
});

好吧，首先我得承认，我原以为我对jQuery的使用还过得去，可是经过昨天的工作，我才发现，原来，我才算是刚刚入门。好吧。下面，我简单讲一下，我昨天遇到的问题以及解决方案。

1.从iframe中获取父窗口中的元素

例如：获取父窗口中的body，以便可以动态的插入一些元素： $("body", window.parent.document)

　获取父窗口中主键为 identity 的元素 ： $("#identity", window.parent.document)

总结：$(selector, 你想要获取的窗口的document对象)，以上！

2.动态添加元素事件

好吧。我先给出两种写法，你来想想那个是正确的。假设有一个JS方法： function fun(){....} 有html：<div id = "div1"></div> 为这个div添加一个onclick事件

2.1 $("#div1").click(fun());

2.2 $("#div1").click(function(){fun()});

好啦，到底是2.1对还是2.2呢？

想到了没有？正确的答案应该是2.2.不信的可以试一试。如果用2.1的方法，效果跟运行fun()这个方法是一样的。

3.传参数的问题

讲到了方法，就要讲一下参数的问题。假设我们有方法 function fun(a, b){....} 现在我在另一个方法里面调用2.2方法为div添加一个事件。

例如：

function fun1(){ 



for(var i = 0; i < NUM; i++){ 





var a = i; 





var b = i+1; 




$("#div1").click(function(){ 





fun(a,b); 




}); 



} 


}

类似上面的例子，出现的问题就是：在fun方法中获取到的a和b的值跟你实际不一样。解决方法就是调用click的另一个方法。

$("#div1").click(msg,function(e){fun(e.data)};

其中msg是一个string类型的值.最简单的办法是把要传送的参数写成一个json形式。

这里的e你可能会以为是你要传送的数据。其实不然，这里的e是把一个click事件的对象，里面包含了我们要传送的数据。你可以通过firebug的debug功能看到它到底包含了什么。

可能你对e.data更加好奇.其实e.data就是我们要传送的数据msg。你可以通过firebug看到。

最后在fun函数中 调用：

function fun(data) 


{ 



var json; 



eval("json="+data); 



..... 


}

这样就可以操作json对象了，接下来的事情，自己做吧！