jquery的hide方法（如何在点击一个按钮时使用jquery隐藏一个图片）
本文目录
如何在点击一个按钮时使用jquery隐藏一个图片
页面放一张图：
《img id="myImg" src="./myPic.png"》
按钮，按钮的点击事件调用myFun函数：
《button value="按钮" onclick="myFun();"》
js中加入这个函数，利用jQuery的hide方法进行隐藏：
function myFun(){
$("#myImg").hide(); //获取id为myImg的元素并隐藏
}
如何通过jquery隐藏和显示元素
1.JQ中显隐有以下几种方式
show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作
2.show()方法
显示出隐藏的 《p》 元素。
$(".btn2").click(function(){
$("p").show();
});
3.toggle()方法
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
《html》
《head》
《script type="text/javascript" src="/jquery/jquery.js"》《/script》
《script type="text/javascript"》
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(1000);
});
});
《/script》
《/head》
《body》
《p》This is a paragraph.《/p》
《button class="btn1"》Toggle《/button》
《/body》
《/html》
3.slideDown()方法
以滑动方式显示隐藏的 《p》 元素：
$(".btn2").click(function(){
$("p").slideDown();
});
4.hide() 方法
隐藏可见的 《p》 元素：
$(".btn1").click(function(){
$("p").hide();
});
这个函数经常与show一起使用
5.css()方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
$("p").css("display","none");
实例：
《!DOCTYPE》
《html》
《head》
***隐藏网址***
《script type="text/javascript"》
$(document).ready( function(){});
function hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function show(){
$("#divObj").show();//显示,参数说明同上
}
function toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function slide(){
$("#divObj").slideDown();//窗帘效果展开
}
《/script》
《/head》
《body》
《h3》div里内容的显示隐藏特效《/h3》
《input type="button" value="隐藏" onclick="hiden()"/》
《input type="button" value="显示" onclick="show()"/》
《input type="button" value="窗帘效果显示2" onclick="slide()"/》
《input type="button" value="窗帘效果的切换" onclick="slideToggle()"/》
《input type="button" value="隐藏显示效果切换" onclick="toggle()"/》
《div id="divObj" style="display:none"》
1.测试例子《br/》
2.测试例子《br/》
3.测试例子《br/》
4.测试例子《br/》
5.测试例子《br/》
6.测试例子《br/》
7.测试例子《br/》
8.测试例子《br/》
9.测试例子《br/》
0.测试例子《br/》
《/div》
《/body》
《/html》
如何通过jquery隐藏input
1、使用jquery的hide()方法
例子：
$("#content").hide();//隐藏input；content为input的id
$("#content").show();//显示被隐藏的元素； content为input的id
2、使用jquery的css方法
$("#id").css(’display’,’none’);
$("#id").css(’display’,’block’);
3、操作input的style
$("#id").style.display = ’none’;//隐藏input
//$("#id")返回的是JQuery
$("#id").style.display = ’block’;//显示input
如何用jquery让一个隐藏的div显示
Jquery中hide()方法表示隐藏，show()表示显示
示例：
《!doctype html》
《html》
《head》
《meta charset=’utf-8’/》
《title》测试《/title》
《!--载入jquery框架文件--》
《script language=’javascript’ src=’jquery.js’》《/script》
《script language=’javascript’》
$(function(){
$(’#btn’).click(function(){
$div1=$(’#div1’);
if($div1.is(’:hidden’)){
$div1.show();
}else if($div1.is(’:visible’)){
$div1.hide();
}
});
});
《/script》
《/head》
《body》
《div id="div1" style="width:100px;height:60px;border:1px solid #f00;"》《/div》
《input type="button" id="btn" value="显示" /》
《/body》
《/html》
更多文章：
teammate（teammate,company,partner）
2026年10月11日 06:10
javascript arraybuffer（javascript可以把base64编码转换成二进制代码吗求示例代码！）
2026年10月11日 04:00
text函数公式（excel中round和text函数的区别是什么）
2026年10月11日 03:50
2026年10月11日 02:40
google chrome打不开（chrome浏览器打不开怎么回事 浏览器打不开的处理方法）
2026年10月11日 02:00
websocket整合springboot（Springboot整合Websocket遇到的坑）
2026年10月11日 01:40
2026年10月11日 00:40
drawerlayout（android 怎样让drawerlayout设置的侧滑菜单的内容充满屏幕）
2026年10月10日 19:20
xor四位数怎么运算（单片机怎样用C语言实现4个数字间的异或）
2026年10月10日 17:50
perl数组中最多的元素（用perl实现，得到一个数组中重复次数最多的元素）
2026年10月10日 17:00
