内容简介:最近新加入了一个公司,并接手到了一个新项目,是基于 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> 复制代码
看吧,你都干嘛去了,这么简单的东西你居然可以琢磨几个小时,好好加油不要气馁,做好每一天!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- javascript – HTML5,div,隐藏,点击显示
- asp.net – 如果使用jQuery隐藏它,我无法点击ASP:Button?
- angular2手动点击特定元素上的点击事件
- Android-View点击事件短时间重复点击的过滤
- etherscan点击劫持漏洞
- 点击劫持防御方案
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
精通Windows应用开发
[美] Jesse Liberty Philip Japikse Jon Galloway / 苏宝龙 / 人民邮电出版社 / 59.00元
Windows 8.1的出现不仅提供了跨设备的用户体验,也提供了跨设备的开发体验。本书着眼于实际项目中所需要的特性,以及现有C#编程知识的运用,对如何最大限度地利用Metro、WinRT和Windows 8进行了讲解,内容详尽,注重理论学习与实践开发的配合。 Windows 8.1和WinRT的作用及其特殊性 如何使用先进特性创建具有沉浸感和吸引力的Windows 8.1应用 如......一起来看看 《精通Windows应用开发》 这本书的介绍吧!