<!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. # 20145334 《Java程序设计》第9周学习总结

    20145334 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 JDBC 1.Java语言访问数据库的一种规范,是一套API. 2.JDBC (Java Da ...

  2. 分割excel sheet

    Sub split_sheet() '输入用户想要拆分的工作表 Dim sheet_name sheet_name = Application.InputBox("请输入拆分工作表的名称:& ...

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

    实验步骤 阅读和理解源代码 demo_read,demo_write 函数完成驱动的读写接口功能,do_write 函数实现将用户写入的数据逆序排列,通过读取函数读取转换后的数据.这里只是演示接口的实 ...

  4. [转]JNIEnv解析

    1.关于JNIEnv和JavaVM JNIEnv是一个与线程相关的变量,不同线程的JNIEnv彼此独立.JavaVM是虚拟机在JNI层的代表,在一个虚拟机进程中只有一个JavaVM,因此该进程的所有线 ...

  5. 字节流与字符流的区别&&用字节流好还是用字符流好?

    字节流: (A)FileOutputStream(File name) 创建一个文件输出流,向指定的 File 对象输出数据. (B)FileOutputStream(FileDescriptor) ...

  6. Eclipse创建java web工程配置Tomacat和JDK 【转】

    在学习AJAX过程中,还用Intellij就有点老旧了,这是后装个Eclipse时,发现这个配置也很头疼,现在就叫你如何创建一个web工程,同时叫你配置Eclipse. 一.创建一个web工程 1.打 ...

  7. 从.NET和Java之争谈IT这个行业[转]

    一.有些事情难以回头 开篇我得表名自己的立场:.NET JAVA同时使用者,但更加偏爱.NET.原因很简单 1.NET语言更具开放性,从开源协议和规范可以看出; 2.语言更具优势严谨; 3.开发工具V ...

  8. LeetCode Paint Fence

    原题链接在这里:https://leetcode.com/problems/paint-fence/ 题目: There is a fence with n posts, each post can ...

  9. PL/SQL不支持64位Oracle Client 解决办法

    解决X64操作系统PL/SQL连接报错问题 make sure you have the 32 bits oracle client installed 说明PLSQL Developer并不支持Or ...

  10. Android 通过 Wifi 调试 Debug (Android Studio)

    参考资料: http://www.cnblogs.com/sunzhenxing19860608/archive/2011/07/14/2106492.html 前提: Android 手机 和 PC ...