queryselector发音读法（jquery怎么表达document.queryselector）
本文目录
jquery怎么表达document.queryselector
$("xxx") === document.queryselector("xxx");
JavaScript就在这里随时等候你的召唤，但是也许你还没有准备好如何使用他
document.querySelector（）方法
HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。
获取文档中id=”container”的元素
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
参数类型可以为如下：
指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
对于多个选择器，使用逗号隔开，返回一个匹配的元素。
再谈querySelector和querySelectorAll的区别与联系
querySelector：
return the first matching Element
node within the node’s subtrees. If there is no such node, the method must
return null.（返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹配，返回null）
querySelectorAll：
return a NodeList containing
all of the matching Element nodes within the node’s subtrees, in document order.
If there are no such nodes, the method must return an empty NodeList.
（返回指定元素节点的子树中匹配selector的节点集合，采用的是深度优先预查找；如果没有匹配的，这个方法返回空集合）
使用方法：
复制代码
代码如下:
var element =
baseElement.querySelector(selectors);
var elementList =
baseElement.querySelectorAll(selectors);
这在BaseElement
为document的时候，没有什么问题，各浏览器的实现基本一致；但是，当BaseElement 为一个普通的dom Node的时候（支持这两个方法的dom
Node），浏览器的实现就有点奇怪了，举个例子：
复制代码
代码如下:
《div class="test" id="testId"》
《p》《span》Test《/span》《/p》
《/div》
《script type="text/javascript"》
var testElement=
document.getElementById(’testId’);
var element =
testElement.querySelector(’.test span’);
var elementList =
document.querySelectorAll(’.test span’);
console.log(element); //
《span》Test《/span》
console.log(elementList); // 1
《/script》
按照W3C的来理解，这个例子应该返回：element：null；elementList：;因为作为baseElement的
testElement里面根本没有符合selectors的匹配子节点；但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；这和我们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！
人的智慧总是无穷的，Andrew
Dupont发明了一种方法暂时修正了这个怪问题，就是在selectors前面指定baseElement的id，限制匹配的范围；这个方法被广泛的应用在各大流行框架中；
Jquery的实现：
复制代码
代码如下:
var oldContext = context,
old =
context.getAttribute( "id" ),《BR》 nid = old || id,
try {
if (
!relativeHierarchySelector || hasParent ) {
return makeArray(
context.querySelectorAll( " " + query ), extra );
}
}
catch(pseudoError) {} 《BR》finally {
if ( !old )
{oldContext.removeAttribute( "id" );}
}
先不看这点代码中其他的地方，只看他如何实现这个方法的；这点代码是JQuery1.6的片段；当baseElement没有ID的时候，给他设置一个id
= "__sizzle__”，然后再使用的时候加在selectors的前面，做到范围限制；context.querySelectorAll( "[id=’" +
nid + "’] " + query
；最后，因为这个ID本身不是baseElement应该有的，所以，还需要移除：oldContext.removeAttribute( "id" );
，Mootools的实现：
复制代码
代码如下:
var currentId =
_context.getAttribute(’id’), slickid = ’slickid__’;
_context.setAttribute(’id’, slickid);
_expression = ’#’ + slickid + ’ ’
+ _expression;
context = _context.parentNode;
Mootools和Jquery类似：只不过slickid = ’slickid__’；其实意义是一样的；
方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;
IE 8
：不支持baseElement为object；
更多文章：
force-unicode-font是什么意思？ღ᭄ꦿ这些特殊字是怎么来的
2026年9月27日 23:50
java重载和覆盖的定义（java中方法重载和重写的区别和定义）
2026年9月27日 22:50
变幻金刚魔方教程图解（变幻金刚魔方的最后一步，研究了很长时间就是搞不 出来，能教教我吗）
2026年9月27日 21:00
怎样使用dreamweaver（怎么用dreamweaver制作网页如何用dreamweaver制作网页）
2026年9月27日 20:40
css提交按钮怎么写（html:submit能加css样式吗）
2026年9月27日 19:20
2026年9月27日 17:20
雨崩近年危险事件调查（下雨好长时间了，去雨崩的路况怎么样有刚从雨崩回来的吗）
2026年9月27日 13:20
2026年9月27日 12:40
2026年9月27日 12:00
shell脚本substr（SHELL脚本对LINUX下指定文本文件的满足条件的行的特定位置字符串进行替换）
2026年9月27日 10:50
