jQuery-基本

jQueryは、JavaScript機能を使用して構築されたフレームワークです。そのため、JavaScriptで利用可能なすべての機能とその他の機能を使用できます。この章では、最も基本的な概念を説明しますが、jQueryで頻繁に使用されます。

ひも

JavaScriptの文字列は、1つまたは複数の文字を含まない不変オブジェクトです。以下は、JavaScript文字列の有効な例です-

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

番号

JavaScriptの数値は、倍精度の64ビット形式のIEEE 754値です。それらは文字列のように不変です。 JavaScript番号の有効な例は次のとおりです-

5350
120.27
0.26

ブール値

JavaScriptのブール値は、 true または false のいずれかです。数値がゼロの場合、デフォルトはfalseです。空の文字列のデフォルトがfalseの場合。

JavaScriptブールの有効な例を次に示します-

true     //true
false    //false
0        //false
1        //true
""       //false
"hello"  //true

オブジェクト

JavaScriptはオブジェクトの概念を非常によくサポートしています。次のようにオブジェクトリテラルを使用してオブジェクトを作成できます-

var emp = {
   name: "Zara",
   age: 10
};

次のようにドット表記を使用して、オブジェクトのプロパティを読み書きできます-

//Getting object properties
emp.name //==> Zara
emp.age  //==> 10

//Setting object properties
emp.name = "Daisy" //<== Daisy
emp.age  =  20     //<== 20

配列

次のように配列リテラルを使用して配列を定義できます-

var x = [];
var y = [1, 2, 3, 4, 5];

配列には、反復に役立つ length プロパティがあります-

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
  //Do something with x[i]
}

関数

JavaScriptの関数は、名前付きまたは匿名のいずれかです。名前付き関数は、次のように_function_キーワードを使用して定義できます-

function named(){
  //do some stuff here
}

無名関数は、通常の関数と同様の方法で定義できますが、名前はありません。

匿名関数は、以下に示すように変数に割り当てるか、メソッドに渡すことができます。

var handler = function (){
  //do some stuff here
}

JQueryは次のように非常に頻繁に匿名関数を使用します-

$(document).ready(function(){
  //do some stuff here
});

引数

JavaScript変数_arguments_は、_length_プロパティを持つ一種の配列です。次の例はそれを非常によく説明します-

function func(x){
   console.log(typeof x, arguments.length);
}

func();               //==> "undefined", 0
func(1);              //==> "number", 1
func("1", "2", "3");  //==> "string", 3

argumentsオブジェクトには_callee_プロパティもあり、これは内部の関数を参照します。たとえば-

function func() {
   return arguments.callee;
}

func();               //==> func

コンテキスト

JavaScriptの有名なキーワード this は常に現在のコンテキストを参照します。関数内で*この*コンテキストは、関数の呼び出し方法に応じて変更できます-

$(document).ready(function() {
  //this refers to window.document
});

$("div").click(function() {
  //this refers to a div DOM element
});

関数組み込みメソッド* call（）および apply（）*メソッドを使用して、関数呼び出しのコンテキストを指定できます。

それらの違いは、引数を渡す方法です。 callはすべての引数を関数への引数として渡しますが、applyは引数として配列を受け入れます。

function scope() {
   console.log(this, arguments.length);
}

scope()//window, 0
scope.call("foobar", [1,2]); //==> "foobar", 1
scope.apply("foobar", [1,2]);//==> "foobar", 2

範囲

変数の範囲は、それが定義されているプログラムの領域です。 JavaScript変数のスコープは2つだけです。

グローバル変数-グローバル変数にはグローバルスコープがあり、JavaScriptコードのどこでも定義されます。
ローカル変数-ローカル変数は、定義されている関数内でのみ表示されます。関数パラメーターは、常にその関数に対してローカルです。

関数の本体内では、ローカル変数は同じ名前のグローバル変数よりも優先されます-

var myVar = "global";    //==> Declare a global variable

function ( ) {
   var myVar = "local";  //==> Declare a local variable
   document.write(myVar);//==> local
}

折り返し電話

