js模仿jquery的寫法示例代碼
更新時(shí)間:2013年06月16日 15:57:40 作者:
jquery的寫法從事web開發(fā)的人員應(yīng)該不會(huì)陌生吧,下面我們要說(shuō)的是使用js模仿jquery寫法的實(shí)現(xiàn)代碼,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助
測(cè)試代碼:
(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");
//判斷坐標(biāo)
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+",鼠標(biāo)高度:"+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中,處理事件的時(shí)候,都可以匿名方法來(lái)寫,例如:
obj.click(function(){
alert("hello");
});
上訴這種形式。
在方法傳遞參數(shù)的時(shí)候,可以傳遞fun 方法。
調(diào)用呢,就可以這樣調(diào)用:
this.dblclick=function(fn){
dom.ondblclick=fn;
}
復(fù)制代碼 代碼如下:
(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");
//判斷坐標(biāo)
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+",鼠標(biāo)高度:"+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中,處理事件的時(shí)候,都可以匿名方法來(lái)寫,例如:
復(fù)制代碼 代碼如下:
obj.click(function(){
alert("hello");
});
上訴這種形式。
在方法傳遞參數(shù)的時(shí)候,可以傳遞fun 方法。
調(diào)用呢,就可以這樣調(diào)用:
復(fù)制代碼 代碼如下:
this.dblclick=function(fn){
dom.ondblclick=fn;
}
相關(guān)文章
JavaScript笛卡爾積超簡(jiǎn)單實(shí)現(xiàn)算法示例
這篇文章主要介紹了JavaScript笛卡爾積超簡(jiǎn)單實(shí)現(xiàn)算法,涉及javascript數(shù)組遍歷、添加簡(jiǎn)單操作技巧,需要的朋友可以參考下2018-07-07
JavaScript通過(guò)元素的ID和name設(shè)置樣式
這篇文章主要介紹了JavaScript通過(guò)元素的ID和name設(shè)置其樣式,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以測(cè)試下2014-07-07
JavaScript交換變量的常用方法小結(jié)【4種方法】
這篇文章主要介紹了JavaScript交換變量的常用方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript交換變量的4種實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
javascript實(shí)現(xiàn)顏色漸變的方法
這篇文章介紹了javascript實(shí)現(xiàn)顏色漸變的方法,有需要的朋友可以參考一下2013-10-10
document.compatMode的CSS1compat使用介紹
這篇文章主要介紹了document.compatMode的CSS1compat使用,需要的朋友可以參考下2014-04-04
Fundebug支持監(jiān)控微信小程序HTTP請(qǐng)求錯(cuò)誤的方法
這篇文章主要介紹了Fundebug支持監(jiān)控微信小程序HTTP請(qǐng)求錯(cuò)誤的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02

