你未必了解的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代码;外部引用更直观,它是以

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180209A0K2VN00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券