提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

JQquery的一些使用心得分享

使用 分享 一些 心得
2023-06-13 09:14:34 时间
我昨天的成果--常驻右下角的消息提示
复制代码代码如下:

varmsgClass=function(){
this.init=function(){
varmsgDiv="<divid=\"msg_show\"style=\"position:fixed;bottom:0px;right:0px;_position:absolute;display:none;\">"+
"<aid=\"msg_show_a\"href=\"javascript:void(0);\">"+
"<divstyle=\"float:left;width:200px;height:30px;font-size:12px;color:#f00;line-height:30px;text-align:left;position:relative;border:1px#cccsolid;background-color:#eff;\">"+
"<imgsrc=\"/common/images/xx.gif\"width=\"11\"height=\"11\"style=\"float:left;margin:9px;display:inline;\"/>"+
"您有新的消息，请注意查收！"+
"</div>"+
"</a>"+
"</div>"+
"<divid=\"msg_block\"style=\"position:fixed;bottom:30px;right:0px;_position:absolute;display:none;\">"+
"<divstyle=\"float:left;width:200px;height:140px;position:relative;border:1px#cccsolid;background-color:#eff;overflow-x:hidden;overflow-y:scroll\">"+
"<ulclass=\"xxx\"id=\"msg_content\">"+
"</ul>"+
"</div>"+
"</div>";
$("body",window.parent.document).append(msgDiv)
$("#msg_show_a",window.parent.document).click(function(){msg_click()});
}
varmsg_click=function(){
varmsgDiv=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){
varjson=eval(msg);
varnum=json.length;
if(num!=0){
$("#msg_show",window.parent.document).css("display","");
$("#msg_content",window.parent.document).empty();
for(vari=0;i<num;i++){
vartitle=json[i].TITLE.substr(0,12);
varsub="<lititle=\""
+json[i].TITLE
+"\"><aid=\"a_"+i+"\"href=\"javascript:void(0)\">"
+title
+"</a></li>";
varMSG_ID=json[i].MSG_ID;
varRELATION_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");
}
}
});
}
varmsgSelected=function(data){
varhref="";
varjson;
eval("json="+data);
varmsgId=json.MSGID;
varrelationId=json.RELATIONID;
/*start----writeyourlogic*/
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;
}
});
}
}
functiongetMsg(){
newmsgClass().getMessage();
}
$(document).ready(function(){
varmsg=newmsgClass();
msg.init();
msg.getMessage();
setInterval("getMsg()",3000);
});

好吧，首先我得承认，我原以为我对jQuery的使用还过得去，可是经过昨天的工作，我才发现，原来，我才算是刚刚入门。好吧。下面，我简单讲一下，我昨天遇到的问题以及解决方案。
　　1.从iframe中获取父窗口中的元素
　　　　例如：获取父窗口中的body，以便可以动态的插入一些元素：$("body",window.parent.document)
　　　　　　　获取父窗口中主键为identity的元素：$("#identity",window.parent.document)
　　　　总结：$(selector,你想要获取的窗口的document对象)，以上！
　　2.动态添加元素事件
　　　　好吧。我先给出两种写法，你来想想那个是正确的。假设有一个JS方法：functionfun(){....}有html：<divid="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.传参数的问题
　　　　讲到了方法，就要讲一下参数的问题。假设我们有方法functionfun(a,b){....}现在我在另一个方法里面调用2.2方法为div添加一个事件。
　　　　例如：
复制代码代码如下:

　　　　functionfun1(){
　　　　　　for(vari=0;i<NUM;i++){
　　　　　　　　　　vara=i;
　　　　　　　　　　varb=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函数中调用：
复制代码代码如下:
　　　　functionfun(data)
　　　　{
　　　　　　varjson;
　　　　　　eval("json="+data);
　　　　　　.....
　　　　}

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

相关文章