天天看點

跟我一起學jQuery——第一集

《鋒利的JQuery》第二版閱讀筆記-第一章
jQuery對象和DOM對象

    想學習jQuery,首先要學會區分jQuery對象和DOM對象。1)jQuery對象是用jQuery類庫的選擇器獲得的對象。2)DOM對象是用傳統(javascript)獲得的對象。舉個栗子

//DOM對象
var domO = document.getElementById("id");
 //JQuery對象:$jqueryO,這裡的$是可以省略不寫的,是習慣寫上,一看就知道是jquery對象。
var $jqueryO = $("#id");           

    其次,jQuery對象不能使用DOM對象的方法,DOM對象也不能使用jQuery對象的方法。不過,這兩個對象是可以互相轉化的。

//由于jQuery對象是一個數組對象,是以可以通過下标轉DOM
var $jqueryO = $("#id");
//方法1
var jToD = $jqueryO[0];
//方法2
var jToDT = $jqueryO.get(0);
//DOM轉JQuery
var domO = document.getElementById("id");
var $domToJ = $(domO);           
jQuery的優勢與特點

    學習了jQuery和DOM對象的差別後,讓我們來了解一下jQuery引得如此多人使用的魅力所在。

  • 一,小。jQuery分為開發和生産(min.js)兩個版本。其中生産版本大約30kb左右。
  • 二,選擇器強大。它不僅支援css的,還支援jQuery獨創的,還有使用者自定義的。不知道你是否有何我一樣的疑問。選擇器又是什麼?這裡的選擇器主要指的是CSS選擇器。舉個栗子:

    #main{width:600px}

    ,如這個是個id選擇器(根據元素id屬性),目的是找尋網頁中id為main的元素并設定寬度為600px。與此同時還有标簽選擇器(元素标簽名稱,如div body),類選擇器(元素class屬性)。
  • 三,DOM封裝的十分好,使用jQuery時,不用考慮javascript的複雜元素,比如XMLHttpRequest
  • 四,事件處理機制可靠周到,這個我們後面一起學習
  • 五,ajax封裝的好。原生的會比較複雜,具體請看下面圖( 來源于一篇精彩的文章

    原生:

跟我一起學jQuery——第一集

jQuery

跟我一起學jQuery——第一集
  • 六 ,不污染頂級變量。一般我們見到的jQuery變量、函數都位于

    $function({});

    之内。可以與其他的的

    $function({});

    等共存。
  • 七,jQuery修複了一些浏覽器之間的差異,封裝了不少優秀插件,有豐富的文檔可以參考,而且還開源。
  • 八 ,因為jQuery對象本身是數組,是以其方法可以自動操作對象集合。其次,還可以進行鍊式操作(如:.attr().submit())。
Hello World!

    隻要學會Hello World,就仿佛掌握了一們語言。現在,讓我們學習使用jQuery,向世界say Hello。

    第一步,下載下傳jquery.js。本書使用的是1.7,可以從

這裡下載下傳

    第二步,引入與使用。注意,引入要在調用前哦,不然是無法使用的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="../jquery-1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){//等待Dom元素加載完畢
    alert("hello world!")//彈框
  });
  $(function(){//$(document).ready簡寫,可以同時執行
    alert("hello again");
  });
</script>
</head>
<body>
</body>
</html>           

繼續閱讀