# 常用的JQ 與 JS 的寫法整理

| 方法 | ＪＱ寫法 | ＪＳ寫法 |
| ------------ | -------------------------------------- | -------- |
| 獲取HTML | $("XXX").html(); | dom.innerHTML|
| 獲取文字內容 | $("XXX").text(); | dom.innerText<br>dom.textContent|
| 獲取value | $("XXX").val(); | dom.value|
| 監聽事件 | $("XXX").on("XX", function(){......});| dom.addEventListener("XX", function(){......}); <br>dom.onclick = function(){......} |
| css樣式狀態| $("XXX").hide(); <br> $("XXX").show();<br> $("XXX").css('color','red')| dom.style.display = "none/block"; |
|獲取dom元素 | $("XXX")| document.getElementById("XX"); <br> document.getElementsByClassName("XX") <br>document.querySelector('selectors');<br>document.querySelectorAll('selectors');|
|全部父節點 |$("XX").parents(expr) | dom.parentNode;|
|全部子節點 | $("XX").children(expr); | dom.childNode; |
|下一個兄弟節點 |$("XX").next(expr); | dom.nextSilbing; |
|前一個兄弟節點 | $("XX").prev(expr);| dom.parentSilbing; |
|第一個子節點 | $(":first-child") | dom.firstChild;|
|最後一個子節點 | $(":last-child") | dom.lastChild; |
|獲得下面所有兄弟節點 | $("XX").nextAll(expr); |-------------------------------------- |
|獲得所有兄弟姐妹節點 | $("XX").siblings(expr);|-------------------------------------- |
|查找所有祖先元素 直到出現匹配的元素為止 | $("XX").parentsUntil(expr);|-------------------------------------- |
|增加classname | $("XX").addClass();| dom.classList.add()|
|移除classname | $("XX").removeClass();| dom.classList.remove()|
|判斷classname有沒有存在 | $("XX").hasClass();| dom.classList.contains()|
|切換classname添加與移除 | $("XX").toggleClass();| dom.classList.toggle()|

相關網站參考 [youmightnotneedjquery](https://youmightnotneedjquery.com/#fade_out)