一、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编写会更加简洁一些。做了一个倒计时的案例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号