[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS
Post on:2018年5月31日
sponsors
要素にclassを加えたり、変更したり、要素を削除したり、::beforeや::afterを加えたり、要素の表示位置を取得したり、変更したり、クリックやホバーのイベントを設定したり、基本的なDOM操作を実行するためだけに開発された超軽量ライブラリを紹介します。
jQueryは使うけど、$関数や上記の挙動しか利用しないという人には、特にぴったりなスクリプトです。
nanoJSの特徴
- トータル100行、0.6kBの超軽量スクリプト。
- jQueryに似た構文が利用でき、オブジェクトの連鎖的もサポート。
- それぞれのメソッドは単独で機能するため、削除・追加することも可能。
- IE9対応（addClass, removeClass, toggleClassのみ非対応）。
nanoJSのデモ
ドキュメントでは、nanoJSで利用できる構文がすべてまとめられています。
nanoJSの使い方
外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 |
<script src="https://unpkg.com/@vladocar/nanojs@1.0.1/src/nanoJS.min.js"></script> |
よく使用する構文
DOMを操作する構文をいくつか紹介します。
$関数をはじめ、jQueryとほぼ同じ使い方なので、簡単だと思います。
指定した要素に、classを与えます。
|
1 |
$("#a").addClass("newclass"); |
指定した要素に、アニメーションを与えます。
|
1 |
$('#c').animate('2.3', '1.2','0','1','1','0','0', '0','0','1'); |
指定した要素の属性に値を設定します。
|
1 |
$('#c').attr("class","newclass"); |
指定した属性に値を設定します。
|
1 |
$(".someClass").css("background-color:green"); |
指定した要素の子要素を全て削除し、空にします。
|
1 |
$('#c').empty(); |
指定した要素のHTMLを書き換えます。
|
1 |
$('#c').html("<p>Hello World!</p>"); |
指定した要素の後に、HTMLを加えます。
|
1 |
$('#c').insertAfter("<p>Hello World!</p>"); |
指定した要素の位置を取得・設定します。
|
1 2 |
$("#b").offset(); $("#c").css("width:" + offset.width + "px"); |
指定した要素の任意のイベントをバインドします。
|
1 2 3 |
$("#a").on("click", function(){ $("#someDiv").css("background-color:green;color:#fff;"); }) |
sponsors
