用品

JQuery，它是什麼以及我們可以用 JavaScript 庫做什麼

jQuery 是一個基於原理的快速、輕量級和功能豐富的 JavaScript 庫 “少寫，多做” . JQuery APIs簡化了HTML文檔的管理和維護、事件管理、為網頁添加動畫效果，它兼容所有主流瀏覽器，如Chrome、Firefox、Safari、Edge。

使用 jQuery 創建基於 Ajax 的應用程序變得非常簡單和快速。

jQuery 最初由 John Resig 於 2006 年初創建。jQuery 項目目前由分佈式開發人員組作為開源項目維護和維護。

使用 jQuery 可以節省大量時間和精力。所以將此站點添加到您的收藏夾並繼續閱讀

文章內容

你可以用 jQuery 做什麼

您可以使用 jQuery 做更多的事情。

您可以方便地選擇HTML頁面元素，讀取或修改屬性；
您可以輕鬆創建顯示或隱藏元素、過渡、滾動等效果；
您可以使用更少的代碼行輕鬆創建複雜的 CSS 動畫；
您可以輕鬆地操作 DOM 元素及其屬性；
您可以輕鬆實現 Ajax 以實現客戶端和服務器之間的異步數據交換；
您可以輕鬆遍歷所有 DOM 樹來定位任何元素；
您可以使用一行代碼輕鬆地對一個元素執行多個操作；
您可以輕鬆獲取或設置 HTML 元素的大小。

列表並沒有就此結束，您可以使用 jQuery 做很多其他很酷的事情。

使用 jQuery 的好處

選擇使用 jQuery 有幾個優點：

節省大量時間：通過使用 jQuery 的內置效果和選擇器，您可以節省大量時間和精力，專注於其他方面的開發；
簡化常見的 JavaScript 任務——jQuery 極大地簡化了常見的 JavaScript 任務。現在，您可以使用更少的代碼輕鬆創建功能豐富的交互式網頁。典型的例子是Ajax實現刷新頁面內容，不刷新；
簡單性：jQuery 非常易於使用。任何具有 HTML、CSS 和 JavaScript 基本工作知識的人都可以開始使用 jQuery 進行開發；
與所有瀏覽器兼容：jQuery 在創建時就考慮到了現代瀏覽器，並且與所有主要的現代瀏覽器兼容，例如 Chrome、Firefox、Safari、Edge；
完全免費 – 最棒的是它可以完全免費下載和使用。

jQuery 下載

首先，讓我們先下載一份 jQuery，然後將其包含在我們的項目中。有兩個版本的 jQuery 可供下載：匆忙 e 未壓縮 .

未壓縮的文件更適合開發或調試；同時，建議將縮小和壓縮的文件用於生產，因為它可以節省帶寬並由於文件較小而提高性能。

我們可以從這裡下載 jQuery： https://jquery.com/download/

下載 jQuery 文件後，您可以看到它有一個 js 擴展名，即它是一個 JavaScript 文件。事實上，JQuery 只不過是一個 JavaScript 庫，因此您可以在 HTML 文檔中包含 jQuery 文件和元素就像您包含常規 JavaScript 文件一樣。

<head>
    <title>Simple HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

請記住始終在自定義腳本之前包含 jQuery 文件；否則，當您的 jQuery 代碼嘗試訪問它們時，jQuery API 將不可用。

您可能已經註意到，我們在前面的示例中跳過了屬性 type="text/javascript" 標籤內. Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefi在 HTML5 和所有現代瀏覽器中完成。

來自 CDN 的 jQuery

作為替代方案，如果您不想下載文件，可以通過免費提供的 CDN（內容分發網絡）鏈接將 jQuery 嵌入到您的文檔中。

CDN 可以通過減少加載時間來提供性能優勢，因為它們在世界各地的多個服務器上託管 jQuery，並且當用戶請求文件時，它將從最近的服務器提供服務。

