PersonalJQueryPratice

20241007

方法名稱	JQuery語法	功能說明
隱藏元素 `.hide()`	`$('a').hide()`	隱藏所有`<a>`連結元素。
顯示元素 `.show()`	`$('a').show()`	顯示所有`<a>`連結元素。
修改屬性 `.attr()`	`$('a').attr('href', '<http://www.yahoo.com.tw>')`	更改`<a>`連結的`href`屬性為新的網址。
滑動隱藏 `.slideUp()`	`$('a').slideUp()`	以滑動的方式隱藏`<a>`連結，動畫完成後元素被隱藏。
延遲滑動隱藏 `.slideUp()`	`$('a').slideUp(5500)`	以滑動的方式隱藏`<a>`連結，過程持續5.5秒（5500毫秒）。
滑動顯示 `.slideDown()`	`$('a').slideDown()`	以滑動的方式顯示隱藏的`<a>`連結。
淡出效果 `.fadeOut()`	`$('a').fadeOut(8000)`	讓`<a>`連結經過8秒淡出。
點擊事件 `.click()`	`$('button').click(function (e) { $('a').hide(); });`	當按下`<button>`按鈕時，隱藏所有`<a>`連結。
切換顯示 `.toggle()`	`$('button').click(function (e) { $('a').toggle(); });`	當按下`<button>`按鈕時，切換`<a>`連結的顯示與隱藏狀態（開關效果）。
滑動切換 `.slideToggle()`	`$('a').slideToggle()`	切換`<a>`連結的顯示狀態，使用滑動效果進行切換。
淡入淡出切換 `.fadeToggle()`	`$('a').fadeToggle()`	切換`<a>`連結的顯示狀態，使用淡入淡出的效果進行切換。
新增Class `.addClass()`	`$('h1').click(function (e) { $('p').addClass('red'); });`	當點擊`<h1>`元素時，給`<p>`元素動態增加`red`這個CSS class。
切換Class `.toggleClass()`	`$('h1').click(function (e) { $('p').toggleClass('red'); });`	當點擊`<h1>`元素時，切換`<p>`元素上的`red`這個CSS class（若存在則移除，若不存在則新增）。
修改屬性 `.attr()`	`$('a').attr('href', '<http://www.yahoo.com.tw>')`	更改`<a>`連結的`href`屬性內容為`http://www.yahoo.com.tw`。
修改CSS `.css()`	`$('a').css('color', 'blue')`	動態修改`<a>`連結的CSS樣式，例如更改文字顏色為藍色。
修改文字 `.text()`	`$('a').text('新連結文字')`	修改`<a>`連結的顯示文字內容。
修改HTML `.html()`	`$('p').html('<b>粗體字內容</b>')`	動態修改`<p>`元素的HTML內容，替換為新內容（包含HTML標籤）。
尾部追加 `.append()`	`$('div').append('<p>新段落</p>')`	在`<div>`內的最後插入新段落元素。
首部追加 `.prepend()`	`$('ul').prepend('<li>新項目</li>')`	在`<ul>`內的最前面插入新項目元素。
移除元素 `.remove()`	`$('li').remove()`	刪除所有`<li>`元素。
清空內容 `.empty()`	`$('li').empty()`	清空所有`<li>`元素的內容，但保留其本身標籤。