merhaba,

javascript ile tarayıcı eklentileri yazmaya başladım, bu yüzden framework kullanmak istemiyorum. jquery kullanırken hiç kafa yormadığım noktalarda biraz teorik desteğe ihtiyacım var. zincirleme yöntemler geriştirirken, mantık nasıl kurulmalı?

class Query {
    constructor(event){
        this.event = event;
    }
    style(value){
        this.event.target.style.color = value;
        return this;
    }
    sec(){
        console.log(this.event.target.id)
        return this;
    }
}
document.addEventListener("click", event => {
    var $ = x => new Query(x);
    console.log(
        $(event).sec().style('blue')
    );
});

jquery'den esinlenerek hem sık kullandığım yöntemleri kişiselleştirmek hemde javascript de oop yönünden gelişim göstermeye devam etmek istiyorum. bu yüzden yukarıdaki sınıfı oluşturdum, taslak olarak çalışır durumda ama bazı soru işaretlerim var.
anlayamadığım noktalardan birini örneklendirerek sormak istiyorum;

console.log(
    $('#herhangiBirDiv'),
    $('#herhangiBirDiv').hide(),
    $('#herhangiBirDiv').attr('Nitelik-Ekle', 'nitelik');
);

ilk sonuçta sadece divi seçmiyor aynı zamanda consola basıyor,
ikincisinde sçeimi gizliyor,
sonuncusunda ise nitelik ekliyor.

anlamadığım noktaysa, devamı varken nasıl sonuç döndürdüğü. yöntemler içerisinde sonucu kendine referans olarak ayarlamadığımda hata alıyorum. aşağı yukarı yöntemler içerisinde koşulları nasıl şekillendireceğimi netleştiremedim desem daha açıklayıcı olacağım sanırım.