您的位置：首页 > Web前端 > JQuery

jQuery基础的工厂函数以及定时器的经典案例

2016-05-20 13:57 656 查看

[b]1. jQuery的基本信息:[/b]

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哭望成莫及的。

[b]2.jQuery的相关应用:[/b]

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" });
});
});

[b] 3. 定时器的几个经典案例[/b]

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 id="id" src="image/1.jpg" width="1000px" height="600px"/>
</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" name="btn" value="开始" id="btnstart"/>
<input type="button" name="btn" value="停止" id="btnstop" />
<div id="msg">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 onload="startTime()">
<div id="txt"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航