jQuery基礎(chǔ)的工廠函數(shù)以及定時(shí)器的經(jīng)典實(shí)例分析

更新時(shí)間：2016年05月20日 16:46:14 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jQuery基礎(chǔ)的工廠函數(shù)以及定時(shí)器的經(jīng)典實(shí)例分析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在

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改變圖片的名稱(chēng)從而實(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: