什么时候使用 Vanilla JavaScript 和 jQuery? [英] When to use Vanilla JavaScript vs. jQuery?

问题描述

我在监控/尝试回答常见的 jQuery 问题时注意到，有一些使用 javascript 而不是 jQuery 的做法，实际上使您能够少写多做……同样如此数量.并且还可能产生性能优势.

I have noticed while monitoring/attempting to answer common jQuery questions, that there are certain practices using javascript, instead of jQuery, that actually enable you to write less and do ... well the same amount. And may also yield performance benefits.

具体例子

$(this) vs this

在引用被点击对象 id 的点击事件中

Inside a click event referencing the clicked objects id

jQuery

$(this).attr("id");

Javascript

this.id;

还有其他类似的常见做法吗?某些 Javascript 操作可以更轻松地完成，而无需将 jQuery 混入其中.或者这是一个罕见的案例?(实际上需要更多代码的jQuery快捷方式")

Are there any other common practices like this? Where certain Javascript operations could be accomplished easier, without bringing jQuery into the mix. Or is this a rare case? (of a jQuery "shortcut" actually requiring more code)

虽然我很欣赏有关 jQuery 与普通 javascript 性能的答案，但实际上我正在寻找更多定量的答案.在使用 jQuery 时，使用纯 javascript 而不是使用 $() 实际上会更好(可读性/紧凑性)的实例.除了我在原始问题中给出的示例之外.

EDIT : While I appreciate the answers regarding jQuery vs. plain javascript performance, I am actually looking for much more quantitative answers. While using jQuery, instances where one would actually be better off (readability/compactness) to use plain javascript instead of using $(). In addition to the example I gave in my original question.

推荐答案

• this.id(如您所知)
• this.value(在大多数输入类型上.当 没有 value 时，我知道的唯一问题是 IE在 元素上设置的属性，或 Safari 中的单选输入.)
  this.className 获取或设置整个类"属性
  this.selectedIndex 针对
  获取所选索引
• this.options 针对 获取 元素列表
  this.text 针对 获取其文本内容
  this.rows 针对 获取 元素的集合

  this.cells 针对

  获取其单元格 (td & th)

  this.parentNode 获取直接父节点

  this.checked 获取 checkbox 的选中状态 谢谢@Tim Down

  this.selected 获取option 的选中状态谢谢@Tim Down

  this.disabled 获取 input 的禁用状态 谢谢@Tim Down

  this.readOnly 获取 input 的只读状态 谢谢@Tim Down

  this.href 针对 元素获取其 href

  this.hostname 针对 元素获取其 href

  的域

  this.pathname 针对 元素获取其 href

  的路径

  this.search 针对 元素获取其 href

  的查询字符串

  this.src 针对具有 src

  有效的元素

  • this.id (as you know)
  • this.value (on most input types. only issues I know are IE when a <select> doesn't have value properties set on its <option> elements, or radio inputs in Safari.)
  • this.className to get or set an entire "class" property
  • this.selectedIndex against a <select> to get the selected index
  • this.options against a <select> to get a list of <option> elements
  • this.text against an <option> to get its text content
  • this.rows against a <table> to get a collection of <tr> elements
  • this.cells against a <tr> to get its cells (td & th)
  • this.parentNode to get a direct parent
  • this.checked to get the checked state of a checkbox Thanks @Tim Down
  • this.selected to get the selected state of an option Thanks @Tim Down
  • this.disabled to get the disabled state of an input Thanks @Tim Down
  • this.readOnly to get the readOnly state of an input Thanks @Tim Down
  • this.href against an <a> element to get its href
  • this.hostname against an <a> element to get the domain of its href
  • this.pathname against an <a> element to get the path of its href
  • this.search against an <a> element to get the querystring of its href
  • this.src against an element where it is valid to have a src

  ...我想你明白了.

  有时性能至关重要.就像如果您在循环中多次执行某些操作一样，您可能想要放弃 jQuery.

  There will be times when performance is crucial. Like if you're performing something in a loop many times over, you may want to ditch jQuery.

  一般可以替换:

  $(el).attr('someName');
  

  与:

  以上措辞不当.getAttribute 不是替代品，但它确实检索从服务器发送的属性的值，其对应的 setAttribute 将设置它.在某些情况下是必要的.

  Above was poorly worded. getAttribute is not a replacement, but it does retrieve the value of an attribute sent from the server, and its corresponding setAttribute will set it. Necessary in some cases.

  下面的句子涵盖了它.请参阅此答案以获得更好的治疗.

  The sentences below sort of covered it. See this answer for a better treatment.

  el.getAttribute('someName');
  

  ...为了直接访问属性.请注意，属性与属性不同(尽管它们有时会相互反映).当然还有setAttribute.

  ...in order to access an attribute directly. Note that attributes are not the same as properties (though they mirror each other sometimes). Of course there's setAttribute too.

  假设您收到了一个页面，您需要打开某个类型的所有标签.使用 jQuery，它既简短又容易:

  Say you had a situation where received a page where you need to unwrap all tags of a certain type. It is short and easy with jQuery:

  $('span').unwrap();  // unwrap all span elements
  

  但是如果有很多，你可能想要做一些原生的 DOM API:

  But if there are many, you may want to do a little native 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 版本性能更好，并且可以很容易地在你的个人库中变成一个可重用的函数.

  This code is pretty short, it performs better than the jQuery version, and can easily be made into a reusable function in your personal library.

  由于 while(spans[0]) 的原因，我似乎对外部 while 进行了无限循环，但是因为我们正在处理实时list" 当我们执行 parent.removeChild(span[0]); 时它会更新.这是一个非常漂亮的功能，我们在使用 Array(或类似 Array 的对象)时会忽略它.

  It may seem like I have an infinite loop with the outer while because of while(spans[0]), but because we're dealing with a "live list" it gets updated when we do the parent.removeChild(span[0]);. This is a pretty nifty feature that we miss out on when working with an Array (or Array-like object) instead.

  这篇关于什么时候使用 Vanilla JavaScript 和 jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

  登录 关闭

  扫码关注1秒登录

  

  发送“验证码”获取 | 15天全站免登陆
  友情链接： IT屋 Chrome插件 谷歌浏览器插件
  IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.