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){}		

}

你可能感兴趣的:(selector)