您的位置是:网站首页>Javascript编程Javascript编程

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

少儿编程网2020-08-28 11:51:25Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介使用原生JavaScript编程时候,我们发现其存在了不少的缺点:比如获取元素不方便,有时候还需要进行遍历,遍历里面还可能存在嵌套,导致代码较为繁琐,并且容差性差。今天就带领大家用jQuery来实现第一个网页。(1)使用HTML布局页面1)创建项目Pro_01,在项目下创建网页,将其命名为index

使用原生JavaScript编程时候,我们发现其存在了不少的缺点:比如获取元素不方便,有时候还需要进行遍历,遍历里面还可能存在嵌套,导致代码较为繁琐,并且容差性差。今天就带领大家用jQuery来实现第一个网页。EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

(1)使用HTML布局页面EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

1)创建项目Pro_01,在项目下创建网页,将其命名为index.html;EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

2) 在HTML页面添加三个按钮;EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<input type="button" value="显示" id="show" />
<input type="button" value="隐藏" id="hide" />
<input type="button" value="内容填充" id="text"/>

3)在HTML页面添加三个DIV标签;EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<div></div>
<div></div>
<div></div>

(2)使用CSS美化页面EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

1)在该项目下创建css文件夹;EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

2)创建css文件,命名为style.css,在index.html中的</body>标签前引入文件。EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<head>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>

3) 在style.css文件下添加页面样式EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  • 全局样式EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

*{
       margin: 0;
       padding: 0;
}
  • div样式EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

div{
        width:500px;
       height:100px;
       border:1px solid #a5b6c8;
       background:#eef3f7;
       display: none;
    }

4) 按F12浏览页面效果。EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

(3)引入jQuery文件EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

1)在*方网站(https://jquery.com/download/)下载jquery-3.5.1.js文件;EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

2) 下载完成后,在该项目下创建js文件夹,将下载的jquery-3.5.1js文件放入js文件夹中;EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

注意:本案例使用的jQuery版本是3.5.1,本案例中将jQuery库文件放在文件夹js下面,为了方便调试,使用相对路径。EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

3) 在index.html中的</body>标签前引入文件。EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<script type="text/javascript" src="js/jquery-3.5.1.js"></script>

(4)效果实现EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

1) 在index.html页面的</body>标签前创建<script></script>标签;EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

(2) 在<script></script>标签中编写入口函数EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

$(document).ready(function(){
});

注意:EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

jQuery 入口函数与 JavaScript 入口函数的区别:EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  • JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

(3) 在入口函数下注册事件EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  • 显示EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

$('#show').click(function(){
   $("div").show();
});
  • 隐藏EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

$('#hide').click(function(){
   $("div").hide();
}
  • 文本填充EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

$('#text').click(function(){
    $("div").text("内容填充");
});(4) 按F12浏览页面效果。

注意:如果你不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软。比如你想使用百度的CDN,你可以通过如下方式:EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

以上就是jQuery实现div显示、隐藏和文字填充的详细内容,更多请关注少儿编程网其它相关文章!EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网EH3少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

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

      匿名评论
    • 评论
    人参与,条评论
    jQuery实现div显示、隐藏和文字填充

微信公众号

免费视频教程

先知道