模拟jquery
<!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的更多相关文章
- 模拟jQuery简单封装ajax
/*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...
- 模拟jQuery库
用js模拟jQuery方法,体会封装思想 <!DOCTYPE html><html><head><meta charset="UTF-8" ...
- ajx技术解析以及模拟jQuery封装
1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- 模拟JQUERY的延迟方法绑定
模拟JQUERY的延迟方法绑定, 对于延迟方法绑定,各种语言都有不同的描述 什么回调啊,函数指针啊,委托啊,事件啊等,其实也就是那么大回事,不过用好这些特性,对于扩展和架构是非常有好处的, 好处自然就 ...
- js框架封装，模拟jQuery封装
模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获 ...
- angularJs中怎么模拟jQuery中的this？
最近自己正在学习angularJs,在学到ng-click时,由于想获取当前点击元素的自身,开始想到了用$index来获取当前元素的索引同样能实现我想要的效果,但是在有些特殊的情况下,使用$index ...
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下 一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...
- 原生JS模拟jQuery $
模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...
- 模拟jquery链式访问
一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下jquery的链式访问,这么好用的技能我赶紧get了下,研究后略微修改,模拟一个简单的链式访问,下面这段代码支持修改 ...
- html select美化模拟jquery插件select2.js
代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远 ...
随机推荐
- 关于Java擦除特性
package thinkingInJava; /* * 模拟擦除 */ public class SimpleHolder { private Object obj ; public void se ...
- Date类型-演示JS中的日期
<script type="text/javascript"> /* *演示JS中的日期 */ var date = new Date(); document.writ ...
- mysql前缀索引(字符串截取部分作为索引), 以及索引选择指引
- 台式机的集显HD4600驱动-黑苹果之路
台式机的集显HD4600驱动-黑苹果之路 半桶水还真可怕,整了一个礼拜的台式机黑苹果,竟然都没搞定asus z87-k的HD4600核显.最终为了不耽误工作,上淘宝,花钱买服务.显卡驱动分为变色龙和c ...
- apache查看工作模式及调优
一,查看工作模式 /usr/sbin/httpd -l Compiled in modules: core.c prefork.c http_core.c mod_so.c 如果出现prefo ...
- Dynamic Percentage of Operands
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION
- 利用vs2013简单初探Python
最近无聊,某天无意在vs2013上发现了Python...... Python介绍:可以自己搜索一下. 接下来,准备工具: Win7搭建开发环境.需要准备Python.PTVS2013. 1.http ...
- 安装docker-compose
下载到合适的位置 curl -L https://github.com/docker/compose/releases/download/1.8.0/docker-compose-`uname -s` ...
- 字符流和字节流（FileReader类和FileWriter类）
字符流主要用于支持Unicode的文字内容,绝大多数在字节流中所提供的类,都可在此找到对应的类.其中,输入流Reader抽象类帮助用户在Unicode流内获得字符数据,而Writer类则实现了输出.可 ...
- haproxy log config
Step 4: Configuring logging Edit /etc/sysconfig/syslog SYSLOGD_OPTIONS=”-m 0 -r” ————————————————— ...