一月 19, 2019 | 前端與Vue

從零開始的jQuery介紹《1》

什麼是jQuery?就讓我們來一探究竟吧!

什麼是jQuery

jQuery是一套跨瀏覽器的JavaScript函式庫(library)。 他能簡化HTML與JavaScript之間的操作,讓使用者能快速地達成想要的網頁的動態效果。

jQuery的主要強項之一就是能夠操控DOM,而你不需要知道他的每一個細節。

jQuery長什麼樣子呢?

$(document).ready(function(){
    $("button").click(function(){
        $("h1").hide("slow");
        $("h2").show("fast");
        $("img").slideUp();
    });
});

執行順序

  1. 等DOM(document)準備好並且載入完成
  2. 點擊button
  3. JavaScript直譯器「聽到」該點擊事件(click)並且執行附加於其上的函式(function)
  4. JavaScript直譯器改變該頁面的DOM表示
  5. 使用者看到頁面上的變化

JavaScript直譯器不改變原始的HTML和CSS檔案,而是在瀏覽器的記憶體裡面改變頁面的DOM表示

jQuery( )是jQuery的函式,可以用錢字號替代jQuery$()他的工作就是選取放進圓括號裡的東西,CSS的選擇器、HTML的標籤也都可以丟進圓括號裡面。

jQuery選取元素的方式其實跟CSS很像,jQ在選擇的時候使用的是與CSS相同的選擇器。

CSS選擇器選擇元素以便將樣式(style)增加到那些元素 jQuery選擇器選擇元素以便將行為(behavior)增加到那些元素,然而jQuery也可以透過這點來修改CSS的內容


將使用這的要求轉化成實際的專案需求是實作專案以及節省時間的重要技巧。

var pts = 250;

var => 宣告變數 pts => 變數名稱 250 => 變數的值

串接

var msg ="High score: <strong>"+pts+"</strong>";

設定文字跟HTML的值要用雙引號""包起來 串接or結合數字、文字、變數要用+串起來 參照變數(pts)時,直接使用變數名稱,不用加雙引號

顯示文字

var disconut_msg ="<p> Your Discount is" + discount + "%</P>";

使用<p>來顯示訊息

插入內容

.append

$("guess_box").append(discount_msg);
//在guess_box之後插入discount_msg內的文字

.prepend

$("guess_box").prepend(discount_msg);
//在guess_box之前插入discount_msg內的文字

以上對於jQuery的介紹就到這邊,接下來還會有一連串關於jQuery的基礎運用!還請拭目以待