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