JQquery的一些使用心得分享


Posted in Javascript onAugust 01, 2012

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

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对象了,接下来的事情,自己做吧!
Javascript 相关文章推荐
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
react MPA 多页配置详解
Oct 18 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 #Javascript
别了 JavaScript中的isXX系列
Aug 01 #Javascript
JS判断元素为数字的奇异写法分享
Aug 01 #Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 #Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 #Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 #Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 #Javascript
You might like
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Python实现微信表情包炸群功能
2021/01/28 Python
综合实践教学反思
2014/01/31 职场文书
网页美工求职信范文
2014/04/17 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
村委会贫困证明范文
2014/09/21 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
公证处委托书
2015/01/28 职场文书
门店店长岗位职责
2015/04/14 职场文书
高中运动会前导词
2015/07/20 职场文书
小学记事作文之200字
2019/08/06 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android