文档章节

js实现类似jquery基础功能 简单选择器/事件/属性

党程V
 党程V
发布于 2015/01/28 16:43
字数 562
阅读 1563
收藏 10
按钮样式定义
<style>
	.btn{display: inline-block;width: 100px;height: 20px;color: #fff;font-size: 12px;background-color: #0033dd;text-align: center;line-height: 20px;text-decoration: none;border:  5px #0000ff outset;}
	.btn-big-test{width: 300px;height: 85px;line-height: 85px;font-size: 25px;}
	
</style>

用基础js 实现了一个简单的具有元素选择支按id/name/class /tag/对象等方式的基础选择器,并实现了事件委托和移除机制,实现了属性操作功能和连续调用模式.异常捕捉    

声明按钮
<a href="javascript:;"  class="btn-big-test btn" title='你点了一个巨大的按钮!'>巨大的测试按钮</a>
<br/><br/>
<a href="javascript:;" id="removetest"  class="btn grey">移除test事件</a>
&nbsp;
<a href="javascript:;" id="addtest"   class="btn">开启test事件</a>


/*声明函数*/

	$_fn=function(selectName){
		this.selectName=selectName;
		this.obj=this.selectElement();
		return this;
		
	}
	//原型方法
	$_fn.prototype={
		//基础选择器 不包含子类 连续等模式选择器
		'selectElement':function(){
			if(typeof this.selectName == 'object'){
				return this.selectName;
			}else if(this.selectName.indexOf("#")!=-1){
				return document.getElementById(this.selectName.replace('#',''));
			}else if(this.selectName.indexOf(".")!=-1){
				return document.getElementsByClassName(this.selectName.replace('.',''));
			}else if(this.selectName.indexOf("@")!=-1){
				return document.getElementsByName(this.selectName.replace('@',''));
			}else{
				return document.getElementsByTagName(this.selectName);
			}
		},
		'on':function(event,callback){

			try{
				$_eventStack[this.obj]=callback;
					if (/.*(Firefox|Safari|Chrome).*/.exec(window.navigator.userAgent)) {
						if(this.obj.length>0){
							for (var i=0;i<this.obj.length;i++) {
								this.obj[i].addEventListener("click",callback,false);
							};
						}else{
							this.obj.addEventListener("click",callback,false);
						}
						
					}else{
						if(this.obj.length>0){

							for (var i=0;i<this.obj.length;i++) {
								if(this.obj[i])
									this.obj[i].attachEvent=("onclick",callback);	
								}
						}else{
							this.obj.attachEvent=("onclick",callback);
						}
					}
			}catch(e){
				console.error(e);
			}
			return this;
		
		},
		detach:function(event){
				try{
					if (/.*(Firefox|Safari|Chrome).*/.exec(window.navigator.userAgent)) {
						if(this.obj.length>0){
							for (var i=0;i<this.obj.length;i++) {
								
								this.obj[i].removeEventListener(event,$_eventStack[this.obj],false);
							};
						}else{
							this.obj.removeEventListener(event,$_eventStack[this.obj],false);
						}
						
					}else{
						if(this.obj.length>0){

							for (var i=0;i<this.obj.length;i++) {
								if(this.obj[i])
									this.obj[i].detachEvent("on"+event,$_eventStack[this.obj]);	
								}
						}else{
							this.obj.detachEvent("on"+event,$_eventStack[this.obj]);
						}
					}
				}catch(e){
					console.error(e);
				}
			return this;
		},attr:function(propName,value){
			if(!value){
				return this.obj.getAttribute(propName);
			}else{
				this.obj.setAttribute(value);
				return this;
			}
		}
	}
 	window.$_ = function(selectName){return new $_fn(selectName);};//获取智能对象
 	window.$_eventStack={};//记录事件委托关系

///////////////////////////////

设置按钮事件

$_(".btn-big-test").on('click',function(e){
 		alert($_(this).attr("title"));
 	});

$_("#removetest").on("click",function(){
 		$_(".btn-big-test").detach('click');
 		alert("事件已移除");
 	});

$_("#addtest").on("click",function(){
                //采用连续调用模式销毁事件和委托新的事件 避免多次调用
 		$_(".btn-big-test").detach('click').on('click',function(e){
 			alert(this.className);
 		});
 		alert("事件已添加");
 	});




© 著作权归作者所有

党程V
粉丝 5
博文 20
码字总数 9126
作品 0
西安
高级程序员
私信 提问
加载中

评论(4)

叫我大头
叫我大头
的想你们学习
叫我大头
叫我大头
没看懂 厉害
党程V
党程V

引用来自“王小为”的评论

厉害

见笑啦!兄弟
小薇
小薇
厉害
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge
2018/05/17
0
0
python前端jQuery入门

知识点预习 1.jQuery的加载2.jQuery选择器 3.jQuery的click事件 4.jQuery的样式操作 5.jQuery动画 01- 封闭函数 作用:避免在修改他人代码时出现 方法同名替换的情况想让一个函数直接执行用封...

czbkzmj
2018/12/07
0
0
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0
jQuery? 回归JavaScript原生API

如今技术日新月异,各类框架库也是层次不穷。即便当年漫山红遍的JQuery(让开发者,So Perfect!!)如今也有的大势。但JS原生API写法依旧;并且有时候只不过小写一个Demo,或者产品中只有少量...

jeffjade
2015/12/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

c++队列(转自本人csdn)

#include using namespace std;int main(){char input, alphabet = ‘A’;cout << "输入最后一个大写字母: ";cin >> input;for(int i = 1; i <= (input-'A'+1); ++i)......

WinkJie
30分钟前
1
0
外观模式(Facade)

//这篇写的可以 https://www.jianshu.com/p/f71051475e32

南桥北木
49分钟前
2
0
锤子科技确认卖身,官网微博均变更所属公司

年前曾有过消息,罗永浩创办的锤子科技将被今日头条和抖音的母公司字节跳动收购。其中的部分工作人员将随专利一同成为字节跳动所属,而罗永浩本人将离开锤子科技。 今天我们终于看到了锤子科...

linux-tao
55分钟前
2
0
[json]阿里fastjson1.2.24字符串转为json对象/数组

java.lang.ClassCastException: com.alibaba.fastjson.JSONArray cannot be cast to com.alibaba.fastjson.JSONObject at com.alibaba.fastjson.JSON.parseObject(JSON.java:206) 多行要用J......

Danni3
今天
1
0
关于jenkins 构建打包的技巧

关于jenkins 构建打包的技巧 jenkins是一个专业构建平台,在各大公司内部比较受欢迎,可以自定义构建方式,以下整理一些技巧,防止以后忘记。 邮件通知 jenkins 自带邮件通知功能,但是比较单...

shzwork
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部