jQuery.is方法 VS matchesSelector

matchesSelctor方法已经被FF/safari（每次都打错这个词- -）/chrome等浏览器支持，其作用是匹配一个给定字符串selector，如果匹配成功，返回true，否则，返回false；

SELECTORS API LEVEL 2提供的接口：

这个方法常用于事件委托等等当中；不过，并不是所有的浏览器都支持这个方法，而且每个浏览器的实现方式也不一样；为此，需要一个兼容性的方案；比如：

var html = document.documentElement,
		matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector;

根据标准，refElement可以是节点树的某个节点，也可以是随意的refNode，比如document.createElement所产生的；

var divEl=document.createElement( "div" );
var docFrag=document.creatDocumentFragment();

不过，IE9在实现过程中，认为这样产生的node是一个disconnected node，这还包括documentFragment；所以，在IE9中，disconnected node是不能使用这个方法的；

说道matchesSelctor，看到jQuery中提供了类似的方法，就是is，但是is方法和原生的方法区别很大，首先，is方法扩展了很多东西出来，什么eq/contains/last/first一堆的东西；is遵循的是至少化原则，就是说在候选集中，如果有一个符合的就算是is成功；但是，在使用is的自扩展出来的方法，仍然要小心，不然，有时就会稀里糊涂；比如：

$(".child").click(function(){
	if($(this).is("#parent>.child:eq(1)")){
		$(this).css("color","red")
	}
	})

因为("#parent>.child:eq(1)")并不以$(this)作为context，当使用is的时候，因为其中的pos关系，匹配规则是以document为context，找到匹配("#parent>.child:eq(1)")，如果匹配到了元素，返回true，于是，我建议在使用is的时候，尽可能的使用simple一点的（’div’）或者原生的选择符，比如:nth-child/:first-child，还有CSS3中的浏览器也支持的；

对于matchesSelctor的原生方法，如果一个selector是非法的，选择器无法匹配的，这个方法并不返回false，而是抛出异常；要注意的是，在以<Gecko 2.0（指FF）为内核的浏览器中，并不抛出异常，而是返回false；

因为IE9的关系和异常处理，大致一个兼容性的matchesSelctor可以是这样的：

matchesSlector=function(refElement,selector){
	var html = document.documentElement,
		matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector;
	var disconnectedMatch = matches.call( document.createElement( "div" ), "div" );
	try{
		var ret=refElement.matches(selector);
		//过滤IE9的问题；
			if(ret||!!disconnectedMatch||node.document&&node.document.nodeType!==11){
				return ret;
	}
		}catch(e){}		
}

转载于:https://www.cnblogs.com/zorroLiu/archive/2011/05/19/2051151.html