<!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. 【转】CSRF攻击的应对之道

    CSRF 背景与介绍CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一.其他安全隐患,比如 ...

  2. ios-获取通讯录 姓名和电话

    #import "ViewController.h" #import <ContactsUI/ContactsUI.h> @interface ViewControll ...

  3. LoadRunner11.00入门教程出现的问题

    问题1.打不开浏览器 解决办法:打开浏览器工具--Internet 选项--高级--取消启用第三方浏览器扩展. 顺带解决了,有两个浏览器问题. 两个浏览器:一个是自带的IE,一个是其他软件插件. 解决 ...

  4. 20145209&20145309信息安全系统设计基础实验报告 （3）

    实验内容.步骤与体会: 实验过程的理解,实验指导书中知识点的理解. (1)为什么在双击了GIVEIO和JTAG驱动安装文件后还需要手动进行配置? 因为安装文件只是将驱动文件释放了出来,并没有在系统中将 ...

  5. MyArrayAdapter 比较标准的写法

    ; i < mString.size(); i++) { insert(mString.get(i), i); } } notifyDataSetChanged(); LogUtils.LOGD ...

  6. 蓝牙—RFCOMM协议

    RFCOMM是一个简单的协议,其中针对9针RS-232串口仿真附加了部分条款.可支持在两个蓝牙设备之间同时保持高达60路的通信连接.RFCOMM的目的是针对如何在两个不同设备上的应用之间保证一条完整的 ...

  7. 【行业交流】2016 TiD质量竞争力大会——移动互联网测试到质量的转变之路

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5691233.html TiD质量大会在北京召开,有幸去参加 ...

  8. C++ 扫描文件夹下所有文件

    void GetFilesFromDirectory(std::vector<std::string> &files, const char *directoryPath) { s ...

  9. WCF初识

    WCF能干什么? 在win32中,应用程序是运行在进程的线程中的,.NET出现之后,出现了AppDomain,其实就相当于在进程和线程之间又又了一层包装层,类似于子进程的概念,在一个进程或者应用程序域 ...

  10. Objective-C 编码建议

    Objective-C 是 C 语言的扩展,增加了动态类型和面对对象的特性.它被设计成具有易读易用的,支持复杂的面向对象设计的编程语言.它是 Mac OS X 以及 iPhone 的主要开发语言. C ...