收藏
批改状态：未批改
老师批语：
一、jq的引入及测试引入是否成功
本地引入：<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
测试是否引入成功:if(typeof $=='undefind'){
document.write('引入不成功');
}else{
document.write('引入成功');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq入门介绍、jq安装与使用、选择器、事件</title>
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script><!--本地引用jq-->
</head>
<body>
<script type="text/javascript">
//测试是否引入jq成功
if(typeof $=='undefind'){
document.write('引入不成功');
}else{
document.write('引入成功');
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二、JQ的基本语法：$(选择器).action()，即以$开头，通过选择器获取HTML元素，并对选择的元素进行某些操作
文档就绪函数 ready() (也称为jQuery入口函数) 作用: 为了防止文档在完全加载（就绪）之前运行 jQuery 代码
$(document).ready(function() { //完整写法
alert('页面加载完成，jq已执行');
})
$(function(){ //简单写法
alert('页面加载完成，jq已执行');
})
三、jq选择器与事件
选择器：jQuery 中所有选择器都以美元符号开头：$(),它基于已经存在的 CSS 选择器;
//元素选择器
$('body').css('background','#ccc');//注意：选择器及元素属性及元素值都用单引号引起来
//id选择器
$('#box').css('color','blue');
//类选择器
$('.box').css('text-align','center');
//匹配到页面中多个选择器
$('.box,#box').css('font-size','20px');
//类型
$('li.list').css('background','green');
//属性
$('[href]').css('background','red');
//属性值
$("a[target='_blank']").css('fontSize','50px');
//层级选择器
$('p>a').css('fontSize','30px');//给定的父级元素下匹配所有的子元素
$('p a').css('text-decoration','none');//给定的祖先元素下匹配所有的后代元素
//比较(x的顺序是从0开始)
//$('选择器:gt(x)')表示大于值x的元素,x的值是从0开始
$('li:gt(3)').css('background','#fff');//改变大于3的元素
$('li:lt(2)').css('background','#f00');//改变小于2的元素
$('li:eq(3)').css('background','green');//改变等于3的元素
jQuery事件:
JS JQ 描述
onfocus focus 元素获得焦点。
onblur blur 元素失去焦点。
onclick click 当用户点击某个对象时调用的事件句柄。
onkeydown keydown 某个键盘按键被按下。
onkeyup keyup 某个键盘按键被松开。
onmouseover mouseover 鼠标移到某元素之上。
jQuery事件的使用:
$(document).ready()当文档完成加载时;
$(selector).click()被选元素的点击事件;
jQuery事件原理：当事件被触发时会调用一个函数我们称之为事件方法;（及事件处理函数);
$('button').click(function(){//当点击button按钮，触发click事件，使body背景变化颜色
$('body').css('background','pink');
})
三、全部代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq选择器与事件</title>
<style type="text/css">
.box{
}
</style>
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script> <!--本地引用jq-->
</head>
<body>
<div id="box">1</div>
<div class="box">2</div>
<ul>
<li>3</li>
<li class="list">4</li>
<li><a href="#">5</a></li>
<li><a href="#" target="_blank">6</a></li>
<li>7</li>
</ul>
<p><a href="">php</a><br><span><a href="">html</a></span></p>
<button>点击</button>
<script>
$(function(){ //jQuery 中所有选择器都以美元符号开头：$(),它基于已经存在的 CSS 选择器;
//元素选择器
$('body').css('background','#ccc');//注意：选择器及元素属性及元素值都用单引号引起来
//id选择器
$('#box').css('color','blue');
//类选择器
$('.box').css('text-align','center');
//匹配到页面中多个选择器
$('.box,#box').css('font-size','20px');
//类型
$('li.list').css('background','green');
//属性
$('[href]').css('background','red');
//属性值
$("a[target='_blank']").css('fontSize','50px');
//层级选择器
$('p>a').css('fontSize','30px');//给定的父级元素下匹配所有的子元素
$('p a').css('text-decoration','none');//给定的祖先元素下匹配所有的后代元素
//比较(x的顺序是从0开始)
//$('选择器:gt(x)')表示大于值x的元素,x的值是从0开始
$('li:gt(3)').css('background','#fff');//改变大于3的元素
$('li:lt(2)').css('background','#f00');//改变小于2的元素
$('li:eq(3)').css('background','green');//改变等于3的元素
// jQuery事件:
// JS JQ 描述
// onfocus focus 元素获得焦点。
// onblur blur 元素失去焦点。
// onclick click 当用户点击某个对象时调用的事件句柄。
// onkeydown keydown 某个键盘按键被按下。
// onkeyup keyup 某个键盘按键被松开。
// onmouseover mouseover 鼠标移到某元素之上。
// jQuery事件的使用:
// $(document).ready()当文档完成加载时;
// $(selector).click()被选元素的点击事件;
//jQuery事件原理：当事件被触发时会调用一个函数我们称之为事件方法;（及事件处理函数);
$('selector').click(function(){
//当事件触发时，执行的代码需要执行的代码块
})
$('button').click(function(){//当点击button按钮，触发click事件，使body背景变化颜色
$('body').css('background','pink');
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
四、JQ实现五一国际劳动节倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQ实现五一劳动节倒计时</title>
<style type="text/css">
*{
margin: 0;
}
p{
height: 150px;
width: 100%;
background: blue;
text-align: center;
line-height: 150px;
font-size: 50px;
margin-top: 80px;
}
</style>
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
</head>
<body>
<p>距离国际劳动节还有：<span></span></p>
<script>
$(function(){
function ro(){
//parse()方法可解析一个日期时间字符串，并返回1970/1/1午夜距离该日期时间的毫秒数；
var d=Date.parse("May 01,2019");
// console.log(d);
//document.write(d);
var time=new Date();//获得当前时间
var day=time.getTime();//getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数
// 1秒等于1000毫秒，1分钟等于60秒，一小时=60分钟等于3600秒，一天24小时=86400秒
var dday=(Math.floor(d-day)/1000);//求差得到总的秒数;
var days=Math.floor(dday/(60*60*24));//得到天数
var hours=Math.floor(dday%86400/3600);//取余以后就是不到一天的秒数, 再除以3600就是小时数
var minus=Math.floor(dday%3600/60);//拿到分钟
var sconds=Math.floor(dday%60);//拿到秒钟
$('span').text(days+'天'+hours+'小时'+minus+'分'+sconds+'秒');
}
setInterval(ro,1000);
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
