一、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编写会更加简洁一些。做了一个倒计时的案例