jQuery學習筆記——樣式基礎

       jQuery是一套Javascript腳本庫,Javascript腳本庫類似於.NET的類庫, 我們將一些工具方法或對象方法封裝在類庫中, 方便用戶使用。

        jQuery是腳本庫, 而不是腳本框架, "庫"不等於"框架", 比如"System程序集"是類庫,而"ASP.NET MVC"是框架,jQuery並不能幫助我們解決腳本的引用管理和功能管理,這些都是腳本框架要做的事。腳本庫能夠幫助我們完成編碼邏輯,實現業務功能,使用jQuery將極大的提高編寫javascript代碼的效率, 讓寫出來的代碼更加優雅, 更加健壯,網絡上有豐富的jQuery插件。

       jQuery是一個JavaScript函數庫。jQuery是一個輕量級的"寫的少,做的多"的JavaScript庫。jQuery庫包含以下功能:

  • HTML 元素選取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函數
  • JavaScript 特效和動畫
  • HTML DOM 遍歷和修改
  • AJAX
  • Utilities

jQuery的特點:

1.提供了強大的功能函數

       使用這些功能函數, 能夠幫助我們快速完成各種功能, 而且會讓我們的代碼異常簡潔.

2.解決瀏覽器兼容性問題

       javascript腳本在不同瀏覽器的兼容性一直是Web開發人員的噩夢,  常常一個頁面在IE7,Firefox下運行正常, 在IE6下就出現莫名其妙的問題. 針對不同的瀏覽器編寫不同的腳本是一件痛苦的事情. 有了jQuery我們將從這個噩夢中醒來, 比如在jQuery中的Event事件對象已經被格式化成所有瀏覽器通用的, 從前要根據event獲取事件觸發者, 在ie下是event.srcElements 而ff等標準瀏覽器下下是event.target. jQuery則通過統一event對象,讓我們可以在所有瀏覽器中使用event.target獲取事件對象.

3.實現豐富的UI

       jQuery可以實現比如漸變彈出, 圖層移動等動畫效果, 讓我們獲得更好的用戶體驗。

jQuery獲取和引用

       下載jQuery類庫,jQuery的項目下載放在了Google Code上, 下載地址:

http://code.google.com/p/jqueryjs/downloads/list

       這裏需要注意 jQuery 分 2 個系列版本 1.x 與 2.x,主要的區別在於 2.x 不再兼容 IE6、7、8瀏覽器,這樣做的目的是爲了兼容移動端開發。由於減少了一些代碼,使得該版本比 jQuery 1.x 更小、更快。如果開發者比較在意老版本 IE 用戶,只能使用 jQuery 1.9 及之前的版本了。

有兩個版本的 jQuery 可供下載:

Production version - 用於實際的網站中,已被精簡和壓縮。

Development version - 用於測試和開發(未壓縮,是可讀的代碼)

jQuery 庫是一個 JavaScript 文件,您可以使用 HTML 的 <script> 標籤引用它:

<head> 
<script src="jquery-1.10.2.min.js"></script> 
</head>

jQuery對象與DOM對象

DOM對象

       DOM 全稱是 Document Object Model,是文檔對象模型。通過DOM元素,可以方便的操作HTML中的節點,比如獲取節點的內容,添加某些元素,刪除某些元素。也就是說,DOM元素和HTML息息相關,它將HTML中的一個個標籤封裝成DOM元素,以便於JavaScript進行操作。

<html>
    <body>
        <div id="info">
            <p>Test</p>
        </div>
    <script>
        window.onload = function(){
            document.getElementById("info").innerHTML="success";
        }
    </script>
    </body>
</html>

       其中document.getElementById("info")就是將id爲info的標籤封裝成爲一個DOM元素,接下來便可以方便的操作這個DOM對象,例如修改它的文本內容等等。

jQuery對象

       JQuery對象就是用JQuery包裝DOM之後產生的對象。JQuery對象是JQuery獨有的,可以使用JQuery的各種方法。

       $("#test").html();

       意思是指:獲取ID爲test的元素內的html代碼。其中html()是jQuery裏的方法 。這段代碼的作用等同於用DOM實現代碼:

       document.getElementById("id").innerHTML;

       雖然jQuery對象是包裝DOM對象後產生的,但是jQuery無法使用DOM對象的任何方法,同理DOM對象也不能使用jQuery裏的方法。用#id作爲選擇器獲取得的是jQuery對象,document.getElementById("id")得到的DOM對象,這兩者並不等價。

JQuery對象與DOM對象之間互相轉換

JQuery對象 -> DOM對象

       兩種轉換方式將一個JQuery對象轉換成DOM對象:[index]和.get(index);

       jQuery對象是一個數據對象,可以通過[index]的方法,來得到相應的DOM對象。

var v1 = $("#test") ; //jQuery對象
var v2 = $v1[0]; //DOM對象

       通過.get(index)方法,得到相應的DOM對象。

var v1 = $("#test"); //jQuery對象
var v2 = v1.get(0); //DOM對象 

DOM對象 -> JQuery對象

       對於已經是一個DOM對象,只需要用$()把DOM對象包裝起來,就可以獲得一個jQuery對象了。如$(document.getElementById("test"))

var v1=document.getElementById("test"); //DOM對象
var v2=$(v1); //jQuery對象

       DOM對象轉換爲JQuery對象之後就可以使用JQuery的方法了。

       需要再次強調注意的是:DOM對象才能使用DOM中的方法,jQuery對象是不可以用DOM中的方法。

jQuery 語法

       jQuery 語法是通過選取 HTML 元素,並對選取的元素執行某些操作。

  •        基礎語法: $(selector).action()
  •        美元符號定義 jQuery
  •        選擇符(selector)"查詢"和"查找" HTML 元素
  •        jQuery 的 action() 執行對元素的操作

實例:

  • $(this).hide() - 隱藏當前元素
  • $("p").hide() - 隱藏所有 <p> 元素
  • $("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
  • $("#test").hide() - 隱藏所有 id="test" 的元素

JQuery中的“$”

       $其實就是jQuery的別稱。是jQuery提供的一個函數,用來將DOM元素、選擇器包裝成jQuery對象。

var v1 = $('#id');
var v2 = jQuery('#id');

       以上兩者是等同的。所以"$"其實是一個符號,$()代替了jQuery(),當然你也可以使用其他的字符來代替"$"

var jq = jQuery.noConflict();
var v1 = jq('#id'); // 等同於var v1 = $('#id');

文檔就緒事件

       在我們的實例中的所有 jQuery 函數位於一個 document ready 函數中:

$(document).ready(function(){
--- jQuery functions go here ----
});

       這是爲了防止文檔在完全加載(就緒)之前運行 jQuery 代碼。如果在文檔沒有完全加載之前就運行函數,操作可能失敗。下面是兩個具體的例子:

  • 獲得未完全加載的圖像的大小
  • 試圖隱藏一個不存在的元素

this的相關問題

       this指代的是什麼?這個應該是比較好理解的,this就是指代當前操作的DOM對象。在jQuery中,this可以用於單個對象,也可以用於多個對象。

$('btn').click(function(){
    alert(this.innerHTML);  // 單個對象,this指代當前id爲btn的DOM對象
});

$('div').each(function(index){
    alert(this.innerHTML);  // 多個對象,this指代當前循環中索引爲index的DOM對象 
});

       jQuery中的this和$(this)有什麼區別

$("div").each(function(index){
     alert($(this));  // [object Object] jQuery對象
     alert(this);    // [object HTMLDivElement] DOM對象
});

       可以觀察到,this指代的是DOM對象,$(this)指代的是包裝當前DOM對象的jQuery對象。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章