imiric / helix

jquery-like dom manipulation

helix

jquery-like dom manipulation. Tiny (2.1kB minified & gzipped)

Installation

$ component install matthewmueller/helix

Tests

$ make clean && make
$ xdg-open test/test.html

API

Require Helix.

var $ = require('helix');

$(selector)

Select an element.

$('.name')
$('#nav')

#text(val)

Get and set text

$('.name').text('Matt')
$('.name').text() // ["Matt"]

#html(val)

Get and set HTML

$('.name').html('<strong>Matt</strong>')
$('.name').html() // ["<strong>Matt</strong>"]

#find(selector)

Get the descendants of each element in the current set of matched elements, filtered by a selector.

$('.person').find('span')

#children(selector)

Get the direct descendants of each element in the current set of matched elements, filtered by a selector.

$('.person').children('span')

#eq(index)

Get a single element from the set of matched elements.

$('span').eq(1).html()

#addClass(cls)

Add a class

$('.name').addClass('person')

#removeClass(cls)

Remove a class

$('.name').removeClass('person')

#toggleClass(cls)

Toggle a class

$('.name').toggleClass('person')

#attr(attr, val)

Get and set attributes that are on the selected element.

<input class="user" id="user" type="text" name="user">

$('.user').attr('type', 'radio').attr('name', 'person')
$('.user').attr('type') // ["radio"]

Get and set attribute that doesn't already exist

$('.user').attr('data-author', 'matt')

#hide()

Hide all matched elements.

$('span').hide()

#show()

Show all matched elements.

$('span').show()

#toggle()

Toggle display of all matched elements.

$('span').toggle()

License

MIT

helix's Issues

$(DOMElement).children() acts like find()

Because currently children() works by appending > selector to the original selector (this.selector), if Helix receives a DOMElement or another Helix instance, there's no way to infer the original selector (because there was none). And Element.querySelectorAll('> selector') is invalid. See this question.

A possible fix would be to generate the selector manually, by traversing all element's parents until the nearest element with an ID. See this question.