• 技术文章 >web前端 >前端问答

    jquery怎么实现点击隐藏元素

    青灯夜游青灯夜游2022-12-15 09:55:02原创68

    实现步骤:1、利用click()函数给按钮元素绑定点击事件,并设置事件处理函数,语法“$("button").click(function() {//点击事件发生后,执行的代码});”;2、在事件处理函数中,使用hide()函数隐藏指定元素即可,语法“$(selector).hide(speed,callback)”。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

    在jquery中,可以利用click()和hide()方法来实现点击隐藏元素。

    实现步骤:

    步骤1:利用click()函数给按钮元素绑定点击事件,并设置事件处理函数

    $("button").click(function() {
    	//点击事件发生后,执行的代码
    });

    在事件处理函数中,写入的代码就是点击后实现的效果代码

    步骤2:在事件处理函数中,使用hide()函数隐藏指定元素

    $(selector).hide(speed,callback)

    示例代码:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-3.6.1.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				$("button").click(function() {
    					$("div").hide();
    					$("span").hide();
    				});
    			});
    		</script>
    		<style>
    			div{
    				border: 1px solid red;
    				background-color: palegoldenrod;
    			}
    			p,span{
    				background-color: yellow;
    			}
    		</style>
    	</head>
    	<body>
    		<div>需要隐藏的div元素</div>
    		<span>需要隐藏的span元素</span>
    		<p>p元素</p>
    		<button>点击按钮隐藏元素</button>
    	</body>
    </html>

    1.gif

    说明:

    当单击元素时,发生 click 事件。

    click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。

    语法:

    //触发被选元素的 click 事件:
    $(selector).click()
    
    //添加函数到 click 事件:
    $(selector).click(function)

    语法

    $(selector).hide(speed,easing,callback)
    参数描述
    speed可选。规定隐藏效果的速度。

    可能的值:

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

    可能的值:

    • "swing" - 在开头/结尾移动慢,在中间移动快
    • "linear" - 匀速移动
    提示:扩展插件中提供更多可用的 easing 函数。
    callbac可选。hide() 方法执行完之后,要执行的函数。

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

    提示:如需显示隐藏的元素,请查看 show() 方法。

    【推荐学习:jQuery视频教程web前端视频

    以上就是jquery怎么实现点击隐藏元素的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:jquery javascript
    上一篇:vue 对象的侦听属性用什么表示 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• jquery中属于鼠标的事件方法有哪些• jquery寻找父级的方法有哪些• jquery怎么添加类和移除类• jquery就绪函数有几种写法• jquery .val()不起作用怎么办
    1/1

    PHP中文网