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显示、隐藏和文字填充的方法是什么-创新互联
标题URL:http://jkwzsj.com/article/cesohg.html

其他资讯