這還有一個好處，如果您的網頁訪問者在訪問其他站點時已經從同一 CDN 下載了 jQuery 的副本，他們將不必再次下載它，因為它已經在他們的瀏覽器緩存中。

在這種情況下，你將不得不寫：

<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>

除了 jquery 項目提供的 CDN 之外，您還可以通過以下方式包含 jQuery 谷歌 e Microsoft微軟 CDN。

第一個基於 jQuery 的網頁

了解了 jQuery 庫的目標以及如何將其包含在您的文檔中之後，現在是將 jQuery 付諸實踐的時候了。

現在讓我們做一個簡單的 jQuery 操作，將標題文本顏色從預置顏色更改為defi成品顏色為黑色至綠色。

<head>
    <title>My First jQuery Web Page</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#00ff00");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在代碼中，我們通過更改標題（即元素）的顏色來執行簡單的 jQuery 操作當文檔就緒時使用 jQuery 元素的選擇器和 css() 方法，稱為文檔就緒事件。

jQuery 語法

jQuery 語句通常以美元符號 ( $) 並以分號 ( ;).

在 jQuery 中，美元符號 ( $) 只是 jQuery 的別名。請考慮以下演示最簡單的 jQuery 語句的示例代碼。

<script>
    $(document).ready(function(){

        alert("Hello I'm a JQuery sign");
    });
</script>

該示例僅顯示一條警告消息“Hello I'm a JQuery sign”給用戶。讓我們看看一些功能：

元素 <script>: jQuery只是一個JavaScript庫，jQuery代碼可以放在元素裡面 <script>，或者你可以把它放在一個外部的 JavaScript 文件中；
線 $(document).ready(handler); 被稱為就緒事件。它在哪裡 handler 它是一個傳遞給要執行的方法的函數，一旦文檔準備就緒，即當 DOM 層次結構已完全構建時。

jQuery 方法 ready() 它通常與匿名函數一起使用。所以，上面的例子也可以簡寫成這樣：

<script>
    $(function(){
        alert("Hello I'm a JQuery sign");
    });
</script>

塞萊托里

在函數內部，您可以編寫 jQuery 語句來執行遵循基本語法的任何操作，例如：

$(selector).action();

它在哪裡， $(selector) 它基本上從 DOM 樹中選擇 HTML 元素，因此可以對其進行操作和 action() 對所選元素應用一些操作，例如更改 CSS 屬性的值，或設置元素的內容等。

現在讓我們看另一個設置段落文本的例子：

<head>
    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

jQuery 例子是指選擇器 p, 這會選擇所有段落，然後是方法 text() 設置段落的文本內容為“Hello World!“。

當文檔準備好時，上一個示例中的段落文本將被自動替換。但是讓我們看看如果您想在運行 jQuery 代碼之前執行一個操作來替換段落的文本，該怎麼做。

讓我們考慮最後一個例子：


<head>

    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

在此示例中，僅當按鈕上發生單擊事件時才替換段落文本“Replace Text“，這僅表示用戶單擊此按鈕時。

按 ID 選擇項目

您可以使用 ID 選擇器選擇頁面上具有唯一 ID 的單個項目。

例如，下面的 jQuery 代碼將選擇並突出顯示具有 ID 屬性的元素 id="markid", 當文檔準備好時。

<script>
$(document).ready(function(){
    // Highlight element with id markid
    $("#markid").css("background", "grey");
});
</script>

選擇具有類名的元素

類選擇器可用於選擇具有特定類的元素。

例如，下面的 jQuery 代碼將選擇並突出顯示具有 class 屬性的元素 class="markclass", 當文檔準備好時。

<script>
$(document).ready(function(){
    // Highlight elements with class markclass
    $(".markclass").css("background", "grey");
});
</script>

按名稱選擇項目

項目選擇器可用於按項目名稱選擇項目。

例如，下面的 jQuery 代碼將選擇並突出顯示所有段落，即元素 "<p>" 文檔準備就緒時。

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>

