文档章节

简单的dom操作

别人说我名字很长
 别人说我名字很长
发布于 2016/12/07 00:48
字数 633
阅读 34
收藏 0

精选30+云产品,助力企业轻松上云!>>>

写个简易dome选择器

<!DOCTYPE html>
<html>
<head>
	<title>简易dom选择器</title>
	<meta charset="utf-8" />
</head>
<body>

<div id="box">
	<ul>
		<li class="aaa bbb ccc">项目1</li>
		<li class="active">项目2</li>
		<li class="ccc aaa"><input type="text" name=""></li>
		<li class="dddd bbb"><span>项目4</span></li>
	</ul>
</div>

<script type="text/javascript">

var Selector = window.Q = function(query){

	var Q = {};
	Q.elements = [];
	if(typeof query == "string"){
		Q.elements = document.querySelectorAll(query);
	}else if(typeof(query) == "object" && query.nodeType==1){
		Q.elements = [query] ;
	}

	Q.length = Q.elements.length;

	var setElements = function(elements){
		Q.elements = elements;
		Q.length = elements.length;
	}


	Q.inArray = function(item,arr){
		for(var v of arr){
			if(v==item)return true;
		}
		return false;
	}


	Q.each = function(handler){
		[].forEach.call(Q.elements,function(element,index){
			handler(element,index);
		});
	}

	Q.eq = function(index){
		if(Q.length-1<index){
			Q.elements = [];
			Q.length = 0;
		}else{
			Q.elements = [Q.elements[index]];
			Q.length = 1;
		}
		return this;
	}

	Q.index = function(){
		if(Q.elements.length==0)return -1;
		var arr = Q.elements[0].parentNode.childNodes;
		var sibs = [];
		arr.forEach(function(item,index){
			if(item.nodeType===1){
				sibs.push(item);
			} 
		});
		
		for(var i=0;i<sibs.length;i++){
			if(sibs[i]===Q.elements[0])return i;
		}
		return -1;
	}

	Q.siblings = function(){
		if(Q.elements.length==0)return this;

		var parent = Q.elements[0].parentNode;
		var sibs = [];
		parent.childNodes.forEach(function(v){
			if(v.nodeType==1 && v!==Q.elements[0]){
				sibs.push(v);
			}
		});

		Q.elements = sibs;
		Q.length = sibs.length;
		return this;
	}

	Q.click = function(handler){
		Q.each(function(element){
			element.addEventListener("click",handler)
		});
		return this;
	}

	Q.css = function(style){
		Q.each(function(element){
			element.setAttribute("style",style);
		});
		return this;
	}

	Q.addClass = function(className){
		Q.each(function(element){
			element.className += ' '+className;
		});
		return this;
	}

	Q.removeClass = function(className){
		Q.each(function(element){
			console.log(element.className);
			var oldArr = element.className.split(" ");
			var rmArr = className.split(" ");
			var newClassNames = [];
			oldArr.forEach(function(item,index){
				if(!Q.inArray(item,rmArr)){
					newClassNames.push(item);
				}
			})
			element.className = newClassNames.join(" ");
		});
		return this;
	};

	Q.html = function(html){
		var isGet = typeof(html)=='undefined' ? true : false;
		var result = '';
		Q.each(function(element){
			isGet ? result += element.innerHTML : element.innerHTML = html;
		});
		return isGet ? result : this;
	}

	Q.text = function(text){
		var isGet = typeof(text)=='undefined' ? true : false;
		var result = '';
		Q.each(function(element){
			isGet ? result += element.innerText : element.innerText = text
		});
		return isGet ? result : this;
	}

	Q.val = function(value){
		var isGet = typeof(value)=='undefined' ? true : false;
		var result = '';
		Q.each(function(element){
			isGet ? result += element.value : element.value = value;
		})
		return isGet ? result : this;
	}

	Q.append = function(value){
		Q.each(function(element){
			//console.log(element);
		});
		return this;
	}

	//todo nodeList的监测
	Q.on = function(e,selector,handler){
		Q.each(function(element){
			element.addEventListener(e,handler);
		});
		return this;
	}

	Q.removeAttr = function(attrName){
		Q.each(function(element){
			element.removeAttribute(attrName);
		});
		return this;
	}

	Q.prev = function(){
		var arr = [];
		Q.each(function(element){
			var ele = element.previousSibling();
			if(ele){
				arr.push(ele); 
			}
		});
		setElements(arr);
		return this;
	}

	Q.next = function(){
		var arr = [];
		Q.each(function(element){
			var ele = element.nextSibling();
			if(ele)arr.push(ele);
		});
		setElements(arr);
		return this;
	}

	Q.parent = function(){
		//parentNode
	}

	Q.parents = function(){
		//ownerDocument
		//parentNode
	}

	//todo  append()
	//todo  prepend()
	//todo  after()
	//todo  before()
	//todo  remove()
	//todo  first()
	//todo  last()
	//todo  hasClass()
	//todo  closest()
	//todo  children()
	//todo  parent()
	//todo  parents()
	//todo  show()
	//todo  hide()
	//todo  width()
	//todo  height()
	//todo  offset()
	//todo  attr()
	//todo  removeAttr()
	//todo  data()
	//todo  removeData()
	//todo  extend()
	//todo  on[blur,change,click,dblclick,focus,keydown,keyup,mouseenter,mouseleave,mouseout,submit]
	//todo  prev()
	//todo  ajax()
	//todo  get()
	//todo  getJSON()
	//todo  post()
	//todo  promise()



	return Q;
}

