博客列表 >jQuery基础知识——2019.01.21

jQuery基础知识——2019.01.21

CY的博客
CY的博客原创
2019年01月24日 18:02:06583浏览

一、jQuery是什么

jQuery是一个 快速 简洁的JavaScript框架,它封装JavaScript常用的功能代码

提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计

等……

jQuery库包含以下特性:

HTML元素的选取

HTML元素的操作

CSS操作

HTML事件方法

JavaScript特效和动画效果

HTMLdom遍历和修改

二、jQuery的引用

jQuery的库可以通过一行简单的标记添加到网页中步骤如下:

1、下载jQuery(网址:jQuery.com)

2、把jQuery添加到页面中

   <head>

      <script type=”text/javascript”src=”jQuery.js”> </script>

   </head>

三、春节倒计时作业

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
   

        .box1 {
            width: 1300px;
            height: 560px;
            margin: auto;
            background: pink;
            background-size: 1300px 600px;
            position: relative;
            /* border:1px solid red; */
        }

        .box1 div {
            width: 800px;
            height: 100px;
            line-height: 100px;
            position: absolute;
            left: 250px;
            top: 50px;
            color: white;
            font-size: 25px;
            text-align: center;
            /* border:1px solid red; */
        }
      
    </style>

    <title>春节倒计时</title>
</head>

<body>
    <div class="box1">
        <div>
            2019年农历春节倒计时:<span></span>
        </div>
    </div>
    <script>
       $(function(){
            function Ro(){
                // 设置目标时间时间戳,返回 1970/1/1 午夜距离该日期时间的毫秒数
                var d = Date.parse("Feb 05,2019");
                // 设置date为当前时间
                var date = new Date();
                //计算出从 1970/1/1 至今的毫秒数。
                var dd = date.getTime();
                //目标时间减去当前时间,得出时间差,单位为毫秒,除1000设置单位为秒
                var rd = Math.floor((d-dd) / 1000);
                //计算剩余天、小时、分钟、秒
                var days = Math.floor(rd / 24 / 3600);
                var hours = Math.floor(rd % (24*3600) / 3600);
                var minutes = Math.floor(rd % 3600  /60);
                var seconds = Math.floor(rd%60);
                //设置输入内容
                $('span').text(days + " 天 "+ hours + " 小时 " +minutes + " 分钟 "+ seconds +" 秒 ");
            }
            //setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
            //每隔1秒调用一次Ro()函数
            setInterval(Ro,1000);  
       })
    </script>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:

今天学习了jQuery的相关基础知识,了解到jQ相对于js编写会更加简洁一些。做了一个倒计时的案例

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议