按屬性選擇元素

您可以使用屬性選擇器根據其 HTML 屬性之一選擇元素，例如鍊接屬性 target或輸入的屬性 type等

例如，下面的 jQuery 代碼將選擇並突出顯示所有文本輸入，例如元素 "<input>" 同 type="text", 當文檔準備好時。

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "grey");
});
</script>

通過複合 CSS 選擇器選擇元素

您還可以結合 CSS 選擇器使您的選擇更加精確。

例如，您可以將類選擇器與元素選擇器結合使用，以在文檔中查找具有特定類型和類的元素。

<script>
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");
  
    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");
  
    // Highlight li elements inside the ul elements
    $("ul li").css("background", "red");
  
    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "yellow");
  
    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");
  
    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script>

jQuery 自定義選擇器

除了選擇器之外 definiti，jQuery提供了自己的自定義選擇器來進一步增強選擇頁面上元素的能力。

<script>
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");
  
    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");
  
    // Highlight first paragraph element
    $("p:first").css("background", "red");
  
    // Highlight last paragraph element
    $("p:last").css("background", "green");
  
    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");
  
    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");
  
    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>

活動

事件通常由用戶與網頁的交互觸發，例如單擊鏈接或按鈕、在輸入框或文本區域中輸入文本、在選擇框中進行選擇、按下鍵盤上的某個鍵、移動鼠標指針時， ETC。在某些情況下，瀏覽器本身可以觸發事件，例如頁面加載和下載事件。

jQuery 通過為大多數本機瀏覽器事件提供事件方法改進了基本事件處理機制，其中一些方法是 ready(), click(), keypress(), focus(), blur(), change()等

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

一般來說，事件可以分為四大類：

鼠標事件，
鍵盤事件，
事件模塊編輯
文檔/窗口事件。

鼠標事件

當用戶點擊某個項目、移動鼠標指針等時會觸發鼠標事件。

下面是一些常用的 jQuery 方法來處理鼠標事件。

方法 `click(`)

方法 click() 將事件處理函數附加到事件的選定元素“click“。鏈接函數在用戶單擊該項目時執行。以下示例將隱藏元素 <p> 單擊時在頁面上。

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>

方法 `dblclick()`

方法 dblclick() 將事件處理函數附加到事件的選定元素“dblclick“。鏈接函數在用戶雙擊該項目時執行。以下示例將隱藏元素 <p> 當您雙擊它們時。

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>

方法 `hover()`

方法 hover() 將一個或兩個事件處理函數附加到選定元素，當鼠標指針移入和移出元素時執行。第一個函數在用戶將鼠標指針放在某個項目上時運行，而第二個函數在用戶將鼠標指針從該項目上移開時運行。

以下示例將突出顯示項目 <p> 當您將光標放在其上時，當您移除光標時，突出顯示將被移除。

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>

方法 `mouseenter()`

方法 mouseenter() 將事件處理函數附加到選定元素，當鼠標進入元素時執行。下面的例子會給元素添加class高亮 <p> 當您將光標放在它上面時。

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>

方法 `mouseleave()`

方法 mouseleave() 將事件處理函數附加到鼠標離開項目時運行的選定項目。以下示例將從元素中刪除類突出顯示 <p> 當您從中刪除光標時。

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

鍵盤事件

當用戶按下或釋放鍵盤上的鍵時，將引發鍵盤事件。讓我們看看一些常用的 jQuery 方法來處理鍵盤事件。

方法 `keypress()`

方法 keypress() 將事件處理函數附加到選定元素（通常是表單控件），該函數在瀏覽器接收到用戶的鍵盤輸入時運行。以下示例將在觸發事件時顯示一條消息 keypress 以及當您按下鍵盤上的鍵時它被觸發了多少次。

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

keypress 事件與 keydown 事件類似，除了修改鍵和非打印鍵（例如 Shift、Esc、Backspace 或 Delete、箭頭鍵等）。他們觸發按鍵事件但不觸發按鍵事件。

