<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jquery</title>

</head>

<body>

<input type="text" id="text">

<script type="text/javascript">

var wzw=function(id){

    this.ele=document.getElementById(id)

    return this;

}

// 设置class

wzw.prototype.setClass=function(classN){

    this.ele.className=classN;

    return this;

}

// 去掉指定的class

wzw.prototype.removeClass= function(classN){

    this.ele.className=this.ele.className.replace(classN,"");

    return this;

};

// 点击方法

wzw.prototype.click= function(fn){

    if (this.ele.addEventListener){

        this.ele.addEventListener("click",fn,false);

    }else{

        this.ele.attachEvent("onclick",fn);

    };

    return this;

};

// hover

wzw.prototype.hover= function(overfn,outfn){

    this.ele.onmouseover=overfn;

    this.ele.onmouseout=outfn;

    return this;

};

// 添加指定的class

wzw.prototype.addClass= function(classN){

    this.ele.className=this.ele.className+" "+classN;

    return this;

};

// 判断是否有指定的class

wzw.prototype.hasClass=function(classN){

    if (this.ele.className.match(classN)){

        return true

    }else{

        return false

    };

}

// 设置css

wzw.prototype.css=function(k,v){

    if (v){

        this.ele.style[k]=v;

    }else if(!v){

        for(key in k){

        this.ele.style[key]=k[key];

        }

    }else{

        console.log("参数错误")

    }

    return this;

}

// 使用$包裹一下

function $(id){

    return new wzw(id)

}

$("text").setClass("wangzw").css({border:"2px solid #f00",width:"400px",height:"20px",fontSize:"20px",padding:"5px 10px",outline:"none",borderRadius:"5px"}).removeClass("wangzw").hover(function(){

    this.style.background="rgba(220,230,240,.2)";

},function(){

    this.style.background="";

}).click(function(){

    this.value="000000"

});

</script>

</body>

</html>

模拟jquery的更多相关文章

  1. 模拟jQuery简单封装ajax

    /*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...

  2. 模拟jQuery库

    用js模拟jQuery方法,体会封装思想 <!DOCTYPE html><html><head><meta charset="UTF-8" ...

  3. ajx技术解析以及模拟jQuery封装

    1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  4. 模拟JQUERY的延迟方法绑定

    模拟JQUERY的延迟方法绑定, 对于延迟方法绑定,各种语言都有不同的描述 什么回调啊,函数指针啊,委托啊,事件啊等,其实也就是那么大回事,不过用好这些特性,对于扩展和架构是非常有好处的, 好处自然就 ...

  5. js框架封装，模拟jQuery封装

    模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获 ...

  6. angularJs中怎么模拟jQuery中的this？

    最近自己正在学习angularJs,在学到ng-click时,由于想获取当前点击元素的自身,开始想到了用$index来获取当前元素的索引同样能实现我想要的效果,但是在有些特殊的情况下,使用$index ...

  7. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  8. 原生JS模拟jQuery $

    模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...

  9. 模拟jquery链式访问

    一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下jquery的链式访问,这么好用的技能我赶紧get了下,研究后略微修改,模拟一个简单的链式访问,下面这段代码支持修改 ...

  10. html select美化模拟jquery插件select2.js

    代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远 ...

随机推荐

  1. Lua语言

    下载使用Subline作为编辑器 1. 2.函数使用 function sayHello() print ('hello torch') end 3.定义变量 a print (a) 4.引入文件 r ...

  2. Cocos2dx集成于windows桌面窗口程序的步骤

    2D游戏需要做编辑器,而编辑器总是希望可以复用游戏中的逻辑来运行场景试看效果. 对于cocos2dx开发的程序,这个需求可以描述为: 实现一种方法,在桌面窗口程序中的某个控件上显示cocos2dx的场 ...

  3. 使用Mongo官方驱动操作Mongo数据库

    首先到 https://github.com/mongodb/mongo-csharp-driver/downloads 下载Mongo官方驱动 下载完成后引用到项目中 public class Co ...

  4. centos升级支持到C++11, gcc4.8.2

    升级到4.8[这个应该是目前最新的啦,不过网上查的话已经到5.2啦,感觉落后一点比较稳,当然还有就是这个版本是新的里面使用最多的] wget http://people.centos.org/tru/ ...

  5. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

  6. http-2.4.18 安装

    编译最新的httpd 2.4.18     编译提示apr版本低于1.4 rpm repo源是1.39的 因此编译apr 下载 apr apr-util  apr-iconv [root@ansibl ...

  7. storm kafka整合

    public class KafkaTopo { public static void main(String[] args) { String zkRoot = "/kafka-storm ...

  8. jQuery源代码学习之七—队列模块queue

    一.jQuery种的队列模块 jQuery的队列模块主要是为动画模块EFFECTS提供支持,(不过到现在为了支持动画队列的inprogress的出入队还是搞不太清楚),单独抽取出一个命名空间是为了使程 ...

  9. 实例演示使用RDIFramework.NET 框架的工作流组件进行业务流程的定义—请假申请流程-Web

    实例演示使用RDIFramework.NET 框架的工作流组件 进行业务流程的定义—请假申请流程-Web 参考文章: RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系 ...

  10. jquery判断页面是否滑动到最底部

    // 滚动到底部,向下的箭头消失 var $down = $('.down'); var $window = $(window); var $document = $(document); $wind ...