收藏
批改状态：未批改
老师批语：
jQuery 是一个 JavaScript 库
jQuery 极大地简化了 JavaScript 编程
JQuery 的引用（线上库 和本地库 引用）
实例
//线上引用 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> //本地引用 <script src="/js/jquery-3.1.1.min.js"></script>
jQuery入口函数
$(document).ready(function(){
// 执行代码
});
或者简写为:
$(function(){
// 执行代码
});javascript入口函数
window.onload = function () {
// 执行代码
}jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
javascript 的入口函数是在 所有内容全部加载完 就会去执行。
jQuery的事件
$(document).ready()当文档完成加载时; $(selector).click()被选元素的点击事件; $(selector).focus()被选元素的获得焦点事件; $(selector).mouseover()当鼠标指针移上被选元素元素时; $(selector).mouseleave()当鼠标指针离开被选元素元素时; （selector 选择器） jQuery事件原理：当事件被触发时会调用一个函数；
$('.btn').click(function(){
//点击class为btn 执行的操作
});jQuery 选择器
jQuery 选择器 ：基于CSS选择器，元素选择器、#id选择器、.class类选择器 类型、属性、属性值;
//id选择器
$('#but').click(function(){
$('.content').css('display',"none")
})
//类型选择器 选择所有按钮
// $(':button').click(function(){
// $('.content').css('background',"red")
// })
//选择选择器 中class为intro的
$('button.intro').click(function(){
$('.content').css('background','red')
})
// $(this)this指选取当前HTML元素实例练习：动态显示2019年农历春节倒计时（做法不限）
输出格式:2019年农历春节倒计时：天/小时/分钟/秒
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>春节倒计时</title>
<style>
div {
width: 800px;height: 333px;
background: url(http://bpic.588ku.com//back_water_img/18/12/27/21d85323b34e5a4bb0d1c4089524494913.jpg) no-repeat ;
margin:auto;
line-height: 300px;
text-align: center;
font-size: 30px;
color:red;
box-shadow: 5px 5px 5px #ccc;
}
</style>
</head>
<body>
<div></div>
<script>
timer = null;
timer = setInterval(function (){
var timeNow = new Date().getTime(); //获取13位时间戳
console.log(timeNow);
var timeSpring = new Date('2019/2/5 00:00:00').getTime();
console.log(timeSpring);
//算出时间差 （毫秒）
var time = timeSpring - timeNow;
console.log(time);
//一天等于 24小时*60分钟*60秒*1000 毫秒
dayx = 24*60*60*1000 ;
hourx = 60*60*1000;
minx = 60*1000;
senx = 1000;
//计算出天数
var day = Math.floor(time/(dayx)); // Math.floor取整
console.log(day)
//计算小时
var hour1 = time%dayx;
var hour = Math.floor(hour1/hourx);
console.log(hour);
//计算分钟
var min1 = time%hourx
var min = Math.floor(min1/minx)
console.log(min);
//计算秒
var sen1 = time%minx;
var sen = Math.round(sen1/senx);
console.log(sen)
springTime ='2019年农历春节倒计时:'+ day +'天' + hour + '小时' + min +'分' + sen +'秒' ;
var div = document.querySelector('div');
div.innerText = springTime;
},100)
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
