jqLiteとは
AngularJSで使用できる軽量版jQuery。
jqLiteの使い方
以下のように要素をangular.element()に入れてjqLiteのメソッドを使用する。
var foo = document.getElementById('foo');
var fooElem = angular.element(foo);
fooElem.addClass('bar');
ただし、通常のjQueryとは使い方が異なるため以下の3つの点に注意が必要だ。
使用できるメソッドが少ない
jqLiteで使用できるメソッドはバージョン1.4の時点では以下の35種類しかない。
- addClass()
- after()
- append()
- attr()
- bind()
- children()
- clone()
- contents()
- css()
- data()
- detach()
- empty()
- eq()
- find()
- hasClass()
- html()
- next()
- on()
- off()
- one()
- parent()
- prepend()
- prop()
- ready()
- remove()
- removeAttr()
- removeClass()
- removeData()
- replaceWith()
- text()
- toggleClass()
- triggerHandler()
- unbind()
- val()
- wrap()
バージョンによって使用できるメソッドが異なる
バージョンが古いと使用できるメソッドはさらに少なくなる。以下はバージョン別の新規追加メソッド。
| バージョン | 追加メソッド |
|---|---|
| v1.3.0 | detach() |
| v1.2.6 | one() |
| v1.2.5 | empty() |
| v1.2.0 | on(), off() |
| v1.0.3 | triggerHandler() |
| v1.0.0 | jqLite自体は初期のころからある |
#id, .class指定ができない
jQueryであればelem.find('.item').addClass('red')のような記述が可能だが、jqLiteではfindなどで使えるのはタグだけで#id, .classは使用できない。
そのためdirectiveなどでクリックしたときに子要素にclassを追加したい場合は以下のような記述になる。
app.directive('addRed', function() {
return {
link: function(scope, elem) {
elem.on('click', function() {
var item = angular.element(elem[0].querySelector('.item'));
// elem.find('.item').addClass('red')ではない
item.addClass('red');
});
}
};
});
ちなみにjqLiteはAngular 2.0からなくなります。
