登录  /  注册
首页 > web前端 > js教程 > 正文
JQquery的一些使用心得分享_jquery
php中文网
发布: 2016-05-16 17:51:22
原创
809人浏览过
我昨天的成果--常驻右下角的消息提示
复制代码 代码如下:

var msgClass = function(){
this.init = function(){
var msgDiv = "" +
"
" +
"
" +
"
    " +
    "
" +
"
" +
"
";
$("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 = "
  • + json[i].TITLE
    + "\">"
    + title
    + "
  • ";
    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添加一个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对象了,接下来的事情,自己做吧!
    相关标签:
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

     | 本站CDN由 数掘科技 提供

    登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学