收藏
批改状态：合格
老师批语：
今天开始学习JQuery。jq的引用可以在线引用，也能本地引用；基本语法就是$('选择器').方法();就绪函数相当于window.onload, $(document).ready.(function(){})可以简写成$(function(){})；了解了一些基本的事件（click focus mouseover mouseleave），他与js区别就是事件发生时调用的是一个函数；重点介绍了几种选择器（类 id 标签 类型 this ），jq的选择器是基于css的选择器，是的学习上成本小。
一、基本知识练习代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JQeury基础和基本选择器</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: dodgerblue;
text-align: center;
line-height: 200px;
color: gold;
}
#wrap, .content, p, a {
padding: 30px 60px;
text-align: center;
}
</style>
<!-- 线上jq引入 也可以本地引入 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
// 文档就绪函数 $(document).ready(function(){}) 简写形式如下:
$(function(){
// 选择器基于css有以下几种
// class
$('.btn').click(function(){
$('.box').hide(500);
})
// id
$('#btn').click(function(){
$('.box').show(1000);
})
// 类型选择器（表单type）
$(':button').mouseover(function(){
$(this).css('backgroundColor','pink');
})
$(':button').mouseout(function(){
$(this).css('backgroundColor','');
})
$(':button').focus(function(){
$(this).css('backgroundColor','pink');
})
$(':button').blur(function(){
$(this).css('backgroundColor','');
})
$('button:last-of-type').click(function(){
$('.box').text('让我出现');
})
// 元素选择器
$('input').click(function(){
$('*').hide();
})
// 直接父元素
$('p').click(function(){
$(this).parent().css('backgroundColor','green')
})
// 所有祖先元素
$('p').click(function(){
$(this).parents().css('border','1px solid red')
})
// 他和其中一个祖先元素之间的
$('p').click(function(){
$(this).parentsUntil('#wrap').css('color','gold')
})
// 指定祖先
$('p').click(function(){
$(this).parents('#wrap').css('border','10px solid red')
})
})
</script>
</head>
<body>
<div class="box">~原来的我~</div>
<button class="btn">隐藏</button>
<button id="btn">显示</button>
<button>让我出现在box上</button>
<input type="button" value="清空">
<div id="wrap">
我是老子的老子
<div class="content">
我是老子
<br>
<p>我是儿子</p>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二、春节倒计时
<!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">
<style>
body {
width: 100%;
height: 100%;
background-color: crimson;
}
.box {
width: 500px;
height: 200px;
margin: 0 auto;
color: gold;
font-size: 22px;
font-family: 'yahei';
text-align: center;
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top:-100px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="box"></div>
<script>
$(function(){
var timer;
timer = setInterval(function(){
var d = new Date();
var t = new Date(2019,1,5,0,0,0);
var now = d.getTime();
var target = t.getTime();
var s = (target - now)/1000;
var day = Math.floor(s / 86400);
var hour = Math.floor(s % 86400 / 3600);
var minute = Math.floor(s % 3600 / 60);
var sencond = Math.floor(s % 60);
if (sencond<10){
sencond1 = "0"+sencond;
}else{
sencond1 = sencond;
}
var content = "2019年农历春节倒计时：" + day +"天"+ hour +"小时" + minute + "分" + sencond1 +'秒';
$('.box').text(content);
}, 1000);
})
// setInterval(countdown(), 1000);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
1、jq是封装好的js库 虽然根上说 一样 但是到底用起来还得继续学习（包括语法 就绪函数 修改css之类的 都是方法操作）
2、类型选择器主要用在表单的type类型上，jq的选择器主要基于css 但我在练习中 兄弟 相邻 这些 还有一部分伪类没有用起来 下去再练习；
3、春节案例通过查资料了解当前时间获取Date.getTime和parse（特定的事件格式），然后整体思路就是得到两者的时间差的毫秒数 换算成秒 除以一天的秒数向下取整就是天数 时间差同天数的余数除以小时的秒数向下取整就是小时 时间差同小时的秒数取余除以分钟的秒数向下取整就是分钟 时间差同分钟取余得到的时秒；然后，在coding的时候明显对js的函数部分不清晰 在定时器函数中不会引用，没有封装，代码还不够简洁。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
