你未必了解的JavaScript和CSS的相同套路！

今天在悟空问答上看到一个问题《怎么觉得JS和CSS重叠的东西太多了？》。按说，JS和CSS根本就是两种东西，它们不应该有交叉之处。经过一番思考后，觉得题主所说的重叠，也许应该是指两者的操作“套路”太相近了吧？别看有的书动辄七八百页，看起来内容很厚重的样子，但一些关键的东西可能都没有总结出来。我这里就来说说JS和CSS看起来差不多的“套路”，也就是所谓的重叠。

由于JS的各种原生getElementBy...选择器用起来有点繁琐，我平时更喜欢使用堪称为JS标配工具的jQuery选择器。

以最常见的id选择器为例，CSS中使用的是#id，jQuery中只要使用$函数再将它包起来即可，例如：$('#id')。

再比如，class选择器，CSS的写法是.abc，jQuery是$('.abc')；

标签选择器，CSS是div，jQuery是$('div')；

属性选择器，CSS是[href^="http"]，jQuery是$('[href^="http"]')。

至于其他更复杂的选择器，如复合选择器、层次选择器、伪类选择器等等都是一样的用法。因此，完全可以将CSS选择器和jQuery中的选择器结合在一起学习。从这个角度来看，它们确实是重复的！

不明白的是，那些看起来很厚重的所谓专业书，CSS讲了一堆选择器，jQuery中也讲了一堆选择器，为什么不能把它们放在一起？不觉得这样的书既浪费读者的时间同时也浪费读者的金钱么？

在我写的《B/S项目开发实战》一书中，关于CSS选择器的介绍只有一页半的内容，其它部分全部放到jQuery选择器中了：

这是因为，只要会了jQuery选择器，CSS的选择器用法自然也就会用了，而且功能更强大：

绝大部分的专业书都会总结使用CSS样式的3大方法：一是元素内嵌样式，也就是以Style属性直接将样式写在元素中；二是文档内嵌样式，也就是将声明的样式单独写在style标签元素中；三是外部引用样式，将样式写在一个单独的css文件中，然后通过link标签引用。

事实上，JS代码也是同样的三种方法，但很少有人对此进行总结。例如，下面的写法就相当于是元素内嵌方式的写法，因为它仅对当前标签元素的单击有效：

操作按钮

文档内嵌方式就是以标签包起来的一对js代码；外部引用更直观，它是以

您说两者的使用套路是不是一样？经过这样对比之后，印象应该更深刻了吧？