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 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
YUI模块开发原理详解
Nov 18 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
JavaScript常见继承模式实例小结
Jan 11 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 正则表达式小结
2009/08/31 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
PHP中cookie知识点学习
2018/05/06 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
javascript new fun的执行过程
2010/08/05 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jquery实现的网页自动播放声音
2014/04/30 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
NumPy 数组使用大全
2019/04/25 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
介绍一下常见的木马种类
2014/11/15 面试题
opencv实现图像几何变换
2021/03/24 Python
大学生自荐信
2013/12/11 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
信访维稳工作汇报
2014/10/27 职场文书
新员工考核评语
2014/12/31 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
Nginx反向代理配置的全过程记录
2021/06/22 Servers