如题,这样选择出来的选择结果只是第一个条件的元素,与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源码中,有这样的写法:
javascript
jQuery.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。也是略微了解。欢迎拍砖。