Q("#box ul li").click(function(event){
	Q(this).css("color:#f00").siblings().css("color:#000");
})

Q("#box ul li").eq(1).css("color:#f00");

Q("#box ul li").removeClass("aaa bbb");

Q("#box ul li").eq(1).html('<b style="color:green;">html content</b>');

Q("#box input").val("hello world");

console.log(Q("#box ul li").text());

Q("#box ul li").on("click","",function(event){
	console.log(Q(this).text())
})

Q("#box ul li").append('<b style="color:green">hello world</b>');




</script>
<input type="text" id="a">
<span id="b"></span>

<script type="text/javascript">
var obj = {};
Object.defineProperty(obj,'hello',{
	set:function(newVal){
		document.getElementById('a').value = newVal;
		document.getElementById('b').innerHTML = newVal;
	}
});

document.addEventListener('keyup',function(e){
	obj.hello = e.target.value;
});
</script>

</body>
</html>

 

别人说我名字很长
粉丝 58
博文 265
码字总数 113918
作品 0
济南
程序员
私信 提问
加载中
请先登录后再评论。
理解 Virtual DOM

特别声明:文本转载@YangJiyuan的《理解 Virtual DOM》一文,如需转载,烦请注明原文出处:https://github.com/y8n/blog/issues/5。 使用过React的同学对于Virtual DOM并不陌生,作为React的...

大灰狼的小绵羊哥哥
2018/11/28
0
0
如何实现Web页面录屏?

摘要: 很有意思的操作... 原文:web页面录屏实现 译者:frontdog Fundebug经授权转载,版权归原作者所有。 写在前面的话 在看到评论后,突然意识到自己没有提前说明,本文可以说是一篇调研学...

osc_uwpj27el
2019/09/09
1
0
Javascript的DOM操作 - 你真的了解吗?

前言 在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望...

顽Shi
2014/02/12
1.6W
11
虚拟DOM介绍

近一年业务项目中都在使用React框架,也出现了一些以前没怎么关注过的新概念,例如虚拟DOM。虚拟DOM本身不是什么新鲜事物,网上随便一搜,早在2015年就有人详细介绍过了,但我只知道它速度快...

大灰狼的小绵羊哥哥
2019/04/13
0
0
9.停下来说说jquery

javacript时代到jquery时代 不同浏览器对javacript解析的差异性,导致做兼容处理的成本的上升,聪明人很快发现了这个痛点,于是, 抹平浏览器差异的jQuery库出现了。 jQuery:用更少的代码,...

oneboi
2016/11/25
5
0

没有更多内容

加载失败,请刷新页面

加载更多

Microsoft Edge Canary for Mac(edge浏览器) v86.0.570.0中文版

microsoftedge浏览器是一款作为windows操作系统的官方内置浏览器。Microsoft Edge官方版对比ie浏览器来说功能更好,而且它还集成Contana等新功能,交互界面更加简洁,还增加了对Firefox浏览器...

云不若
27分钟前
18
0
信息的哲学--从信息到数据存储,再到数据保护

信息的哲学--从信息到数据存储,再到数据保护 1 什么是信息 当今信息化时代,信息就是利润,数据就是企业的命根子。世界运行在数据之上。当代量子学的最新理论是:量子其实是一种信息,而不...

osc_taer599u
27分钟前
16
0
mysql 到期 即将到期

即将到期的设备数量: SELECT COUNT(id) FROM jtl_device WHERE DATE_FORMAT(expiration_time,'%Y-%m-%d')<=DATE_ADD(CURDATE(),INTERVAL 30 DAY) AND `company_id` = 1577945251258504 AND ......

简小姐
27分钟前
13
0
深入分析各种raid级别及其速度变化比较

本文从低层原理上,深入透析了目前存在的7种raid模式的组成原理,结构,并深刻分析了各种级别相对于单盘IO速率的变化。 Raid0 Raid0是这样一种模式:我们拿5块盘的raid0为例子。 上图中5个竖...

osc_22rhv8iu
28分钟前
6
0
论文阅读:“快把卷积神经网络中的平移不变性带回来” - 知乎

老规矩,文章以我自己的Blog的最新版为准。 论文阅读:“快把卷积神经网络中的平移不变性带回来” blog.tsingjyujing.com 简介 这篇博客主要是我读论文Making Convolutional Networks Shift...

osc_r9yyhhqz
29分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部