自定义query选择器

稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2015-06-29   阅读次数: 124   查看权限: 游客查看

自定义query选择器

/**
 * css选择器,根据2\8原则,这里只实现最常用的三种
 * 注:当结果集只有一个元素时将直接返回该元素
 *
 * @param {Object} selector
 * @param {Object} context
 *
 * 1, 通过className获取
 * ('.cls')
 * ('.cls', el)
 * ('.cls', 'id')
 * ('span.cls')
 * ('span.cls', el)
 * ('span.cls', 'id')
 *
 * 2, 通过tagName获取
 * ('span')
 * ('span', el)
 * ('span', 'id')
 *
 * 3, 通过attribute获取
 * ('[name]')
 * ('[name]', el)
 * ('[name]', 'id')
 * ('[name=uname]')
 * ('[name=uname]', el)
 * ('[name=uname]', 'id')
 * ('input[name=uname]')
 * ('input[name=uname]', el)
 * ('input[name=uname]', 'id')
 */
function query(selector,context) {
	var s = selector,
		doc = document,
		regId = /^#[\w\-]+/,
		regCls = /^([\w\-]+)?\.([\w\-]+)/,
		regTag = /^([\w\*]+)$/,
		regNodeAttr = /^([\w\-]+)?\[([\w]+)(=(\w+))?\]/;
	
	var context = 
			context == undefined ?
			document :
			typeof context == 'string' ?
			doc.getElementById(context.substr(1,context.length)) :
			context;
			
	if(regId.test(s)) {
		return doc.getElementById(s.substr(1,s.length));
	}
	
	if(context.querySelectorAll) {
		if(context.nodeType == 1) {
			var old = context.id, id = context.id = '__$$__';
			try {
				return context.querySelectorAll( '#' + id + ' ' + s );
			} catch(e){
			} finally {
				old ? context.id = old : context.removeAttribute( 'id' );
			}
		}
		return context.querySelectorAll(s);
	}
	
	if(regCls.test(s)) {
		var ary = s.split('.'),
			tag = ary[0],
			cls = ary[1],
			len,
			all,
			els = [];
			if(context.getElementsByClassName) {
				var res = context.getElementsByClassName(cls);
				if(tag) {
					for(var i=0,len=res.length; i<len; i++) {
						res[i].tagName.toLowerCase()==tag && els.push(res[i]);
					}
					return els;
				}else{
					return res;
				}
			}else {
				all = context.getElementsByTagName(tag || '*');
				return filter(all, 'className', cls);	
			}
			
	}
	
	if(regTag.test(s)) {
		return context.getElementsByTagName(s);
	}
	
	if(regNodeAttr.test(s)) {
		var ary = regNodeAttr.exec(s),
			all = context.getElementsByTagName(ary[1] || '*');
			
		return filter(all, ary[2], ary[4]);	
	}		
	function filter(all, attr, val) {
		var reg = RegExp('(?:^|\\s+)' + val + '(?:\\s+|$)');
		function test(node) {
			var v = attr == 'className' ? node.className : node.getAttribute(attr);
			if(v) {
				if(val) {
					if(reg.test(v)) return true;
				}else {
					return true;
				}
			}
			return false;
		}
		var i = -1, el, r = -1, res = [];
		while( (el = all[++i]) ) {
			if(test(el)) {
				res[++r] = el;
			}
		}
		return res;
	}
}

 

关键词: javascript,query,选择器   编辑时间: 2015-06-29 15:39:19

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