模拟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又远 ...
随机推荐
- 布朗语料库中条件概率分布函数ConditionalFreqDist使用
布朗语料库中使用条件概率分布函数ConditionalFreqDist,可以查看每个单词在各新闻语料中出现的次数.这在微博情感分析中非常有用,比如判断feature vector中代表positive ...
- 【iCore3 双核心板】例程十六：USB_HID实验——双向数据传输
实验指导书及代码包下载: http://pan.baidu.com/s/1bojcVoV iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- angularJs模糊查询
html代码 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <tit ...
- JS控制打印指定div
<html><head><script language="javascript">function printdiv(printpage){v ...
- PHP 生成随机字符串与唯一字符串
说明:生成随机字符串用到的方法有 mt_rand() 生成唯一字符串用到的方法有 md5(),uniqid(),microtime() 代码: <?php /* * 生成随机字符串 * @par ...
- IAR EW8051-8.10.4安装及破解方法
第一步:获取破解license 1: 点击桌面左下角“开始”按钮,找到cmd.exe,右键创建cmd.exe 快捷方式到桌面: ————如果是windows7 ,请右键点击cmd.exe 快捷图标,点 ...
- freebsd|odoo - 为odoo报表 安装文泉译中文字体
来源: Odoo8.0中使用文泉译中文字体 http://blog.csdn.net/vnsoft/article/details/40056935 FreeBSD wkhtmltop ...
- Unit02-OOP-对象和类，数组（下）
Unit02-OOP-对象和类,数组(下) 1.方法的签名: 方法名+参数列表 2.方法的重载(Overload): 1)发生在一个类中,方法名称相同,参数列表不同 2)编译器在编译时自动根据签名 ...
- meanshift
http://blog.jasonding.top/2014/10/14/Machine%20Learning/%E3%80%90%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%8 ...
- Eclipse安装maven插件报错
Eclipse安装maven插件,报错信息如下: Cannot complete the install because one or more required items could not be ...