jQuery是一款廣受歡迎的JavaScript庫，為Web開發者提供了強大而方便的開發工具。在這篇文章中，我們將探索100個有用的jQuery代碼片段，幫助您更好地理解和使用它。

// 1. 顯示和隱藏HTML元素
$("button").click(function(){
$("p").toggle();
});
// 2. 向HTML元素添加/刪除CSS類
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
// 3. 在HTML元素內插入HTML內容
$("p").html("Hello world!");
// 4. 獲取和設置HTML元素的屬性
$("img").attr("src");
$("img").attr("src", "newimage.jpg");
// 5. 獲取和設置HTML元素的文本內容
$("p").text();
$("p").text("Hello world!");
// 6. 在HTML元素前面/后面插入新HTML內容
$("p").before("Before");
$("p").after("After");
// 7. 為HTML元素添加事件處理程序
$("button").click(function(){
$("p").slideToggle();
});
// 8. 在HTML元素之后移動元素
$("p.first").after($("p.second"));
// 9. 在HTML表單中選中/取消選中一個復選框
$("input[type='checkbox']").prop("checked", true);
$("input[type='checkbox']").prop("checked", false);
// 10. 向HTML表單中添加或獲取表單值
$("form input[name='username']").val();
$("form input[name='username']").val("newvalue");
// 11. 頁面滾動到指定的HTML元素位置
$(document).scrollTop($("p").offset().top);
// 12. 獲取鼠標在HTML元素上的位置
$("p").mousemove(function(event){
var x = event.pageX;
var y = event.pageY;
});
// 13. 在HTML select元素中添加和刪除選項
$("select").append("Option 1");
$("select option[value='value1']").remove();
// 14. 使用AJAX從服務器獲取數據
$.ajax({
url: "data.php",
success: function(result){
$("div").html(result);
}
});
// 15. 使用jQuery UI創建拖放元素
$("#mydiv").draggable();
// 16. 使用jQuery UI創建可調整元素大小
$("#mydiv").resizable();
// 17. 使用jQuery UI創建對話框
$("#mydiv").dialog();
// 18. 使用jQuery UI創建日期選擇器
$("#datepicker").datepicker();
// 19. 使用jQuery插件增強網站功能
$("div").myPlugin();
// 20. 使用jQuery UI創建菜單
$("#menu").menu();