jQuery - Introduction

jQuery is a Javascript library (or framework) that simplifies the language. With jQuery we need less lines of code than if we were using pure Javascript.

Let's see a basic example of changing the background of all elements that have a given class:

Vanilla Javascript*:  

    var elements = document.getElementsByClassName("example");

    for (var a = 0; a < elements.length; a++) {
        
        elements[a].style['background-color'] = "black";
            
    }

    * Vanilla Javascript is the name used for pure javascript, with no libraries.
Vanilla JS 我們可以用它構建強大的JavaScript應用程序。

    jQuery:
    
    $(".example").css("background-color", "black");

使用 jQuery，我們可以操作 DOM 和元素的 CSS、跟踪事件、創建效果和動畫等。 jQuery 可以在所有瀏覽器上運行，您可以在網上找到數以千計的基於 jQuery 的插件。使用這些插件，您可以輕鬆創建照片庫、網格、滑塊、彈出窗口、表單驗證等等。

Installing jQuery()

<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>"></script>

加入連結

jQuery - Syntax(句法)

$("selector").action();

Selecting elements

$(".example") // select all elements with the class of "example"
    $("p") // select all p elements
    $("#hamburger-icon") // select the element with the id of "hamburger-icon"

上面提到的動作是 jQuery 方法。讓我們通過一個簡單的例子開始使用這些方法。當點擊id為“hide”的元素時，讓我們隱藏所有類為“example”的元素。

$( "#hide" ).click(function() {
        $(".example").css("display", "none");
    });

$( "#hide" ).click(function() {
        $(".example").hide();
    });

Other selectors for elements

Untitled Database