jQuery实现div显示、潜藏和文字填充
（1）使用HTML规划页面
1）创立项目Pro_01，在项目下创立网页，将其命名为index.html；
2） 在HTML页面增加三个按钮；
<input type="button" value="显示" id="show" /> <input type="button" value="潜藏" id="hide" /> <input type="button" value="内容填充" id="text"/>
3）在HTML页面增加三个DIV标签；
<div></div> <div></div> <div></div>
（2）使用CSS美化页面
1）在该项目下创立css文件夹；
2）创立css文件，命名为style.css，在index.html中的</body>标签前引入文件。
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>3) 在style.css文件下增加页面样式
全局样式
*{
margin: 0;
padding: 0;
}div样式
div{
width:500px;
height:100px;
border:1px solid #a5b6c8;
background:#eef3f7;
display: none;
}4) 按F12阅读页面结果。
（3）引入jQuery文件
1）在官方网站（https://jquery.com/download/）下载jquery-3.5.1.js文件；
2） 下载完成后，在该项目下创立js文件夹，将下载的jquery-3.5.1js文件放入js文件夹中；
留意：本案例使用的jQuery版本是3.5.1，本案例中将jQuery库文件放在文件夹js下面，为了利便调试，使用相对途径。
3） 在index.html中的</body>标签前引入文件。
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
（4）结果实现
1） 在index.html页面的</body>标签前创立<script></script>标签；
(2） 在<script></script>标签中编写入口函数
$(document).ready(function(){
});留意：
jQuery 入口函数与 JavaScript 入口函数的不同：
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去施行。
JavaScript 的 window.onload 事件是比及所有内容，包罗外部图片之类的文件加载完后，才会施行。
(3) 在入口函数下注册事件
显示
$('#show').click(function(){
$("div").show();
});潜藏
$('#hide').click(function(){
$("div").hide();
}文本填充
$('#text').click(function(){
$("div").text("内容填充");
});(4) 按F12阅读页面结果。留意：假如你不但愿下载共存放 jQuery，那么也可以通过 CDN（内容分发网络） 援用它。Staticfile CDN、baidu、又拍云、新浪、谷歌和微软的效劳器都存有 jQuery 。假如你的站点会员是国内的，倡议使用baidu、又拍云、新浪等国内CDN地址，假如你站点会员是国外的可以使用谷歌和微软。比方你想使用baidu的CDN，你可以通过如下方式：
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head>
以上就是jQuery实现div显示、潜藏和文字填充的具体内容，更多请关注百分百源码网其它相关文章！
