jQuery基礎(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)更多的功能),
它擁有著獨(dú)特的選擇器、鏈?zhǔn)讲僮?、事件處理機(jī)制和封裝、以及完善的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頁面所有的文檔解析完畢后在運(yùn)行的函數(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獨(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. 定時器的幾個經(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)前時間 并啟動定時器運(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)前時間:"+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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
innerHTML與jquery里的html()區(qū)別介紹
我原本一直以為innerHTML和jquery里的html其實是完全一樣的,jquery是多此一舉了,直到我遇到一次問題2012-10-10推薦40款強(qiáng)大的 jQuery 導(dǎo)航插件和教程(上篇)
在下面的集合中,你會發(fā)現(xiàn)很多便利的 jQuery 導(dǎo)航插件和有用的教程,幫助你實現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航,讓你網(wǎng)站更有組織性和交互性2012-09-09JQuery表格拖動調(diào)整列寬效果(自己動手寫的)
當(dāng)鼠標(biāo)停留在表頭邊框線上時,鼠標(biāo)會變成表示左右拖動的形狀,接著拖動鼠標(biāo),會在表格中出現(xiàn)一條隨鼠標(biāo)移動的豎線,最后放開鼠標(biāo),表格列寬會被調(diào)整2014-09-09