<!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. Struts 2.x No result defined for action 异常

      这是我跑struts2的第一个例子,跑的也够郁闷的,这个问题烦了我几个钟... 2011-5-10 10:10:17 com.opensymphony.xwork2.util.logging.co ...

  2. PHP魔术方法使用总结

    魔术方法是PHP面向对象中特有的特性.它们在特定的情况下被触发,都是以双下划线开头,你可以把它们理解为钩子,利用模式方法可以轻松实现PHP面向对象中重载(Overloading即动态创建类属性和方法) ...

  3. 【SIGGRAPH】用【有说服力的照片真实】技术实现最终幻想15的视觉特效

    原文:西川善司 http://www.4gamer.net/games/075/G007535/20160726064/   最终幻想15的演讲会场.相当大,听众非常多.      在本次计算机图形和 ...

  4. P1311 选择客栈

    开始写了一个O(n3)的算法,只得了60,后来思考(找题解),得到了一个O(nk)的算法 其实就是一种预处理的思想,对于每一个客栈而言,只要我们预处理出他前面可以匹配的客栈数量,就可以了. 所以我们记 ...

  5. Android实现推送方式解决方案

    当我们开发需要和服务器交互的应用程序时,基本上都需要获取服务器端的数据,比如<地震应急通>就需要及时获取服务器上最新的地震信息. 要获取服务器上不定时更新的信息,一般来说有两种方法: 第一 ...

  6. Nodejs开发(2.连接MongoDB)

    一.先配置MongoDB Win10下下载那个安装版,zip版的会报却各种DLL,安装在你希望的路径,实在安装错了,就剪切过来也行(本例E:\mongodb). 然后是配置启动脚本,就是写一个bat文 ...

  7. Oracle中的数据类型

    数据类型 数据类型是在设计表结构中需要定义的,选择适当的数据类型可以节省存储空间,提高运算效率. Oracle数据类型主要包括 1.字符型 适合保存字符串类型的数据,如姓名.地址.简介等等. 如:ch ...

  8. Asp.net mvc web api 在项目中的实际应用

    Asp.net mvc web api 在项目中的实际应用 前言:以下只是记录本人在项目中的应用,而web api在数据传输方面有多种实现方式,具体可根据实际情况而定! 1:数据传输前的加密,以下用到 ...

  9. jQuery文字特效制作文字鼠标滑过多彩色变色显示

    <!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/ht ...

  10. 使用 Redis 实现排行榜功能 （转载 https://segmentfault.com/a/1190000002694239）

    排行榜功能是一个很普遍的需求.使用 Redis 中有序集合的特性来实现排行榜是又好又快的选择. 一般排行榜都是有实效性的,比如"用户积分榜".如果没有实效性一直按照总榜来排,可能榜 ...