jQueryを使用するためのヒント

jquery の誕生により、フロントエンドの初心者でも Web インタラクションを簡単に操作できるようになりました。

今日はjqueryの使用に関するヒントをいくつか紹介します。

jquery は、ハイパーリンクなどのブラウザのデフォルトの動作をブロックします。

$("a").click(function(event){
  event.preventDefault();
});

Jqueryはキャリッジリターンイベントをトリガーします

 $(function () {
    $('#target').bind('keyup', function (event) {
       if (event.keyCode == 13) {
          alert("Hello~");
       }
   });
});

selectの値を取得します

jqueryはテキストボックスの値を取得するのと同じようにselectの値を取得できます: $('select').val();

テキストをコピーします

window.clipboardData .setData('text', text); を使用します

テキストテキストをシステムクリップボードに入れて、テキストコピー機能を実現できます。ただし、この方法は IE でのみサポートされています。

Google ChromeとFoxfireはサポートされていません。したがって、これを使用するときは、まずブラウザーが次のことをサポートしているかどうかを判断する必要があります。

if (window.clipboardData) {  window.clipboardData.setData('text', text); }

テキストの選択

入力またはテキストエリアのテキスト選択のために、jquery は単純な関数 select() を提供します。ボックスが表示され、フォーカスがあります。

$("#txtSample").focus().select();　　//现货的焦点，然后选择文本

マウス イベント

マウスオーバーとマウスアウト、マウスエンターとマウスリーブ; これら 2 つのイベント セットは、マウスが要素の内外に移動するとトリガーされます。

それらの最大の違いは、マウスオーバーとマウスアウト バブルの場合です。子要素に移動すると、このイベント

もトリガーされ、mouseenter と Mouseleave はバブルしません。

この違いは非常に重要です!

jQuery オブジェクトの拡張

    $.extend(target,prop1,propN)：

オブジェクトを 1 つ以上の他のオブジェクトで拡張し、拡張されたオブジェクトを返します。これはjqueryで実装された継承メソッドです。例:

    $.extend(settings, options);

設定とオプションをマージし、マージした結果を設定に返します。これは、オプションが設定を継承し、継承した結果を設定に保存するのと同じです。

    var settings = $.extend({}, defaults, options);

デフォルトとオプションをマージし、デフォルトの内容を上書きせずにマージした結果を設定に戻します。複数のパラメータを持つことができます (複数の項目をマージして返す)

jQuery は配列内の項目を削除します

ヒント 7 で説明したように、配列内の要素を削除するには $.grep() メソッドを使用します。

var array = ['a', 'b', 'c']; 
$.grap(array, function(value, index){return value=='b';}, true);

上記のコードは、配列内の要素 'b' を削除します。

jQuery 配列処理

$.each(obj, fn);

obj を走査します。obj は走査する配列またはオブジェクトです。fn は処理関数で、オプションのパラメーターは var fn = function(index, content){} などのインデックスとコンテンツです。トラバースを終了する必要がある場合は false を返してください。他の戻り値は無視されます。

このメソッドは、JSON データ オブジェクトを処理するために使用できます。

$.inArray(obj, array);

obj オブジェクトが配列配列に含まれているかどうかを判断し、存在する場合は対応する添字を返します。存在しない場合は -1 を返します。

$.map(array, fn);

ある配列の要素を別の配列に変換します。 array は変換する必要がある配列、fn は処理関数です。このメソッドの戻り値は、新しく処理された配列です。

$.merge(array1, array2);

2 つの配列をマージし、array2 の内容を array1 にコピーし、結果を返します。マージ メソッドでは重複は削除されません。重複を削除するには $.unique() を使用する必要があります。

$.unique(array);

配列から重複を削除します。

$.grep(array, fn, [invert]);

配列内の要素をフィルターします。このメソッドは、配列配列内の各オブジェクトに対して fn メソッドを呼び出します。invert オプションのパラメーターが false であるか、設定されていない場合、関数はフィルター関数によって返される配列を返します。 true 要素、「invert」が true の場合、フィルター関数で false を返す要素のセットが返されます。

このメソッドは、配列内の要素を削除するためによく使用されます

文字列の先頭と末尾のスペースを削除します

JS には、文字列の両方のセクションにある null 文字を削除するためのトリム関数が提供されていません。 jQuery で関数が拡張されました:

$ .trim(str): 文字列の両端の空白文字を削除します。

例: $.trim(" hello, how are you? "); //Return "hello, how are you?"

イベントの追加と削除

jQuery オブジェクトにイベントを追加すると非常に便利です:

$('#btn').click(fn);
$('#btn').bind('click', fn);

jQuery は、オブジェクトのイベントに複数のハンドラーを提供するメカニズムを提供します。クリック イベント ハンドラーを追加した後、前のハンドラーを上書きせずに追加を続けることができます。

unbind メソッドが呼び出されたときにバインドされたイベント サブスクリプションを削除します:

$('#btn').unbind();　　　　//将会移除所有的事件订阅
$('#btn').unbind('click')　　//将会移除click事件的订阅

jQuery オブジェクト コレクション内の項目を取得します

取得した要素コレクションについては、eq または get を使用して項目 (インデックスで指定) を取得できます (n ) メソッドまたはインデックス番号の取得では、eq は jquery オブジェクトを返しますが、get(n) と Index は dom 要素オブジェクトを返すことに注意してください。 jquery オブジェクトの場合は jquery メソッドのみを使用でき、dom オブジェクトの場合は dom メソッドのみを使用できます。たとえば、3 番目の

要素のコンテンツを取得したいとします。メソッドは 2 つあります:

$("div").eq(2).html(); 　　　　 //调用jquery对象的方法
$("div").get(2).innerHTML; 　　//调用dom的方法属性

jQuery オブジェクトと Dom の変換

Dom オブジェクトは、$(dom) を通じて jQuery オブジェクトに変換できます。例:

$(document.getElementById('#myDiv'))

jQueryオブジェクト それ自体はインデックスであり、添字を通じて Dom オブジェクトを取得できます。たとえば、get() メソッドを使用して Dom オブジェクトを取得することもできます。 js ファイルの: ///