jQuery 是一個 Javascript 的函示庫，透過它可以簡單的撰寫做出各種網頁效果。
以下是 jQuery 一些常用的方法，方便查閱記錄。

元素查找

prev()

取得同層上一個元素

1	$("p").prev(".selected")

next()

取得同層下一個元素

1	$("p").next(".selected")

nextAll()

取得元素之後的所有兄弟元素

1	$("p").nextAll()

siblings()

取得所有同级元素

1	$("li").siblings().css({"color":"red"});

children()

選取元素的子元素

1	$("ul").children().css('color','red');

parent()

選取元素的父元素中符合選擇器的元素

1	$("ul").parent().css('color','red');

parents()

選取元素的祖先元素中符合選擇器的元素

1	$("ul").parents().css('color','red');

parentsUntil()

選取元素的祖先元素中直到遇到第一個符合選擇器的元素(不含此元素)

1	$("ul").parentsUntil().css('color','red');

before()

在DOM之前插入元素

1	$("p").before("<p>Hello world!</p>");

after()

在DOM後插入元素

1	$("p").after("<p>Hello world!</p>");

prepend()

將元素添加到被選元素的開頭

1	$("p").prepend("<b>prepend</b>");

append()

將元素添加到被選元素的結尾

1	$("ul").append("<li>hello</li>");

remove()

移除元素

1	$("p").remove();

closest()

尋找離當前元素最近的祖先元素

1	$("p").closest("ul").css({"color":"red"});

find()

查找元素底下的子元素
與 $('p .text') 相同

1	$("p").find(".text");

filter()

查找元素同層
與 $('p.text') 相同

1	$("p").filter(".text");

has()

選取元素中子孫元素符合選擇器的元素

1	$("p").has("span")

eq()

元素中符合索引值的元素

1	$("p").eq(1).css("background-color","red");

屬性與 CSS

attr()

設定元素的屬性和值

1	$("img").attr("width","300");

css()

設定CSS樣式

$('p').css('color', '#000');

$('p').css({
  color: '#000',
  fontSize: '16px'
});

animate()

控制CSS動畫效果

1
2
3

$('button').animate({
  opacity: 0
}, 1500)

stop()

元素動畫完成前執行停止
true 可中斷執行中動畫
false 不可中斷執行中動畫

1
2
3

$('button').stop(true).animate({
  opacity: 0
}, 1500)

addClass()

加入class

1	$('#add').addClass('text');

removeClass()

移除class

1	$('#add').removeClass('text');

toggleClass()

收合class，如果有class就移除，沒有就加入

1	$('#add').toggleClass('text');

操作

ready()

DOM都載入後執行

1
2
3

$(document).ready(function() {
    console.log( "ready!" );
});

也可為

1
2
3

$(function(){
   console.log( "ready!" );
})

clone()

生成被選元素的副本，包含子節點、文本和屬性

1	$("p").clone().appendTo("section");

each()

對每個選取元素進行處理

1
2
3

$('li').each(function(){
  // 執行動作
})

create element

使用標籤建立元素

1	let elem = <div></div>

on()

執行動作
mouseover、mouseout、mousedown、mouseup、mousemove、click、dbclick、keydown、keyup、focus、blur、change、resize、scroll

1 2	$('button').on('click', () => { })

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala Code

jQuery常用方法大全