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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：4040 次日期：2016-06-25 14:24:01

温馨提示：小编为您整理了“jQuery基础的工厂函数以及定时器的经典实例分析”,方便广大网友查阅！

下面小编就为大家带来一篇jQuery基础的工厂函数以及定时器的经典实例分析。

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>

<title>背景图片轮换</title>

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>

</body>

</html>

3.2 倒计时（可以开始、停止、继续）

<head>

//默认定义一个匿名函数

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>

</body>

</html>

3.3 获取当前时间并启动定时器运行

<head>

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>

</html>

以上这篇jQuery基础的工厂函数以及定时器的经典实例分析就是小编分享给大家的全部内容了，希望能给大家一个参考

上一篇：详解JavaScript中的事件流和事件处理程序

下一篇：深入理解setTimeout函数和setInterval函数

手机网站地址：jQuery基础的工厂函数以及定时器的经典实例分析

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！