jQuery - 尽可能用id或class做选择器 ¶

• 作者：KK

• 发表日期：2016.11.26

要点速读 ¶

1. 不要使用标签名做选择器

2. 用id或class取代标签名做选择器只是解决了简单的兼容问题，但删除这个dom时维护人员不容易识别出有没有js操作这个DOM，如果有，则删除了js就出错了

3. 只使用J-xxx这样以J-开头的class提供给js操作，这样就能在删除时看到J-开头而知道要找出相关js代码并删除了

菜鸟程序员的代码往往是这样的：$('#xxx li').css(...)先通过一个#xxx定位到一个节点后，后面的有时候就是直接写标签做选择器

如果界面更新时把这个li标签换成了p或div什么的，这样选择器就会找不到了

• 解决办法：

  给li标签加个class，比如叫yyy，然后选择器就是.xxx .yyy，则把li标签也换掉了的话，只要新替代的标签也有yyy这个class就可以依然被选择到了

总结：不要随便用 标签名 做选择器

问题：移除dom时不知道js有没有操作这个class的节点怎么办 ¶

用了class来取代标签名做选择器只是一个保险一点儿的做法，但没有完全解决问题

问题就是假设节点被删除了，但别人不知道有js代码操作了这个class怎么办？（这个维护的人不一定是你嘛，别人怎么清楚有没有js操作它呢）

比如删除<div class="userInfo">...</div>这样的节点时，难道还要搜一下所有前端代码看看有没有类似$('#xxx .userInfo .yyy')或者$('.userInfo')等操作？————这当然不现实甚至令人感到疯狂

解决方案：jQuery选择器只使用协商好的特殊class ¶

使用J-userInfo这样带J-前缀开头的class提供给js代码做选择器就可以了，则节点既要样式，又要被js操作的话就应该是这样的：<div class="userInfo J-userInfo">...</div>

看上去写两个相似的class是有点麻烦，但这个性价比是很值得的

因为如果CSS和JS都用userInfo，则删除的时候都不知道要不要删除JS的代码以防止BUG的发生

如果用了，一看到删除的节点带有J-开头的class那知道去看看哪里的JS操作它了

• 注意：

  这个J-开头的class应该只提供给js代码操作，不提供给css做选择器，css应该用没有J-的，否则删除了J-开头的，那css可能就会找不到选择器，渲染出问题了

  同时ID也是，只提供给js操作，在css里千万不要用ID做选择器（这个当然是很多人的共识了，只是这里重复强调一次）