收藏
批改状态：合格
老师批语：
一、jQuery基础语法知识点。
1、jQuery文件引入：
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
2、文档就绪函数 ready( ) ，也称为jQuery入口函数。作用：为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
$(document).ready(function(){
// 执行代码
});
//一般简写为:
$(function(){
// 执行代码
})
3、JavaScript 入口函数。
window.onload = function () {
// 执行代码
}jQuery 入口函数与 JavaScript 入口函数的区别：
jQuery 的入口函数 ready( ) 是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
4、jQuery事件
$(document).ready() 当文档完成加载时
$(selector).click() 被选元素的点击事件
$(selector).focus() 被选元素的获得焦点事件
$(selector).mouseover() 当鼠标指针移上被选元素元素时
$(selector).mouseleave() 当鼠标指针离开被选元素元素时
jQuery事件原理：当事件被触发时会调用一个函数（事件处理函数）
如: $(selector).click(function) 我们称之为事件方法;
jQuery中的事件方法：就是触发被匹配元素的事件,调用一个函数;或理解为将函数绑定到所有被匹配元素的某个事件上。
$(selector).click(function(){
// 当事件触发时，执行的代码需要执行的代码块
})
5、jQuery选择器
jQuery 中所有选择器都以美元符号开头：$( ),它基于已经存在的 CSS 选择器。
元素选择器、#id选择器、.class类选择器 类型、属性、属性值。
6、jQuery遍历：用一种相对的关系来查找html元素
向上查找（祖先元素）
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素
$("span").parents().css("color","red");
使用可选参数来过滤对祖先元素的搜索
$("span").parents("ul").css("color","red");
该例返回所有span元素的所有祖先，并且它是ul元素
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div").css("border","2px solid red");
该例返回介于span与div元素之间的所有祖先元素
以下为实操源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery基础语法</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
div{
height: 200px; width: 200px; margin: 20px;
text-align: center; line-height: 200px;
}
.box1{
background-color: lightcoral; margin-right: 10px;
}
textarea{width: 200px; height: 100px; margin: 20px; padding:10px;
font-size:2em; border-radius: 10px;
outline:none; /*去掉文本框再带获得焦点样式*/
resize:none;/*当resize的属性为none时，则禁止拖动*/
}
</style>
<script>
$(function(){
// 元素选择器: #id选择器、.class选择器
// 选取id元素
$('#but1').click(function(){
$('.box1').hide()
})
// 选取class元素
$('.but2').click(function(){
$('.box1').show()
})
$('.intro').click(function(){
$('.box1').css('background','lightblue')
})
// 类型选择器
// 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$(":button").click(function(){
$('.but2').css('background','pink')
})
$('button.intro').click(function(){
$('.content').text('点击我换所有元素背景色').css('color','red')
})
// $(this) 选取当前 HTML 元素
$('span').click(function(){
$(this).text('这是新的文字').css('color','blue')
})
// $("*") 选取所有元素
$('p').click(function(){
$('*').css('background','lightgreen')
})
$('.box1').mousemove(function(){
$(this).text('鼠标进来了~').css('background','yellow')
})
$('.box1').mouseleave(function(){
$(this).text('鼠标出去了~').css('background','green')
})
//文本框获得焦点事件
$("textarea").focus(function(){
$(this).css("border","1px solid blue");
})
$("textarea").blur(function(){
$(this).css("border","1px solid #ccc");
})
//选中textarea的直接父元素 > form标签
$('textarea').parent().css('border','3px solid pink');
//parents() 方法返回被选元素的所有祖先元素，parents('div')选中所有祖先中的div元素
$('textarea').parents('div').css('border','3px solid red');
//parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
//该例返回介于.box1 与html元素之间的所有祖先元素,即body元素
$('.box1').parentsUntil('html').css('border','3px solid green');
})
</script>
</head>
<body>
<div class="box1">内容111</div>
<span id="content2">点击我换文字</span>
<p class="content"></p>
<button id="but1">点我隐藏</button>
<button class="but2">点我显示</button>
<button class="intro">点我有惊喜</button>
<div>
<form>
<textarea></textarea>
</form>
</div>
</body>
</html>
二、动态显示2019年农历春节倒计时（做法不限），输出格式：2019年农历春节倒计时：天/小时/分钟/秒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>春节倒计时</title>
<style>
div {
width: 100%;
height: 600px;
background-color: lightcoral;
}
.content {
line-height: 600px;
text-align: center;
color: white;
font-size: 2em;
}
</style>
<script>
function countTime(){
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str = "2019/2/4 00:00:00";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
var leftTime = end - now;
//定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
}
//将倒计时赋值到span中
document.getElementById("content").innerHTML = d+" 天 "+h+" 小时 "+m+" 分 "+s+" 秒 ";
//递归每秒调用countTime方法，显示动态时间效果
setTimeout(countTime, 1000);
}
</script>
</head>
<body onload="countTime()" >
<div>
<div class='content'>2019年农历春节倒计时：<span id="content"></span></div>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
