一、什么是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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
以上代码演示了海军阅兵倒计时!