第一百四十五章 基础选择器

在学 jQuery 最开始我们就说了,我们在第一个小括号里,就是美元符号后面紧跟着的那个小括号,写的是元素的选择器,表示我们要操作是哪个元素。

这里面支持所有的 CSS 选择器,这很方便,我们不需要额外的再去学习一些方法,就可以直接选择我们想要操作的元素。这也是为什么我们认为 jQuery 是一个很方便的工具的一个原因(虽然现在最新的 JS 是同样可以实现这一效果的)。

我们要明确的一个问题,我们选择元素,大概会有这样三种结果:

一个是当前页面中没有我们所选择的这个元素,既然没有这个元素,后面的操作就无从谈起,很可能就会引发报错,所以如果存在这种可能性,我们就要对这一情况进行判断。

然后是最好的情况,页面中有元素符合我们的选择器,而且这样的元素只有一个。那我们直接对它进行操作就可以了。

最后是比较复杂的情况,页面中有元素符合我们的选择器,而且这样的元素不止一个。如果我们只是对它进行一些设置,倒还好说,比如说把它们的某个属性都改变为某个值。就好像,让全班的同学午餐都吃学校发放的汉堡,这个事情并不复杂,但如果反过来,让全班学生都汇报一下中午自己吃的是什么东东,那就会很热闹了。所以当我们选中的元素不只是一个的时候,我们想要获取它们的某些属性,就会比较复杂。

这些问题我们留到后面去讲,在当前我们先研究选择器。但是当我们写一个选择器的时候,一定要有一个思考:选出来的结果,可能是几个元素?零个、一个或者多个。这是一个十分重要的问题,所以在我们开始解决这个问题之前,就要先培养这样的意识。

好,注意到这样的问题之后我们再来看最基础的选择器部分,好像其实我们都已经学过了呢,反正凑篇幅嘛,再说一遍也没所谓了:

  • * 匹配任何元素;
  • a 匹配标签是 a 的元素;
  • #miao 匹配 ID 是 miao 的元素;
  • .gugu 匹配 class 是 gugu 的元素。

上面是最基础的 4 种选择器,我就假装大家都已经会了哦~然后我们把上面的 4 种选择器进行组合,下面的字母,代表上面 4 种选择器中的任意一种:

  • a b 表示 a 元素里面,符合选择器 b 的后代元素;
  • a > b 表示 a 元素的子元素里面,符合选择器 b 的元素。

其实就是先执行前面的选择器,然后在选中元素的里面(它的后代元素或者它的子元素里面)再去执行后面的选择器。

上面我们是在两个选择器之间,间隔了一个空格或者一个大于号。那如果我在组合的时候中间没有间隔,比如下面这样:

a#miao 表示用两个选择器同时去描述一个元素,也就是被选中的元素要同时符合这两个选择器。这里所说的就是,ID 为 miao 的链接(a)元素。这种组合里应该不会出现星号,因为有它或者没有它都没有区别。如果是 id 和 class 的组合,那么前后顺序并不重要,但如果其中有标签,就像前面这个例子一样,标签名必须写在最前面,因为如果把标签名写在后面就混乱了。

然后上面所讲的这些选择器的使用方法,是可以进行串联的。a > b > c 像这样,差不多就是在一个选择器的后代中再次进行选择,然后在它的选择结果的后代中继续进行选择……

最后还有一种组合方式,就是多个选择器之间用逗号进行分隔,表示只要符合其中某个(而不是所有)选择器,就是我们想要的元素。

p, a#miao,像这样表示段落元素(p)是我们想要的,而 id 为 miao 的链接元素(a)也是我们想要的。用逗号分隔,逐条选择,然后我们都要。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百四十五章 基础选择器

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