我注意到在监视/尝试回答常见的jQuery问题时,有一些使用javascript(而不是jQuery)的实践实际上使您能够 编写更少的代码,并且做得 …数量相同。并且还可能产生性能优势。
一个具体的例子
$(this) 与 this
$(this)
this
在点击事件中引用点击的对象ID
jQuery的
$(this).attr("id");
Java脚本
this.id;
还有其他类似的常规做法吗?无需将jQuery混用就可以更轻松地完成某些Javascript操作的地方。还是这是罕见的情况?(实际上是需要更多代码的jQuery“快捷方式”)
编辑: 虽然我很欣赏有关jQuery与普通javascript性能的答案,但实际上我正在寻找更多定量的答案。 使用jQuery时 ,使用普通javascript而不是使用javascript可能会更好(可读性/紧凑性)的实例$()。除了我在原始问题中给出的示例。
$()
this.id
this.value
<select>
value
<option>
this.className
this.selectedIndex
this.options
this.text
this.rows
<table>
<tr>
this.cells
this.parentNode
this.checked
checkbox
this.selected
option
this.disabled
input
this.readOnly
this.href
<a>
href
this.hostname
this.pathname
this.search
this.src
src
…我想你应该已经明白了。
有时性能至关重要。就像您多次循环执行某项操作一样,您可能想抛弃jQuery。
通常,您可以替换:
$(el).attr('someName');
与:
上面措辞不好。getAttribute不是替代品,但是它确实检索了从服务器发送的属性的值,并且它的对应属性将对其setAttribute进行设置。在某些情况下是必需的。
getAttribute
setAttribute
下面的句子涵盖了它。以获得更好的治疗。
el.getAttribute('someName');
…以便直接访问属性。请注意,属性与属性不同(尽管它们有时会相互镜像)。当然也有setAttribute。
假设您遇到这样一种情况,即收到了一个页面,您需要在其中解开特定类型的所有标签。jQuery简短易行:
$('span').unwrap(); // unwrap all span elements
但是,如果有很多,您可能需要做一些本地的DOM API:
var spans = document.getElementsByTagName('span'); while( spans[0] ) { var parent = spans[0].parentNode; while( spans[0].firstChild ) { parent.insertBefore( spans[0].firstChild, spans[0]); } parent.removeChild( spans[0] ); }
该代码很短,比jQuery版本性能更好,并且可以很容易地在您的个人库中变成可重用的函数。
似乎while由于的缘故,我与外部之间存在无限循环while(spans[0]),但是由于我们正在处理“活动列表”,所以在执行时它会更新parent.removeChild(span[0]);。这是一个非常漂亮的功能,当我们使用数组(或类似数组的对象)时,我们会错过它。
while
while(spans[0])
parent.removeChild(span[0]);