html选择元素eq基础用法教程三

2025-10-21 05:40:43

1、在DW中建立代码:

<body>

<div>001</div>

<div>002</div>

<div>003</div>

<div>004</div>

<div>005</div>

</body>

然后对其进行style简单修饰

div{width:200px;height:150px;border:solid 1px gray;float:left;margin:10px;text-align:center;line-height:150px;}

html选择元素eq基础用法教程三

2、浏览器中观看效果如图,并排在一起的5个盒子

html选择元素eq基础用法教程三

3、将jquery引入到文档中后,开始对其添加js效果,:eq()  括号中填写数值,在代码中是从0开始的,也就是说如果想要1就在代码中输入0,如果想要2就在代码中输入1,以此类推,如果想要选择第一个div时,就需要再括号中输入0,也就是 div:eq(0) 即第一个div

<script>

$("div:eq(0)").css("background-color","red")

 .css("color","white")

</script>

html选择元素eq基础用法教程三

4、然后打开浏览器预览效果,可以看到第一个div背景颜色和字体颜色已经改为自己设置的颜色。

html选择元素eq基础用法教程三

5、然后我们再对第二个div进行修饰,第二个div的选择是  div:eq(1)

$("div:eq(1)").css("background-color","blue")

 .css("color","white")

html选择元素eq基础用法教程三

6、然后我们在浏览器中观看效果,

html选择元素eq基础用法教程三

7、然后我们最后再选择最后一个div,这里只有5个div,所以最后一个div的选择:eq(4)

$("div:eq(4)").css("background-color","green")

 .css("color","white")

html选择元素eq基础用法教程三

8、打开浏览器预览效果,如图最终效果

html选择元素eq基础用法教程三

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