自制简单JavaScript选择器

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一种简易的JQuery选择器实现方法，该选择器可以替代复杂的Sizzle引擎，仅提供查找ID、Class和标签的基本功能。通过简单的JavaScript函数实现，适用于需要轻量级解决方案的场景。

JQuery有一个神奇的$符，被称为JQ的选择器，JQ的选择器使用了强大的Sizzle引擎，功能很多，但我们有时不需要如此复杂的功能，只需简单的找一些Id、Class或Tags。

所以自己随便写了一个简单选择器。

var _G = function(selector, context){
  // _G(""),_G(null),_G(false)
  if(!selector) return "";
  
  //_G(DOMElement)
  if(selector.nodeType){
     	return selector;
  }
  
  if(typeof selector !== 'string') return '';
  
  // "#" , "." ,"*" or other char
  var type = selector.charAt(0);
  
  context = _G(context) || document;
  
  if(type == '*'){

     	return context.getElementsByTagName('*');

  }
  else if(type == '#'){

     	return context.getElementById(selector.slice(1));

  }
  else if(type == '.'){

     	var selector = selector.slice(1), re = context.getElementsByClassName ? context.getElementsByClassName(selector) : [];

     	if(!re[0]){
       		var e = _G('*',context),
           	      l = e.length,
           	      r = new RegExp("(^| )"+selector+"($| )"),
           	      i=0;
       		while(i<l){
           	      r.test(e[i].className) && re.push(e[i]);
           	      i++;
       		}

     			
     	}
     	return re.length>1?re:re[0];
            
  }
  else{
     	return context.getElementsByTagName(selector) || ""; 
  }
  return "";

};

console.log(_G('.demo')[0].innerHTML);