#Cashとは何か?Cashのブラウザのための小さなjQueryの代替品 #士03
https://github.com/fabiospampinato/cash
Cash は、DOM を操作するための jQuery スタイルの構文を提供する、最新のブラウザ（IE11+) 用の不条理に小さな jQuery 代替手段です。最新のブラウザ機能を利用してコードベースを最小限に抑え、開発者はおなじみのチェーン可能なメソッドをファイル サイズのほんの一部で使用できます。jQuery との 100% 機能パリティは目標ではありませんが、Cash は役に立ち、日常のほとんどのユースケースをカバーします。
比較
サイズ現金ゼプト 1。2。0jQuery Slim 3。4。1縮小されていません 36。5KB 58。7キロ 227 キログラム
縮小 16 キログラム 26 キログラム 71 キログラム
ミニ化&gzipped 6 KB 9。8KB 24。4KB
A 76。6% jquery Slim と比較してサイズが縮小される。より小さなバンドルが必要な場合は、サポートします 部分的なビルド も。
特徴現金ゼプト 1。2。0jQuery Slim 3。4。1古いブラウザをサポートします ❌ ️❌ ✔
モダンなブラウザをサポートします ✔ ️✔ ✔
積極的に維持されています ✔ ❌ ✔
名前付きイベントnamespaced Events ✔ ️❌ ✔
型付きコードベース ✔（TypeScript） ️❌ ❌
TypeScript のタイプ ✔（コードから生成） ⚠️ （definitelytyped 経由） ⚠️ （definitelytyped 経由）
部分的なビルド ✔（個々のメソッドを除外できます） ⚠️ （モジュール全体を除外できます） ⚠️ （モジュール全体を除外できます）
jQuery から移行する場合は、必ずお読みください 移行ガイド.
使用法
から Cash を取得できます jsdelivr そして次のように使用します:
<スクリプト src=」https://cdn。jsdelivr。net/npm/cash-dom/dist/cash。min。js"></スクリプト> <スクリプト> $(機能 () { $(‘html’).クラスを追加します ( ‘dom-loaded’ ); $('<footer>Cash</footer>' が追加されました).追加します ( 文書.体 ); }); </スクリプト>
現金もご利用いただけます npm として cash-dom パッケージ:
npm install --save cash-dom
その後、次のように使用できることを:
インポート $ から 「キャッシュダム」 を; $(機能 () { $(‘html’).addclass ( ‘dom-loaded’ ); $('<footer>Cash</footer>' が追加されました).追加します ( 文書.体 ); });
ドキュメンテーション
現金はあなたにクエリセレクタを与えます、 収集方法 そしていくつか ライブラリメソッド. 。API についてさらに詳細が必要な場合は、チェックしてください jquery の, 、jquery が提供するすべてを実装するわけではありませんが、実装するほとんどすべてが jQuery と互換性があるはずです。現金はカスタムメソッドで拡張できます。方法をお読みください ここ.
$()
これがCashの主なセレクター方法です。ノードのアクション可能なコレクションを返します。
関数が提供されている場合、DOM の準備が整うと関数は実行されます。
$( セレクター [, 要素] ) // => collection, using `element` as the context $( セレクター [, コレクション] ) // => collection, `collection` をコンテキストとして使う $(ノード) // => コレクション $(ノードリスト) // => コレクション $(htmlstring) // => コレクション $(コレクション) // => 自己 $(機能 () {}) // => ドキュメント準備完了コールバック
収集方法
コレクション プロトタイプからのこれらの方法 ()$。fnでコレクションを作成すると、 がある $() そして次のように呼ばれます:
$(要素).クラスを追加します ( クラス名 ) // => コレクション
一部 追加の方法 は利用可能ですが、デフォルトでは無効になっています。
属性コレクションCSSデータ寸法効果fn。addclass () fn。add() fn。css() fn。data() fn。height() fn。hide()
fn。attr() fn。each() fn。innerheight() fn。show()
fn。hasclass() fn。eq() fn。innerwidth () fn。toggle ()
fn。prop() fn。フィルター() fn。outerheight()
fn。removeattr() fn。ファースト() fn。outerwidth ()
fn。removeclass () fn。get() fn。width()
fn。removeprop() fn。index()
fn。toggleclass () fn。last()
fn。map()
fn。slice()
イベントフォーム操作オフセットトラバーサルfn。off() fn。serialize() fn。after() fn。オフセット() fn。children()
fn。on() fn。val() fn。append() fn。offsetparent() fn。closest()
fn。one() fn。appendto() fn。position() fn。contents()
fn。ready() fn。before() fn。find()
fn。トリガー() fn。clone() fn。has()
fn。detach() fn。is()
fn。empty() fn。next()
fn。html() fn。nextall()
fn。insertafter () fn。nextuntil()
fn。insertbefore () fn。not()
fn。プレペンド() fn。parent()
fn。prependto() fn。parents()
fn。remove() fn。parentsuntil()
fn。replaceall() fn。prev()
fn。replacewith() fn。prevall()
fn。text() fn。prevuntil()
fn。unwrap() fn。siblings()
fn。wrap()
fn。wrapall()
fn。wrapinner()
$。fn
コレクションの主なプロトタイプ。すべてのコレクションにメソッドを追加することで、プラグインを使用して Cash を拡張できます。
$.エフエヌ // => Cash。prototype $.エフエヌ.私の方法 = 機能 () {}; // すべてのコレクションにカスタムメソッドを追加 $.エフエヌ.延長する ( オブジェクト ); // プロトタイプに複数のメソッドを追加します
fn。add()
末尾に element（s）を追加した新しいコレクションを返します。
$(要素).追加 ( 要素 ) // => コレクション $(要素).追加 ( セレクター ) // => コレクション $(要素).追加 ( コレクション ) // => コレクション
fn。addclass ()
を追加します className コレクション内の各要素へのクラス。
スペース分離を受け入れます className 複数のクラスを追加する場合。
$(要素).クラスを追加します ( クラス名 ) // => コレクション
fn。after()
コレクションの後にコンテンツまたは要素を挿入します。
$(要素).後 ( 要素 ) // => コレクション $(要素).後 ( htmlstring ) // => コレクション $(要素).後 ( コンテンツ [, コンテンツ] ) // => コレクション
fn。append()
コレクション内の各要素にコンテンツまたは要素を追加します。
$(要素).添付 ( 要素 ) // => コレクション $(要素).添付 ( htmlstring ) // => コレクション $(要素).添付 ( コンテンツ [, コンテンツ] ) // => コレクション
fn。appendto()
コレクション内の要素をターゲット要素に追加します（複数可）。
$(要素).追加します ( 要素 ) // => コレクション
fn。attr()
なく attrValue, 、コレクションの最初の要素の属性値を返します。
と attrValue, 、コレクションの各要素の属性値を設定します。
$(要素).アトル ( attrname ) //値 $(要素).アトル ( attrname, attrvalue ) // => コレクション $(要素).アトル ( オブジェクト ) // => コレクション
fn。before()
コレクションの前にコンテンツまたは要素を挿入します。
$(要素).前 ( 要素 ) // => コレクション $(要素).前 ( htmlstring ) // => コレクション $(要素).前 ( コンテンツ [, コンテンツ] ) // => コレクション
fn。children()
セレクタを指定しないと、子要素のコレクションが返されます。
セレクターでは、セレクターに一致する子要素を返します。
$(要素).子供 () // => コレクション $(要素).子供 ( セレクター ) // => コレクション
fn。closest()
DOM ツリー上で最も近い一致するセレクターを返します。
$(要素).最も近い ( セレクター ) // => コレクション
fn。contents()
テキスト ノードやコメント ノードなど、一致する要素のセット内の各要素の子を取得します。
フレンドリーな iframe で要素を選択するのに役立ちます。
$(‘iframe’).内容 ().見つけ ( ‘*’ ) // => コレクション
fn。clone()
クローンされた要素を含むコレクションを返します。
$(要素).クローン () // => コレクション
fn。detach()
オプションでセレクターに一致するコレクション要素を DOM から削除します。
$(要素).切り離します () // => コレクション $(要素).切り離します ( セレクター ) // => コレクション
fn。css()
プロパティのみが指定されたときに CSS プロパティ値を返します。
プロパティと値が提供されるときに CSS プロパティを設定します。
オブジェクトが供給されたときに複数のプロパティを設定します。
ユーザーのブラウザに必要な場合、プロパティは自動再修正されます。
$(要素).css し ( 財産 ) // => 値 $(要素).css し ( 財産, 価値 ) // => コレクション $(要素).css し ( オブジェクト ) // => コレクション
fn。data()
引数なしで、すべてのオブジェクトをマッピングして返します data-* 彼らの価値観の属性。
a と key, 、対応する の値を返す data-* 属性。
両方aで key そして value, 、対応する の値を設定します data-* 属性 to value.
オブジェクトの供給時に複数のデータを設定できます。
$(要素).データ () // => オブジェクト $(要素).データ ( キー ) // => 値 $(要素).データ ( キー, 価値 ) // => コレクション $(要素).データ ( オブジェクト ) // => コレクション
fn。each()
とコレクションを反復します callback ( index, element ). 。コールバック関数は、戻ることで反復を早期に終了する場合があります false.
$(要素).それぞれ ( コールバック ) // => コレクション
fn。empty()
要素の内装マークアップを空にします。
$(要素).空 () // => コレクション
fn。eq()
要素をインデックスに持つコレクションを返します。
$(要素).eq（エキュー） ( インデックス ) // => コレクション
fn。extend()
Cash コレクション プロトタイプにプロパティを追加します。
$.エフエヌ.延長する ( オブジェクト ) // => オブジェクト
fn。フィルター()
フィルターセレクター/メソッドを適用した結果のコレクションを返します。
$(要素).フィルター ( セレクター ) // => コレクション $(要素).フィルター ( 機能 ( インデックス, 要素 ) {} ) // => コレクション
fn。find()
コレクションの最初の要素からセレクターマッチの子孫を返します。
$(要素).見つけ ( セレクター ) // => コレクション
fn。ファースト()
最初の要素のみを含むコレクションを返します。
$(要素).まず () // => コレクション
fn。get()
インデックスの要素を返すか、すべての要素を返します。
$(要素).取得 ( インデックス ) // => domNode $(要素).取得 () // => domNode[]
fn。has()
一致する要素のセットを、セレクターまたは DOM 要素に一致する子孫を持つ要素に減らします。
$(要素).持っている ( セレクター ) // => コレクション $(要素).持っている ( 要素 ) // => コレクション
fn。hasclass()
コレクション内の要素に が含まれているかどうかを確認したブール値を返します className 属性。
$(要素).ハスクラス ( クラス名 ) // => boolean
fn。height()
要素の高さを返すか設定します。
$(要素).高さ () // => 整数 $(要素).高さ ( 番号 ) // => コレクション
fn。hide()
要素を隠す。
$(要素).隠す () // => コレクション
fn。html()
コレクションの最初の要素の HTML テキストを返し、HTML が提供されている場合はそれを設定します。
$(要素).html () // => HTML テキスト $(要素).html ( htmlstring ) // => HTML テキスト
fn。index()
要素またはセレクターが提供されていない場合は、親要素のインデックスを返します。要素またはセレクター内のインデックスを返します（そうであれば）。
$(要素).インデックス () // => 整数 $(要素).インデックス ( 要素 ) // => 整数
fn。innerheight()
要素 + パディングの高さを返します。
$(要素).内部の高さ () // => 整数
fn。innerwidth ()
要素 + パディングの幅を返します。
$(要素).内幅 () // => 整数
fn。insertafter ()
指定した要素の後にコレクションを挿入します。
$(要素).後挿入 ( 要素 ) // => コレクション
fn。insertbefore ()
指定した要素の前にコレクションを挿入します。
$(要素).前挿入 ( 要素 ) // => コレクション
fn。is()
提供されたセレクター、要素、またはコレクションがコレクション内の要素と一致するかどうかを返します。
$(要素).は ( セレクター ) // => boolean
fn。last()
最後の要素のみを含むコレクションを返します。
$(要素).最後 () // => コレクション
fn。map()
新しいコレクションを返し、各要素を でマッピングします callback ( index, element ).
$(セレクター).地図 ( コールバック ) // => コレクション
fn。next()
次の隣接要素を返します。
$(要素).次 () // => コレクション $(要素).次 ( セレクター ) // => コレクション
fn。nextall()
次の要素をすべて返します。
$(要素).次すべて () // => コレクション $(要素).次すべて ( セレクター ) // => コレクション
fn。nextuntil()
指定されたセレクターが一致するまで、次の要素をすべて返します。
$(要素).次まで ( セレクター ) // => コレクション $(要素).次まで ( セレクター, filterselector ) // => コレクション
fn。not()
コレクション/セレクターで誤った一致によってコレクションをフィルターします。
$(要素).ない ( セレクター ) // => コレクション $(要素).ない ( コレクション ) // => コレクション
fn。off()
イベントリスナーをコレクション要素から削除します。
スペース分離を受け入れます eventName 複数のイベントリスナを削除するため。
引数なしで呼び出された場合は、すべてのイベントリスナーを削除します。
$(要素).オフ ( イベント名, イベントハンドラー ) // => コレクション $(要素).オフ ( イベント名 ) // => コレクション $(要素).オフ ( イベントマップ ) // => コレクション $(要素).オフ () // => コレクション
fn。オフセット()
ドキュメントに対するコレクション内の最初の要素の座標を取得します。
$(要素).オフセット () // => オブジェクト
fn。offsetparent()
配置されている最初の要素の祖先を取得します。
$(要素).オフセット親 () // => コレクション
fn。on()
コレクション要素にイベントリスナーを追加します。
スペース分離を受け入れます eventName 複数のイベントを聴くための。
デリゲートが指定された場合、イベントはデリゲートされます。
$(要素).オン ( イベントマップ ) // => コレクション $(要素).オン ( イベント名, イベントハンドラー ) // => コレクション $(要素).オン ( イベント名, 委任, イベントハンドラー ) // => コレクション
fn。one()
要素ごとに 1 回だけトリガーされるコレクション要素にイベント リスナーを追加します。
スペース分離を受け入れます eventName 複数のイベントを聴くための。
デリゲートが指定された場合、イベントはデリゲートされます。
$(要素).一つ ( イベント名, イベントハンドラー ) // => コレクション $(要素).一つ ( イベント名, 委任, イベントハンドラー ) // => コレクション
fn。outerheight()
要素の外側の高さを返します。場合はマージンが含まれます includeMargings が true に設定されています。
$(要素).outerheight の () // => 整数 $(要素).outerheight の ( マージンを入れてください ) // => 整数
fn。outerwidth ()
要素の外側の幅を返します。場合はマージンが含まれます includeMargings が true に設定されています。
$(要素).outerwidth の () // => 整数 $(要素).outerwidth の ( マージンを入れてください ) // => 整数
fn。parent()
要素の親である要素のコレクションを返します。
$(要素).親 () // => コレクション $(要素).親 ( セレクター ) // => コレクション
fn。parents()
要素の親である要素のコレクションを返します。オプションでセレクターによるフィルタリングも可能です。
$(要素).両親 () // => コレクション $(要素).両親 ( セレクター ) // => コレクション
fn。parentsuntil()
指定されたセレクターが一致するまで、要素の親である要素のコレクションを返します。オプションでセレクターによるフィルタリングも可能です。
$(要素).両親まで ( セレクター ) // => コレクション $(要素).両親まで ( セレクター, filterselector ) // => コレクション
fn。position()
コレクション内の最初の要素の座標を、その要素に対して相対的に取得します offsetParent.
$(要素).位置 () // => オブジェクト
fn。プレペンド()
コレクション内の各要素にコンテンツまたは要素を追加します。
$(要素).前置 ( 要素 ) // => コレクション $(要素).前置 ( htmlstring ) // => コレクション $(要素).前置 ( コンテンツ [, コンテンツ] ) // => コレクション
fn。prependto()
コレクション内の要素をターゲット要素（複数可）に準備します。
$(要素).先頭へ ( 要素 ) // => コレクション
fn。prev()
前の隣接要素を返します。
$(要素).プレブ () // => コレクション $(要素).プレブ ( セレクター ) // => コレクション
fn。prevall()
前の要素をすべて返します。
$(要素).前へすべて () // => コレクション $(要素).前へすべて ( セレクター ) // => コレクション
fn。prevuntil()
指定されたセレクターが一致するまで、以前の要素をすべて返します。
$(要素).前へまで ( セレクター ) // => コレクション $(要素).前へまで ( セレクター, filterselector ) // => コレクション
fn。prop()
プロパティのみが指定されたときにプロパティ値を返します。
プロパティと値が供給されるときにプロパティを設定し、オブジェクトが供給されるときに複数のプロパティを設定します。
$(要素).プロップ ( 財産 ) // => プロパティ値 $(要素).プロップ ( 財産, 価値 ) // => コレクション $(要素).プロップ ( オブジェクト ) // => コレクション
fn。ready()
DOMContentLoaded でコールバック メソッドを呼び出します。
$(文書).準備完了 ( コールバック ) // => コレクション/スパン
fn。remove()
オプションでセレクターに一致するコレクション要素を DOM から削除し、すべてのイベント リスナーを削除します。
$(要素).除去 () // => コレクション $(要素).除去 ( セレクター ) // => コレクション
fn。replaceall()
これはと似ています fn。replacewith(), 、しかし、ソースとターゲットが逆になっています。
$(要素).すべて置換します ( コンテンツ ) // => コレクション
fn。replacewith()
コレクション要素を、提供された新しいコンテンツに置き換えます。
$(要素).置き換えます ( コンテンツ ) // => コレクション
fn。removeattr()
コレクション要素から属性を削除します。
複数の属性を削除するためのスペースで区切られた attrName を受け入れます。
$(要素).attr を削除します ( attrname ) // => コレクション
fn。removeclass ()
コレクション要素から className を削除します。
複数のクラスを追加するためのスペースで区切られた className を受け入れます。
引数を与えないと、すべてのクラスが削除されます。
$(要素).class を削除 () // => コレクション $(要素).class を削除 ( クラス名 ) // => コレクション
fn。removeprop()
コレクション要素からプロパティを削除します。
$(要素).プロップを削除します ( プロップname ) // => コレクション
fn。serialize()
フォームに呼び出されると、フォーム データをシリアル化して返します。
$(フォーム).シリアライズ () // => 文字列
fn。show()
要素を表示します。
$(要素).ショー () // => コレクション
fn。siblings()
兄弟要素のコレクションを返します。
$(要素).兄弟姉妹 () // => コレクション $(要素).兄弟姉妹 ( セレクター ) // => コレクション
fn。slice()
最初から最後まで取得した要素を含む新しいコレクションを返します。
$(セレクター).スライス ( 開始, 終わり ) // => コレクション
fn。text()
コレクションの最初の要素の内部テキストを返し、textContent が提供されている場合はテキストを設定します。
$(要素).テキスト () // => テキスト $(要素).テキスト ( テキストコンテンツ ) // => コレクション
fn。toggle ()
要素を非表示または表示します。
$(要素).トグル () // => コレクション $(要素).トグル ( 力 ) // => コレクション
fn。toggleclass ()
要素がすでにクラスを持っているかどうかに基づいて、コレクション要素から className を追加または削除します。
複数のクラスを切り替えるためのスペースで区切られた classNames とオプションを受け入れます force クラスが確実に追加されるようにするためのブール値（boolean）（boolean to ensure classes added ())true)または削除されました()false) を。
$(要素).toggleclass を ( クラス名 ) // => コレクション $(要素).toggleclass を ( クラス名, 力 ) // => コレクション
fn。トリガー()
トリガーはコレクション内の要素にイベントを提供しました。データは 2 番目のパラメータとして渡すことができます。
$(要素).トリガー ( イベント名 ) // => コレクション $(要素).トリガー ( イベントobj ) // => コレクション $(要素).トリガー ( イベント名, データ ) // => コレクション $(要素).トリガー ( イベントobj, データ ) // => コレクション
fn。unwrap()
すべての要素からラッパーを削除します。
$(要素).アンラップ () // => コレクション
fn。val()
入力値を返します。value が提供されている場合、コレクションの value 内のすべての入力を value 引数に設定します。
$(入力).ヴァル () // => 値 $(入力).ヴァル ( 価値 ) // => コレクション
fn。width()
要素の幅を返すか設定します。
$(要素).幅 () // => 番号 $(要素).幅 ( 番号 ) // => コレクション
fn。wrap()
各要素の周りに構造を包みます。
$(要素).包む ( 構造 ) // => コレクション
fn。wrapall()
すべての要素を中心に構造を包みます。
$(要素).すべてラップします ( 構造 ) // => コレクション
fn。wrapinner()
すべての子供たちの周りに構造を包みます。
$(要素).ラップインナー ( 構造 ) // => コレクション
現金方法
これらのメソッドはグローバルからエクスポートされます $ オブジェクト、および は次のように呼び出されます:
$.isarray ( arr ) // => boolean
一部 追加の方法 利用可能ですが 障害者 デフォルトでは。
タイプチェック中公益事業$。isArray () $。guid
$。isFunction () $。each ()
$。isNumeric () $。extend ()
$。isPlainObject () $。parseHTML ()
$。iswindow () $。unique ()
$。guid
固有の数字。
$.ガイド++ // => 番号
$。each ()
配列を反復して呼び出します callback ( index, element ) 各要素に対するメソッド。
オブジェクトを反復して呼び出します callback ( key, value ) 各プロパティでのメソッド。
コールバック関数は、戻ることで反復を早期に終了する場合があります false.
$.それぞれ ( 配列, コールバック ) // => 配列 $.それぞれ ( オブジェクト, コールバック ) // => オブジェクト
$。extend ()
ソース オブジェクトからのプロパティを使用してターゲット オブジェクトを拡張し、場合によっては深く拡張します。
$.延長する ( 対象, ソース ) // => オブジェクト $.延長する ( 本当, 対象, ソース ) // => オブジェクト
$。isArray ()
引数が配列であるかどうかを確認します。
$.isarray ([ 1, 2, 3 ]) // => true
$。isFunction ()
引数が関数であるかどうかを確認します。
機能 エフエヌ () {}; $.は isFunction ( エフエヌ ) // => true
$。isNumeric ()
引数が数値かどうかを確認します。
$.は Numeric ( 57 に記載のものです ) // => true
$。isPlainObject ()
引数がプレーンオブジェクトかどうかを確認します。
$.は PlainObject ( {} ) // => true
$。iswindow ()
引数が Window オブジェクトかどうかを確認します。
$.は IsWindow ( ウィンドウ ) // => true
$。parseHTML ()
HTML 文字列からコレクションを返します。
$.parseHTML ( htmlstring ) // => コレクション
$。unique ()
重複が削除された新しい配列を返します。
$.ユニーク ( 配列 ) // => 配列
貢献
問題が見つかった場合、または機能リクエストがある場合は、 を開いてください 発行 それについて。
プルリクエストを行う場合は、次のことを行う必要があります:リポジトリのクローンを作成する: git clone https://github.com/fabiospampinato/cash.git.
クローンしたリポジトリを入力します: cd cash
依存関係をインストールする: npm install.
変更が行われるたびに、Cashを自動的に再コンパイルします: npm run dev.
テストスイートを開く: npm run test.
必要に応じて、readme を忘れずに更新してください。
ありがとう@kenwheeler, @shshaw, @jamiebuilds, @simeydotme そして、cashの作成に協力したすべての貢献者。
@hisk - 素晴らしいロゴの背後にある「デザイン重視のエンジニア」。
ライセンス
MIT © Fabio Spampinato
Cash は、DOM を操作するための jQuery スタイルの構文を提供する、最新のブラウザ（IE11+) 用の不条理に小さな jQuery 代替手段です。最新のブラウザ機能を利用してコードベースを最小限に抑え、開発者はおなじみのチェーン可能なメソッドをファイル サイズのほんの一部で使用できます。jQuery との 100% 機能パリティは目標ではありませんが、Cash は役に立ち、日常のほとんどのユースケースをカバーします。
比較
サイズ現金ゼプト 1。2。0jQuery Slim 3。4。1縮小されていません 36。5KB 58。7キロ 227 キログラム
縮小 16 キログラム 26 キログラム 71 キログラム
ミニ化&gzipped 6 KB 9。8KB 24。4KB
A 76。6% jquery Slim と比較してサイズが縮小される。より小さなバンドルが必要な場合は、サポートします 部分的なビルド も。
特徴現金ゼプト 1。2。0jQuery Slim 3。4。1古いブラウザをサポートします ❌ ️❌ ✔
モダンなブラウザをサポートします ✔ ️✔ ✔
積極的に維持されています ✔ ❌ ✔
名前付きイベントnamespaced Events ✔ ️❌ ✔
型付きコードベース ✔（TypeScript） ️❌ ❌
TypeScript のタイプ ✔（コードから生成） ⚠️ （definitelytyped 経由） ⚠️ （definitelytyped 経由）
部分的なビルド ✔（個々のメソッドを除外できます） ⚠️ （モジュール全体を除外できます） ⚠️ （モジュール全体を除外できます）
jQuery から移行する場合は、必ずお読みください 移行ガイド.
使用法
から Cash を取得できます jsdelivr そして次のように使用します:
<スクリプト src=」https://cdn。jsdelivr。net/npm/cash-dom/dist/cash。min。js"></スクリプト> <スクリプト> $(機能 () { $(‘html’).クラスを追加します ( ‘dom-loaded’ ); $('<footer>Cash</footer>' が追加されました).追加します ( 文書.体 ); }); </スクリプト>
現金もご利用いただけます npm として cash-dom パッケージ:
npm install --save cash-dom
その後、次のように使用できることを:
インポート $ から 「キャッシュダム」 を; $(機能 () { $(‘html’).addclass ( ‘dom-loaded’ ); $('<footer>Cash</footer>' が追加されました).追加します ( 文書.体 ); });
ドキュメンテーション
現金はあなたにクエリセレクタを与えます、 収集方法 そしていくつか ライブラリメソッド. 。API についてさらに詳細が必要な場合は、チェックしてください jquery の, 、jquery が提供するすべてを実装するわけではありませんが、実装するほとんどすべてが jQuery と互換性があるはずです。現金はカスタムメソッドで拡張できます。方法をお読みください ここ.
$()
これがCashの主なセレクター方法です。ノードのアクション可能なコレクションを返します。
関数が提供されている場合、DOM の準備が整うと関数は実行されます。
$( セレクター [, 要素] ) // => collection, using `element` as the context $( セレクター [, コレクション] ) // => collection, `collection` をコンテキストとして使う $(ノード) // => コレクション $(ノードリスト) // => コレクション $(htmlstring) // => コレクション $(コレクション) // => 自己 $(機能 () {}) // => ドキュメント準備完了コールバック
収集方法
コレクション プロトタイプからのこれらの方法 ()$。fnでコレクションを作成すると、 がある $() そして次のように呼ばれます:
$(要素).クラスを追加します ( クラス名 ) // => コレクション
一部 追加の方法 は利用可能ですが、デフォルトでは無効になっています。
属性コレクションCSSデータ寸法効果fn。addclass () fn。add() fn。css() fn。data() fn。height() fn。hide()
fn。attr() fn。each() fn。innerheight() fn。show()
fn。hasclass() fn。eq() fn。innerwidth () fn。toggle ()
fn。prop() fn。フィルター() fn。outerheight()
fn。removeattr() fn。ファースト() fn。outerwidth ()
fn。removeclass () fn。get() fn。width()
fn。removeprop() fn。index()
fn。toggleclass () fn。last()
fn。map()
fn。slice()
イベントフォーム操作オフセットトラバーサルfn。off() fn。serialize() fn。after() fn。オフセット() fn。children()
fn。on() fn。val() fn。append() fn。offsetparent() fn。closest()
fn。one() fn。appendto() fn。position() fn。contents()
fn。ready() fn。before() fn。find()
fn。トリガー() fn。clone() fn。has()
fn。detach() fn。is()
fn。empty() fn。next()
fn。html() fn。nextall()
fn。insertafter () fn。nextuntil()
fn。insertbefore () fn。not()
fn。プレペンド() fn。parent()
fn。prependto() fn。parents()
fn。remove() fn。parentsuntil()
fn。replaceall() fn。prev()
fn。replacewith() fn。prevall()
fn。text() fn。prevuntil()
fn。unwrap() fn。siblings()
fn。wrap()
fn。wrapall()
fn。wrapinner()
$。fn
コレクションの主なプロトタイプ。すべてのコレクションにメソッドを追加することで、プラグインを使用して Cash を拡張できます。
$.エフエヌ // => Cash。prototype $.エフエヌ.私の方法 = 機能 () {}; // すべてのコレクションにカスタムメソッドを追加 $.エフエヌ.延長する ( オブジェクト ); // プロトタイプに複数のメソッドを追加します
fn。add()
末尾に element（s）を追加した新しいコレクションを返します。
$(要素).追加 ( 要素 ) // => コレクション $(要素).追加 ( セレクター ) // => コレクション $(要素).追加 ( コレクション ) // => コレクション
fn。addclass ()
を追加します className コレクション内の各要素へのクラス。
スペース分離を受け入れます className 複数のクラスを追加する場合。
$(要素).クラスを追加します ( クラス名 ) // => コレクション
fn。after()
コレクションの後にコンテンツまたは要素を挿入します。
$(要素).後 ( 要素 ) // => コレクション $(要素).後 ( htmlstring ) // => コレクション $(要素).後 ( コンテンツ [, コンテンツ] ) // => コレクション
fn。append()
コレクション内の各要素にコンテンツまたは要素を追加します。
$(要素).添付 ( 要素 ) // => コレクション $(要素).添付 ( htmlstring ) // => コレクション $(要素).添付 ( コンテンツ [, コンテンツ] ) // => コレクション
fn。appendto()
コレクション内の要素をターゲット要素に追加します（複数可）。
$(要素).追加します ( 要素 ) // => コレクション
fn。attr()
なく attrValue, 、コレクションの最初の要素の属性値を返します。
と attrValue, 、コレクションの各要素の属性値を設定します。
$(要素).アトル ( attrname ) //値 $(要素).アトル ( attrname, attrvalue ) // => コレクション $(要素).アトル ( オブジェクト ) // => コレクション
fn。before()
コレクションの前にコンテンツまたは要素を挿入します。
$(要素).前 ( 要素 ) // => コレクション $(要素).前 ( htmlstring ) // => コレクション $(要素).前 ( コンテンツ [, コンテンツ] ) // => コレクション
fn。children()
セレクタを指定しないと、子要素のコレクションが返されます。
セレクターでは、セレクターに一致する子要素を返します。
$(要素).子供 () // => コレクション $(要素).子供 ( セレクター ) // => コレクション
fn。closest()
DOM ツリー上で最も近い一致するセレクターを返します。
$(要素).最も近い ( セレクター ) // => コレクション
fn。contents()
テキスト ノードやコメント ノードなど、一致する要素のセット内の各要素の子を取得します。
フレンドリーな iframe で要素を選択するのに役立ちます。
$(‘iframe’).内容 ().見つけ ( ‘*’ ) // => コレクション
fn。clone()
クローンされた要素を含むコレクションを返します。
$(要素).クローン () // => コレクション
fn。detach()
オプションでセレクターに一致するコレクション要素を DOM から削除します。
$(要素).切り離します () // => コレクション $(要素).切り離します ( セレクター ) // => コレクション
fn。css()
プロパティのみが指定されたときに CSS プロパティ値を返します。
プロパティと値が提供されるときに CSS プロパティを設定します。
オブジェクトが供給されたときに複数のプロパティを設定します。
ユーザーのブラウザに必要な場合、プロパティは自動再修正されます。
$(要素).css し ( 財産 ) // => 値 $(要素).css し ( 財産, 価値 ) // => コレクション $(要素).css し ( オブジェクト ) // => コレクション
fn。data()
引数なしで、すべてのオブジェクトをマッピングして返します data-* 彼らの価値観の属性。
a と key, 、対応する の値を返す data-* 属性。
両方aで key そして value, 、対応する の値を設定します data-* 属性 to value.
オブジェクトの供給時に複数のデータを設定できます。
$(要素).データ () // => オブジェクト $(要素).データ ( キー ) // => 値 $(要素).データ ( キー, 価値 ) // => コレクション $(要素).データ ( オブジェクト ) // => コレクション
fn。each()
とコレクションを反復します callback ( index, element ). 。コールバック関数は、戻ることで反復を早期に終了する場合があります false.
$(要素).それぞれ ( コールバック ) // => コレクション
fn。empty()
要素の内装マークアップを空にします。
$(要素).空 () // => コレクション
fn。eq()
要素をインデックスに持つコレクションを返します。
$(要素).eq（エキュー） ( インデックス ) // => コレクション
fn。extend()
Cash コレクション プロトタイプにプロパティを追加します。
$.エフエヌ.延長する ( オブジェクト ) // => オブジェクト
fn。フィルター()
フィルターセレクター/メソッドを適用した結果のコレクションを返します。
$(要素).フィルター ( セレクター ) // => コレクション $(要素).フィルター ( 機能 ( インデックス, 要素 ) {} ) // => コレクション
fn。find()
コレクションの最初の要素からセレクターマッチの子孫を返します。
$(要素).見つけ ( セレクター ) // => コレクション
fn。ファースト()
最初の要素のみを含むコレクションを返します。
$(要素).まず () // => コレクション
fn。get()
インデックスの要素を返すか、すべての要素を返します。
$(要素).取得 ( インデックス ) // => domNode $(要素).取得 () // => domNode[]
fn。has()
一致する要素のセットを、セレクターまたは DOM 要素に一致する子孫を持つ要素に減らします。
$(要素).持っている ( セレクター ) // => コレクション $(要素).持っている ( 要素 ) // => コレクション
fn。hasclass()
コレクション内の要素に が含まれているかどうかを確認したブール値を返します className 属性。
$(要素).ハスクラス ( クラス名 ) // => boolean
fn。height()
要素の高さを返すか設定します。
$(要素).高さ () // => 整数 $(要素).高さ ( 番号 ) // => コレクション
fn。hide()
要素を隠す。
$(要素).隠す () // => コレクション
fn。html()
コレクションの最初の要素の HTML テキストを返し、HTML が提供されている場合はそれを設定します。
$(要素).html () // => HTML テキスト $(要素).html ( htmlstring ) // => HTML テキスト
fn。index()
要素またはセレクターが提供されていない場合は、親要素のインデックスを返します。要素またはセレクター内のインデックスを返します（そうであれば）。
$(要素).インデックス () // => 整数 $(要素).インデックス ( 要素 ) // => 整数
fn。innerheight()
要素 + パディングの高さを返します。
$(要素).内部の高さ () // => 整数
fn。innerwidth ()
要素 + パディングの幅を返します。
$(要素).内幅 () // => 整数
fn。insertafter ()
指定した要素の後にコレクションを挿入します。
$(要素).後挿入 ( 要素 ) // => コレクション
fn。insertbefore ()
指定した要素の前にコレクションを挿入します。
$(要素).前挿入 ( 要素 ) // => コレクション
fn。is()
提供されたセレクター、要素、またはコレクションがコレクション内の要素と一致するかどうかを返します。
$(要素).は ( セレクター ) // => boolean
fn。last()
最後の要素のみを含むコレクションを返します。
$(要素).最後 () // => コレクション
fn。map()
新しいコレクションを返し、各要素を でマッピングします callback ( index, element ).
$(セレクター).地図 ( コールバック ) // => コレクション
fn。next()
次の隣接要素を返します。
$(要素).次 () // => コレクション $(要素).次 ( セレクター ) // => コレクション
fn。nextall()
次の要素をすべて返します。
$(要素).次すべて () // => コレクション $(要素).次すべて ( セレクター ) // => コレクション
fn。nextuntil()
指定されたセレクターが一致するまで、次の要素をすべて返します。
$(要素).次まで ( セレクター ) // => コレクション $(要素).次まで ( セレクター, filterselector ) // => コレクション
fn。not()
コレクション/セレクターで誤った一致によってコレクションをフィルターします。
$(要素).ない ( セレクター ) // => コレクション $(要素).ない ( コレクション ) // => コレクション
fn。off()
イベントリスナーをコレクション要素から削除します。
スペース分離を受け入れます eventName 複数のイベントリスナを削除するため。
引数なしで呼び出された場合は、すべてのイベントリスナーを削除します。
$(要素).オフ ( イベント名, イベントハンドラー ) // => コレクション $(要素).オフ ( イベント名 ) // => コレクション $(要素).オフ ( イベントマップ ) // => コレクション $(要素).オフ () // => コレクション
fn。オフセット()
ドキュメントに対するコレクション内の最初の要素の座標を取得します。
$(要素).オフセット () // => オブジェクト
fn。offsetparent()
配置されている最初の要素の祖先を取得します。
$(要素).オフセット親 () // => コレクション
fn。on()
コレクション要素にイベントリスナーを追加します。
スペース分離を受け入れます eventName 複数のイベントを聴くための。
デリゲートが指定された場合、イベントはデリゲートされます。
$(要素).オン ( イベントマップ ) // => コレクション $(要素).オン ( イベント名, イベントハンドラー ) // => コレクション $(要素).オン ( イベント名, 委任, イベントハンドラー ) // => コレクション
fn。one()
要素ごとに 1 回だけトリガーされるコレクション要素にイベント リスナーを追加します。
スペース分離を受け入れます eventName 複数のイベントを聴くための。
デリゲートが指定された場合、イベントはデリゲートされます。
$(要素).一つ ( イベント名, イベントハンドラー ) // => コレクション $(要素).一つ ( イベント名, 委任, イベントハンドラー ) // => コレクション
fn。outerheight()
要素の外側の高さを返します。場合はマージンが含まれます includeMargings が true に設定されています。
$(要素).outerheight の () // => 整数 $(要素).outerheight の ( マージンを入れてください ) // => 整数
fn。outerwidth ()
要素の外側の幅を返します。場合はマージンが含まれます includeMargings が true に設定されています。
$(要素).outerwidth の () // => 整数 $(要素).outerwidth の ( マージンを入れてください ) // => 整数
fn。parent()
要素の親である要素のコレクションを返します。
$(要素).親 () // => コレクション $(要素).親 ( セレクター ) // => コレクション
fn。parents()
要素の親である要素のコレクションを返します。オプションでセレクターによるフィルタリングも可能です。
$(要素).両親 () // => コレクション $(要素).両親 ( セレクター ) // => コレクション
fn。parentsuntil()
指定されたセレクターが一致するまで、要素の親である要素のコレクションを返します。オプションでセレクターによるフィルタリングも可能です。
$(要素).両親まで ( セレクター ) // => コレクション $(要素).両親まで ( セレクター, filterselector ) // => コレクション
fn。position()
コレクション内の最初の要素の座標を、その要素に対して相対的に取得します offsetParent.
$(要素).位置 () // => オブジェクト
fn。プレペンド()
コレクション内の各要素にコンテンツまたは要素を追加します。
$(要素).前置 ( 要素 ) // => コレクション $(要素).前置 ( htmlstring ) // => コレクション $(要素).前置 ( コンテンツ [, コンテンツ] ) // => コレクション
fn。prependto()
コレクション内の要素をターゲット要素（複数可）に準備します。
$(要素).先頭へ ( 要素 ) // => コレクション
fn。prev()
前の隣接要素を返します。
$(要素).プレブ () // => コレクション $(要素).プレブ ( セレクター ) // => コレクション
fn。prevall()
前の要素をすべて返します。
$(要素).前へすべて () // => コレクション $(要素).前へすべて ( セレクター ) // => コレクション
fn。prevuntil()
指定されたセレクターが一致するまで、以前の要素をすべて返します。
$(要素).前へまで ( セレクター ) // => コレクション $(要素).前へまで ( セレクター, filterselector ) // => コレクション
fn。prop()
プロパティのみが指定されたときにプロパティ値を返します。
プロパティと値が供給されるときにプロパティを設定し、オブジェクトが供給されるときに複数のプロパティを設定します。
$(要素).プロップ ( 財産 ) // => プロパティ値 $(要素).プロップ ( 財産, 価値 ) // => コレクション $(要素).プロップ ( オブジェクト ) // => コレクション
fn。ready()
DOMContentLoaded でコールバック メソッドを呼び出します。
$(文書).準備完了 ( コールバック ) // => コレクション/スパン
fn。remove()
オプションでセレクターに一致するコレクション要素を DOM から削除し、すべてのイベント リスナーを削除します。
$(要素).除去 () // => コレクション $(要素).除去 ( セレクター ) // => コレクション
fn。replaceall()
これはと似ています fn。replacewith(), 、しかし、ソースとターゲットが逆になっています。
$(要素).すべて置換します ( コンテンツ ) // => コレクション
fn。replacewith()
コレクション要素を、提供された新しいコンテンツに置き換えます。
$(要素).置き換えます ( コンテンツ ) // => コレクション
fn。removeattr()
コレクション要素から属性を削除します。
複数の属性を削除するためのスペースで区切られた attrName を受け入れます。
$(要素).attr を削除します ( attrname ) // => コレクション
fn。removeclass ()
コレクション要素から className を削除します。
複数のクラスを追加するためのスペースで区切られた className を受け入れます。
引数を与えないと、すべてのクラスが削除されます。
$(要素).class を削除 () // => コレクション $(要素).class を削除 ( クラス名 ) // => コレクション
fn。removeprop()
コレクション要素からプロパティを削除します。
$(要素).プロップを削除します ( プロップname ) // => コレクション
fn。serialize()
フォームに呼び出されると、フォーム データをシリアル化して返します。
$(フォーム).シリアライズ () // => 文字列
fn。show()
要素を表示します。
$(要素).ショー () // => コレクション
fn。siblings()
兄弟要素のコレクションを返します。
$(要素).兄弟姉妹 () // => コレクション $(要素).兄弟姉妹 ( セレクター ) // => コレクション
fn。slice()
最初から最後まで取得した要素を含む新しいコレクションを返します。
$(セレクター).スライス ( 開始, 終わり ) // => コレクション
fn。text()
コレクションの最初の要素の内部テキストを返し、textContent が提供されている場合はテキストを設定します。
$(要素).テキスト () // => テキスト $(要素).テキスト ( テキストコンテンツ ) // => コレクション
fn。toggle ()
要素を非表示または表示します。
$(要素).トグル () // => コレクション $(要素).トグル ( 力 ) // => コレクション
fn。toggleclass ()
要素がすでにクラスを持っているかどうかに基づいて、コレクション要素から className を追加または削除します。
複数のクラスを切り替えるためのスペースで区切られた classNames とオプションを受け入れます force クラスが確実に追加されるようにするためのブール値（boolean）（boolean to ensure classes added ())true)または削除されました()false) を。
$(要素).toggleclass を ( クラス名 ) // => コレクション $(要素).toggleclass を ( クラス名, 力 ) // => コレクション
fn。トリガー()
トリガーはコレクション内の要素にイベントを提供しました。データは 2 番目のパラメータとして渡すことができます。
$(要素).トリガー ( イベント名 ) // => コレクション $(要素).トリガー ( イベントobj ) // => コレクション $(要素).トリガー ( イベント名, データ ) // => コレクション $(要素).トリガー ( イベントobj, データ ) // => コレクション
fn。unwrap()
すべての要素からラッパーを削除します。
$(要素).アンラップ () // => コレクション
fn。val()
入力値を返します。value が提供されている場合、コレクションの value 内のすべての入力を value 引数に設定します。
$(入力).ヴァル () // => 値 $(入力).ヴァル ( 価値 ) // => コレクション
fn。width()
要素の幅を返すか設定します。
$(要素).幅 () // => 番号 $(要素).幅 ( 番号 ) // => コレクション
fn。wrap()
各要素の周りに構造を包みます。
$(要素).包む ( 構造 ) // => コレクション
fn。wrapall()
すべての要素を中心に構造を包みます。
$(要素).すべてラップします ( 構造 ) // => コレクション
fn。wrapinner()
すべての子供たちの周りに構造を包みます。
$(要素).ラップインナー ( 構造 ) // => コレクション
現金方法
これらのメソッドはグローバルからエクスポートされます $ オブジェクト、および は次のように呼び出されます:
$.isarray ( arr ) // => boolean
一部 追加の方法 利用可能ですが 障害者 デフォルトでは。
タイプチェック中公益事業$。isArray () $。guid
$。isFunction () $。each ()
$。isNumeric () $。extend ()
$。isPlainObject () $。parseHTML ()
$。iswindow () $。unique ()
$。guid
固有の数字。
$.ガイド++ // => 番号
$。each ()
配列を反復して呼び出します callback ( index, element ) 各要素に対するメソッド。
オブジェクトを反復して呼び出します callback ( key, value ) 各プロパティでのメソッド。
コールバック関数は、戻ることで反復を早期に終了する場合があります false.
$.それぞれ ( 配列, コールバック ) // => 配列 $.それぞれ ( オブジェクト, コールバック ) // => オブジェクト
$。extend ()
ソース オブジェクトからのプロパティを使用してターゲット オブジェクトを拡張し、場合によっては深く拡張します。
$.延長する ( 対象, ソース ) // => オブジェクト $.延長する ( 本当, 対象, ソース ) // => オブジェクト
$。isArray ()
引数が配列であるかどうかを確認します。
$.isarray ([ 1, 2, 3 ]) // => true
$。isFunction ()
引数が関数であるかどうかを確認します。
機能 エフエヌ () {}; $.は isFunction ( エフエヌ ) // => true
$。isNumeric ()
引数が数値かどうかを確認します。
$.は Numeric ( 57 に記載のものです ) // => true
$。isPlainObject ()
引数がプレーンオブジェクトかどうかを確認します。
$.は PlainObject ( {} ) // => true
$。iswindow ()
引数が Window オブジェクトかどうかを確認します。
$.は IsWindow ( ウィンドウ ) // => true
$。parseHTML ()
HTML 文字列からコレクションを返します。
$.parseHTML ( htmlstring ) // => コレクション
$。unique ()
重複が削除された新しい配列を返します。
$.ユニーク ( 配列 ) // => 配列
貢献
問題が見つかった場合、または機能リクエストがある場合は、 を開いてください 発行 それについて。
プルリクエストを行う場合は、次のことを行う必要があります:リポジトリのクローンを作成する: git clone https://github.com/fabiospampinato/cash.git.
クローンしたリポジトリを入力します: cd cash
依存関係をインストールする: npm install.
変更が行われるたびに、Cashを自動的に再コンパイルします: npm run dev.
テストスイートを開く: npm run test.
必要に応じて、readme を忘れずに更新してください。
ありがとう@kenwheeler, @shshaw, @jamiebuilds, @simeydotme そして、cashの作成に協力したすべての貢献者。
@hisk - 素晴らしいロゴの背後にある「デザイン重視のエンジニア」。
ライセンス
MIT © Fabio Spampinato
コメント
コメントを投稿