js模仿jquery的寫法示例代碼
更新時間:2013年06月16日 15:57:40 作者:
jquery的寫法從事web開發(fā)的人員應該不會陌生吧,下面我們要說的是使用js模仿jquery寫法的實現(xiàn)代碼,感興趣的朋友可以參考下哈,希望對大家有所幫助
測試代碼:
(function(){
var p=new PEvent(document);
p.click(function() {
//alert("單擊");
//alert(p.style);
var html="";
for ( var item in document) {
html+=item+':'+document[item]+"\r\n";
}
//alert(html);
});
p.dblclick(function() {
alert("雙擊");
});
p.contextmenu(function(event) {
try{
var x=event.clientX;
var y=event.clientY;
var menu=g("menu");
//判斷坐標
var width=document.body.clientWidth;
var height=document.body.clientHeight;
x=(x+menu.clientWidth)>=width?width-menu.clientWidth:x;
y=(y+menu.clientHeight)>=height?height-menu.clientHeight:y;
//alert("可視高度:"+height+",鼠標高度:"+y);
menu.style.top=y+"px";
menu.style.left=x+"px";
menu.style.display="block";
}catch(e){
alert(e);
}
return false;
});
function PEvent(dom){
this.x=function() {
this.style.css=dom.style;
}
this.click=function(fn){
dom.onclick=fn;
this.x();
}
this.dblclick=function(fn){
dom.ondblclick=fn;
}
this.contextmenu=function(fn){
dom.oncontextmenu=fn;
}
this.style=new Po();
};
function Po() {
this.name=new Object();
this.id=new Object();
this.css=new Object();
}
})();
function g(id){
return document.getElementById(id);
}
在jquery中,處理事件的時候,都可以匿名方法來寫,例如:
obj.click(function(){
alert("hello");
});
上訴這種形式。
在方法傳遞參數(shù)的時候,可以傳遞fun 方法。
調(diào)用呢,就可以這樣調(diào)用:
this.dblclick=function(fn){
dom.ondblclick=fn;
}
復制代碼 代碼如下:
(function(){
var p=new PEvent(document);
p.click(function() {
//alert("單擊");
//alert(p.style);
var html="";
for ( var item in document) {
html+=item+':'+document[item]+"\r\n";
}
//alert(html);
});
p.dblclick(function() {
alert("雙擊");
});
p.contextmenu(function(event) {
try{
var x=event.clientX;
var y=event.clientY;
var menu=g("menu");
//判斷坐標
var width=document.body.clientWidth;
var height=document.body.clientHeight;
x=(x+menu.clientWidth)>=width?width-menu.clientWidth:x;
y=(y+menu.clientHeight)>=height?height-menu.clientHeight:y;
//alert("可視高度:"+height+",鼠標高度:"+y);
menu.style.top=y+"px";
menu.style.left=x+"px";
menu.style.display="block";
}catch(e){
alert(e);
}
return false;
});
function PEvent(dom){
this.x=function() {
this.style.css=dom.style;
}
this.click=function(fn){
dom.onclick=fn;
this.x();
}
this.dblclick=function(fn){
dom.ondblclick=fn;
}
this.contextmenu=function(fn){
dom.oncontextmenu=fn;
}
this.style=new Po();
};
function Po() {
this.name=new Object();
this.id=new Object();
this.css=new Object();
}
})();
function g(id){
return document.getElementById(id);
}
在jquery中,處理事件的時候,都可以匿名方法來寫,例如:
復制代碼 代碼如下:
obj.click(function(){
alert("hello");
});
上訴這種形式。
在方法傳遞參數(shù)的時候,可以傳遞fun 方法。
調(diào)用呢,就可以這樣調(diào)用:
復制代碼 代碼如下:
this.dblclick=function(fn){
dom.ondblclick=fn;
}
相關文章
JavaScript中net::ERR_CONNECTION_REFUSED解決方法大全
在一次測試中遇到了報net::ERR_CONNECTION_REFUSED的錯誤,五哦一下面這篇文章主要給大家介紹了關于JavaScript中net::ERR_CONNECTION_REFUSED解決方法的相關資料,需要的朋友可以參考下2022-10-10微信內(nèi)置瀏覽器WeixinJSBridge的使用技巧(隱藏右上角按鈕,獲取用戶網(wǎng)絡狀態(tài),支付等)
這篇文章主要介紹了微信內(nèi)置瀏覽器WeixinJSBridge的使用技巧,隱藏右上角按鈕,獲取用戶網(wǎng)絡狀態(tài),支付,隱藏下方工具欄等,需要的朋友可以參考下2024-02-02JS對img標簽進行優(yōu)化使用onerror顯示默認圖像
這篇文章主要介紹了JS對img標簽進行優(yōu)化使用onerror顯示默認圖像,需要的朋友可以參考下2014-04-04區(qū)分中英文字符的兩種方法(正則和charCodeAt())
最近在為項目寫登錄注冊系列頁面, 表單驗證無疑是不可缺少的部分, 在這個jQ插件滿天飛的web年代, 表單驗證倒也不是難事. 但再好的插件, 也并不能做到十全十美2010-11-11JavaScript的DOM與BOM的區(qū)別與用法詳解
這篇文章主要為大家詳細介紹了JavaScript的DOM與BOM的區(qū)別與用法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03詳解JavaScript的內(nèi)存空間、賦值和深淺拷貝
這篇文章主要介紹了JavaScript的內(nèi)存空間、賦值和深淺拷貝,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04詳解JavaScript如何實現(xiàn)更短時間的延時函數(shù)
在項目開發(fā)中,經(jīng)常能遇到需要延時執(zhí)行的需求,比如實現(xiàn)一個定時器功能,本文主要和大家介紹了JS如何實現(xiàn)更短時間的延時函數(shù),需要的可以參考下2024-03-03