一、JavaScript選取方法：

• getElementsByTagName()
• getElementsByClassName()
• getElementById()
• querySelector()
• querySelectorAll()
• getElementsByName()

二、jQuery選取器：
jQuery 選取器的寫法與 CSS 選取器類似，但是功能不同。CSS 找到元素後添加的是＂單一的樣式＂，但 jQuery添加的是＂動作行為＂。另外，實作時經常使用.length 或 size()方法查看返回的元素個數
1基本選取器

• 標籤選取器：$(“TagName”)
• Id選取器：$(“#ID”)
  註:原則上ID 在同一個頁面中只允許出現一次，但同一頁面如果中出現多個，且在CSS中設置樣示，那麼些多個元素還會執行效果；但用jQuery方法修改樣是，只會對第一個ID的元素作用。
• class選取器：$(“.class”)
• 通用選取器：$(“*”)
  註:不建議在全域中使用，效率很低影響性能。一般在局部中使用，可搭配size()查看選取的節點使用
• 複合選取器：$(“selector1，selector2，selector3”)

2層級選取器

• 後代選取器：$(“元素A 元素B”) ，也可用find()方法替代
  註：$('元素A ', '元素B ');等於成$('元素B ').find('元素A ');
• 直屬選取器：$(“元素A>元素B”) ，也可用children()方法替代
• 鄰接同層選取器：$(“元素A +元素B”)，也可用next()方法替代
  註：同層級的後面一個
• 通用同層選取器：$(“元素A~元素B”)，也可用nextAll()方法替代
• jQuery提供的其他選擇方法：
• prev()方法：同級上一個元素
• prevAll()方法：同級所有上面的元素
• prevUntil()方法：同級上非指定元素選定，遇到則停止
• prevAll()方法：同級上所有元素選定
• nextUntil()方法：同級下非指定元素選定，遇到則停止
• nextAll()方法：同級下所有元素選定
• siblings()方法：同級上下所有元素選定
  註：盡量精簡選取器層級，篩選越複雜，jQuery 內部的選取器引擎處理字串的時間就越長。
  註：在 find()、next()、nextAll()和 children()這四個方法中，如果不傳遞參數，
  就相當於傳遞 了“*” ，即任何節點
  註：一般情況下jQuery 提供的方法 find()、next()、nextAll()和 children()運行速度比層級選取器快。

3屬性選取器

• $('元素[屬性名]')：獲取具有這個屬性的 DOM 物件
• $('元素[屬性名=屬性值]')：獲取具有這個屬性=這個屬性值的DOM物件
• $('元素[屬性名^=屬性值]')：獲取具有這個屬性且開頭屬性值匹配的DOM 物件
• $('元素[屬性名|=屬性值]')：獲取具有這個屬性且等於屬性值或開頭屬性值匹配後面跟一個“-”號的 DOM 物件
• $('元素[屬性名$=屬性值]')：獲取具有這個屬性且結尾屬性值匹配的DOM 物件
• $('元素[屬性名!=屬性值]')：獲取具有這個屬性且不等於屬性值的DOM 物件
• $('元素[屬性名~=屬性值]')：獲取具有這個屬性且屬性值是以一個空格分割的清單，其中包含屬性值的 DOM 物件
• $('元素[屬性名*=屬性值]')：獲取具有這個屬性且屬性值含有一個指定字串的 DOM 物件
• $('元素[屬性名][屬性名=屬性值]')：獲取具有這個屬性且屬性值匹配的 DOM物件

三、參考資料：

• jQuery選取器和JS選取器 - shadow_yn的博客 - CSDN博客