JQuery字典 | Notion

jQuery

符號	描述	範例程式碼	說明
`$(selector)`	選擇器選取元素	`$("#myElement").hide();`	使用 jQuery 選擇器選取 HTML 元素，選取 ID 為 `myElement` 的元素並隱藏。
`.hide()`	隱藏元素	`$(".myClass").hide();`	隱藏所有符合 `myClass` 的元素。
`.show()`	顯示元素	`$(".myClass").show();`	顯示所有符合 `myClass` 的元素。
`.click()`	綁定點擊事件	`$("#myButton").click(function() { alert("Button clicked!"); });`	當 ID 為 `myButton` 的按鈕被點擊時，顯示警告。
`.css(property, value)`	設定 CSS 樣式	`$("#myElement").css("color", "red");`	設定 ID 為 `myElement` 的元素的文字顏色為紅色。
`.addClass(className)`	添加 CSS 類別	`$(".myClass").addClass("active");`	為所有符合 `myClass` 的元素添加 `active` 類別。
`.removeClass(className)`	移除 CSS 類別	`$(".myClass").removeClass("active");`	移除所有符合 `myClass` 的元素的 `active` 類別。
`.val()`	獲取或設置表單值	`var inputValue = $("#myInput").val(); $("#myInput").val("New Value");`	獲取 ID 為 `myInput` 的輸入框的值，或設置其值為 "New Value"。
`.ajax()`	執行 AJAX 請求	`$.ajax({ url: "data.json", method: "GET", success: function(data) { console.log(data); } });`	執行一個 AJAX 請求來獲取 `data.json` 的內容。
`.each(function())`	遍歷集合	`$(".myClass").each(function(index) { console.log(index, $(this).text()); });`	遍歷所有符合 `myClass` 的元素，並顯示其索引和文字內容。

jQuery 常用的九種使用方法

符號	描述	範例程式碼	說明
`$()`	選擇元素	`$("#id")`	使用 CSS 選擇器來選擇 DOM 元素，如 id 或 class。
`.click()`	綁定點擊事件	`$("#button").click(function(){ alert("Clicked!"); });`	綁定一個點擊事件到指定元素，當點擊時執行回呼函數。
`.hide()`	隱藏元素	`$(".class").hide();`	隱藏選擇的元素。
`.show()`	顯示元素	`$(".class").show();`	顯示選擇的元素。
`.toggle()`	切換顯示/隱藏狀態	`$("#button").click(function(){ $(".content").toggle(); });`	點擊按鈕時切換指定元素的顯示或隱藏狀態。
`.html()`	獲取或設置 HTML 內容	`$("#content").html("<p>New HTML</p>");`	取得或更改元素的 HTML 內容。
`.val()`	獲取或設置表單元素的值	`var val = $("#input").val();`	取得或設置表單輸入元素的值。
`.attr()`	獲取或設置屬性	`var href = $("#link").attr("href");`	取得或更改元素屬性值，如 `href` 或 `src`。
`.css()`	獲取或設置 CSS 樣式	`$(".element").css("color", "red");`	獲取或設置元素的 CSS 樣式，如文字顏色。

符號	描述	範例程式碼	說明
`.ready()`	當 DOM 完全加載後觸發	`$(document).ready(function() { alert("DOM 完成加載"); });`	在 DOM 完全加載後觸發函式。
`.text()`	獲取或設置元素的文字內容	`$("#myDiv").text("新內容");`	取得或改變選中元素的純文字內容。
`.html()`	獲取或設置元素的 HTML 內容	`$("#myDiv").html("<b>新 HTML</b>");`	取得或改變選中元素的 HTML 內容。
`.prop()`	獲取或設置 DOM 屬性	`$("#myCheckbox").prop("checked", true);`	取得或設定 DOM 元素的屬性（用於 boolean 值）。
`.attr()`	獲取或設置屬性值	`$("#myLink").attr("href", "<https://example.com>");`	取得或設定元素屬性，如 `href`。
`.val()`	獲取或設置表單元素的值	`$("#myInput").val("新值");`	取得或改變表單元素的值。
`.prepend()`	在選擇的元素內的開頭插入內容	`$("#myDiv").prepend("<p>開頭的內容</p>");`	在元素內的開頭插入新的內容。
`.append()`	在選擇的元素內的結尾插入內容	`$("#myDiv").append("<p>結尾的內容</p>");`	在元素內的結尾插入新的內容。
`.before()`	在選擇的元素之前插入內容	`$("#myDiv").before("<p>在這之前</p>");`	在選擇的元素前插入內容。
`.after()`	在選擇的元素之後插入內容	`$("#myDiv").after("<p>在這之後</p>");`	在選擇的元素後插入內容。
`.appendTo()`	把選中的元素插入到指定元素的末尾	`$("<p>新內容</p>").appendTo("#myDiv");`	將新內容插入到指定的元素末尾。
`.empty()`	清空選中的元素的內容	`$("#myDiv").empty();`	清空選中的元素內所有子元素和內容。
`.remove()`	移除選中的元素以及其所有子元素	`$("#myDiv").remove();`	完全移除選中的元素和其內容。
`.detach()`	移除選中的元素，保留其資料和事件處理器	`var element = $("#myDiv").detach();`	移除元素但保留數據、事件處理器，稍後可以再次插入。
`$().filter()`	過濾符合條件的選擇元素	`$("p").filter(".highlight");`	選取符合條件的元素，過濾掉不符合的。
`$().find()`	在選擇元素內找到符合條件的後代元素	`$("#myDiv").find("p");`	在所選元素的後代中找出所有匹配的元素。
`$().children()`	獲取選擇元素的直接子元素	`$("#parent").children(".child");`	返回所選元素的所有直接子元素，符合指定選擇器的。

符號	描述	範例程式碼	說明
`tr:odd`	選擇所有表格中的奇數行（從 0 開始）	`$("tr:odd").css("background-color", "#f2f2f2");`	選中所有表格中的奇數行（索引從 0 開始）。
`.dblclick`	綁定雙擊事件	`$("#myElement").dblclick(function() { alert("元素被雙擊！"); });`	當元素被雙擊時執行回呼函式。