欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2016年05月20日 16:46:14   投稿:jingxian  
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)的工廠函數(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)更多的功能),

它擁有著獨(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()區(qū)別介紹

    我原本一直以為innerHTML和jquery里的html其實是完全一樣的,jquery是多此一舉了,直到我遇到一次問題
    2012-10-10
  • jQuery 常見小例匯總

    jQuery 常見小例匯總

    本文主要對基于jQuery實現(xiàn)的常用小案例進(jìn)行匯總,具有一定的參考價值,需要的朋友一起來看下吧
    2016-12-12
  • jQuery中:last-child選擇器用法實例

    jQuery中:last-child選擇器用法實例

    這篇文章主要介紹了jQuery中:last-child選擇器用法,實例分析了:last-child選擇器功能、定義及匹配父元素的最后一個子元素用法技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • Jquery實現(xiàn)自定義窗口隨意的拖拽

    Jquery實現(xiàn)自定義窗口隨意的拖拽

    點擊一個按鈕時,彈出一個自定義窗口,并且可以隨意的拖拽,jquery也可以實現(xiàn)這樣的功能,下面有個不錯的示例,大家可以感受下
    2014-03-03
  • 推薦40款強(qiáng)大的 jQuery 導(dǎo)航插件和教程(上篇)

    推薦40款強(qiáng)大的 jQuery 導(dǎo)航插件和教程(上篇)

    在下面的集合中,你會發(fā)現(xiàn)很多便利的 jQuery 導(dǎo)航插件和有用的教程,幫助你實現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航,讓你網(wǎng)站更有組織性和交互性
    2012-09-09
  • 文件上傳的幾個示例分享【推薦】

    文件上傳的幾個示例分享【推薦】

    本篇文章主要分享的是幾個上傳文件的例子和邏輯步奏及自定義個簡單的js上傳插件。具有很好的參考價值,需要的朋友一起來看下吧
    2016-12-12
  • 7款吸引人眼球的jQuery/CSS3特效實例分享

    7款吸引人眼球的jQuery/CSS3特效實例分享

    jQuery和CSS3對于web前端開發(fā)肯定用得也比較多,接下來分享一些由jQuery和CSS3制作成的特效,希望對哪些喜歡學(xué)習(xí)特效的朋友有所幫助
    2013-04-04
  • 簡潔Ajax函數(shù)處理(示例代碼)

    簡潔Ajax函數(shù)處理(示例代碼)

    Ajax是前后端交互經(jīng)常用的,雖然jQuery瘋狂ajax處理函數(shù) $.post(), $.get(); $.ajax()已經(jīng)大大的簡化了ajax的函數(shù)處理,但我們可以更加精益求精
    2013-11-11
  • JQuery表格拖動調(diào)整列寬效果(自己動手寫的)

    JQuery表格拖動調(diào)整列寬效果(自己動手寫的)

    當(dāng)鼠標(biāo)停留在表頭邊框線上時,鼠標(biāo)會變成表示左右拖動的形狀,接著拖動鼠標(biāo),會在表格中出現(xiàn)一條隨鼠標(biāo)移動的豎線,最后放開鼠標(biāo),表格列寬會被調(diào)整
    2014-09-09
  • 分享jQuery插件的學(xué)習(xí)筆記

    分享jQuery插件的學(xué)習(xí)筆記

    這篇文章主要為大家分享了jQuery插件的學(xué)習(xí)筆記,感興趣的小伙伴們可以參考一下
    2016-01-01

最新評論