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

Question

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

举例：

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



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

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

请问其原理？

Answer 1

'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。也是略微了解。欢迎拍砖。

Answer 2

关于这个你应该去了解下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

Answer 3

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