jQuery での API、イベント、および複数ライブラリの共存についての簡単な紹介

この記事では、jQuery での API、イベント、および複数のライブラリの共存について簡単に説明します。必要な方は参考にしていただければ幸いです。

API

prop() メソッドと attr()

prop() メソッドが使用されます変更は、HTML 属性の変更ではなく、DOM 要素の動的状態に影響します。例: 無効、チェック済み。

val()

フォーム要素 (input、select、textarea) の値を設定または返します。

width() および height()

一致する要素の幅と高さの値を設定または取得します。戻り値は数値 (単位なし) です。 , 一方、 $(selector ).css('width') は文字列 (単位付き) を返します。

offset()

Get: 戻り値 {left: Number, top: Number} はドキュメントに対する相対位置です。
設定: 要素が位置決めされていない場合 (つまり、位置: 静的)、相対位置に変更されます。

position()

位置指定を使用して、最も近い親要素を基準とした一致する要素の位置を取得します (つまり、位置は静的ではありません) {左: Number , 上:数字}は設定できません。

scrollLeft() とscrollTop()。

要素の水平位置と垂直位置を数値型で取得または設定します。

垂直スクロール バーの位置は、スクロール可能領域の表示領域の上にある非表示領域の高さです。

スクロール バーが上部でスクロールしない場合、または現在の要素にスクロール バーがない場合、この距離は 0 です。

#Event

イベント バインディング binding()、delegate()、および on() 1.7 以降、bind() は on() に置き換えられ、複数のイベントをバインドします: $(selector).on('dblclick contextment', function(){}); on() は zepto とも互換性があります。ただし、両方の方法の欠点は、バインドされる要素がドキュメント内に存在する必要があることです。

構文: $(selector).on('events'[, 'selector'][, data], handler); 最初のパラメータには、標準イベント名またはカスタム イベント (トリガーによってトリガーされる) を指定できます。 、2 番目と 3 番目のパラメータは省略できます。2 番目のパラメータは一致する要素の子孫要素、3 番目のパラメータは処理関数に渡されるデータであり、関数内のevent.data を通じて受信されます。

delegate() は、動的に作成された要素をサポートします。

構文: $('p').delegate('p', 'mousemove', function(){}); マウスムーブ イベントを div の下の p にバインドします (今後生成されるものを含む)。

イベントのバインド解除 unbind()、undelegate()、および off()

パラメータを渡さずに、一致する要素のすべてのイベントのバインドを解除します。それ以外の場合は、指定されたパラメータ イベントのバインドを解除します。

$(selector).off('click', '**'); すべてのエージェントのクリック イベントのバインドが解除されますが、要素自体のイベントは解除されません。

イベントトリガーtrigger()とtriggerHandler()

単純なトリガー: $(selector).click();

trigger()はイベントをトリガーし、ブラウザの動作をトリガーします。 $(selector).trigger("click");

triggerHandler() はイベント応答メソッドをトリガーしますが、ブラウザーの動作はトリガーしません。 $(selector).triggerHandler("focus");

イベント オブジェクトevent

event.data イベント ハンドラーに渡される追加データ

イベント.currentTarget は、現在の DOM オブジェクトを参照する this と同等です。

event.target はイベント ソースをトリガーしますが、必ずしもこれと同じである必要はありません (通常はイベント デリゲートに表示されます)

event。 type イベント タイプ

event.どのマウス ボタン タイプ: 左 1、中 2、右 3 またはキーボード コード

event.keyCode キーボード コード

event.pageX マウスはドキュメントの左端の位置を基準とします。

チェーン プログラミング

原則: これを返します。

通常、設定操作のみが可能です。操作が連鎖され、対応する戻り値が取得操作中に返されます。this の値は返されません。

end() 現在のチェーンの最新のフィルタリング操作を終了し、一致する要素の前の状態を返します。

複数のライブラリが共存します

jQuery占用了$ 和jQuery这两个变量，如果同一个页面引用了jQuery库，还引用了其他库或者其他版本的jQuery也用的了$或jQuery这个变量，为了保证每个库都能正常使用，就需要让jQuery交出变量的控制权。
$.noConflict(); 交出$
$.noConflict(true); 交出$ 和 jQuery

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    console.log($.fn.jquery); // 3.2.1
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict();
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict(true);
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 2.2.4
</script>

以上がjQuery での API、イベント、および複数ライブラリの共存についての簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。