下面小編就為大家帶來一篇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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>背景圖片輪換</title>
<script type="text/javascript">
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>
<img id="id" src="image/1.jpg" width="1000px" height="600px"/>
</body>
</html>
3.2 倒計時（可以開始、停止、繼續）
<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">
//默認定義一個匿名函數
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>
<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 獲取當前時間 并啟動定時器運行
<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 = "當前時間："+h + ":" + m + ":" + s
t = setTimeout('startTime()', 500)
}
// 在小于10的數字前面加一個0
function checkTime(i) {
if (i < 10)
{ i = "0" + i }
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
以上這篇jQuery基礎的工廠函數以及定時器的經典實例分析就是小編分享給大家的全部內容了，希望能給大家一個參考
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
