JQquery的一些使用心得分享

 更新时间:2012年08月01日 23:09:28   作者:  
我原以为我对jQuery的使用还过得去,可是经过昨天的工作,我才发现,原来,我才算是刚刚入门。好吧。下面,我简单讲一下,我昨天遇到的问题以及解决方案
我昨天的成果--常驻右下角的消息提示
复制代码 代码如下:

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对象了,接下来的事情,自己做吧!

相关文章

  • 读jQuery之十二 删除事件核心方法

    读jQuery之十二 删除事件核心方法

    使用jQuery删除事件(或称解除事件绑定)有三个函数:unbind、die和undelegate。这三个方法都依赖于未公开的jQuery.event.remove(后续使用.remove简写)。此为删除事件的核心方法。
    2011-07-07
  • jQuery实现表格的数据拖拽

    jQuery实现表格的数据拖拽

    这篇文章主要为大家详细介绍了jQuery实现表格的数据拖拽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • jquery遍历json对象集合详解

    jquery遍历json对象集合详解

    这篇文章主要为大家详细介绍了jquery遍历json对象集合、jQuery 遍历JSON对象、jquery中遍历读取json串中的对象三种情况,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 基于jquery的下拉框改变动态添加和删除表格实现代码

    基于jquery的下拉框改变动态添加和删除表格实现代码

    以前很少用jquery,现在工作需要,用上了,感觉真的很方便!不用再像以前那样写那么多多余的Js了!看来得在jquery上花点功夫呢!
    2011-03-03
  • jquery+php随机生成红包金额数量代码分享

    jquery+php随机生成红包金额数量代码分享

    这篇文章主要介绍了jquery+php随机生成红包金额数量实现代码,红包数量与金钱可以自己设定,很实用的代码,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • 在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法

    在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法

    easyUI是jquery的一个插件,是民间的插件,easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码、html代码和Css样式,但是很容易出现jquery.easyui.min.js函数库问题,小编教大家如何解决问题,需要的朋友可以参考下
    2015-09-09
  • jquery移除button的inline onclick事件(已测试及兼容浏览器)

    jquery移除button的inline onclick事件(已测试及兼容浏览器)

    这种方法在Google Chrome下正常工作,但是在IE的兼容模式下会马上调用reclick方法,这不是我们想要的效果;为了解决这个问题,我们可以换个思路,就是延迟绑定click事件
    2013-01-01
  • jQuery仿写百度百科的目录树

    jQuery仿写百度百科的目录树

    这篇文章主要介绍了jQuery仿写百度百科的目录树医保词条样式,点击右侧的目录树,左侧跳转到指定的锚点位置,滚动鼠标,游标跟随一起滚动至响应链接位置,具体实现思路大家参考下本文
    2017-01-01
  • 基于CSS3和jQuery实现跟随鼠标方位的Hover特效

    基于CSS3和jQuery实现跟随鼠标方位的Hover特效

    这篇文章主要介绍了基于CSS3和jQuery实现跟随鼠标方位的Hover特效的相关资料,需要的朋友可以参考下
    2016-07-07
  • jquery validate表单验证的基本用法入门

    jquery validate表单验证的基本用法入门

    这篇文章主要为大家介绍了jquery validate表单验证的基本用法入门,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论