CSS選擇器用於JQUERY

純css選擇器 jq

noway 2022-02-13 10:30:59 ‧ 986 瀏覽

分享至

您好：
參考
https://blog.kkbruce.net/2012/03/jquery-selectors-8-form.html#.YghmK99ByUk

他有一段
因為:button是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:button無法提供更好效能，建議先使用純CSS選擇器，然後使用.filter(":button")來實現更好的效能。

請問純CSS選擇器這是指?
謝謝!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Felix

iT邦研究生 2 級 ‧ 2022-02-13 12:38:06

因為 CSS 沒有名為 button 的偽類別（:button），故不是純 CSS 選擇器。

如果想要了解更多 CSS 選擇器，請參考：The 30 CSS Selectors You Must Memorize。

回應 2
分享
檢舉

noway iT邦研究生 3 級 ‧ 2022-02-13 14:57:02 檢舉

您好：如何取純 CSS 選擇器.filter(":button")
??

Felix iT邦研究生 2 級 ‧ 2022-02-14 03:24:55 檢舉

noway

因為 :button 是 jQuery 的擴展，因此原生的 DOM 方法無法使用（即 document.querySelectorAll(':button') 會出現錯誤）。

如果已經先使用原生 DOM 方法選擇「有 hidden 屬性的按鈕元素」，只要用 filter 方法過濾就行了，就不需要再次使用 jQuery 重新選擇元素了：

const elem = document.querySelectorAll('[hidden]');
const btns = $(elem).filter(':button');

登入發表回應

Tree

iT邦新手 3 級 ‧ 2022-02-14 11:02:41

如果要用 Vanilla JS 來選到特定 form 中所有的 button 可用以下的方式來取得

const formEl = document.querySelector('form#formId');
const buttons = [...formEl.querySelectorAll('button')];
// buttons = an array of all button elements in form#formId

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