网站首页 | 最新手游 | 最新软件 |
网站导航
手机游戏
休闲益智 角色扮演 动作冒险 射击枪战 体育竞速 经营策略 MOBA
手机软件
网络浏览 社交聊天 影音播放 学习教育 生活常用 阅读资讯 效率办公 拍照摄影
技术中心
PHP教程 php框架 前端框架 其他 数据库 运维 系统工具 软件教程 手机系统教程
博客中心
数据库 APP开发 电脑问题 编程语言 网络系统 前端开发 互联网
插件下载
输入 banner图 图片脚本 客服 导航分类 播放器 css3 jQuery脚本 jqueryhtml5
源码下载
企业程序 小说有声 网站源码 第三方软件 新闻资讯 第三方源码
电脑软件
聊天工具 视频软件 音乐软件 游戏娱乐 网络游戏 浏览器 图形图像 安全杀毒
电脑软件
输入法 下载工具 股票网银 办公软件 阅读翻译 压缩刻录 系统工具 编程开发
电脑软件
手机数码 教育学习 网络应用 主题壁纸 其他软件 font字体 存储管理 压缩解压
电脑软件
系统设置 改名软件 文本编辑 拼音输入 降温程序 电子阅读 打印工具 刻录软件
电脑软件
翻译软件 系统优化 网页浏览 广告过滤 网站推广 下载工具 FTP工具 邮件收发
专题合集

热搜：蛋仔派对官服版  大话诛仙bt版  懒人听书正式版  mm131纯净版  美剧鸟破解版  

首页 手机游戏 手机软件 软件下载 jquery插件库 程序下载 手机教程 专题
您的位置：首页 > 技术中心 > 前端框架 >

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

时间：2020-08-27 14:04

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

相关推荐

电脑软件

本类排行

今日推荐

热门手游