1. jQuery的基本信息:
1.1 定义: jQuery是JavaScript的程序库之一，它是JavaScript对象和实用函数的封装，
1.2 作用: 许多使用JavaScript能实现的交互特效，使用jQuery都能完美地实现，下面通过五个用途来更多的了解。
1.2.1 访问和操作DOM元素
1.2.2 制作页面样式
1.2.3 对页面时间的处理
1.2.4 方便地使用jQuery插件
1.2.5 与Ajax的完美结合
1.3 优势: 想必有人就会问了：为什么人们会更多的选择jQuery呢？因为jQuery的主旨就是wrute less,do more（以更少的代码,实现更多的功能）,
它拥有着独特的选择器、链式操作、事件处理机制和封装、以及完善的Ajax都是其他JavaScript哭望成莫及的。
2.jQuery的相关应用:
2.1 如果想在页面中引用jQuery库，只需要将下载好的jQuery库放在目录js下即可，一般引用时都使用的相对路径。jQuery的关键字"$"
2.2 相关函数的语法与案例
2.2.1 等待html页面所有的文档解析完毕后在运行的函数模块
$(document).ready(function(){ alert(message); //函数、事件模块 }); //简写版 $(function(){ alert(message); //函数、事件模块 });
2.2.2 工厂函数$()
$()作用1：是将DOM对象转化为jQuery对象，因为只有将DOM对象转化为jQuery对象后，才能使用jQuery的方法(jQuery的方法都是特有的)
$(function () { //将jQuery转化为DOM对象 var dom = $("#mli")[0]; //然后才能调用DOM的属性 dom.innerText; //将DOM对象转化为jQuery对象 var $dom = $(dom); //用jQuery对象调用它的jQuerry的方法 $dom.text();
$()作用2：通过获取选择器名，然后给选择器对应的内容注册事件
//鼠标移到标签上和移开的两个事件 //jQuery独有的连缀效果 $(function () { $("li").mouseover(function () { $(this).css("background", "green"); }).mouseout(function() { //this.style.background = ""; this.style.cssText = "background:"; }); }); //单击事件 $(function () { $("h2").click(function () { $("h2").css({ "font-size": "50px", "color": "red" }); $("p").css({ "font-size": "30px", "color": "red","padding-left":"1px","line-height":"30px" }); }); });
3. 定时器的几个经典案例
3.1 图片自动切换
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>背景图片轮换</title> <script type="text/javascript"> var i = 1; function myimg() { //通过i改变图片的名称从而实现图片自动切换 if (i < 5) { i++; } else { i = 1; //当i超出是重新赋值使其实现循环切换图片 } //通过id获取图片并给它的src属性重新赋值 var dom = document.getElementById("id"); dom.src = 'image/'+i+'.jpg'; } //启动定时器，给它一定的时间（毫秒） setInterval(myimg,500); </script> </head> <body> <img src="https://www.jb51.net/image/1.jpg"/> </body> </html>
3.2 倒计时（可以开始、停止、继续）
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>倒计时</title> <script type="text/javascript"> //默认定义一个匿名函数 window.onload = function () { //定义一个定时器 var t1; //获取开始按钮的value值 var btnstart = document.getElementById("btnstart"); //给开始按钮注册一个事件 btnstart.onclick = function () { //每1秒实现一次step函数 t1=setInterval(step,1000); } //获取停止按钮的value值 var btnstop = document.getElementById("btnstop"); //给停止注册一个事件 btnstop.onclick = function () { //停止定时器 clearInterval(t1); } } function step() { //1.1 取出div中的变量值 var dom = document.getElementById("msg"); //1.2 将值赋给num变量 var num = dom.innerText; if (num>0) { num--; } dom.innerText = num; } </script> </head> <body> <input type="button" value="开始"/> <input type="button" value="停止" /> <div>10</div> </body> </html>
3.3 获取当前时间 并启动定时器运行
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> function startTime() { var today = new Date() var h = today.getHours() var m = today.getMinutes() var s = today.getSeconds() //add a zero in front of numbers<10 m = checkTime(m) s = checkTime(s) document.getElementById('txt').innerHTML = "当前时间："+h + ":" + m + ":" + s t = setTimeout('startTime()', 500) } // 在小于10的数字前面加一个0 function checkTime(i) { if (i < 10) { i = "0" + i } return i } </script> </head> <body> <div></div> </body> </html>