使用原生javascript编程时候，我们发现其存在了不少的缺点：比如获取元素不方便，有时候还需要进行遍历，遍历里面还可能存在嵌套，导致代码较为繁琐，并且容差性差。今天就带领大家用jquery来实现第一个网页。
（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、百度、又拍云、新浪、谷歌和微软的服务器都存有 jquery 。如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内cdn地址，如果你站点用户是国外的可以使用谷歌和微软。比如你想使用百度的cdn，你可以通过如下方式：
<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head>
以上就是jquery实现div显示、隐藏和文字填充的详细内容。