Joe*_*lum 151 html javascript jquery css-selectors jquery-selectors
我多次听说jQuery最强大的资产是它在DOM中查询和操作元素的方式:你可以使用CSS查询来创建在常规javascript中很难做到的复杂查询.不过,据我所知,就可以实现同样的结果document.querySelector或者document.querySelectorAll,这是在Internet Explorer 8和更高版本支持.
所以问题是这样的:如果使用纯JavaScript可以实现最强大的资产,为什么'冒险'jQuery的开销？
我知道jQuery不仅仅有CSS选择器,例如跨浏览器AJAX,附带好的事件等等.但它的查询部分是jQuery强大的一部分!
有什么想法吗？
Chr*_*oph 119
document.querySelectorAll() 浏览器有几个不一致的地方,旧版浏览器不支持这种情况现在可能不会再造成麻烦了.它有一个非常不直观的范围机制和一些其他不太好的功能.此外,使用javascript,您更难以使用这些查询的结果集,在许多情况下您可能想要这样做.jQuery提供的功能对他们的工作,如:filter(),find(),children(),parent(),map(),not()和几个.更不用说jQuery使用伪类选择器的能力了.
但是,我不会将这些事情视为jQuery最强大的功能,而是将其他事情视为在dom(事件,样式,动画和操作)中以" 交叉浏览器兼容方式"或"ajax"界面"工作" .
如果你只想从jQuery中选择引擎你可以使用jQuery本身使用的一个:Sizzle这样你就可以获得jQuerys Selector引擎的强大功能,而不会产生令人讨厌的开销.
编辑:只是为了记录,我是一个巨大的香草JavaScript粉丝.尽管如此,你有时需要10行JavaScript来编写1行jQuery.
当然,你必须遵守规则,不要像这样编写jQuery:
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();
这非常难以阅读,而后者非常清楚:
$('ul.first')
.find('.foo')
.css('background-color', 'red')
.end()
.find('.bar')
.css('background-color', 'green')
.end();
上面的伪代码说明了等效的JavaScript会更加复杂:
1)找到元素,考虑采用所有元素或仅考虑第一个元素.
// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");
2)通过一些(可能是嵌套的或递归的)循环遍历子节点数组并检查类(类列表在所有浏览器中都不可用!)
//.find('.foo')
for (var i = 0;i<e.length;i++){
// older browser don't have element.classList -> even more complex
e[i].children.classList.contains('foo');
// do some more magic stuff here
}
3)应用css风格
// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"
这段代码至少是用jQuery编写的代码行的两倍.此外,您还必须考虑跨浏览器问题,这些问题将危及本机代码的严重速度优势(除了可靠性之外).
Pas*_*ius 59
如果您正在优化IE8或更新版本的页面,您应该考虑是否需要jquery.现代浏览器本身有许多jquery提供的资产.
如果您关心性能,使用原生javascript 可以获得令人难以置信的性能优势(快2-10倍):http: //jsperf.com/jquery-vs-native-selector-and-element-style/2
我将div-tagcloud从jquery转换为原生javascript(IE8 +兼容),结果令人印象深刻.只需一点开销,速度提高4倍.
Number of lines Execution Time
Jquery version : 340 155ms
Native version : 370 27ms
你可能不需要Jquery提供了一个非常好的概述,哪些本机方法取代了哪个浏览器版本.
http://youmightnotneedjquery.com/
附录:进一步的速度比较本机方法如何与jquery竞争
Joh*_*ers 12
要理解为什么jQuery如此受欢迎,了解我们的来源非常重要!
大约十年前,顶级浏览器是IE6,Netscape 8和Firefox 1.5.在那些日子里,除了之外,几乎没有跨浏览器方式从DOM中选择元素Document.getElementById().
因此,当jQuery 在2006年发布时,它是非常具有革命性的.当时,jQuery为如何轻松选择/更改HTML元素和触发事件设置了标准,因为它的灵活性和浏览器支持是前所未有的.
现在,十多年后,许多使jQuery如此受欢迎的功能已经包含在javaScript标准中:
$()现在可以使用,而不是jQueryDocument.querySelectorAll()$el.on()您现在可以使用而不是jQueryEventTarget.addEventListener()$el.toggleClass()您现在可以使用而不是jQueryElement.classList.toggle()这些在2005年一般都没有.今天它们的事实显然引出了为什么我们应该使用jQuery的问题.事实上,人们越来越想知道我们是否应该使用jQuery.
所以,如果你认为你很好地理解JavaScript而没有jQuery,请做!不要觉得被迫使用jQuery,只是因为有很多人在做这件事!
小智 7
如果jQuery的Sizzle选择器引擎可用querySelectorAll,它可以使用它.它还可以消除浏览器之间的不一致性,从而实现统一的结果.如果你不想使用所有的jQuery,你可以单独使用Sizzle.这是一个非常重要的发明轮子.
这里有一些源自樱桃的选择,展示了jQuery(w/Sizzle)为你排序的东西:
Safari怪癖模式:
if ( document.querySelectorAll ) {
(function(){
var oldSizzle = Sizzle,
div = document.createElement("div"),
id = "__sizzle__";
div.innerHTML = "<p class='TEST'></p>";
// Safari can't handle uppercase or unicode characters when
// in quirks mode.
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return;
}
如果那个守卫失败了它使用它是一个没有增强的Sizzle版本querySelectorAll.再往下,IE,Opera和Blackberry浏览器中存在不一致的特定句柄.
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id === match[3] ) {
return makeArray( [ elem ], extra );
}
} else {
return makeArray( [], extra );
}
如果一切都失败了,它将返回结果oldSizzle(query, context, extra, seed).
那是因为jQuery可以做的远不止这些querySelectorAll.
首先,jQuery(特别是Sizzle)适用于不支持CSS2.1-3选择器的IE7-8等旧版浏览器.
另外,Sizzle(它是jQuery背后的选择器引擎)为您提供了许多更高级的选择器工具,如:selected伪类,高级:not()选择器,更复杂的语法$("> .children")等等.
它提供跨浏览器,完美无瑕,提供jQuery可以提供的所有功能(插件和API).
是的,如果你认为你可以依赖简单的类和id选择器,那么jQuery对你来说太过分了,而且你会付出夸张的回报.但如果你不这样做,并希望利用所有jQuery的优点,那么就使用它.
在代码可维护性方面，坚持使用广泛使用的库有几个原因。
主要问题之一是它们有很好的文档记录，并且拥有诸如……说……stackexchange 之类的社区，可以在其中找到有关库的帮助。使用自定义编码库，您拥有源代码，也许还有操作文档，除非编码人员花更多时间记录代码而不是编写代码，这种情况非常罕见。
编写自己的库可能对你有用，但坐在隔壁桌的实习生可能更容易掌握 jQuery 之类的东西。
如果你愿意，可以称之为网络效应。这并不是说代码在 jQuery 中会更好；只是因为代码的简洁性使所有技能水平的程序员更容易掌握整体结构，因为在您正在查看的文件中可以同时看到更多的功能代码。从这个意义上说，5 行代码优于 10 行。
总而言之，我认为 jQuery 的主要优点是代码简洁，而且无处不在。
小智 5
这是一个比较,如果我想应用相同的属性,例如隐藏类"我的类"的所有元素.这是使用jQuery的一个原因.
jQuery的:
$('.my-class').hide();
JavaScript的:
var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
cls[i].style.display = 'none';
}
由于jQuery已经如此受欢迎,他们应该让document.querySelector()表现得像$().相反,document.querySelector()只选择第一个匹配元素,这使得它只有一半有用.
老问题，但五年后，它\xe2\x80\x99值得重新审视。这里我只讨论 jQuery 的选择器方面。
\n\ndocument.querySelector[All]所有当前浏览器都支持，低至IE8，因此兼容性不再是问题。我还没有发现任何性能问题（它应该比 慢document.getElementById，但我自己的测试表明它\xe2\x80\x99s 稍快）。
因此，当涉及到直接操作元素时，它比 jQuery 更受青睐。
\n\n例如：
\n\nvar element=document.querySelector('h1');\nelement.innerHTML='Hello';\n远远优于：
\n\nvar $element=$('h1');\n$element.html('hello');\n为了做任何事情，jQuery 必须运行一百行代码（我曾经跟踪过上面这样的代码，看看 jQuery 实际上用它做了什么）。这显然浪费了大家\xe2\x80\x99的时间。
\n\njQuery 的另一个重要成本是它将所有内容都包装在一个新的 jQuery 对象中。如果您需要再次打开对象或使用对象方法之一来处理已在原始元素上公开的属性，则这种开销尤其浪费。
\n\n然而，jQuery 的优势在于它处理集合的方式。如果需要设置多个元素的属性，jQuery 有一个内置each方法，允许这样的操作：
var $elements=$('h2'); // multiple elements\n$elements.html('hello');\n要使用 Vanilla JavaScript 来做到这一点，需要这样的东西：
\n\nvar elements=document.querySelectorAll('h2');\nelements.forEach(function(e) {\n e.innerHTML='Hello';\n});\n有些人觉得这令人望而生畏。
\n\njQuery 选择器也略有不同，但现代浏览器（不包括 IE8）不会获得\xe2\x80\x99 的太多好处。
\n\n通常，我警告不要在新项目中使用 jQuery：
\n\n如果以上都不重要，那就做你想做的事。然而，jQuery 对于跨平台开发不再像以前那样重要，因为现代 JavaScript 和 CSS 比以前走得更远。
\n\n这里没有提及 jQuery 的其他功能。然而，我认为他们也需要仔细观察。
\n