<!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. CCF关于NOIP2014复赛报名的通知

    CCF关于NOIP2014复赛报名的通知   CCF NOIP2014复赛全部实行网上注册.报名.未通过网上报名的选手将不具备参赛和申诉资格. 系统注册须知: NOIP2014复赛注册时间:2014年 ...

  2. pch头文件

    1.command+N ---> Other ---> PCH File 2.点击工程 ---> Build Settings ---> 搜索框中输入pref ---> ...

  3. Android课程---时间日期对话框

    activity_ui2.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  4. 【iCore3 双核心板_FPGA】实验二十四：Niosii——SDRAM读写实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1c2xAJT2 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  5. 领导者/追随者（Leader/Followers）模型和半同步/半异步（half-sync/half-async）模型都是常用的客户-服务器编程模型

    领导者-追随者(Leader/Followers)模型的比喻 半同步/半异步模型和领导者/追随者模型的区别: 半同步/半异步模型拥有一个显式的待处理事件队列,而领导者-追随者模型没有一个显式的队列(很 ...

  6. 使用 Sublime Text3 编辑 Markdown

    安装插件 可以通过安装 Markdown 的插件来使 Sublime Text3 变成一款 Markdown 编辑器 1.Markdown Preview 插件 输入Shift + Ctrl + P, ...

  7. jq 获取除节假日与周六日 外的日期 和 星期

    //设置节假日的数组         var holiday = Array('2016-04-30','2016-05-01','2016-05-02','2016-06-09','2016-06- ...

  8. chrome下input[type=text]的placeholder不垂直居中的问题解决

    http://blog.csdn.net/do_it__/article/details/6789699 <input type="text" placeholder=&qu ...

  9. Android百分比布局支持库介绍——com.android.support:percent（转）

    转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...

  10. js 中escape，encodeURI，encodeURIComponent的区别

    escape:方法不能能够用来对统一资源(URI)进行编码,对其编码应使用encodeURI和encodeURIComponent encodeURI:encodeURI ()方法返回一个编码的 UR ...