jQuery的toggle

article/2025/11/5 1:52:23
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!--引入jq框架--><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script></head><body><input type="text" value="5"><input type="button" value="按钮1"><input type="button" value="按钮2"><input type="button" value="按钮3"><input type="button" value="按钮4"><div>我是div</div><script type="text/javascript">let h=$("<h1>我是一级标题</h1>");$("body").append(h);$("input:eq(1)").click(function(){$("div").text($("input:first").val());//删除h1//$("h1").remove();	});$("input:eq(2)").click(function(){$("h1").hide();});$("input:eq(3)").click(function(){$("h1").show();});$("input:eq(4)").click(function(){$("h1").toggle();//隐藏和现实切换执行});</script></body>
</html>
<!-- jQuery给元素设置文本点击事件追加元素删除元素-->

toggle() 定义和用法

toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的,则运行 show(),如果一个元素是可见的,则运行 hide() - 这会造成一种切换的效果。

注释:隐藏的元素不会被完全显示(不再影响页面的布局)。

提示:该方法可被用于自定义函数之间的切换。
语法
$(selector).toggle(speed,easing,callback)

参数     描述
speed     可选。规定隐藏/显示效果的速度。

可能的值:

    毫秒
    "slow"
    "fast"

easing 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。

可能的值:

    "swing" - 在开头/结尾移动慢,在中间移动快
    "linear" - 匀速移动

提示:扩展插件中提供更多可用的 easing 函数。
callback     可选。toggle() 方法执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。


http://chatgpt.dhexx.cn/article/tIyjl90s.shtml

相关文章

12.jQuery技术

一、jQuery知识点总览。 css&#xff08;&#xff09;方法&#xff1a;//通过css&#xff08;&#xff09;方法获取样式值let backgroundcolor $("#one").css("backgroundColor");alert(backgroundcolor);//通过css&#xff08;&#xff09;方法设置id为…

jQuery

##jQuery基础 1.概念&#xff1a;一个JavaScript框架。简化JS开发 *jQuery是一个快速、简洁的JavaScript框架&#xff0c;是继Prototype之后又一个优秀的JavaScript代码库&#xff08;框架&#xff09;于2006年1月由John Resig发布。 jQuery设计的宗旨是“write Less&#xf…

jQuery建立WebSocket连接

jQuery建立WebSocket连接&#xff0c;向服务端发送数据&#xff0c;实现WebSocket连接成功。 js代码如下&#xff1a; <script src"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type"text/javascript">…

WebGoat攻略 for Mac(1)

WebGoat攻略 for Mac&#xff08;1&#xff09; 一、环境配置1.配置Docker2.配置WebGoat3.连接WebGoat 二、题目攻略Introduction(介绍)a.WebGoatb.WebWolf General(通用)a.HTTP Basics(HTTP基础)b.HTTP Proxies配置OWASP ZAP c.Developer Tools(开发人员工具)d.CIA Triade.Cry…

代码审计之WEBGOAT 反序列化

反序列化这关在前端页面可以看到是提交token到后端&#xff0c;先看一下接口名 可以看到接口名为InsecureDeserialization/task&#xff0c;那就后端全局搜索InsecureDeserialization/task&#xff0c;最终定位到InsecureDeserializationTask.java 源码如下&#xff1a; packa…

kali搭建webgoat靶场

下载webgoat-server-8.0.0.M26.jar与webwolf-server-8.0.0.M26.jar&#xff0c;并保存至kali的documents处&#xff0c;并在此打开终端&#xff08;不然无法打开&#xff09; 打开webgoat-server-8.0.0.M26.jar 浏览器访问127.0.0.1:8080/WebGoat/login.html 进行注册且登录 成…

基于 WebGoat 平台的 SQL 注入攻击

基于 WebGoat 平台的 SQL 注入攻击 扩展功能参考: https://blog.csdn.net/HZC0217/article/details/126790211 使用实例参考: https://www.cnblogs.com/hndreamer/p/16635984.html 目录 1、什么是 webgoat? 2、jar 下载 3、环境搭建 4、运行 webgoat 5、在浏览器中登录 …

owaspbwa之WebGoat

简介 下载&#xff1a;https://sourceforge.net/projects/owaspbwa/files/ GitHub: https://github.com/chuckfw/owaspbwa/wiki/UserGuide 0x001 侦查 PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 5.3p1 Debian 3ubuntu4 (Ubuntu Linux; protoc…

WebGoat之JWT部分攻略

环境搭建 使用docker容器搭建webgoat环境 什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准.该token被设计为紧凑且安全的&#xff0c;特别适用于分布式站点的单点登录&#xff08;单点登录SSO&#xff1a;在多个应用系统中&…

Webgoat靶场搭建

环境 jdk16 安装 文件源码看评论区哈。 下载过后是这个jdk-16.0.2.7z文件&#xff0c;这是个JDK16的包,进入bin目录下&#xff0c;可以看到靶场文件&#xff0c; 启动网站 打开一个cmd窗口执行启动网站命令 java --add-opens java.base/sun.nio.chALL-UNNAMED --add-op…

WebGoat通关教程

这里我们用docker镜像一键搭建即可 用docker命令开启webgoat docker run -d -p 8081:8080 -p 9090:9090 -e TZEurope/Amsterdam webgoat/goatandwolf 打开192.168.109.131:8081/WebGoat和192.168.109.131:9090/WebWolf能打开即可 192.168.109.131是本地IP 直接注册一个账号&…

在Ubuntu环境下使用docker配置webgoat环境

1.安装Docker环境 sudo apt install docker.io 2.配置Docker加速 打开配置文件 vim /etc/docker/daemon.json添加mirrors信息 {"registry-mirrors":["https://registry.docker-cn.com","http://hub-mirror.c.163.com"]}3.重启docker system…

WebGoat General Crypto Basics

目录 第2页 第3页 第4页 第6页 第2页 这一页是讲base64编码和Basic Authentication的 简单来说Basic Authentication中使用了base64编码&#xff0c;以本页的题目举例&#xff0c;如果有个HTTP头长这样 Authorization: Basic ZmFuY3llbGU6c2VjcmV0 那这个网站就是用了Basi…

docker安装webgoat

docker安装webgoat 一般来说 无需docker&#xff0c;在 https://github.com/WebGoat/WebGoat/releases中&#xff0c;下载最新的v8.2.2.jar,然后java -jar webgoat-server-8.2.2.jar然后反问http://127.0.0.1/WebGoat即可 但是&#xff0c;由于本人windows主机(java10.0.2)和ka…

WebGoat-8.2.2版靶机学习总结

摘要&#xff1a;本文档介绍了WebGoat靶机平台在Windows10系统下的使用。其操作过程均在一台主机上完成。该平台涉及的训练项目有http代理、数据库注入、身份校验缺陷、XSS、访问控制缺陷、通信拦截、序列化问题、CSRF、问题组件等内容&#xff0c;帮助学习者学习网络攻防基础&…

WebGoat安装

WebGoat是运行在Java虚拟机的WEB漏洞实验靶场,可以提供包括跨站点脚本攻击(XSS),访问控制,线程安全,操作隐藏字段,操纵参数,弱会话cookie,SQL盲注,数字型SQL注入,字符串型SQL注入,web服务、Open Authentication失效,危险的HTML注释等多个漏洞练习. 使用WebGoat的方式有很多,我…

WebGoat v8.0打靶笔记

目录 一、环境的配置 &#xff08;1&#xff09;安装docker &#xff08;2&#xff09;WebGoat获取 &#xff08;3&#xff09;burp suite的配置 二、Introduction 三、General &#xff08;1&#xff09;HTTP Basics &#xff08;2&#xff09;HTTP Proxies &#…

安装WebGoat步骤

安装Webgoat步骤 安装目的&#xff1a;了解并深入目前安全行业的OWASP ten 10漏洞 何为Webgoat? Webgoat内置OWASP十大漏洞 安装过程 下载webgoat架包 地址 创建一个文件夹&#xff0c;将上面框出的架包复制到文件夹里 检测JAVA环境 使用之前得先把Java的版本升级一下…

WebGoat部分题目

一、文件上传漏洞 1、跨目录脚本执行 上传的脚本文件在网站存放上传文件的目录下被限制执行&#xff0c;于是我们把上传的脚本文件放到根目录去执行。 靶场情况&#xff1a; 如上图所示&#xff0c;假设的根目录为C:\Users\Administrator/.webgoat-2023.4/PathTraversal &am…

linux部署webgoat

文章目录 程序包准备上传部署 程序包准备 github上下载程序包&#xff0c;如果太慢可以点击 下载webgoat-server-8.2.2 .jar 上传部署 将包上传到服务器上&#xff0c;需要说明该包依赖java环境且对java版本要求较高&#xff0c;我们这里是用java17进行部署&#xff0c;需要…