Some experience sharing of using JQquery

My result yesterday - the permanent message prompt in the lower right corner

Copy code The code is as follows:

var msgClass = function(){
this.init = function(){
var msgDiv = "

"
""
"

"
"You have new news, please check it carefully! >"";
$("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);
});

Okay, first of all, I have to admit that I thought I was pretty good at using jQuery, but after yesterday’s work, I discovered that I was just getting started. All right. Next, I will briefly talk about the problems I encountered yesterday and the solutions.
1. Get the elements in the parent window from the iframe
For example: get the body in the parent window so that you can dynamically insert some elements: $("body", window.parent.document)
Get Elements in the parent window whose primary key is identity: $("#identity", window.parent.document)
Summary: $(selector, the document object of the window you want to get), above!
2. Dynamically add element events
Okay. I will give you two ways to write it first, and you can think about which one is correct. Suppose there is a JS method: function fun(){....} There is html:

Add an onclick event for this div
　2.1 $("#div1 ").click(fun());
2.2 $("#div1").click(function(){fun()});
Okay, is it 2.1 or 2.2?
Have you thought of it? The correct answer should be 2.2. If you don’t believe it, you can give it a try. If you use the 2.1 method, the effect is the same as running fun().
3. The problem of passing parameters
Now that we have talked about methods, we need to talk about parameters. Suppose we have the method function fun(a, b){....} Now I call the 2.2 method in another method to add an event to the div.
　For example:

Copy code The 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); 
　　　}); The values ​​of a and b are different from your actual values. The solution is to call another method of click. 
　 $("#div1").click(msg,function(e){fun(e.data)}; 
　 Where msg is a string type value. The simplest way is to pass the parameter to be transmitted Write it in a json format. 
 You may think that the e here is the data you want to send. In fact, it is not the case. The e here is the object of the click event, which contains the data we want to send. debug function to see what it contains. 

Maybe you are more curious about e.data. In fact, e.data is the data msg we want to send. You can see it through firebug. Finally, it is called in the fun function. ：

Copy code

The code is as follows: 　function fun(data) 　{ var json; eval("json=" data); Make it yourself!

Related labels：

JQquery 使用心得

Previous article：jQuery.each() usage sharing_jquery Next article：artDialog 4.1.5 Dreamweaver code prompt/completion plug-in attached download_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Some experience sharing of using JQquery_jquery