实例1.JQuery-调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的调用</title> <script src="JQuery文件位置"></script> <!--本地调用，需将JQuery文档下载到站点文件夹中--> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <!--网络调用，简单方便，如果没网就无法使用--> </head> <body> <div class="box"> <h1>jQuery是什么？</h1> <p>jQuery是一个快速、简洁的JavaScript框架，它将常用的javascript的代码封装起来，简化JS的调用方法，事件处理，动画设计等，简单来说，就是方便网页设计中的调用。 </p> <h2>2种常用的方法调用JQuery</h2> <ul> <li>下载JQuery文件，在<head>标签中使用<script>标签本地调用: <script src="JQuery文件位></script></li> <li>直接使用网址调用: <script src="JQuery网络调用地址"></script></li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例2.JQuery语法练习-色块变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的语法调用</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><!--网络调用，简单方便，如果没网就无法使用-->
<style>
#box {
width: 200px;
height: 200px;
border: 3px solid #000;
}
</style>
</head>
<body>
<div id="box">这是一个方块</div>
<script>
$(function () {
//就绪函数
var i = 1;
//设置变量i，默认值为1
console.log(i);
//控制台输出
$('#box').click(function () {
//如果对#box对象点击，执行函数
if (i == 1) {
//如果i值为1，设置这个#box的CSS，背景色为红，变量i再加1，控制台输出i
$(this).css('background', 'red');
i++;
console.log(i);
} else if (i == 2) {
//否则，如果i值为2，因为点击过一次，这次i值会加1变成2，则#box的背景变成绿色，i值再加1，控制台输出i
$(this).css('background', 'green');
i++;
console.log(i);
} else if (i == 3) {
//否则如果i值为3,前两次点击，i值都加了1，这次i值就为3，则设置#box的css背景为蓝，再将i值重新设置为1，就可以循环变色了
$(this).css('background', 'blue');
i = 1;
console.log(i);
}
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例3.JQuery-选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><!--网络调用，简单方便，如果没网就无法使用-->
<title>JQuery的选择器</title>
<style>
.box {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.box2 {
display: flex;
flex-direction: column;
align-items: center;
}
.box div {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
#b1 {
background: red;
}
#b2 {
background: green;
}
#b3 {
background: blue;
}
button {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div id="b1">移上来看看</div>
<div id="b2">色块</div>
<div id="b3">色块</div>
</div>
<div class="box2">
<button class="btn1">点我隐藏</button>
<button class="btn2">点我显示</button>
<button class="btn3">点我淡入</button>
<button class="btn4">点我淡出</button>
<button class="btn5">点我渐入渐出切换</button>
<button class="btn6">改变透明度</button>
<button class="btn7">还原透明度</button>
<button class="btn8">按钮变长一点</button>
<button class="btn9">改变容器内容</button>
</div>
<!--
## $(document).ready()，当网页文档守成加载时；
## $(selector).click()，被选元素的点击事件；
## $(selector).focus()，被选元素获得焦点的事件；
## $(selector).mouseover()，当鼠标放置到被选元素上时；
## $(selector).mouseleave()，当鼠标离开被选元素时；
-->
<script>
$('.btn1').click(function () {
$('#b1').hide();
$('#b2').hide();//括号内，双引和单引效果一样
$("#b3").hide();
});
$(".btn2").click(function () {
$("#b1").show();
$("#b2").show();
$("#b3").show();
});
$(".btn3").click(function () {
$("#b1").fadeIn();//默认速度
$("#b2").fadeIn("slow");//慢的速度
$("#b3").fadeIn(2000);//2000毫秒，就2秒时间
});
$(".btn4").click(function () {
$("#b1").fadeOut();
$("#b2").fadeOut("slow");//慢的速度
$("#b3").fadeOut(2000);//2000毫秒，就2秒时间
});
$(".btn5").click(function () {
$("#b1").fadeToggle();
$("#b2").fadeToggle("slow");//慢的速度
$("#b3").fadeToggle(2000);//2000毫秒，就2秒时间
});
$(".btn6").click(function () {
$("#b1").fadeTo("", 0.6);//两个参数，第一个参数为速度，后面为透明度值，""空值为默认速度
$("#b2").fadeTo("slow", 0.5);//慢的速度
$("#b3").fadeTo(2000, 0.15);//2000毫秒，就2秒时间
});
$(".btn7").click(function () {
$("#b1").fadeTo("", 1);
$("#b2").fadeTo("slow", 1);//慢的速度
$("#b3").fadeTo(2000, 1);//2000毫秒，就2秒时间
});
$('button.btn8').click(function () {//选择有class名的类型选择器
$(':button').css('width', '250px');//类型选择器
});
$('.btn9').click(function () {//选择有class名的类型选择器
$('#b1').text("PHP中文网"); //.text() 可以直接改变容器内的文本
$('#b2').text("HTML中文网");
$('#b3').text("hello,MOTO!");
});
$('#b1').mouseover(function () {
console.log('显示');
$(this).text('大家好，我是MOTO！').css('color', '#fff');
});
$('#b1').mouseleave(function () {
console.log('显示');
$(this).text('移上来看看').css('color', '#000');
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例4.JQuery-电子日期和时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-电子表</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><!--网络调用，简单方便，如果没网就无法使用-->
<style>
div {
height: 300px;
background: #ffcccc;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<div>dddd</div>
<script>
$(function () {
function timeer() {
//创建一个timeer函数，方便后面的时间刷新，不然时间在页面中不会刷新
var mydate = new Date();
//将所有日期，时间的值存放到变量mydate中
var yeah = mydate.getFullYear();
//从变量mydate中提取当前年份数据；
var month = mydate.getMonth() + 1;
//从变量mydate中提取当前月份数据，0代表1月，所以需要在取的值后面加1，获得正确月份数据；
var date = mydate.getDate();
//从变量mydate中提取当前日数据
var day = mydate.getDay();
//从变量mydate中提取星期几的数据;
var xinqi = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
//创建数组，存放星期，因为星期日的数据是0，用数组读取***一些;
var hou = mydate.getHours();
var min = mydate.getMinutes();
var sec = mydate.getSeconds();
//获取时，分，秒
if (hou < 10) {
hou = "0" + hou;
}
if (min < 10) {
min = "0" + min;
}
if (sec < 10) {
sec = "0" + sec;
}
//如果时，分，秒小于10，在它前面加个0
$('div').html(yeah + '年' + month + '月' + date + '日' + '<br>' + xinqi[day] + '<br>' + hou + '：' + min + '：' + sec);
/*调用变量不要使用引号*/
}
setInterval(timeer, 500);
//定时器，每500毫秒执行一次timeer函数;
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例5.JQuery-2019春节倒记时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-春节倒记时</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
div {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: khaki;
font-size: 25px;
}
</style>
</head>
<body>
<div></div>
<script>
$(function () {
function djs() {
var now = new Date();
//创建日期时间对象now
var dd = Date.parse('Feb 05.2019');
/*返回从1970/1/1/00:00:00，至2019年2月5日，的毫秒数据*/
// console.log(dd);
var d = now.getTime();
/*返回从1970/1/1/00:00:00，至今的毫秒数*/
// console.log(d);
var sum = Math.floor((dd - d) / 1000);
// console.log(sum);
/*
## 过年的毫秒 - 今天的毫秒 = 从今天到过年剩余的总毫秒时间
## 剩余总毫秒 / 1000 ，等于秒，Math.floor取整数
*/
var day = Math.floor(sum / 86400);
// console.log(day);
/*
## 1天是24小时，1小时60分，1分60秒，24*60*60=86400秒
## 剩余总秒数 除 86400秒，余数取整就是剩余的天数
*/
var hou = Math.floor(sum % 86400 / 3600);
// console.log(hou);
/*
## 1小时60分钟，1分钟60秒，1小时3600秒
## %是求不能被整除的余，也就是不到 1 天的秒数，再除 3600 ，获得剩余的小时数
*/
var min = Math.floor(sum % 3600 / 60);
// console.log(min);
/*不能被1天的小时数整除的余，再除60，就是剩余的分钟数*/
var sec = Math.floor(sum % 60);
//不能被60整数的余，就是剩余的秒数
// console.log(sec);
$('div').text('距离2019年春节还有：' + day + '天' + hou + '时' + min + '分' + sec + '秒');
}
setInterval(djs, 1000);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
