jQuery 是一个 JavaScript 库
jQuery 极大地简化了 JavaScript 编程
JQuery 的引用(线上库 和本地库 引用)
实例
//线上引用 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> //本地引用 <script src="/js/jquery-3.1.1.min.js"></script>
jQuery入口函数
实例
$(document).ready(function(){ // 执行代码 }); 或者简写为: $(function(){ // 执行代码 });
javascript入口函数
实例
window.onload = function () { // 执行代码 }
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
javascript 的入口函数是在 所有内容全部加载完 就会去执行。
jQuery的事件
$(document).ready()当文档完成加载时; $(selector).click()被选元素的点击事件; $(selector).focus()被选元素的获得焦点事件; $(selector).mouseover()当鼠标指针移上被选元素元素时; $(selector).mouseleave()当鼠标指针离开被选元素元素时; (selector 选择器) jQuery事件原理:当事件被触发时会调用一个函数;
实例
$('.btn').click(function(){ //点击class为btn 执行的操作 });
jQuery 选择器
jQuery 选择器 :基于CSS选择器,元素选择器、#id选择器、.class类选择器 类型、属性、属性值;
实例
//id选择器 $('#but').click(function(){ $('.content').css('display',"none") }) //类型选择器 选择所有按钮 // $(':button').click(function(){ // $('.content').css('background',"red") // }) //选择选择器 中class为intro的 $('button.intro').click(function(){ $('.content').css('background','red') }) // $(this)this指选取当前HTML元素
实例练习:动态显示2019年农历春节倒计时(做法不限)
输出格式:2019年农历春节倒计时:天/小时/分钟/秒
效果图
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>春节倒计时</title> <style> div { width: 800px;height: 333px; background: url(http://bpic.588ku.com//back_water_img/18/12/27/21d85323b34e5a4bb0d1c4089524494913.jpg) no-repeat ; margin:auto; line-height: 300px; text-align: center; font-size: 30px; color:red; box-shadow: 5px 5px 5px #ccc; } </style> </head> <body> <div></div> <script> timer = null; timer = setInterval(function (){ var timeNow = new Date().getTime(); //获取13位时间戳 console.log(timeNow); var timeSpring = new Date('2019/2/5 00:00:00').getTime(); console.log(timeSpring); //算出时间差 (毫秒) var time = timeSpring - timeNow; console.log(time); //一天等于 24小时*60分钟*60秒*1000 毫秒 dayx = 24*60*60*1000 ; hourx = 60*60*1000; minx = 60*1000; senx = 1000; //计算出天数 var day = Math.floor(time/(dayx)); // Math.floor取整 console.log(day) //计算小时 var hour1 = time%dayx; var hour = Math.floor(hour1/hourx); console.log(hour); //计算分钟 var min1 = time%hourx var min = Math.floor(min1/minx) console.log(min); //计算秒 var sen1 = time%minx; var sen = Math.round(sen1/senx); console.log(sen) springTime ='2019年农历春节倒计时:'+ day +'天' + hour + '小时' + min +'分' + sen +'秒' ; var div = document.querySelector('div'); div.innerText = springTime; },100) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例