JQquery的一些使用心得分享
更新時(shí)間：2012年08月01日 23:09:28 作者：
我原以為我對(duì)jQuery的使用還過(guò)得去，可是經(jīng)過(guò)昨天的工作，我才發(fā)現(xiàn)，原來(lái)，我才算是剛剛?cè)腴T。好吧。下面，我簡(jiǎn)單講一下，我昨天遇到的問(wèn)題以及解決方案
我昨天的成果--常駐右下角的消息提示
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;\" />" +
"您有新的消息，請(qǐng)注意查收！" +
"</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);
});
好吧，首先我得承認(rèn)，我原以為我對(duì)jQuery的使用還過(guò)得去，可是經(jīng)過(guò)昨天的工作，我才發(fā)現(xiàn)，原來(lái)，我才算是剛剛?cè)腴T。好吧。下面，我簡(jiǎn)單講一下，我昨天遇到的問(wèn)題以及解決方案。
1.從iframe中獲取父窗口中的元素
例如：獲取父窗口中的body，以便可以動(dòng)態(tài)的插入一些元素： $("body", window.parent.document)
獲取父窗口中主鍵為 identity 的元素 ： $("#identity", window.parent.document)
總結(jié)：$(selector, 你想要獲取的窗口的document對(duì)象)，以上！
2.動(dòng)態(tài)添加元素事件
好吧。我先給出兩種寫(xiě)法，你來(lái)想想那個(gè)是正確的。假設(shè)有一個(gè)JS方法： function fun(){....} 有html：<div id = "div1"></div> 為這個(gè)div添加一個(gè)onclick事件
2.1 $("#div1").click(fun());
2.2 $("#div1").click(function(){fun()});
好啦，到底是2.1對(duì)還是2.2呢？
想到了沒(méi)有？正確的答案應(yīng)該是2.2.不信的可以試一試。如果用2.1的方法，效果跟運(yùn)行fun()這個(gè)方法是一樣的。
3.傳參數(shù)的問(wèn)題
講到了方法，就要講一下參數(shù)的問(wèn)題。假設(shè)我們有方法 function fun(a, b){....} 現(xiàn)在我在另一個(gè)方法里面調(diào)用2.2方法為div添加一個(gè)事件。
例如：
function fun1(){
for(var i = 0; i < NUM; i++){
var a = i;
var b = i+1;
$("#div1").click(function(){
fun(a,b);
});
}
}
類似上面的例子，出現(xiàn)的問(wèn)題就是：在fun方法中獲取到的a和b的值跟你實(shí)際不一樣。解決方法就是調(diào)用click的另一個(gè)方法。
$("#div1").click(msg,function(e){fun(e.data)};
其中msg是一個(gè)string類型的值.最簡(jiǎn)單的辦法是把要傳送的參數(shù)寫(xiě)成一個(gè)json形式。
這里的e你可能會(huì)以為是你要傳送的數(shù)據(jù)。其實(shí)不然，這里的e是把一個(gè)click事件的對(duì)象，里面包含了我們要傳送的數(shù)據(jù)。你可以通過(guò)firebug的debug功能看到它到底包含了什么。
可能你對(duì)e.data更加好奇.其實(shí)e.data就是我們要傳送的數(shù)據(jù)msg。你可以通過(guò)firebug看到。
最后在fun函數(shù)中 調(diào)用：
function fun(data)
{
var json;
eval("json="+data);
.....
}
這樣就可以操作json對(duì)象了，接下來(lái)的事情，自己做吧！
復(fù)制代碼 代碼如下:
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;\" />" +
"您有新的消息，請(qǐng)注意查收！" +
"</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);
});
好吧，首先我得承認(rèn)，我原以為我對(duì)jQuery的使用還過(guò)得去，可是經(jīng)過(guò)昨天的工作，我才發(fā)現(xiàn)，原來(lái)，我才算是剛剛?cè)腴T。好吧。下面，我簡(jiǎn)單講一下，我昨天遇到的問(wèn)題以及解決方案。
1.從iframe中獲取父窗口中的元素
例如：獲取父窗口中的body，以便可以動(dòng)態(tài)的插入一些元素： $("body", window.parent.document)
獲取父窗口中主鍵為 identity 的元素 ： $("#identity", window.parent.document)
總結(jié)：$(selector, 你想要獲取的窗口的document對(duì)象)，以上！
2.動(dòng)態(tài)添加元素事件
好吧。我先給出兩種寫(xiě)法，你來(lái)想想那個(gè)是正確的。假設(shè)有一個(gè)JS方法： function fun(){....} 有html：<div id = "div1"></div> 為這個(gè)div添加一個(gè)onclick事件
2.1 $("#div1").click(fun());
2.2 $("#div1").click(function(){fun()});
好啦，到底是2.1對(duì)還是2.2呢？
想到了沒(méi)有？正確的答案應(yīng)該是2.2.不信的可以試一試。如果用2.1的方法，效果跟運(yùn)行fun()這個(gè)方法是一樣的。
3.傳參數(shù)的問(wèn)題
講到了方法，就要講一下參數(shù)的問(wèn)題。假設(shè)我們有方法 function fun(a, b){....} 現(xiàn)在我在另一個(gè)方法里面調(diào)用2.2方法為div添加一個(gè)事件。
例如：
復(fù)制代碼 代碼如下:
function fun1(){
for(var i = 0; i < NUM; i++){
var a = i;
var b = i+1;
$("#div1").click(function(){
fun(a,b);
});
}
}
類似上面的例子，出現(xiàn)的問(wèn)題就是：在fun方法中獲取到的a和b的值跟你實(shí)際不一樣。解決方法就是調(diào)用click的另一個(gè)方法。
$("#div1").click(msg,function(e){fun(e.data)};
其中msg是一個(gè)string類型的值.最簡(jiǎn)單的辦法是把要傳送的參數(shù)寫(xiě)成一個(gè)json形式。
這里的e你可能會(huì)以為是你要傳送的數(shù)據(jù)。其實(shí)不然，這里的e是把一個(gè)click事件的對(duì)象，里面包含了我們要傳送的數(shù)據(jù)。你可以通過(guò)firebug的debug功能看到它到底包含了什么。
可能你對(duì)e.data更加好奇.其實(shí)e.data就是我們要傳送的數(shù)據(jù)msg。你可以通過(guò)firebug看到。
最后在fun函數(shù)中 調(diào)用：
復(fù)制代碼 代碼如下:
function fun(data)
{
var json;
eval("json="+data);
.....
}
這樣就可以操作json對(duì)象了，接下來(lái)的事情，自己做吧！
相關(guān)文章
使用jQuery刪除事件（或稱解除事件綁定）有三個(gè)函數(shù)：unbind、die和undelegate。這三個(gè)方法都依賴于未公開(kāi)的jQuery.event.remove（后續(xù)使用.remove簡(jiǎn)寫(xiě)）。此為刪除事件的核心方法。2011-07-07
jQuery實(shí)現(xiàn)表格的數(shù)據(jù)拖拽
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格的數(shù)據(jù)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家詳細(xì)介紹了jquery遍歷json對(duì)象集合、jQuery 遍歷JSON對(duì)象、jquery中遍歷讀取json串中的對(duì)象三種情況，感興趣的小伙伴們可以參考一下2016-05-05
基于jquery的下拉框改變動(dòng)態(tài)添加和刪除表格實(shí)現(xiàn)代碼
以前很少用jquery，現(xiàn)在工作需要，用上了，感覺(jué)真的很方便！不用再像以前那樣寫(xiě)那么多多余的Js了！看來(lái)得在jquery上花點(diǎn)功夫呢！2011-03-03
jquery+php隨機(jī)生成紅包金額數(shù)量代碼分享
這篇文章主要介紹了jquery+php隨機(jī)生成紅包金額數(shù)量實(shí)現(xiàn)代碼，紅包數(shù)量與金錢可以自己設(shè)定，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
在easyUI開(kāi)發(fā)中，出現(xiàn)jquery.easyui.min.js函數(shù)庫(kù)問(wèn)題的解決辦法
easyUI是jquery的一個(gè)插件，是民間的插件，easyUI使用起來(lái)很方便，里面有網(wǎng)頁(yè)制作的最重要的三大方塊：javascript代碼、html代碼和Css樣式，但是很容易出現(xiàn)jquery.easyui.min.js函數(shù)庫(kù)問(wèn)題，小編教大家如何解決問(wèn)題，需要的朋友可以參考下2015-09-09
jquery移除button的inline onclick事件(已測(cè)試及兼容瀏覽器)
這種方法在Google Chrome下正常工作，但是在IE的兼容模式下會(huì)馬上調(diào)用reclick方法，這不是我們想要的效果;為了解決這個(gè)問(wèn)題，我們可以換個(gè)思路，就是延遲綁定click事件2013-01-01
這篇文章主要介紹了jQuery仿寫(xiě)百度百科的目錄樹(shù)醫(yī)保詞條樣式，點(diǎn)擊右側(cè)的目錄樹(shù)，左側(cè)跳轉(zhuǎn)到指定的錨點(diǎn)位置，滾動(dòng)鼠標(biāo)，游標(biāo)跟隨一起滾動(dòng)至響應(yīng)鏈接位置，具體實(shí)現(xiàn)思路大家參考下本文2017-01-01
基于CSS3和jQuery實(shí)現(xiàn)跟隨鼠標(biāo)方位的Hover特效
這篇文章主要介紹了基于CSS3和jQuery實(shí)現(xiàn)跟隨鼠標(biāo)方位的Hover特效的相關(guān)資料,需要的朋友可以參考下2016-07-07
jquery validate表單驗(yàn)證的基本用法入門
這篇文章主要為大家介紹了jquery validate表單驗(yàn)證的基本用法入門，jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求，感興趣的小伙伴們可以參考一下2016-01-01