模拟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又远 ...
随机推荐
- 安卓模拟器研究-root
http://www.bluestacks.cn/index.asp 下载最新的 BlueStacks 尝试了很久都没有root成功. 百度搜索 找到经验文档 http://jingyan.baid ...
- VS2012编译VS2010版本的过程报错解决
C:\Program Files\MSBuild\Microsoft.Cpp\v4.0\Platforms\Win32C:\Program Files\MSBuild\Microsoft C:\Pro ...
- SeasLog-An effective,fast,stable log extension for PHP
github: https://github.com/Neeke/SeasLog @author Chitao.Gao [neeke@php.net] @交流群 312910117 简介 为什么使用S ...
- Day12~13(2016/2/1~2/2)
进度:实现了自定义标题栏控件并调用
- git pull时出现unable to unlink old 一个不该犯下的错误
在日常开发中,当团队内有人将新的代码打成jar文件提交,并且未改名的时候,可能会出现这样的错误"error: unable to unlink old 'Test/lib/xxx-1.0.0 ...
- openfire3.9.1 开发配置
1.在官网上下载最新的openfire源码 eg:openfire_src_3.9.1.zip 大概是一百多M 2.解压源码文件 一下步骤参考此同学的博客:http://redhacker.ite ...
- stty--设置终端线
stty - chang and print terminal line settings SYNOPSIS stty [-F DEVICE | --file=DEVICE] [SETTING]... ...
- request.get request.GET……
发现他们是不同的. 报错: AttributeError at /add/ 'WSGIRequest' object has no attribute 'get' Request Method: GE ...
- Secretary Problem
最好时机问题 n个值 前n/e都不选 然后取第一个大于前n/e个数中最大值的数 选中最大的概率为1/e
- Centos 安装 Java
建立文件夹 进入/usr/文件夹下,建立一个文件,我这里是java文件夹,将jdk-8u45-linux-x64.tar.gz复制到/usr/java文件夹下 解压文件 解压指令为:tar -zxvf ...