jQuery學習筆記（一）：入門

時間 2019-11-07

原文原文鏈接

因爲工做的須要，發現JQuery是一個繞不開的東西，如今開始學習。javascript

1、JQuery是什麼

JQuery是什麼？始終是縈繞在我心中的一個問題：html

借鑑網上同窗們的總結，能夠從如下幾個方面觀察。java

不使用JQuery時獲取DOM文本的操做以下：函數

document.getElementById('info').value = 'Hello World!';

使用JQuery時獲取DOM文本操做以下：學習

$('#info').val('Hello World!');

嗯，能夠看出，使用JQuery的優點之一是可使代碼更加簡練，使開發人員更加專一於邏輯自己。動畫

2、JQuery能作什麼

jQuery使用戶能更方便地處理HTML、events、實現動畫效果，而且方便地爲網站提供AJAX交互。網站

jQuery庫包含如下功能：HTML元素選取、HTML元素操做、CSS操做、HTML事件函數、JavaScript特效和動畫、HTML|DOM遍歷和修改、AJAX、Utilities。code

jQuery使用戶方便快捷獲取DOM元素、動態修改頁面樣式、動態改變DOM內容、響應用戶的交互操做、爲頁面添加動態效果、統一Ajax操做、簡化常見的JavaScript任務。htm

上述是對JQuery比較中肯的評價，節選其中的關鍵字能夠粗略的觀察到：對象

方便的選取DOM元素，操做DOM元素。（HTML元素選取、HTML元素操做、獲取DOM元素、動態修改頁面樣式、動態改變DOM內容）
響應用戶操做。（HTML事件函數、JavaScript特效和動畫、響應用戶的交互操做、爲頁面添加動態效果）
簡化AJAX操做。（方便地爲網站提供AJAX交互、統一Ajax操做）

即：方便DOM的選取和操做、響應用戶操做、簡化AJax操做。

3、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對象，例如修改它的文本內容等等。

4、JQuery與DOM之間的關係

JQuery對象與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中的方法。

5、JQuery中的「$」有什麼做用

這個問題解決以後，還有一個疑問：咱們常常在JQuery看見$('div')、$('#id')、$('.class')等相似的代碼。那麼其中的"$"究竟有什麼做用呢？

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

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

以上二者是等同的。

因此"$"實際上是一個符號，$()代替了jQuery(),固然你也可使用其餘的字符來代替"$"

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。