jQuery常用方法大全

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

元素查找

prev()

取得同層上一個元素

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

next()

取得同層下一個元素

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

nextAll()

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

$("p").nextAll()

siblings()

取得所有同级元素

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

children()

選取元素的子元素

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

parent()

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

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

parents()

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

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

parentsUntil()

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

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

before()

在DOM之前插入元素

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

after()

在DOM後插入元素

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

prepend()

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

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

append()

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

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

remove()

移除元素

$("p").remove();

closest()

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

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

find()

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

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

filter()

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

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

has()

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

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

eq()

元素中符合索引值的元素

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

屬性與 CSS

attr()

設定元素的屬性和值

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

css()

設定CSS樣式

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

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

animate()

控制CSS動畫效果

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

stop()

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

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

addClass()

加入class

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

removeClass()

移除class

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

toggleClass()

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

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

操作

ready()

DOM都載入後執行

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

也可為

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

clone()

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

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

each()

對每個選取元素進行處理

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

create element

使用標籤建立元素

let elem = <div></div>

on()

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

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

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

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

Hahow

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

六角學院

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

Udemy

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