Jquery-utilities

提供：Dev Guides
移動先:案内、検索

jQuery-ユーティリティ

Jqueryは、$（名前空間）の形式でサーバーユーティリティを提供します。 これらのメソッドは、プログラミングタスクを完了するのに役立ちます。ユーティリティメソッドのいくつかを以下に示します。

$ .trim（）

$ .trim（）は、先頭および末尾の空白を削除するために使用されます 

$.trim( "    lots of extra whitespace    " );

$ .each（）

$ .each（）は、配列とオブジェクトを反復処理するために使用されます 

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
   console.log( "element " + idx + " is " + val );
});

$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
   console.log( k + " : " + v );
});

$ .inArray（）

each() can be called on a selection to iterate over the elements contained in the selection. .each(), not $.each(), should be used for iterating over elements in a selection..

$ .inArray（）を使用して、配列の値のインデックスを返します。値が配列にない場合は-1を返します。 

var myArray = [ 1, 2, 3, 5 ];

if ( $.inArray( 4, myArray ) !== -1 ) {
   console.log( "found it!" );
}

$ .extend（）

$ .extend（）は、後続のオブジェクトのプロパティを使用して最初のオブジェクトのプロパティを変更するために使用されます。 

var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };

var newObject = $.extend( firstObject, secondObject );

console.log( firstObject.foo );
console.log( newObject.foo );

$ .proxy（）

$ .proxy（）は、指定されたスコープ内で常に実行される関数を返します。つまり、渡された関数内でthisの意味を2番目の引数に設定します 

var myFunction = function() {
   console.log( this );
};

var myObject = {
   foo: "bar"
};

myFunction();//window

var myProxyFunction = $.proxy( myFunction, myObject );

myProxyFunction();

$ .browser

$ .browserは、ブラウザに関する情報を提供するために使用されます 

jQuery.each( jQuery.browser, function( i, val ) {
   $( "<div>" + i + " : <span>" + val + "</span>" )
   .appendTo( document.body );
});

$ .contains（）

$ .contains（）は、2番目の引数で提供されるDOM要素が最初の引数で提供されるDOM要素の子孫である場合、直接の子であるか、より深くネストされているかにかかわらず、trueを返します。 

$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );

$ .data（）

$ .data（）は、データに関する情報を提供するために使用されます 

<html lang = "en">
   <head>
      <title>jQuery.data demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>

   <body>
      <div>
         The values stored were <span></span>
            and <span></span>
      </div>

      <script>
         var div = $( "div" )[ 0 ];

         jQuery.data( div, "test", {
            first: 25,
            last: "tutorials"
         });

         $( "span:first" ).text( jQuery.data( div, "test" ).first );
         $( "span:last" ).text( jQuery.data( div, "test" ).last );
      </script>
   </body>
</html>

出力は次のようになります 

The values stored were 25 and tutorials

$ .fn.extend（）

$ .fn.extend（）はjQueryプロトタイプを拡張するために使用されます 

<html lang = "en">
   <head>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>

   <body>
      <label><input type = "checkbox" name = "android">
         Android</label>
      <label><input type = "checkbox" name = "ios"> IOS</label>

      <script>
         jQuery.fn.extend({

            check: function() {
               return this.each(function() {
                  this.checked = true;
               });
            },
            uncheck: function() {
               return this.each(function() {
                  this.checked = false;
               });
            }
         });

        //Use the newly created .check() method
         $( "input[type = 'checkbox']" ).check();

      </script>
   </body>
</html>

それは以下に示すように出力を提供します-

$ .isWindow（）

$ .isWindow（）はウィンドウを認識するために使用されます 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.isWindow demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>

   <body>
      Is 'window' a window? <b></b>

      <script>
         $( "b" ).append( "" + $.isWindow( window ) );
      </script>
   </body>
</html>

それは以下に示すように出力を提供します-

$ .now（）

現在の時刻を表す数値を返します 

(new Date).getTime()

$ .isXMLDoc（）

$ .isXMLDoc（）は、ファイルがxmlかどうかを確認します 

jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )

$ .globalEval（）

$ .globalEval（）は、javascriptをグローバルに実行するために使用されます 

function test() {
   jQuery.globalEval( "var newVar = true;" )
}
test();

$ .dequeue（）

$ .dequeue（）は、キュー内の次の関数を実行するために使用されます 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.dequeue demo</title>

      <style>
         div {
            margin: 3px;
            width: 50px;
            position: absolute;
            height: 50px;
            left: 10px;
            top: 30px;
            background-color: green;
            border-radius: 50px;
         }
         div.red {
            background-color: blue;
         }
      </style>

      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>

   <body>
      <button>Start</button>
      <div></div>

      <script>
         $( "button" ).click(function() {
            $( "div" )
            .animate({ left: '+ = 400px' }, 2000 )
            .animate({ top: '0px' }, 600 )

            .queue(function() {
               $( this ).toggleClass( "red" );
               $.dequeue( this );
            })

            .animate({ left:'10px', top:'30px' }, 700 );
         });
      </script>
   </body>
</html>

それは以下に示すように出力を提供します-

「https://www.finddevguides.com/index.php?title=Jquery-utilities&oldid=15528」から取得
Powered by MediaWiki