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ビット形式のIEEE754値です。文字列と同じように、不変です。以下は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変数引数は、長さプロパティを持つ一種の配列です。次の例はそれを非常によく説明しています-

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

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

引数オブジェクトには、内部にある関数を参照するcalleeプロパティもあります。例-

function func() {
   return arguments.callee; 
}

func();                // ==> func

環境

JavaScriptの有名なキーワード this常に現在のコンテキストを参照します。関数内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つのスコープしかありません。

  • Global Variables −グローバル変数にはグローバルスコープがあります。これは、JavaScriptコードのあらゆる場所で定義されていることを意味します。

  • Local Variables−ローカル変数は、それが定義されている関数内でのみ表示されます。関数パラメーターは常にその関数に対してローカルです。

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

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);
});

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

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

このパターンを使用すると、外の世界には見えないデータを操作するメソッドを使用してオブジェクトを作成できます。注意すべきことdata hiding オブジェクト指向プログラミングのまさに基礎です。

プロキシパターン

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

この実際のサブジェクトの代わりにプロキシをインスタンス化して、リモートでアクセスできるようにすることができます。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);
   };
	
})();

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

組み込み関数

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

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

シニア番号 方法と説明
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に気付いていない場合は、DOMチュートリアルの簡単なチュートリアルを実行することをお勧めします。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved