189 8069 5689

jQuery实现div显示、隐藏和文字填充的方法是什么

这篇文章主要介绍jQuery实现div显示、隐藏和文字填充的方法是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

目前创新互联已为成百上千家的企业提供了网站建设、域名、网页空间、绵阳服务器托管、企业网站设计、石楼网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

（1）使用HTML布局页面

1）创建项目Pro_01，在项目下创建网页，将其命名为index.html；

2） 在HTML页面添加三个按钮；

3）在HTML页面添加三个DIV标签；

（2）使用CSS美化页面

1）在该项目下创建css文件夹；

2）创建css文件，命名为style.css，在index.html中的标签前引入文件。

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中的标签前引入文件。

（4）效果实现

1） 在index.html页面的标签前创建标签；

(2） 在标签中编写入口函数

$(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，你可以通过如下方式：

以上是jQuery实现div显示、隐藏和文字填充的方法是什么的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


名称栏目：jQuery实现div显示、隐藏和文字填充的方法是什么
浏览路径：http://cdxtjz.cn/article/ghcgdo.html

其他资讯