jQuery实现div显示、隐藏和文字填充

互联网 20-8-26

使用原生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显示、隐藏和文字填充的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： jQuery

jQuery实现div显示、隐藏和文字填充

相关资讯

标签推荐