chibi
1.0.0
いくつかのDOM要素を操作するためだけに、3Gを超えて30kbを提供しても大丈夫だと思いますか？もちろん、それはasshatの動きであり、あなたはasshatではないので、あなたはそうではありません。代わりに、バニラJavaScriptの数行、おそらく少しのCSSを使用します:active 。すべての虹を通してユニコーンのベアバックに乗っている間、手はありません。
もう少し複雑なものに取り組んでいますか？脂肪、成長したフレームワーク、ライブラリとは異なり、チビは必需品だけに焦点を当て、溶けて最適化の虹と混合して、あなたが素晴らしいことをすることができる本当に軽いマイクロライブラリーを作成します。
document.querySelectorAll()のChibiのポリフィルは、ブラウザCSSサポートに限定されており、一部の専用セレクターエンジンほど高速ではありません。これは、IE6を持つinput[type=text]またはp:nth-child(even)セレクターがないことを意味します。幸いなことに、最新のブラウザはこのポリフィルを必要としません。document.querySelectorAll()またはwindow.getComputedStyleをサポートしていない古代のブラウザは、buggerをオフにすることができます。バージョン3は、多くの壊れた変更を伴う主要なアップデートです。変更を採用することが困難な場合は、バージョン1はここから利用できます。
Chibiは、次のブラウザでテストされ、サポートされています。
Chibiはdocument.querySelectorAll()をサポートする他のブラウザでも動作する必要があります。
ここからそれをつかむか
npm install chibijsChibi構文は、jQuery： $(selector).method()によって開拓されたものと似ています。マイクロライブラリーと大人のライブラリは決して混合されないため、意図的にjQueryと同じ$ namespaceを使用します。
Chibi'sは標準のCSSセレクターをサポートしていますが、DOM要素を直接渡すこともできます。
$ ( "p" ) // Returns an array of all paragraph elements
$ ( "p" ) . hide ( ) // Hides all paragraphs
$ ( "#foo" ) . show ( ) // Shows element with id equal to "foo"
$ ( ".foo" ) . hide ( ) // Hides elements with "foo" CSS class $ ( document . getElementsByTagName ( 'p' ) ) . hide ( ) // Hides all paragraphs $ ( $ ( 'p' ) [ 0 ] ) . hide ( ) // Hides first paragraphChibiは$(selector).method().anothermethod().evenmoremethods()チェーンするメソッドをサポートします。
DOMの準備ができたらハンドラーを発射します。
DOMの準備ができたら、機能を発射するために使用します。セレクターを含めることは、この方法では意味がありません。
$ ( ) . ready ( function ( ) {
// Do awesome
} ) ;または多分
function foo ( ) {
// Do awesome
}
$ ( ) . ready ( foo ) ; ページが読み込まれたときにハンドラーを発射します。
ページが読み込まれたときに関数を発射するために使用します。セレクターを含めることは、この方法では意味がありません。
function foo ( ) {
// Do awesome
}
$ ( ) . loaded ( foo ) ; 一致する各要素で関数を実行します
それぞれが、一致する各要素を指定された関数に渡します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
function foo ( elm ) {
elm . style . color = "red" ;
}
$ ( 'p' ) . each ( foo ) ; // Executes the foo function (sets the element style color to red) on all paragraph elements
// An alternative way to achieve the above
$ ( 'p' ) . each ( function ( elm ) {
$ ( elm ) . css ( 'color' , 'red' ) ;
} )
</ script >
</ body >
</ html > 最初の一致する要素を見つけます。
最初に、特にメソッドチェーンと組み合わせた場合、CSS疑似サポートが弱いIE6のようなCrappyブラウザを操作する場合に役立つ最初のマッチング要素を含む配列を返します。
最後の一致する要素を見つけます。
最後に、最後の一致する要素を含む配列を返します。
一致する奇妙な要素を見つけます。
ODDは、一致するODD要素を含む配列を返します。
一致する要素を見つけます。
一致する均一な要素を含む配列を返します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< p > Foo </ p >
< p > Bar </ p >
< script >
$ ( 'p' ) . first ( ) ; // returns an array containing the first paragraph element
$ ( 'p' ) . last ( ) ; // returns an array containing the fourth paragraph element
$ ( 'p' ) . odd ( ) ; // returns an array of odd paragraph elements
$ ( 'p' ) . even ( ) ; // returns an array of even paragraph elements
</ script >
</ body >
</ html > 一致する要素を隠します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
$ ( 'p' ) . hide ( ) ; // hides all paragraph elements
</ script >
</ body >
</ html > 一致する要素を表示します。
<!DOCTYPE html >
< html >
< head >
< style >
p {display:none}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
$ ( 'p' ) . show ( ) ; // shows all paragraph elements
</ script >
</ body >
</ html > 一致する要素の可視性を切り替えます。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p style =" display:none " > Bar </ p >
< script >
$ ( 'p' ) . toggle ( ) ; // shows the second paragraph element, hides the first paragraph element
</ script >
</ body >
</ html > DOMツリーから一致する要素を削除します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
$ ( 'p' ) . remove ( ) ; // removes all the paragraph elements from the DOM tree
</ script >
</ body >
</ html > 一致する要素のためにCSSプロパティを取得またはオプションで設定します。
値のないCSSは、見つかった最初の一致する要素のCSSプロパティ文字列を返します。 CSSは、ブラウザ間で異なる可能性のあるプロパティが明示的に設定されていない場合、計算されたプロパティ値を返します。たとえば、明示的なフォント重量のない要素は、OperaおよびWebKitブラウザーで「通常」を返しますが、FirefoxおよびInternet Explorerブラウザーでは「400」です。
値は、すべての一致する要素のCSSプロパティの値を設定します。
<!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" bold " > Bar </ p >
< script >
$ ( 'p' ) . css ( 'font-weight' ) ; // returns the "font-weight" of the first paragraph element
$ ( 'p' ) . css ( 'color' , 'red' ) ; // sets all paragraph elements color to red
</ script >
</ body >
</ html > 最初の一致する要素のクラスを取得します。
<!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< div class =" red " > Foo </ div >
< div class =" mono " > Bar </ div >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
$ ( 'div' ) . getClass ( ) ; // returns 'red', the class of the first div element
$ ( 'p' ) . getClass ( ) ; // returns undefined as the first paragraph element has no class set
</ script >
</ body >
</ html > 既存の要素クラスをこのクラスに置き換えるすべての一致する要素のクラスを設定します。
<!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
$ ( 'p' ) . setClass ( 'red bold' ) ; // sets the class to "red" and "bold" for all paragraph elements
</ script >
</ body >
</ html > すべての一致する要素にクラスを追加します。
<!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
$ ( 'p' ) . addClass ( 'mono' ) ; // adds the "mono" class to all paragraph elements
</ script >
</ body >
</ html > 一致するすべての要素からクラスを削除します。
<!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
$ ( 'p' ) . removeClass ( 'mono' ) ; // removes the "mono" class from all paragraph elements
</ script >
</ body >
</ html > 一致する要素のクラスを切り替えます。
<!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
$ ( 'p' ) . toggleClass ( 'mono' ) ; // toggles the mono class on all paragraph elements
</ script >
</ body >
</ html > 最初に一致する要素が含まれている場合、trueを返します。クラスが含まれています。
<!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< div class =" red " > Foo </ div >
< div class =" mono " > Bar </ div >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
$ ( 'div' ) . cls ( 'red' ) ; // returns true as the first div element includes the 'red' class
$ ( 'p' ) . cls ( 'mono' ) ; // returns undefined as the first paragraph element doesn't include the 'mono' class
</ script >
</ body >
</ html > 一致する要素の内側のHTMLを取得またはオプションで設定します。
引数がないHTMLは、見つかった最初の一致する要素のHTML文字列を返します。
HTML引数が指定されている場合、これはすべての一致する要素の内部HTMLを置き換えます。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
$ ( 'p' ) . html ( ) ; // returns an inner HTML "Foo" of the first paragraph element
$ ( 'p' ) . html ( '<i>Foobar</i>' ) ; // Sets the inner HTML of all paragraph elements to "<i>Foobar</i>"
</ script >
</ body >
</ html > すべての一致する要素の前にHTMLを挿入します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
$ ( 'p' ) . htmlBefore ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" before all paragraph elements
</ script >
</ body >
</ html > すべての一致する要素の後にHTMLを挿入します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
$ ( 'p' ) . htmlAfter ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" after all paragraph elements
</ script >
</ body >
</ html > すべての一致する要素の内側要素の後、HTMLを挿入します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
$ ( 'p' ) . htmlAppend ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" after all paragraph child elements
</ script >
</ body >
</ html > すべての一致する要素の内側要素の前にHTMLを挿入します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
$ ( 'p' ) . htmlPrepend ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" before all paragraph child elements
</ script >
</ body >
</ html > すべてのマッチング要素のプロパティを取得またはオプションで設定します。
値引数がないattrは、見つかった最初の一致する要素のプロパティ文字列を返します。
値は、すべての一致する要素のプロパティの値を設定します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > < a href =" http://en.wikipedia.org/wiki/Foobar " > Foobar </ a > </ p >
< script >
$ ( 'a' ) . attr ( 'href' ) ; // returns the "href" property value "http://en.wikipedia.org/wiki/Foobar" of the first link element
$ ( 'a' ) . attr ( 'target' , '_blank' ) ; // sets the "target" property for all link elements to "_blank"
</ script >
</ body >
</ html > すべての一致する要素のデータキー値を取得またはオプションで設定します。
値引数がないデータは、見つかった最初の一致する要素のデータキー値を返します。
値は、すべての一致する要素のデータキーの値を設定します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p data-test =" foo " > </ p >
< p data-test =" bar " > </ p >
< script >
$ ( 'p' ) . data ( 'test' ) ; // returns "foo" for data key "test" of first paragraph element found
$ ( 'p' ) . data ( 'test' , 'foobar' ) ; // sets the date key "test" value to "foobar" on all matching paragraph elements
</ script >
</ body >
</ html > 一致するフォーム要素の値を取得またはオプションで設定します。
引数がないVALは、見つかった最初のマッチングフォーム要素の値文字列を返します。選択したリストの場合、Chibiは選択したオプション値の文字列を返します（ある場合）。複数の選択を備えた選択リストの場合、Chibiは選択したオプション値の文字列の配列を返します（ある場合）。
値は、フォームフィールド要素を一致させる値を設定します。選択したリストの場合、この値に一致するオプションを選択します。複数の選択を持つ選択リストの場合、値の配列を渡すと、選択リスト内のすべてのオプションがこれらの値を一致させるすべてのオプションを選択します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
< select multiple =" multiple " >
< option value =" foo " > Foo </ option >
< option value =" bar " selected =" selected " > Bar </ option >
</ select >
</ form >
< script >
$ ( 'input' ) . val ( ) ; // returns "Foobar"
$ ( 'input' ) . val ( 'Foo Bar' ) ; // sets the value for all input elements to "Foo Bar"
$ ( 'select' ) . val ( ) ; // returns "bar", the selected option value
$ ( 'select' ) . val ( 'foo' ) ; // selects the option matching "foo"
$ ( 'select' ) . val ( [ 'foo' , 'bar' ] ) ; // selects the options matching "foo" or "bar" values
</ script >
</ body >
</ html > チェックボックスまたはラジオ要素のチェックステータスを取得またはオプションで設定します。
引数なしでチェックされた場合、見つかった最初の一致する要素のチェックされたブール値が返されます。
Booleanは、一致するチェックボックスまたは無線要素のチェックステータスを設定します。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" checkbox " value =" Foobar " name =" chk " >
</ form >
< script >
$ ( 'input' ) . checked ( true ) ; // checks the checkbox
$ ( 'input' ) . checked ( ) ; // returns true
$ ( 'input' ) . checked ( false ) ; // unchecks the checkbox
$ ( 'input' ) . checked ( ) ; // returns false
</ script >
</ body >
</ html > すべてのマッチング要素にイベントリスナーを追加します。
すべてのマッチング要素にイベントリスナーを追加します。 Chibiは必要に応じてイベントに自動的にプレフィックスするため、HTMLイベント形式（ 'on' +イベント）を使用する必要はありません。また、[セレクター]としての渡りwindowとdocumentもサポートします。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
function foo ( ) {
// Do awesome
}
$ ( 'p' ) . on ( 'click' , foo ) ; // adds the 'foo' click event listener to all paragraphs
</ script >
</ body >
</ html > すべてのマッチング要素からイベントリスナーを削除しました。
オフは、すべてのマッチング要素からイベントリスナーを削除しました。 Chibiは必要に応じてイベントに自動的にプレフィックスするため、HTMLイベント形式（ 'Off' +イベント）を使用する必要はありません。また、オフは、セレクターとしての渡りwindowとdocumentもサポートします。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
function foo ( ) {
// Do awesome
}
$ ( 'p' ) . on ( 'click' , foo ) ; // adds the 'foo' click event listener to all paragraph elements
$ ( 'p' ) . off ( 'click' , foo ) ; // removes the 'foo' click event listener from all paragraph elements
</ script >
</ body >
</ html > XHRのresponseTextとstatusでコールバックを起動して、get ajaxリクエストを送信します。 $（selector）.ajax with getメソッドのエイリアス
Nocacheが真である場合、キャッシュを防ぐために_tsタイムスタンプがURLに追加されます。はい、AndroidブラウザとiOS 6を見ています。
jsonをセレクター（{name：value}）としてサポートします。これは、フォーム要素を使用せずにデータを送信する場合に役立ちます。
クロスドメインのリクエストの場合、 get jsonpをデフォルトで使用しますが、これはnojsonpが真である場合にオーバーライドされます。 JSONPリクエストは、callback =にコールバックを適用しますかcallback=? Get URLで同様です。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
</ form >
< script >
// XHR all form data using "GET" to "ajax.html"
$ ( 'form' ) . get ( 'ajax.html' ) ;
// XHR the JSON using "GET" to "ajax.html"
$ ( { text : 'Foo Bar' } ) . get ( 'ajax.html' ) ;
</ script >
</ body >
</ html > <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< script >
// JSONP
$ ( ) . get ( 'https://api.github.com/users/kylebarrow/repos?sort=created&direction=asc&callback=?' , function ( data , status ) {
// Do awesome
} ) ;
// JSONP with JSON query
$ ( { sort : "created" , direction : "asc" , callback : "?" } ) . get ( 'https://api.github.com/users/kylebarrow/repos' , function ( data , status ) {
// Do awesome
} ) ;
</ script >
</ body >
</ html > XHRのresponseTextとstatusでコールバックを起動して、ajaxの投稿リクエストを送信します。 $（selector）.ajaxのエイリアスを備えたメソッド
Nocacheが真の場合、キャッシュを防ぐために_tsタイムスタンプがURLに追加されます。
Postは、JSONをセレクター（{name：value}）としてサポートします。これは、フォーム要素を使用せずにデータを送信する場合に役立ちます。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
</ form >
< script >
// XHR the JSON using "POST" to "ajax.html"
$ ( { text : 'Foo Bar' } ) . post ( 'ajax.html' ) ;
// XHR all form data using "POST" to "ajax.html", returns responseText and status, adds a cache busting time stamp
$ ( 'form' ) . post ( 'ajax.html' , function ( data , status ) {
// Do awesome
} , true ) ;
</ script >
</ body >
</ html > ajaxリクエストを送信し、オプションでxhrのresponseTextとstatusでコールバックを起動します
Ajaxは、NOが指定されていない場合にGETメソッドを使用します。 Nocacheが真の場合、キャッシュを防ぐために_tsタイムスタンプがURLに追加されます。
Ajaxは、JSONをセレクター（{name：value}）としてサポートします。これは、フォーム要素を使用せずにデータを送信する場合に役立ちます。
クロスドメインのリクエストの場合、 AjaxはデフォルトでJSONPを使用しますが、 Nojsonpが真である場合にこれはオーバーライドされます。 JSONPリクエストは、callback =にコールバックを適用しますかcallback=?またはAjax URLで同様です。この方法は、明らかにJSONPリクエストに対して常にGET 。
<!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
</ form >
< script >
// XHR all form data using "GET" to "ajax.html"
$ ( 'form' ) . ajax ( 'ajax.html' ) ;
// XHR the JSON using "GET" to "ajax.html"
$ ( { text : 'Foo Bar' } ) . ajax ( 'ajax.html' ) ;
// XHR all form data using "POST" to "ajax.html", returns responseText and status, adds a cache busting time stamp
$ ( 'form' ) . ajax ( 'ajax.html' , "POST" , function ( data , status ) {
// Do awesome
} , true ) ;
</ script >
</ body >
</ html > <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< script >
// JSONP
$ ( ) . ajax ( 'https://api.github.com/users/kylebarrow/repos?sort=created&direction=asc&callback=?' , 'GET' , function ( data , status ) {
// Do awesome
} ) ;
// JSONP with JSON query
$ ( { sort : "created" , direction : "asc" , callback : "?" } ) . ajax ( 'https://api.github.com/users/kylebarrow/repos' , 'GET' , function ( data , status ) {
// Do awesome
} ) ;
</ script >
</ body >
</ html >npm install
gulp
