这篇文章主要介绍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://bjjierui.cn/article/ghcgdo.html