[JQuery 学习笔记] 隐藏和显示 hide() 和 show()

hide() 和 show() 方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>6-1 显示与隐藏 </title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><style>#img{float:left;}  /* 图片左浮动*/#content{display: none;} /*初始为不显示*/</style><script>$(function(){$('button').click(function(event){if($(this).text() == '显示简介'){// $('#content').show(1000);  // 显示速度，1000为一秒，可以用slow和fast// $(this).text('隐藏简介');  //修改按钮上的文本内容// 上述两行代码也可以写成$('#content').show(1000, function(){$('#btn').text('隐藏简介');})}else{$('#content').hide();  // 隐藏简介内容$(this).text('显示简介');  //修改按钮上的文本内容}})});</script>
</head>
<body><!-- <img src="data:image/1.jpg" alt="小狗" width="100"><button type="button" name='button' id='btn'>显示简介</button> --><div id="wrap"><img src="data:image/1.jpg" alt="小狗" width="200" id="img"><div id="content"><h3>小狗</h3><p>金毛巡回猎犬（Golden Retriever），原产于苏格兰，祖先有雪达犬血统，因有较强的游泳能力，\并能把猎物从水中叼回给主人，故最初用作狩猎及巡回被枪猎射落的水鸟，AKC分类属于运动犬组。</p></div></div><div style="clear:both"><button type="button" name="button" id="btn">显示简介</button></div>
</body>
</html>

[JQuery 学习笔记] 隐藏和显示 hide() 和 show()相关推荐

jQuery效果（隐藏和显示）
jQuery效果解析隐藏和显示 hide()和show() jQuery toggle() 淡入淡出 jQuery fadeIn() 方法 jQuery fadeOut() 方法 jQuery fa ...
jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
jQuery学习笔记（黑马课堂+补充）
JQuery学习笔记(自用) 1.DOM对象和jQuery对象 DOM对象:原生JS取到的对象 getElementsById() getElementsByTagName() 特点:只能调用Dom方 ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
html添加删除元素属性,jQuery学习笔记——.attr()和.removeAttr()方法操作元素属性
今天主要和大家一起分享一下如何使用jQuery的jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现:.attr():jQu ...
jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...

[JQuery 学习笔记] 隐藏和显示 hide() 和 show()

[JQuery 学习笔记] 隐藏和显示 hide() 和 show()相关推荐

最新文章

热门文章