JQuery隐藏和显示效果

朴灿烈づ我的快乐病毒、 2021-12-20 13:55 389阅读 0赞

1：引用插件jquery-3.2.1.min.js：

2：为了方便看出效果和美观，在外层放一个div盒子，给这个盒子设置一些样式：

比如边距，边框，宽，高，文本居中等等：  
style=“margin:10%auto;border:1pxsolid rgba(48,211,203,1.00);width:60%;line-height:100px;text-align: center;”  
3：先拿p标签做个示范吧，比如在刚刚那个div盒子中放几个p标签，给上不同的字体颜色。然后再写js代码：首先，写页面加载事件，跟原生的有些不同，你可以直接$(document).ready(function()\{\})，这样就相当于原生的那个页面加载事件了，其实也差不多，当然，如果你习惯写原生的也可以写原生的，然后再获取所有的p标签给它一个点击事件，点击p标签时，给它hide()（隐藏）,这样就OK了，

点我试试，我会消失！

点我，我也会消失！

还有我，我也是

$(document).ready(function()\{ $("p").click(function()\{ $(this).hide(); \}); \}); 来看看效果，刚开始时应该有三个p标签，那么我现在点击一下第一个P标签，看看能不能隐藏； 剩余两个P标签效果截图： !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190628080805434.png) 4：从上图中可以看出，第一个P标签是被我点击隐藏成功了的，那么如果需要让它再显示出来呢，这时候就得放一个其他的元素，比如div，给它一个类，当我点击时就把第一个的P标签给show（）（显示）出来，并且再把新增的元素给隐藏掉，来试试：

重新出现

//--新增的元素--// $(".iv").click(function()\{ $("p").first().show();//--显示第一个P标签--// $(this).hide();//--隐藏本身--// \}); 先看看把三个P标签都隐藏的效果截图： !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190628080817410.png) 从上图可以看出，现在已经把三个P标签都隐藏了，只剩下刚刚新增的那个元素，那么我再来看看当我点击新增元素时是否能把第一个P标签显示出来并隐藏自身呢 点击div元素显示被隐藏的第一个P标签和隐藏自身效果截图： !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190628080826439.png)