iT邦幫忙

1

JQuery 學習紀錄(1)

各位好,小弟為前端初學者,最近剛學完JQuery的一些基礎,想要將自己所理解的知識,轉化為文章
分享出來,以日後忘記時,還能在文章中查找,釐清自己當時的想法,而有什麼錯誤,歡迎指正!希望大家多多包涵,謝謝!

JQ簡述:

JQ和JS的關係
JS是什麼? JS是一門程式語言
而JQ僅僅是基於JS的一個函式庫,JQ可理解為就是開發JS的一個工具。
為什麼要學JQuery?簡單,粗暴 沒有兼容性問題

使用JQuery的步驟:

1.下載JQuery文檔 通常會有包含兩種

一種為jquery.1.12.4.min.js(壓縮版)

一種為jquery.1.12.4.js

功能基本上一樣,都能引入用,差別在於,壓縮版將注釋、換行、空格等刪除,而未壓縮版則無,較易閱讀。
開發環境用,未壓縮版,因為易閱讀,且不受流量大影響,而生產環境(對客戶)用,壓縮版,因為越小越省流量。

2. 引入JQuery文件

3. 入口函數 功能實現

入口函數寫法:

        window.onload = function () {
            console.log('js入口函數寫法');
        }
        $(document).ready(function () {
            console.log('jq入口函數第一種寫法');
        });
        $(function () {
            console.log('jq入口函數第二種寫法');
        });

當其他文檔也有$符號的數據,且後引入的話jq的$就會被覆蓋 如果想要同時寫jq,但又想引用其他文檔$的數據,可用jq的jQuery替代$來引入jquery

jQuery(function () {
    console.log('jq入口函數第三種寫法');
 });

jQuery物件與DOM物件

區別:方法不能混用

js物件不能呼叫jq物件的方法?

不行,只有jq物件能呼叫自己的方法

jq物件能不能呼叫JS物件的方法?

不行,只有DOM物件能呼叫自己的方法,如同衣服不能自己產生洗衣機的功能。

DOM物件的缺點

1.需要一個個操作且需要遍歷較為麻煩
2.有兼容性問題
3.事件會被覆蓋等等

什麼是DOM物件(JS物件):

使用JS的方式獲取到的元素就是JS物件(DOM物件)

var cloth = document.getElementById("cloth");
cloth.style.backgroundColor = "pink";

什麼是JQ物件:

使用jq的方式獲取到的元素就是JQ物件,且JQ物件包含DOM物件

JQ物件就是,裡面放了一堆DOM(JS)物件,及一堆方法,而我們不用去遍歷那些對象,他們自己會遍歷,然後需要什麼操作,在呼叫自身的方法去處理。

   var $li = $("li"); // 設置一個名稱為$li的變數,並以JQ方式獲取所有li標籤元素,也就是將其設為JQ物件
   console.log($li); // 獲取到偽陣列
   // jQuery.fn.init(4) [li#cloth, li, li, li, prevObject: jQuery.fn.init(1), context:   
   // document, selector: "li"]
   // 0: li#cloth
   // 1: li
   // 2: li
   // 3: li
   // length: 4 
   // 以上為一個標準的偽陣列物件

DOM無法呼叫jQuery物件的方法:為什麼?

因為是兩個不同物件,方法自然也不同

DOM物件呼叫jQuery物件的方法。需要把DOM物件轉換成jQuery物件。DOM物件轉變成jQuery物件(把變數放進$()),即可呼叫JQ物件的方法

var cloth = document.getElementById("cloth"); 
$(cloth).text("我轉化成JQ物件,我呼叫JQ方法");

jQuery物件怎麼轉換成DOM物件(從JQ物件取DOM物件出來)

第一種方法 [index]

var $li = $("li");
$li[1].style.backgroundColor = "red";

第二種方法,get(index)功能同等第一種,推薦使用第一種即可

$li.get(1).style.backgroundColor = "yellow";

$的本質

$其實就是一個函數,用$時記得加小括號(),參數不同,功能不同

第一種參數為function,就為入口函數

   $(function () {
   });

第二種參數為DOM物件,可將其轉成JQ物件

$(DOMOnject)

舉入口函數為例,ready為JQ的方法,而document為JS的物件,基本上是不能引用ready方法
但由於document包在$裡面,將其轉成JQ物件,所以才可引用

  $(document).ready(function () {

  });

第三種參數為字符串,用來找元素,物件

$('div') $('#bt') $('.bt')

第一次排版這種學習分享文章,還有許多進步的空間,也謝謝各位的觀看!


尚未有邦友留言

立即登入留言