JQuery學習—封裝，讓這個世界變得更簡單
阿新 • • 發佈：2019-02-17
1、編者寄語
小編認為，JQuery就是用JavaScript封裝成的一些js方法，又將這些方法封裝在一起，稱為JQuery。除此之外，js還有兩個庫就是Prototype、MooTools，這裡不再多做介紹。
在之前學過的js中知道，js中的函式和方法都是需要我們自己親自編寫的，但是有些方法是我們經常要用到的，由此就產生了JQuery庫，就好比生產汽車，飛機，大炮等，之前我們得先用鋼材造螺絲，鐵板等，然後再去造我們需要的汽車，飛機等，而現在是直接用造好的螺絲，鐵板等做我們想做的東西。
這種思想就是封裝，說白了就是寫的更少，做的更多（例子中理解為，花的時間更少，造出的質量更高）。正是有了這種思想，才讓這個世界變得如此簡單。
2、JQuery與JavaScript比較
主要的 jQuery 函式是 $() 函式（jQuery 函式）。如果您向該函式傳遞 DOM 物件，它會返回 jQuery 物件，帶有向其新增的 jQuery 功能。
jQuery 允許您通過 CSS 選擇器來選取元素。
在 JavaScript 中，您可以分配一個函式以處理視窗載入事件：
JavaScript 方式：
<span style="font-size:18px;">function myFunction() { var obj=document.getElementById("h01"); obj.innerHTML="Hello jQuery"; } onload=myFunction;</span>
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)具體例子
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>這是標題</h2>
<p style="background-color:#ff0000">這是一個段落。</p>
<p style="background-color:#00ff00">這是一個段落。</p>
<p style="background-color:#0000ff">這是一個段落。</p>
<button>返回 p 元素的背景色</button>
</body>
</html>ps:要想學好JQuery還需要我們去做更多的例子，只有在實戰中不斷的應用，我們才能將JQuery理解的更深入，應用的更靈活