收藏
批改状态：未批改
老师批语：
一、什么是jQuery？
jQuery是一个快速、简洁的JavaScript框架
1、封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式；
2、极大的简化了JavaScript编程；
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展，优化html文档操作、时间处理、动画设计和ajax交互。
二、jQuery引入方法
本地
将下载的文件放在网页的同一目录下，就可以使用jQuery (外部引入js);
示例：
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
线上
示例：
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>jQuery第一节课</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
if(typeof $=='undefined'){
alert('jQuery 未加载')
}else{
alert('jQuery 已加载')
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：以上代码测试线上jQuery代码是否引入成功。
三、jQuery基本语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作
示例：
$(选择器).action()
ready() ：文档就绪函数 ready() (也称为jQuery入口函数) 作用: 为了防止文档在完全加载（就绪）之前运行 jQuery 代码
示例：
$(document).ready(function(){
执行的代码块
})
示例、简写方法：
$(function(){
// 执行的代码块
})
ready与window.onload的区别是，ready是标签加载完毕就可以执行代码块；而window.onload是等所有内容包括图片等全部加载完毕后才开始执行代码块。
<!DOCTYPE html>
<html>
<head>
<title>jQuery第一节课</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
四、选择器
jQuery中所有选择器都以美元符号开头：$()，它基于已经存在的css选择器；
$('#id名')根据id来匹配元素
$('.class名')根据class名匹配元素
$('element')根据标签名匹配元素
$('*')匹配所有元素
$('#id名,class名,element')匹配到多个选择器
$('父级元素>子级元素')给定的父级元素下匹配所有的子元素
$('祖先元素 后代元素')给定的祖先元素下匹配所有的后代元素
$('prev+next')(同级的元素)匹配紧跟在prev元素后面的next元素
$('prev~siblings')匹配prev元素后面所有的siblings元素
五、事件方法
jQuery事件原理：当事件被触发时会调用一个函数我们称之为事件方法；（即事件处理函数）
基础事件方法
focus 元素获得焦点。
blur 元素失去焦点。
click 当用户点击某个对象时调用的事件句柄。
keydown 某个键盘按键被按下。
keyup 某个键盘按键被松开。
mouseover 鼠标移到某元素之上。
六、倒计时案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例：倒计时</title>
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
div{
font-size: 30px;
width: 1200px;
height: 580px;
margin: 100px auto;
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556006568357&di=ab697171b37b18279ddcec87b4e30733&imgtype=0&src=http%3A%2F%2Fthumb.takefoto.cn%2Fwp-content%2Fuploads%2F2014%2F12%2F201412180636229475.jpg) no-repeat;
background-size: 100%;
text-align: center;
color: #4395FF;
padding-top: 1px;
}
p{
border:1px solid #4395FF;
border-radius: 3px;
box-shadow: 5px 5px 20px #4395FF;
width: 900px;
display: block;
line-height: 50px;
margin: 30px auto;
}
</style>
<script type="text/javascript">
$(function(){
function Ro(){
var d=Date.parse("Apr 23,2019")
var date=new Date()
var dd=date.getTime()
var rd=Math.floor((d-dd)/1000)
var days=Math.floor(rd/86400)
var hours=Math.floor(rd%86400/3600)
// console.log(hours)
var minus=Math.floor(rd%3600/60)
var secos=Math.floor(rd%60)
$('span').text(days+'天'+hours+'小时'+minus+'分钟'+secos+'秒')
}
setInterval(Ro,1)
})
</script>
</head>
<body>
<div>
<p>2019年海军70周年阅兵倒计时：<span> </span></p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以上代码演示了海军阅兵倒计时！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
