Seleto
Seleto
is a lightning-fast, lightweight DOM selector; and it is highly extensible.
Why Seleto?
One may be tempted to ask 'why seleto?' when we have the likes of jQuery, Qwery and zepto
. The answer is as simple as seleto
itself; I wanted a DOM selector that has the selection capabilities of the mentioned libraries but does not come with all the pletora of unwanted utilities that fused into them that we must ship with our works whether they are wanted or not. Ok, with that out of the way, let us see what seleto
can do.
Well, if you have ever used(is there anyone who hasn't?) jQuery
, using seleto
will come natural. While seleto
works like jQuery
, do not expect everything that works on jQuery
to work in seleto
. I mean, while would anyone wants to make another jQuery
?
Installation
npm install seleto
Test
npm test
seleto
's supported selectors
List of The following are the selectors/operations supported by seleto
:
-
Id:
$('#Id')
-
Class:
$('.class')
-
Element:
$('p')
-
Attribute:
$('[type]')
-
Pseudos:
$(':radio')
, others are:<type>
where<type>
could be checkbox, text etc. or 'checked' forradios and checkboxes
. -
Pseudo_Pseudo:
$('checkbox:checked')
-
Attribute_Pseudo:
$('[data-validations]:text')
-
Attribute_Value:
$('[type=text]')
-
Class_Class:
$('.tabular.row')
-
Element_Attribute:
$('img[source-path]')
-
Element_Pseudo:
$('input:text')
-
Element_Class:
$('div.wrapper')
-
Id_Class:
$('#content.main')
-
Pseudo_Attribute:
$(':text[data-validations]')
-
Pseudo_Attribute_Value:
$(':text[name=userid]')
-
Element_Attribute_Pseudo:
$('input[data-validations]:text')
-
Element_Attribute_Value:
$('input[name=institution]')
-
Attribute_Value_Pseudo:
$('[type=checkbox]:checked')
-
Element_Pseudo_Pseudo:
$('input:checkbox:checked')
-
Element_Attribute_Value_Pseudo:
$('input[type=radio]:checked')
-
Attribute_Value_Attribute_Value:
$('[type=text][name=username]')
-
Element_Attribute_Value_Attribute_Value:
$('input[type=text][name=username]')
Any of the above could be used in various forms such as with comma (,) for combined selection such as $('selector, selector, selector,...')
or space for subsets such as $('selector selector, selector selector selector,..., ...')
where selector is any of the listed supported selectors. For instance, see:
var selected = ;var anotherOne = ; /*Of course I'm being unnecessarily verbose here*/
seleto
's interfaces that work similar to equivalent in jQuery
List of find
filter
each
not
is
append
prepend
appendTo
before
after
clone
empty
html
val
attr
addClass
removeClass
remove
children
wrap
wrapAll
text
size
css
data
hasClass
toggleClass
The following are interfaces peculiar to seleto
-
el:
It returns the raw HTML Element at the passed index or null otherwise. This is not zero-based. So, to get the first element in a listliList
ofli
we can useliList.el(1)
whereliList
is aseleto
instance. The equivalent injQuery
isliList.get(0)
since it is zero-based injQuery
. -
nth:
nth returns the matched element at the nth position in a collection of matches as an instance ofseleto
. This is also non-zero based so using the ealier example,liList.nth(1)
returns the first matched element asseleto
instance. -
prop:
prop allows the setting/getting of element properties such as thechecked
properties ofcheckbox and radio
or theselected
property of theselect
element. -
even:
even returns the matches of elements whose position in the matched collection is even asseleto
instance. -
odd:
odd returns the matches of elements whose position in the matched collection is odd asseleto
instance. -
first:
first returns the element on the head of the matched collection asseleto
instance. -
last:
first returns the element at the bottom of the matched collection asseleto
instance.
seleto
Events in All like in jQuery
-
on:
Used to subscribe to events, for instance,button.on('event', callback);
or delegatedform.on('event','button.submit',callback);
event
could be any ofclick, change, keyup, keydown, keypress etc.
-
off:
Used to unsubscribe to events, for instance,button.off('event', callback);
orbutton.off();
- this removes all events onbutton
. -
trigger:
trigger helps us manually trigger/fire events on elements, for instance, we can trigger the click event onbutton
like so:button.trigger('click')
.
There are also shortcuts like button.click(callback), el.change(callback) and can be triggered like so: button.click(), el.change().
Thanks for now.