筛选器

开发工具与关键技术:DW
作者:冯超
撰写时间:2019年2月14日

first()表示第1个元素
last()表示最后一个元素
eq(num)表示第几个元素
代码如下,

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筛选器</title>
<script src="../jquery-1.12.4/jquery-1.12.4.min.js"></script>
</head>
<body>
<script>
$(function(){
   $("#b1").click(function(){
      $("div").first().toggleClass("pink");
   });
   $("#b2").click(function(){
      $("div").last().toggleClass("pink");
   });
   $("#b3").click(function(){
      $("div").eq(1).toggleClass("pink");
   });   
});   
</script>
  <button id="b1">切换第1个div背景色</button>
  <button id="b2">切换最后1个div背景色</button>  
  <button id="b3">切换第2个div背景色</button>
<br>  
<style>
.pink{
   background-color:pink;
}
</style>     
<div>
  <span>1</span>  
</div> 
<div >
  <span>2</span>
</div>
<div >
  <span>3</span>
</div>
</body>
</html>

点击第一个按钮会切换第一个div颜色,如图
在这里插入图片描述
点击第二个按钮会切换最后一个div颜色,如图
在这里插入图片描述
点击第三个按钮会切换第二个div颜色,如图
在这里插入图片描述
再点击一次的话就会切换回来

猜你喜欢

转载自blog.csdn.net/weixin_44540198/article/details/87356496
今日推荐