コールバックは、引数またはオプションとして何らかのメソッドに渡されるプレーンなJavaScript関数です。一部のコールバックは単なるイベントであり、特定の状態がトリガーされたときにユーザーに反応する機会を与えるために呼び出されます。

jQueryのイベントシステムは、例えばどこでもそのようなコールバックを使用します-

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

ほとんどのコールバックは、引数とコンテキストを提供します。イベントハンドラーの例では、コールバックはEventという1つの引数で呼び出されます。

何かを返すために必要なコールバックもあれば、その戻り値をオプションにするコールバックもあります。フォームの送信を防ぐために、送信イベントハンドラは次のようにfalseを返すことができます-

$("#myform").submit(function() {
   return false;
});

クロージャ

現在のスコープの外側で定義された変数が内側のスコープ内からアクセスされるたびに、クロージャーが作成されます。

次の例は、変数 counter が作成、増分、および印刷関数内でどのように見えるが、それらの外では見えないかを示しています-

function create() {
   var counter = 0;

   return {
      increment: function() {
         counter++;
      },
       print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();    //==> 1

このパターンを使用すると、外部からは見えないデータを操作するメソッドを持つオブジェクトを作成できます。 *データの隠ぺい*はオブジェクト指向プログラミングの基本であることに注意してください。

プロキシパターン

プロキシは、別のオブジェクトへのアクセスを制御するために使用できるオブジェクトです。この他のオブジェクトと同じインターフェイスを実装し、メソッド呼び出しを渡します。この他のオブジェクトは、しばしば実際のサブジェクトと呼ばれます。

この実際のサブジェクトの代わりにプロキシをインスタンス化し、リモートでアクセスできるようにすることができます。私たちはクロージャーにjQueryのsetArrayメソッドを保存し、次のように上書きすることができます-

(function() {
  //log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };

})();

上記では、_proxied_変数を非表示にするために、コードを関数でラップしています。次に、プロキシはメソッドへのすべての呼び出しをログに記録し、呼び出しを元のメソッドに委任します。 _apply（this、arguments）_を使用すると、呼び出し元が元のメソッドとプロキシされたメソッドの違いに気付かないことが保証されます。

組み込み関数

JavaScriptには、便利な組み込み関数のセットが付属しています。これらのメソッドを使用して、文字列、数値、および日付を操作できます。

以下は重要なJavaScript関数です-

Sr.No.	Method & Description
1	charAt() 指定されたインデックスにある文字を返します。
2	concat() 2つの文字列のテキストを結合し、新しい文字列を返します。
3	forEach() 配列内の各要素に対して関数を呼び出します。
4	indexOf() 指定した値の最初の出現の呼び出し元Stringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。
5	length() 文字列の長さを返します。
6	pop() 配列から最後の要素を削除し、その要素を返します。
7	push() 配列の最後に1つ以上の要素を追加し、配列の新しい長さを返します。
8	reverse() 配列の要素の順序を逆にします-最初が最後になり、最後が最初になります。
9	sort() 配列の要素を並べ替えます。
10	substr() 指定した位置から指定した文字数までの文字列内の文字を返します。
11	toLowerCase() 呼び出し文字列値を小文字に変換して返します。
12	toString() 数値の値の文字列表現を返します。
13	toUpperCase() 呼び出し文字列値を大文字に変換して返します。

ドキュメントオブジェクトモデル

ドキュメントオブジェクトモデルは、次のようなHTMLのさまざまな要素のツリー構造です-

<html>
   <head>
      <title>The jQuery Example</title>
   </head>

   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

これにより、次の結果が生成されます–

以下は、上記のツリー構造に関する重要な点です-

<html>は、他のすべての要素の祖先です。つまり、他のすべての要素は<html>の子孫です。
<head>要素と<body>要素は子孫だけでなく、<html>の子でもあります。
同様に、<head>と<body>の祖先であることに加えて、<html>もその親です。
<p>要素は、<div>の子（および子孫）、<body>および<html>の子孫、および各<p>要素の兄弟です。

jQueryの概念を学びながら、DOMについて理解しておくと役に立ちます。DOMを知らない場合は、link：/dom/index [DOMチュートリアル]の簡単なチュートリアルを実行することをお勧めします。

Jquery-basics

目次