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)，下面通過五個(gè)用途來(lái)更多的了解。
1.2.1 訪問和操作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ì)問了：為什么人們會(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)寫版
$(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：通過獲取選擇器名，然后給選擇器對(duì)應(yīng)的內(nèi)容注冊(cè)事件
//鼠標(biāo)移到標(biāo)簽上和移開的兩個(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() {
//通過i改變圖片的名稱從而實(shí)現(xiàn)圖片自動(dòng)切換
if (i < 5) {
i++;
} else {
i = 1; //當(dāng)i超出是重新賦值使其實(shí)現(xiàn)循環(huán)切換圖片
}
//通過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í)（可以開始、停止、繼續(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;
//獲取開始按鈕的value值
var btnstart = document.getElementById("btnstart");
//給開始按鈕注冊(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="開始" 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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
innerHTML與jquery里的html()區(qū)別介紹
我原本一直以為innerHTML和jquery里的html其實(shí)是完全一樣的，jquery是多此一舉了，直到我遇到一次問題2012-10-10
本文主要對(duì)基于jQuery實(shí)現(xiàn)的常用小案例進(jìn)行匯總，具有一定的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
jQuery中:last-child選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:last-child選擇器用法,實(shí)例分析了:last-child選擇器功能、定義及匹配父元素的最后一個(gè)子元素用法技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
點(diǎn)擊一個(gè)按鈕時(shí)，彈出一個(gè)自定義窗口，并且可以隨意的拖拽，jquery也可以實(shí)現(xiàn)這樣的功能，下面有個(gè)不錯(cuò)的示例，大家可以感受下2014-03-03
推薦40款強(qiáng)大的 jQuery 導(dǎo)航插件和教程(上篇)
在下面的集合中，你會(huì)發(fā)現(xiàn)很多便利的 jQuery 導(dǎo)航插件和有用的教程，幫助你實(shí)現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航，讓你網(wǎng)站更有組織性和交互性2012-09-09
本篇文章主要分享的是幾個(gè)上傳文件的例子和邏輯步奏及自定義個(gè)簡(jiǎn)單的js上傳插件。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
7款吸引人眼球的jQuery/CSS3特效實(shí)例分享
jQuery和CSS3對(duì)于web前端開發(fā)肯定用得也比較多，接下來(lái)分享一些由jQuery和CSS3制作成的特效，希望對(duì)哪些喜歡學(xué)習(xí)特效的朋友有所幫助2013-04-04
Ajax是前后端交互經(jīng)常用的，雖然jQuery瘋狂ajax處理函數(shù) $.post(), $.get(); $.ajax()已經(jīng)大大的簡(jiǎn)化了ajax的函數(shù)處理，但我們可以更加精益求精2013-11-11
JQuery表格拖動(dòng)調(diào)整列寬效果(自己動(dòng)手寫的)
當(dāng)鼠標(biāo)停留在表頭邊框線上時(shí)，鼠標(biāo)會(huì)變成表示左右拖動(dòng)的形狀，接著拖動(dòng)鼠標(biāo)，會(huì)在表格中出現(xiàn)一條隨鼠標(biāo)移動(dòng)的豎線，最后放開鼠標(biāo)，表格列寬會(huì)被調(diào)整2014-09-09
這篇文章主要為大家分享了jQuery插件的學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下2016-01-01