基于JQuery做的一个简单的点击显示和隐藏的小Demo

栏目: jQuery · 发布时间: 6年前

内容简介：最近新加入了一个公司，并接手到了一个新项目，是基于 Spring + Spring MVC + MyBatis 架构来搭建的，在公司领导的需求下修改功能，需要修改些修改些前端页面，原本很简单的就是一个JQuery的基于事件的显示和隐藏节点，却花费了几个小时才弄清楚大概，效率实在低下。记录下吧！具体效果可以直接复制粘贴到工具看下，是最基本的东西，居然弄了几个小时：其实关于前端的使用忘得都差不多了，前端时间复习了下 HTML 和 CSS ，因为 JavaScript 和 Java 语法差不多就没深入了解 DOM

最近新加入了一个公司，并接手到了一个新项目，是基于 Spring + Spring MVC + MyBatis 架构来搭建的，在公司领导的需求下修改功能，需要修改些修改些前端页面，原本很简单的就是一个JQuery的基于事件的显示和隐藏节点，却花费了几个小时才弄清楚大概，效率实在低下。记录下吧！

1. 简单Demo源代码

具体效果可以直接复制粘贴到工具看下，是最基本的东西，居然弄了几个小时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery显示隐藏小Demo</title>
    <script type="text/javascript" src="jquery-3.4.0.js"></script>
    <script type="text/javascript">

        <!-- 文档加载后隐藏 class= "toggle" 标签的内容 -->
        $(document).ready(function () {
            $(".toggle").hide();
        })
    
        <!-- .btn绑定点击事件来显示和隐藏 .toggle 所在标签的内容 -->
        $(function () {
            $(".btn").click(function () {
                $(".toggle").toggle();
            })
        })
    </script>
</head>
<body>
<input type="button" value="点我" class="btn"/>
<div class="toggle">
    大家好，我是toogle()！
</div>
</body>
</html>
复制代码

2. 代码解析

其实关于前端的使用忘得都差不多了，前端时间复习了下 HTML 和 CSS ，因为 JavaScript 和 Java 语法差不多就没深入了解 DOM 和 BOM 。这段代码真的是属于入门级别的，所以自己也明白自己的技术有多差劲了，好好记录下来不懂的知识点，时时刻刻提醒自己。

2.1 "$"

个人的理解就是为了方便提到了 "jquery",所以基于底层的东西现在先不去研究，会用就好。

2.2 (document).ready

其实这两种效果是一样的，都是表示在文档加载完成后进行的操作，在Java中可以理解为初始代码块，关系可以理解为 "$" 和 "jquery" 一样，只是为了方便书写而弄出来的，当然先学会用，后面再深入研究。所以上面的 javascript 代码可以这样写：

<script type="text/javascript">

    

        $(function () {
            $(".toggle").hide();
            $(".btn").click(function () {
                $(".toggle").toggle();
            })
        })
    </script>
复制代码

看吧，你都干嘛去了，这么简单的东西你居然可以琢磨几个小时，好好加油不要气馁，做好每一天！

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

反应式设计模式

Roland Kuhn、Brian Hanafee、Jamie Allen / 何品、邱嘉和、王石冲、林炜翔审校 / 清华大学出版社 / 2019-1-1 / 98.00 元

《反应式设计模式》介绍反应式应用程序设计的原则、模式和经典实践，讲述如何用断路器模式将运行缓慢的组件与其他组件隔开、如何用事务序列(Saga)模式实现多阶段事务以及如何通过分片模式来划分数据集，分析如何保持源代码的可读性以及系统的可测试性(即使在存在许多潜在交互和失败点的情况下)。主要内容 ? “反应式宣言”指南 ? 流量控制、有界一致性、容错等模式 ? 得之不易的关于“什么行不通”的经验 ? ......一起来看看《反应式设计模式》这本书的介绍吧!

码农工具