方法 `keydown()`

方法 keydown() 將事件處理函數附加到選定項（通常是表單控件），該函數在用戶首次按下鍵盤上的鍵時執行。以下示例將在觸發事件時顯示一條消息 keydown 以及當您按下鍵盤上的鍵時它被觸發了多少次。

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

方法 `keyup()`

方法 keyup() 將事件處理函數附加到選定元素（通常是表單控件），該函數在用戶釋放鍵盤上的鍵時執行。以下示例將在觸發事件時顯示一條消息 keyup 以及當您按下並釋放鍵盤上的某個鍵時它會被觸發多少次。

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

表單事件

當表單控件獲得焦點或失去焦點時，或者當用戶更改表單控件的值時，例如在文本輸入中鍵入文本、在選擇框中選擇選項等，都會觸發表單事件。下面是一些常用的 jQuery 方法來處理表單事件。

方法 `change()`

方法 change() 將事件處理函數附加到元素 <input> 並在其值更改時執行。下面的示例在下拉選擇框中選擇一個選項時將顯示一條警告消息。

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

對於單擊框、複選框和單選按鈕，當用戶進行鼠標選擇時事件立即觸發，但對於文本輸入和文本區域，事件在元素失去焦點後觸發。

方法 `focus()`

方法 focus() 將事件處理函數附加到選定元素（通常是控件和表單綁定），該函數在獲得焦點時執行。以下示例將在文本輸入獲得焦點時顯示一條消息。

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

方法 `blur()`

方法 blur() 附加一個事件處理函數來形成元素，例如 <input>, <textarea>, <select> 當它失去焦點時執行。以下示例將在文本輸入失去焦點時顯示一條消息。

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

方法 `submit()`

方法 submit() 將事件處理函數附加到元素 <form> 當用戶嘗試提交表單時運行。以下示例將根據嘗試提交表單時輸入的值顯示一條消息。

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>

文檔/窗口事件

這些事件也會在 DOM（文檔對像模型）頁面準備就緒或用戶調整大小或滾動瀏覽器窗口等情況下觸發。下面是一些常用的 jQuery 方法來處理此類事件。

方法 `ready()`

方法 ready() 指定在 DOM 完全加載時執行的函數。

一旦 DOM 層次結構完全構建並準備好進行操作，以下示例將替換段落文本。

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>

方法 `resize()`

方法 resize() 將事件處理函數附加到 window 元素，該函數在瀏覽器窗口的大小發生變化時運行。

當您嘗試通過拖動窗口的角來調整瀏覽器窗口大小時，以下示例將顯示瀏覽器窗口的當前寬度和高度。

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>

方法 `scroll()`

方法 scroll() 將事件處理函數附加到窗口或 iframe 以及每當項目的滾動位置發生變化時運行的可滾動項目。

以下示例將在滾動瀏覽器窗口時顯示一條消息。

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

Ercole Palmeri

標籤： jQuery的軟件開發軟件開發軟件工程軟件測試

22 年 2023 月 10 日上午 42:XNUMX

後啟示錄的算法配方 »

Precedente « 人工智能如何影響音樂世界

Veeam 為勒索軟體提供最全面的支持，從保護到回應和恢復

Veeam 的 Coveware 將繼續提供網路勒索事件回應服務。 Coveware 將提供取證和修復功能…

23月2024

用品

綠色與數位革命：預測性維護如何改變石油和天然氣產業

預測性維護正在透過創新和主動的工廠管理方法徹底改變石油和天然氣行業。

22月2024

用品

英國反壟斷監管機構對 GenAI 向 BigTech 發出警報

英國 CMA 對大型科技公司在人工智慧市場的行為發出了警告。那裡…

18月2024

新聞發布

Casa Green：義大利永續未來的能源革命

歐盟為提高建築物能源效率而製定的「綠色案例」法令已結束立法程序…