Some experiences of JQquery

My results yesterday-messages in the bottom right corner Copy codeThe Code is as follows: 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; \ "/>" +
"You have new messages. Please check them! "+
"</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", callback parent.doc ument). append (msgDiv)
$ ("# Msg_show_a", specify parameter parent.doc ument). click (function () {msg_click ()});
}
Var msg_click = function (){
Var msgDiv = callback parent.doc ument. 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", specify partition parent.document).css ("display ","");
$ ("# Msg_content", response parent.doc ument). 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", using your parent.doc ument). append (sub );
$ ("# A _" + I, too many parent.doc ument ). click ("{'msgid': '" + MSG_ID + "', 'relationid': '" + RELATION_ID + "'}",
Function (e ){
MsgSelected (e. data );
});
}
} Else {
$ ("# Msg_show", callback 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 );
});

Well, first of all, I have to admit that I thought I was still able to use jQuery, but after work yesterday, I found that I was just getting started. Okay. Next, let me briefly explain the problems I encountered yesterday and the solutions.
1. Obtain the elements in the parent window from iframe
For example, you can obtain the body in the parent window so that you can dynamically insert some elements: $ ("body", containing multiple parent.doc ument)
Get the elements whose primary key is identity in the parent window: $ ("# identity", using primary keys parent.doc ument)
Summary: $ (selector, the document Object of the window you want to obtain), above!
2. dynamically add element events
Okay. I will give you two ways to write the code first. You can think about the correct one. Suppose there is a JS method: function fun () {...} has html: <div id = "div1"> </div> to add an onclick event for this div
2.1 $ ("# div1"). click (fun ());
2.2 $ ("# div1"). click (function () {fun ()});
Okay. Is it 2.1 to 2.2?
Did you think of it? The correct answer should be 2. 2. If you do not believe it, try it. If you use the 2.1 method, the effect is the same as running fun.
3. parameter passing problems
When talking about the method, we need to talk about the parameter issue. Suppose we have the function fun (a, B) {...} method. Now I am calling the 2.2 Method in another method to add an event to the div.
For example:Copy codeThe Code is as follows: function fun1 (){
For (var I = 0; I <NUM; I ++ ){
Var a = I;
Var B = I + 1;
$ ("# Div1"). click (function (){
Fun (a, B );
});
}
}

Similar to the above example, The problem occurs: The values of a and B obtained in the fun method are different from those obtained in reality. The solution is to call the click method.
$ ("# Div1"). click (msg, function (e) {fun (e. data )};
Msg is a value of the string type. The simplest method is to write the parameter to be transmitted as a json format.
Here, you may think it is the data you want to transmit. Otherwise, e here refers to the object of a click event, which contains the data we want to transmit. You can see what it actually contains through the debug function of firebug.
Maybe you are more curious about e. data. In fact, e. data is the data msg we want to transmit. You can see through firebug.
Finally, call the following in the fun function:Copy codeThe Code is as follows: function fun (data)
{
Var json;
Eval ("json =" + data );
.....
}

In this way, you can operate the json object. Do the following for yourself!