收藏
批改状态：未批改
老师批语：
1.引入Jquery库：
本地引入：<script type=’text/javascript’ src=’jquery-3.3.1.min.js’></script>
线上引入：<script src=’https://code.jquery.com/jquery-3.3.1.min.js’></script>
2.测试引入是否成功
If(typeof $==‘undefined’){
alert(‘jQuery未加载’)
}else{
alert(‘jQuery已加载’)
}
3.基本语法：$(选择器).方法()
4.jQuery文档就绪函数（入口函数）
标准写法：$(document).ready(function(){执行的代码块})
简写：$(function(){执行的代码块})
和JS的区别：JS入口函数是等所有加载完成后加载（包括外部资源）
JQ入口函数是等所有标签加载完成后加载（必须写）
5.选择器
标签选择器：$(‘标签名’).css(‘属性名’,’属性值’)
ID选择器：$(‘#ID名’).css(‘属性名’,’属性值’)
class选择器：$(‘.class名’).css(‘属性名’,’属性值’)
匹配多个选择器：$(‘选择器1,选择器2’).css(‘属性名’,’属性值’)
类型选择器：$(‘li.list’).css(‘属性名’,’属性值’) 选中li下面的list
属性选择器：$(‘[属性名]’).css(‘属性名’,’属性值’)
属性值选择器：$(“标签名[属性名=’属性值’]”).css(‘属性名’,’属性值’)
注：内部有单引号的外部应使用双引号
属性有连接符的可直接使用（建议使用驼峰写法）
层级选择器：子选择器$(‘标签名>子标签’).css(‘属性名’,’属性值’)
后代选择器$(‘标签名 子标签’).css(‘属性名’,’属性值’)
比较选择器：选择大于下标值的$(‘标签名:gt(下标)’).css(‘属性名’,’属性值’)
选择小于下标值的$(‘标签名:lt(下标)’).css(‘属性名’,’属性值’)
选择等于下标值的$(‘标签名:eq(下标)’).css(‘属性名’,’属性值’)
6.事件（当事件被触发会调用一个函数，我们称之为事件方法也叫事件处理函数）
基本语法：$(选择器).事件()
focus 元素获得焦点 blur 元素失去焦点
click 单击事件 dblclick 双击事件
keydown 某个键盘按键被按下 keyup 某个键盘按键被松开
mouseover 鼠标移到某元素之上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery01作业</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
*{margin:0; padding:0;}
p{width:850px; height:150px; background:rgba(0,255,255,0.3); font-size:36px; margin:50px auto; line-height:150px; padding-left:30px; position:relative;}
.ms{position:absolute; left:732px;}
</style>
</head>
<body>
<p>距离春节时间剩余：<span class='djs'></span><span class='ms'>毫秒</span></p>
<script>
if(typeof $=='undefined'){ //判断jQuery数据类型是否为空
alert('加载失败'); //如果为空证明未加载
}else{
alert('加载成功'); //否则为已加载状态
}
$(function(){ //文档就绪函数(入口函数)
function Ro(){ //倒计时函数
var d=Date.parse('Jan 24,2020'); //获取以往至春节的总时间数(毫秒)
// var date=new Date(); //获取当前时间数(毫秒)
var dd=new Date().getTime(); //获取以往至当前的总时间数(毫秒)
var rd=Math.floor(d-dd); //获取剩余毫秒数
var days=Math.floor(rd/86400000); //获取剩余天数
var hours=Math.floor(rd%86400000/3600000); //获取剩余小时数
var minus=Math.floor(rd%3600000/60000); //获取剩余分钟数
var second=Math.floor(rd%60000/1000); //获取剩余秒数
var hm=Math.floor(rd%1000); //获取剩余毫秒数
$('.djs').text(days+'天'+hours+'时'+minus+'分'+second+'秒'+hm); //拼装时间样式
}
setInterval(Ro,1); //以毫秒数调用函数(刷新作用)
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
