首页 > jquery见过一个插件使用这样的选择器写法$('selector1', 'selector2'),请问其原理?

jquery见过一个插件使用这样的选择器写法$('selector1', 'selector2'),请问其原理?

如题,这样选择出来的选择结果只是第一个条件的元素,与jquery全“”的逗号选择器是有区别的,请问这个难道是javascript语言的选择方式?我好像见过js有,但是js返回的是最后一个的值,而且那也不是选择器啊……

举例:

html$('li', 'ul').css('color', 'red');



<ul>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ul>


结果是只有li变成了红色。

请问其原理?


原理上面说得很清楚了。或许换个参数就明白了?我是这样理解的:
$('ul').click(function(){
$('li', this).css('color', 'red');
});
ul换成this应该就不难理解了。


关于这个你应该去了解下jQuery实现的CSS选择器引擎Sizzle
简单的说,$("li,ul"),这里面的li,ul表达式可以看成并列的成分,所以最终查找的结果是
$("li") + $("ul")

而那个JavaScript的相关方法应该是getElementsByTagName
https://developer.mozilla.org/en-US/docs/Web/API/document/getElementsB...
不好意思,文档中只支持一个参数,所以javascript的写法应该返回第一个参数的结果:

我测试结果:

document.getElementsByTagName("li","ul") === document.getElementsByTagName("li");
//true
document.getElementsByTagName("li","ul") === document.getElementsByTagName("ul");
//false


'selector1'是真正的selector,'selector2'是context,即第一个选择器的上下文。
$('li','ul') 应该是选择所有 ul 元素下的 li元素,被选的只有 li 元素。

在jQuery源码中,有这样的写法:

javascriptjQuery.fn.init(selector,context,rootjQuery){};

其中,大概 170 行附近,应该就是处理$('li','ul')这样选择器写法的。

javascript// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
    return this.constructor( context ).find( selector );
}

find 方法好像是用到了 sizzle 选择器。
我也没怎么开始用jQuery。也是略微了解。欢迎拍砖。

【热门文章】
【热门文章】