Web - jQuery - INCLAVIC

jQuery

以網頁物件 DOM 為核心，應用 JavaScript Framework
寫出來的程式可以比 JavaScript 大量減少許多
方便抓取 DOM 的 Selector 可以用，操作方式與 CSS 類似

Selector

在 <head> 中加入 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 便可使用

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <p id="intro" class="intro" name="intro">Introduction jQuery</p>
    <script>
        <!-- 抓 id = intro -->
        console.log($("#intro"))
        <!-- 抓 class = intro -->
        console.log($(".intro"))
        <!-- 抓 p name = intro -->
        console.log($("p[name='intro']"))
    </script>
</body>
</html>

DOM Ready

相比 JavaScript 是在 <body> 裡寫 onload

jQuery 是用 $(document).ready()

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function () {
            console.log($("#intro"))
            console.log($(".intro"))
            console.log($("p[name='intro']"))
        });
    </script>
    <p id="intro" class="intro" name="intro">Introduction jQuery</p>
</body>
</html>

Show & Hide

透過 .show() 顯示指定物件

透過 .hide() 隱藏指定物件

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function () {
            $("#intro1").show();
            $("#intro2").hide();
        });
    </script>
    <p id="intro1" style="display: none;">Introduction jQuery Show</p>
    <p id="intro2">Introduction jQuery Hide</p>
</body>
</html>

Event & Call Back Function

透過 jQuery 事件將其擺至 HTML

例如想於 input 標籤中加上敲文字的事件，在取得標籤 input 的 ID 後新增一個事件 (on 後面接) "input"，當使用者在輸入框輸入文字時就會觸發
- $("#myInput").on("input", function () { console.log($("#myInput").val()); });

按鈕的事件為 “click”，在取得標籤 button 的 ID 後新增一個事件 "click"，當使用者按下按鈕時就會觸發

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="myInput"><br><br>
    <button id="btn">Hello I'm Button</button>
    <script>
        $(document).ready(function () {
            $("#myInput").on("input", function () {
                console.log($("#myInput").val());
            });
            $("#btn").on("click", function () {
                console.log($("Button Click"));
            });
        });
    </script>
</body>
</html>

Attribute

用 jQuery 控制 Attribute 屬性

利用 $("#id").attr 後接欲選擇的屬性（例如："placeholder"），然後把值寫於其後

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="myInput"><br><br>
    <img id="myImg">
    <script>
        $(document).ready(function () {
            <!--  -->
            $("#myInput").attr("placeholder", "請輸入任何字元");
            $("#myImg").attr("src", "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
        });
    </script>
</body>
</html>

HTML & Text

若 $("#id").html() 放入的文字是可以讀取的 HTML 語法的話，就可以觸發
- 此方法較危險，若使用者在此輸入可被觸發的惡意語句，即會造成攻擊

而 $("#myDiv2").text() 中無論放入和，都純以文字顯示

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="myDiv1"></div>
    <div id="myDiv2"></div>
    <script>
        $("#myDiv1").html('<h1> Hello HTML </h1>');
        $("#myDiv2").text('<h1> Hello text </h1>');

        console.log($("#myDiv1").html());
        console.log($("#myDiv2").text());
    </script>
</body>
</html>

Reference

jQuery Intro