下面小編就為大家?guī)硪黄猨Query基礎(chǔ)的工廠函數(shù)以及定時器的經(jīng)典實例分析。
1. jQuery的基本信息:
1.1 定義: jQuery是JavaScript的程序庫之一，它是JavaScript對象和實用函數(shù)的封裝，
1.2 作用: 許多使用JavaScript能實現(xiàn)的交互特效，使用jQuery都能完美地實現(xiàn)，下面通過五個用途來更多的了解。
1.2.1 訪問和操作DOM元素
1.2.2 制作頁面樣式
1.2.3 對頁面時間的處理
1.2.4 方便地使用jQuery插件
1.2.5 與Ajax的完美結(jié)合
1.3 優(yōu)勢: 想必有人就會問了：為什么人們會更多的選擇jQuery呢？因為jQuery的主旨就是wrute less,do more（以更少的代碼,實現(xiàn)更多的功能）,
它擁有著獨特的選擇器、鏈?zhǔn)讲僮?、事件處理機制和封裝、以及完善的Ajax都是其他JavaScript哭望成莫及的。
2.jQuery的相關(guān)應(yīng)用:
2.1 如果想在頁面中引用jQuery庫，只需要將下載好的jQuery庫放在目錄js下即可，一般引用時都使用的相對路徑。jQuery的關(guān)鍵字"$"
2.2 相關(guān)函數(shù)的語法與案例
2.2.1 等待html頁面所有的文檔解析完畢后在運行的函數(shù)模塊
$(document).ready(function(){
alert(message); //函數(shù)、事件模塊
});
//簡寫版
$(function(){
alert(message); //函數(shù)、事件模塊
});
2.2.2 工廠函數(shù)$()
$()作用1：是將DOM對象轉(zhuǎn)化為jQuery對象，因為只有將DOM對象轉(zhuǎn)化為jQuery對象后，才能使用jQuery的方法(jQuery的方法都是特有的)
$(function () {
//將jQuery轉(zhuǎn)化為DOM對象
var dom = $("#mli")[0];
//然后才能調(diào)用DOM的屬性
dom.innerText;
//將DOM對象轉(zhuǎn)化為jQuery對象
var $dom = $(dom);
//用jQuery對象調(diào)用它的jQuerry的方法
$dom.text();
$()作用2：通過獲取選擇器名，然后給選擇器對應(yīng)的內(nèi)容注冊事件
//鼠標(biāo)移到標(biāo)簽上和移開的兩個事件
//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. 定時器的幾個經(jīng)典案例
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改變圖片的名稱從而實現(xiàn)圖片自動切換
if (i < 5) {
i++;
} else {
i = 1; //當(dāng)i超出是重新賦值使其實現(xiàn)循環(huán)切換圖片
}
//通過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 倒計時（可以開始、停止、繼續(xù)）
<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">
//默認(rèn)定義一個匿名函數(shù)
window.onload = function () {
//定義一個定時器
var t1;
//獲取開始按鈕的value值
var btnstart = document.getElementById("btnstart");
//給開始按鈕注冊一個事件
btnstart.onclick = function () {
//每1秒實現(xiàn)一次step函數(shù)
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 獲取當(dāng)前時間 并啟動定時器運行
<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 = "當(dāng)前時間："+h + ":" + m + ":" + s
t = setTimeout('startTime()', 500)
}
// 在小于10的數(shù)字前面加一個0
function checkTime(i) {
if (i < 10)
{ i = "0" + i }
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
以上這篇jQuery基礎(chǔ)的工廠函數(shù)以及定時器的經(jīng)典實例分析就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考