js显示隐藏

最新推荐文章于 2024-08-13 08:52:29 发布

战神王者

最新推荐文章于 2024-08-13 08:52:29 发布

阅读量1.1k

点赞数 3

文章标签： javascript jquery 原型模式

本文链接：https://blog.csdn.net/Juntil_hu/article/details/121880007

版权

这篇博客介绍了jQuery，一个由JohnResig创建的JavaScript库，以其简洁的语法和跨平台兼容性简化了HTML文档遍历、DOM操作、事件处理、动画制作和Ajax开发。通过示例展示了如何使用jQuery实现元素的显示和隐藏功能。

摘要由CSDN通过智能技术生成

其实这边我是新学的一点知识虽然不多但是新手还是比较容易上手的

 <div id="panel">
        <button class="head">什么是jQuery?</button>
        <div class="content">
            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。
            jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、
            操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
        </div>
    </div>

首先要引用jqurey文件，我这边是引用的本地的

<style>
        .head{
            width: 100px;
            height: 50px;
            background-color: red;
        }
        .content{
            width: 500px;
            height: 500px;
            background-color: gold;
        }
    </style>

<script>
        $(function () {

            $(".head").click(function () {
                //使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定
                //的选择器. 
                var flag = $(".content").is(":hidden");

                if (flag) {
                    //show() 方法: 使隐藏的变为显示
                    $(".content").show();
                } else {
                    $(".content").hide();
                }
            });
        });
    </script>

显示时候：