jq基本选择器怎样使用呢?(jq属性选择器)

jQuery的基本选择器非常强大,不过刚学习jQuery的小伙伴可能还不了解,今天小编我就来给大家讲解讲解。今天讲解的基本选择器包括:first,:last,:odd,:even,:gt(),:lt()。

操作方法

  • 01

    首先,先在HTML页面写上几个p标签。

  • 02

    然后我们预览一下这几个p标签的效果。

  • 03

    然后我们在页面中引入jQuery插件,这样才可以调用jQuery的基本选择器。很多小伙伴就是忘记引入插件,无法调用基本选择器,导致无法实现效果。

  • 04

    然后再另外书写一个script标签,并且在里面书写jQuery入口函数。

  • 05

    如图,在jQuery入口函数使用jQuery(“p”)来获取到页面的p元素。

  • 06

    但是jQuery(“p”)获取到的是所有的p元素,而我们可以使用:first来选择第一个p元素。

  • 07

    如图,获取到第一个p元素之后,我们修改一下它的文本颜色color,把它的文本颜色改为红色red。

  • 08

    之后,保存网页看看效果,可以看到第一个p标签的文本颜色已经由黑色变成了红色。

  • 09

    接着再来讲解:last选择器,我们把first选择器改成:last选择器,这样,就可以选择到最后一个p元素。

  • 10

    然后再去看看网页效果,这时候网页中的最后一个p标签就变成红色了。可见,:last选择器选择的是网页中的最后一个元素。

  • 11

    接着再修改选择器为:odd,并且保存好网页,odd选择器选择的是索引号为奇数的元素。

  • 12

    如图,所有索引号为奇数的p标签都变成了红色。注意,在jQuery中,索引号是从0开始的,也就是说,索引号为0的元素对应的是第一个p标签,索引号为1的元素对应的是第二个p标签,所以,odd选择器根据的是索引号来选择元素。

  • 13

    再来看看:even选择器,even选择器和odd选择器相反,even选择器选择的是索引号为偶数的标签元素。

  • 14

    我们来看下使用even选择器的效果,可以看到索引号为0,2,4的p标签都变成红色,对应就是我们潜意识中的第一个,第三个,和第五个。

  • 15

    接着说说:gt()选择器,括号里面放的是索引号值,比如我的:gt(2)表示的就是选取索引号大于2的元素。

  • 16

    这样,所有索引号大于2的元素都会变成红色。

  • 17

    而:lt()选择器跟:gt()选择器相反,lt(2)表示选择索引号小于2的元素。

  • 18

    如图,索引号小于2的p标签元素就变成红色的了。

利用PS画出荷花(ps荷花后期淡雅处理)
« 上一篇 2024-07-23 17:13
我的世界怎么骑羊驼(我的世界骑羊驼的鞍)
下一篇 » 2024-07-23 17:13