js模仿jquery的写法示例代码

测试代码：


代码如下:

(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");
});

上诉这种形式。
在方法传递参数的时候，可以传递fun 方法。
调用呢，就可以这样调用：


代码如下:

this.dblclick=function(fn){
dom.ondblclick=fn;
}

赞 (0)

相关推荐

  • js 模仿网上的限时抢购效果

    抢购时间倒计时效果 function $(element){ return document.getElementById(element); } //限时抢购 var the_s=new Array(); function view_time(the_s_index,objid){ if(the_s[the_s_index]>=0){ var the_D=Math.floor((the_s[the_s_index]/3600)/24) var the_H=Math.floor((the_s[t

  • 用js实现网页上模仿桌面右键菜单

    网页上模仿桌面右键菜单 右击鼠标看看 -_-! \n"; // rbpm = right button pop menu HTMLstr += " \n"; HTMLstr += "\n"; HTMLstr += " \n"; HTMLstr += " \n"; HTMLstr += ""; HTMLstr += "\n"; HTMLstr += "\n";

  • js模仿php中strtotime()与date()函数实现方法

    本文实例讲述了js模仿php中strtotime()与date()函数实现方法.分享给大家供大家参考.具体如下: 在js中没有像php中strtotime()与date()函数,可直接转换时间戳,下面我们来自定一个函数来实现js中具体有时间戳转换的功能. function datetime_to_unix(datetime){ var tmp_datetime = datetime.replace(/:/g,'-'); tmp_datetime = tmp_datetime.replace(/

  • js模仿html5 placeholder适应于不支持的浏览器

    html5原生支持placeholder,对于不支持的浏览器(ie),可用js模拟实现. js代码 复制代码 代码如下: (function(){ //判断是否支持placeholder function isPlaceholer(){ var input = document.createElement('input'); return "placeholder" in input; } //不支持的代码 if(!isPlaceholer()){ //创建一个类 function P

  • js模仿windows桌面图标排列算法具体实现(附图)

    js模仿windows桌面图标排列算法具体实现(附图)

    注:需要引入Jquery 如果需要全部功能,请引入jquery-ui和jquery-ui.css 截图:  js代码: 复制代码 代码如下: $(function() { //菜单列表 var menu_list=$(".menu-list"); //工作区 var working=$(".working"); working.click(function() { menu_list.hide(); $(".content-menu").hide

  • JS模仿MSN右下角弹出提示框代码

    aa * { margin: 0px; padding: 0px; } html, body { height: 100%; } body { font-size: 14px; line-height: 24px; } #tip { position: absolute; right: 0px; bottom: 0px; height: 0px; width: 180px; border: 1px solid #CCCCCC; background-color: #eeeeee; padding

  • 用js来格式化字符串示例模仿css

    New Document var page="" page += "onlytiancai".fontcolor('red')+"使用颜色 " page += "onlytiancai".bold()+"加粗 " page += "onlytiancai".link("http://blog.csdn.net/onlytiancai/")+"加链接 &quo

  • 模仿JQuery.extend函数扩展自己对象的js代码

    但在写的过程中发现,如果要在之前写好的对象中添加新的静态方法或实例方法,要修改原有的对象结构,于是查看了jquery了extend方法,果然extend方法支持了jq的半边天,拿来主义,给自己的对象做扩张用. 下面进入正题: 假如有以下一个对象 复制代码 代码如下: var MyMath = { //加法 Add: function(a, b){ return a + b; }, //减法 Sub: function(a, b){ return a - b; } } 对象名MyMath,有两个静

  • js模仿jquery的写法示例代码

    测试代码: 复制代码 代码如下: (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(

  • 微信小游戏中three.js离屏画布的示例代码

    国庆8天长假,重庆之行因故未成,偶得闲,用three.js结合cannon.js写个3D小游戏耍耍. 在微信小游戏中,把three.js的3D内容在离屏画布处理,然后复制到在屏画布,方法是: let c_toolbarHeight=140; let sysInfo=wx.getSystemInfoSync(); require('./js/libs/weapp-adapter.js'); var canvas_webGL=window.canvas; canvas_webGL.width = s

  • node.js实现身份认证的示例代码

    node.js实现身份认证的示例代码

    请问昨天结束的早是对堆积在了今天吗,今天还来加个班更博,看在这个毅力的份上能否给亿点点推荐. 有个好消息有个坏消息,先说坏消息吧,就是在这么学下去我急需急支糖浆,来回顾回顾前面的知识,这几天学的太急了,搞得有点推着走的意思,好消息就是今天的内容是最后最后node的基础内容了,果然天不负我,整完然后有两个大案例,做完我就从上次复习那里开始一直复习过来,然后全部不欠账,就昂首挺胸的走进vue了,等等,这个学完可以进去了吧. 1.今天的第一个内容说一下web开发模式,今天基本就是讲一个身份认证的内容,

  • JS实现按钮添加背景音乐示例代码

    1-代码 <html> <head> <meta charset="utf-8"> <title>js实现按键声</title> </head> <body> <ul> <li> <a href="menu-list" rel="external nofollow" rel="external nofollow"

  • Jtable和JTree的写法示例代码

    我们首先看看Jtable和JTree的基本概念和常用构造方法. 一:表格(JTable): 1.基本概念: 表格(JTable)是Swing新增加的组件,主要是为了将数据以表格的形式显示.给显示大块数据提供了简单的机制. 2.常用构造方法: * JTable():使用系统默认的模型创建一个JTable 实例. * JTable(int numRows,int numColumns):创建一个使用DefaultTableModel 指定行.列的空表格. * JTable(Object[ ][ ]

  • Android中js和原生交互的示例代码

    本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf

  • 使用D3.js创建物流地图的示例代码

    使用D3.js创建物流地图的示例代码

    本文介绍了使用D3.js创建物流地图的示例代码,分享给大家,具体如下: 示例图 制作思路 需要绘制一张中国地图,做为背景. 需要主要城市的经纬坐标,以绘制路张起点和终点. 接收到物流单的城市,绘制一个闪烁的标记. 已经有过物流单的目标城市,不再绘制路线. 每次新产生一笔物流单,都有一个标记沿路线移向目标的动画效果. 绘制结束后的数据,需要清理掉,以减少对浏览器的资源占用. 开始撸码 1.创建网页模板 加载D3JS,为了方便调试,直接下载d3.js文件在本地,实际使用的时候,可以换成加载路径.注意

  • 使用js获取身份证年龄的示例代码

    /** 根据身份证号码判断性别 15位身份证号码:第7.8位为出生年份(两位数),第9.10位为出生月份,第11.12位代表出生日 18位身份证号码:第7.8.9.10位为出生年份(四位数),第11.第12位为出生月份, 第13.14位代表出生日期,第17位代表性别,奇数为男,偶数为女. */ //根据身份证号获取年龄 GetAge(identityCard) { let len = (identityCard + "").length; let strBirthday = "

  • web项目开发之JS函数防抖与节流示例代码

    web项目开发之JS函数防抖与节流示例代码

    目录 防抖 引入 防抖场景1(鼠标移入) 防抖场景2(键盘按键) 函数节流 防抖 经典应用常见: 手风琴效果 引入 没有做防抖的网站: 做了防抖的网站: 防抖场景1(鼠标移入) 抖动 : 用户本来不想触发这个交互,但是由于鼠标不小心抖动误触发交互事件. 例子: 想看第五张图片,.不想看2 3 4张. 但是鼠标从第1张滑到第五张时候,不小心放在了2 3 4上面.误触发. 函数防抖 : 用户连续多次触发某个事件,则只执行最后一次. 解决原理: 开启定时器,间隔时间内如果多次触发事件,则每一次都清除上

  • HTML+JS实现猜拳游戏的示例代码

    HTML+JS实现猜拳游戏的示例代码

    目录 效果图 关于JS构建过程 添加事件监听器 函数 gameRules() 函数 whoWon() 效果图 游戏可以通过这个链接进入 关于JS构建过程 首先,我创建了一个对象,其中包含每种可能性的文本格式(石头.纸.剪刀),然后将图像源也添加到该对象中. 在我制作的 HTML 中: playerChoiceImg playerChoiceTxt computerChoiceImg computerChoiceTxt 能够修改其中的每个内容. 然后创建了一个points变量,它将存储每个玩家(玩

随机推荐