JQuery學習—封裝，讓這個世界變得更簡單

JQuery學習—封裝，讓這個世界變得更簡單
1、編者寄語

小編認為，JQuery就是用JavaScript封裝成的一些js方法，又將這些方法封裝在一起，稱為JQuery。除此之外，js還有兩個庫就是Prototype、MooTools，這裡不再多做介紹。

在之前學過的js中知道，js中的函數和方法都是需要我們自己親自編寫的，但是有些方法是我們經常要用到的，由此就產生了JQuery庫，就好比生產汽車，飛機，大炮等，之前我們得先用鋼材造螺絲，鐵板等，然後再去造我們需要的汽車，飛機等，而現在是直接用造好的螺絲，鐵板等做我們想做的東西。

這種思想就是封裝，說白了就是寫的更少，做的更多（例子中理解為，花的時間更少，造出的品質更高）。正是有了這種思想，才讓這個世界變得如此簡單。

2、JQuery與JavaScript比較

主要的 jQuery 函數是 $() 函數（jQuery 函數）。如果您向該函數傳遞 DOM 對象，它會返回 jQuery 對象，帶有向其添加的 jQuery 功能。
jQuery 允許您通過 CSS 選取器來選取元素。
在 JavaScript 中，您可以分配一個函數以處理視窗載入事件：

JavaScript 方式：

function myFunction(){var obj=document.getElementById("h01");obj.innerHTML="Hello jQuery";}onload=myFunction;

jQuery 方式：

function myFunction(){$("#h01").html("Hello jQuery");}$(document).ready(myFunction);

上面代碼的最後一行，HTML DOM 文檔對象被傳遞到 jQuery ：$(document)。
當您向 jQuery 傳遞 DOM 對象時，jQuery 會返回以 HTML DOM 對象封裝的 jQuery 對象。
jQuery 函數會返回新的 jQuery 對象，其中的 ready() 是一個方法。
由於在 JavaScript 中函數就是變數，因此可以把 myFunction 作為變數傳遞給 jQuery 的 ready 方法。
提示：jQuery 返回 jQuery 對象，與已傳遞的 DOM 對象不同。jQuery 對象擁有的屬性和方法，與 DOM 對象的不同。您不能在 jQuery 對象上使用 HTML DOM 的屬性和方法。

3、JQuery應用

(1)jQuery編程的基本步驟 step1,引入jQuery.js檔案
step2, 使用選取器尋找要操作的節點
step3,調用jQuery對象的屬性或者方法來操作相應的節點。
(2)jQuery對象與dom對象之間的轉換 1)dom對象 --- > jQuery對象
var $obj = $(dom對象);
eg:var $d = $(div);
2)jQuery對象 ---- > dom對象
第一種方式: var obj = $obj.get(0);
第二種方式: var obj = $obj.get()[0];

(3)具體例子

<script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    alert("Background color = " + $("p").css("background-color"));  });});</script>這是標題
這是一個段落。
這是一個段落。
這是一個段落。
返回 p 元素的背景色

該例子將JQuery與HTML和css結合起來，利用單擊事件，訪問HTML中的p標籤並返回其背景顏色。

ps:要想學好JQuery還需要我們去做更多的例子，只有在實戰中不斷的應用，我們才能將JQuery理解的更深入，應用的更靈活