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

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

下面小編就為大家?guī)硪黄猨Query基礎的工廠函數(shù)以及定時器的經(jīng)典實例分析。小編覺得挺不錯的，現(xiàn)在

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)更多的功能）,

它擁有著獨特的選擇器、鏈式操作、事件處理機制和封裝、以及完善的Ajax都是其他JavaScript哭望成莫及的。

2.jQuery的相關應用:

2.1 如果想在頁面中引用jQuery庫，只需要將下載好的jQuery庫放在目錄js下即可，一般引用時都使用的相對路徑。jQuery的關鍵字"$"

2.2 相關函數(shù)的語法與案例

2.2.1 等待html頁面所有的文檔解析完畢后在運行的函數(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：通過獲取選擇器名，然后給選擇器對應的內(nèi)容注冊事件

//鼠標移到標簽上和移開的兩個事件
//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. 定時器的幾個經(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; //當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">
    //默認定義一個匿名函數(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 獲取當前時間并啟動定時器運行

<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的數(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基礎的工廠函數(shù)以及定時器的經(jīng)典實例分析就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: