an-introduction-to-jquery

Posted on: 2019-11-08 2019-11-19
Tags: javascript, Programming Project

前書き

HTML、CSS、およびJavaScriptは、Webの3つの基本言語です。 WebサイトをHTMLで構成し、CSSでスタイルを設定し、JavaScriptでインタラクティブ機能を追加します。実際、ユーザーがクリック、ホバリング、またはスクロールした結果として発生するほとんどのアニメーションとアクションは、JavaScriptで構築されます。

jQueryは、「書き込みを少なくして、もっと行う」JavaScriptライブラリです。これはプログラミング言語ではなく、一般的なJavaScriptタスクの記述をより簡潔にするために使用されるツールです。 jQueryにはhttps://jquery.com/browser-support/[cross-browser compatible]であるという追加の利点があります。つまり、コードの出力が最新のブラウザーで意図したとおりにレンダリングされることを確認できます。

JavaScriptとjQueryの両方で単純な「Hello、World！」プログラムを比較することで、両方の記述方法の違いを確認できます。

JavaScript

document.getElementById("demo").innerHTML = "Hello, World!";

jQuery

$("#demo").html("Hello, World!");

この短い例は、jQueryが簡潔な方法でプレーンJavaScriptと同じ最終結果を達成する方法を示しています。

目標

このガイドでは、jQueryの予備知識がないことを前提としており、次のトピックについて説明します。

WebプロジェクトにjQueryをインストールする方法。
API、DOM、CDNなどの重要なWeb開発コンセプトの定義。
一般的なjQueryセレクター、イベント、およびエフェクト。
記事全体で学んだ概念をテストする例。

前提条件

このガイドを始める前に、次のものが必要です。

HTMLおよびCSSの基本的な知識。簡単なWebサイトのセットアップ方法をすでに知っている必要があり、ID、クラス、疑似要素などのCSSセレクターを理解している必要があります。
プログラミングの基礎の理解。 JavaScriptの高度な知識がなくてもjQueryの作成を開始できますが、https：//www.taniarascia.com/javascript-day-one/ [変数とデータ型]およびhttps：// wwwの概念に精通している必要があります。 taniarascia.com/javascript-day-two/[math and logic]は非常に役立ちます。

jQueryのセットアップ

jQueryは、HTMLでリンクするJavaScriptファイルです。プロジェクトにjQueryを含めるには、2つの方法があります。

ローカルコピーをダウンロードします。
コンテンツ配信ネットワーク（CDN）を介してファイルにリンクします。

この例では、CDNを使用してjQueryを参照します。 jQueryの最新バージョンはhttps://developers.google.com/speed/libraries/[Googleのホストライブラリ]にあります。代わりにダウンロードしたい場合は、https：//jquery.com/download/ [公式WebサイトからjQueryのコピーを取得]を使用できます。

この演習は、小さなWebプロジェクトを作成することから始めます。これは、「+ css / 」ディレクトリの「 style.css 」、「 js / 」ディレクトリの「 scripts.js 」、およびルートのメインの「 index.html +」で構成されます。事業。

project/
├── css/
|   └── style.css
├── js/
|   └── scripts.js
└── index.html

最初に、HTMLスケルトンを作成し、 `+ index.html`として保存します。

index.html

<!doctype html>
<html lang="en">

<head>
 <title>jQuery Demo</title>
 <link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>

</html>

終了する `+ </ body> `タグの直前にjQuery CDNにリンクし、その後に独自のカスタムJavaScriptファイル、 ` scripts.js +`を追加します。

index.html

<!doctype html>
<html lang="en">

<head>
 <title>jQuery Demo</title>
 <link rel="stylesheet" href="css/style.css">
</head>

<body>



</body>

</html>

JavaScriptファイル（ + scripts.js +）をドキュメント内のjQueryライブラリに含める必要があります。そうしないと機能しません。

この時点で、jQueryライブラリがサイトにロードされており、http：//api.jquery.com/ [jQuery API]に完全にアクセスできます。

jQueryを使う

コアでは、jQueryを使用して、DOMを介してブラウザーのHTML要素に接続します。

Document Object Model *（DOM）は、JavaScript（およびjQuery）がブラウザーのHTMLと対話する方法です。 DOMが何であるかを正確に表示するには、Webブラウザーで現在のWebページを右クリックし、 Inspect *を選択します。これにより、開発者ツールが開きます。ここに表示されるHTMLコードはDOMです。

各HTML要素は、DOMでは* node *と見なされます-JavaScriptがアクセスできるオブジェクトです。これらのオブジェクトはツリー構造に配置され、 `+ <html> +`はルートにより近く、ネストされた各要素はツリーに沿ってさらに分岐します。 JavaScriptは、これらの要素を追加、削除、変更できます。

もう一度サイトを右クリックして[*ページのソースを表示]をクリックすると、Webサイトの生のHTML出力が表示されます。 DOMとHTMLソースを混同することは最初は簡単ですが、違います-ページソースはHTMLファイルに記述されているものとまったく同じです。これは静的であり、変更されず、JavaScriptの影響を受けません。 DOMは動的であり、変更できます。

`+ <html> +`ノード全体をラップするDOMの最外層は* document *オブジェクトです。 jQueryでページの操作を開始するには、まずドキュメントが「準備完了」であることを確認する必要があります。

`+ js / `ディレクトリにファイル ` scripts.js +`を作成し、次のコードを入力します。

js / scripts.js

$(document).ready(function() {
   // all custom jQuery will go here
});

記述するjQueryコードはすべて、上記のコードでラップされます。 jQueryはこの準備状態を検出するため、この関数内に含まれるコードは、JavaScriptコードを実行するDOMの準備ができたときにのみ実行されます。場合によっては、要素がレンダリングされるまでJavaScriptがロードされない場合でも、このブロックを含めることがベストプラクティスと見なされます。

この記事の紹介では、単純な「Hello、World！」スクリプトを見ました。このスクリプトを開始し、jQueryを使用してブラウザーにテキストを印刷するには、まず、ID「+ demo +」が適用された空のブロックレベルの段落要素を作成します。

index.html

...
<body>


...

jQueryは、ドル記号（ + $ +）で呼び出され、表されます。ほとんどがCSS構文を使用してjQueryでDOMにアクセスし、メソッドでアクションを適用します。基本的なjQueryの例は、この形式に従います。

$("selector").method();

IDはCSSではハッシュ記号（ ＃）で表されるため、セレクター `＃demo +`でデモIDにアクセスします。 ` html（）+`は、要素内のHTMLを変更するメソッドです。

次に、カスタムの「Hello、World！」プログラムをjQueryの `+ ready（）`ラッパー内に配置します。既存の関数内の ` scripts.js +`ファイルに次の行を追加します。

js / scripts.js

$(document).ready(function() {

});

ファイルを保存したら、ブラウザで `+ index.html`ファイルを開くことができます。すべてが正常に機能した場合、出力 `+ Hello、World！+`が表示されます。

以前にDOMに混乱していた場合は、実際に動作していることがわかります。ページの「Hello、World！」テキストを右クリックして、「* Inspect Element *」を選択します。 DOMに `+ <p id =” demo “> Hello、World！</ p> `が表示されます。 *ページのソースを表示*すると、作成した生のHTMLである ` <p id =” demo “> </ p> +`のみが表示されます。

セレクター

セレクターは、jQueryにどの要素を操作したいかを伝える方法です。ほとんどのjQueryセレクターは、CSSで使い慣れているものと同じですが、jQuery固有の追加がいくつかあります。公式ドキュメントページでhttps://api.jquery.com/category/selectors/[jQueryセレクターの全リスト]を表示できます。

セレクタにアクセスするには、jQueryシンボル「+ $ 」を使用し、その後に括弧「（）+」を続けます。

$("selector")

二重引用符で囲まれた文字列はhttps://contribute.jquery.org/style-guide/js/[jQueryスタイルガイド]で優先されますが、単一引用符で囲まれた文字列もよく使用されます。

以下は、最も一般的に使用されるセレクターの簡単な概要です。

+ $（" * "）+-* Wildcard：*はページ上のすべての要素を選択します。
+ $（this）+-* Current：*は、関数内で操作されている現在の要素を選択します。
+ $（" p "）+-* Tag：*は、 `+ <p> +`タグのすべてのインスタンスを選択します。
+ $（"。example "）+-* Class：*は、 `+ example +`クラスが適用されている_every_要素を選択します。
+ $（"＃example "）+-* Id：*は、一意の + example + idの単一のインスタンスを選択します。
+ $（" [type = 'text'] "）+-* Attribute：*は、 `+ type `属性に ` text +`が適用された要素を選択します。
+ $（" p：first-of-type "）+-*擬似要素：*最初の `+ <p> +`を選択します。

一般に、クラスとIDは、最もよく遭遇するものです。複数の要素を選択する場合はクラス、1つだけを選択する場合はIDです。

jQueryイベント

「Hello、World！」の例では、ページが読み込まれ、ドキュメントの準備が整うとすぐにコードが実行されたため、ユーザーの操作は必要ありませんでした。この場合、jQueryに煩わされることなく、テキストをHTMLに直接書き込むことができます。ただし、ボタンをクリックしてページにテキストを表示する場合は、jQueryを利用する必要があります。

+ index.html`ファイルに戻り、 + <button> + `要素を追加します。このボタンを使用して、クリックイベントをリッスンします。

index.html

...
<body>


<p id="demo"></p>

`+ click（）+`メソッドを使用して、「Hello、World！」コードを含む関数を呼び出します。

js / scripts.js

$(document).ready(function() {

});

`+ <button> `要素には ` trigger `というIDがあり、これは ` $（”＃trigger “）`で選択します。 ` click（）`を追加することで、クリックイベントをリッスンするように伝えていますが、まだ完了していません。次に、 ` click（）+`メソッド内でコードを含む関数を呼び出します。

function() {
   $("#demo").html("Hello, World!");
}

これが最終的なコードです。

js / scripts.js

$(document).ready(function() {
   $("#trigger").click(function() {


});

+ scripts.js`ファイルを保存し、ブラウザーで + index.html`を更新します。ボタンをクリックすると、「Hello、World！」というテキストが表示されます。

*イベント*は、ユーザーがブラウザと対話するときのことです。通常、これはマウスまたはキーボードで行われます。作成した例では、クリックイベントを使用しました。公式のjQueryドキュメントから、https：//api.jquery.com/category/events/ [jQueryイベントメソッドの全リスト]を表示できます。以下は、最も一般的に使用されるイベントメソッドの概要です。

+ click（）+-* Click：*マウスを1回クリックすると実行されます。
+ hover（）+-* Hover：*は、マウスが要素の上に置かれたときに実行されます。 `+ mouseenter（）`と ` mouseleave（）+`は、それぞれ要素に出入りするマウスにのみ適用されます。
+ submit（）+-* Submit：*フォームが送信されると実行されます。
+ scroll（）+-* Scroll：*画面がスクロールされると実行されます。
+ keydown（）+-* Keydown：*キーボードのキーを押すと実行されます。

ユーザーが画面を下にスクロールするときに画像をアニメーション化またはフェードインさせるには、 `+ scroll（）`メソッドを使用します。 ` ESC `キーを使用してメニューを終了するには、 ` keydown（）`メソッドを使用します。ドロップダウンアコーディオンメニューを作成するには、 ` click（）+`メソッドを使用します。

jQueryを使用して動的なWebサイトコンテンツを作成するには、イベントを理解することが不可欠です。

jQueryエフェクト

jQueryエフェクトは、アニメーションを追加したり、ページ上の要素を操作したりできるようにすることで、イベントと連動します。

ポップアップオーバーレイを開いたり閉じたりする例を作成します。 2つのIDを使用できます（1つはオーバーレイを開き、もう1つは閉じるために使用します）代わりに、同じ関数でクラスを使用してオーバーレイを開閉します。

+ index.html`ファイルの本文から現在の + <button> + および + <p> + `タグを削除し、HTMLドキュメントに次を追加します。

index.html

...
<body>





...

`+ style.css `ファイルでは、最小限のCSSを使用して ` overlay `を ` display：none +`で非表示にし、画面の中央に配置します。

css / style.css

.overlay {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 height: 200px;
 width: 200px;
 background: gray;
}

`+ scripts.js `ファイルに戻って、 ` toggle（）`メソッドを使用します。このメソッドは、CSSの ` display `プロパティを ` none `と ` block +`の間で切り替え、非表示にし、クリックするとオーバーレイが表示されます。

js / scripts.js

$(document).ready(function() {



});

`+ index.html`を更新します。これで、ボタンをクリックしてモーダルの表示を切り替えることができます。 `+ toggle（）`を ` fadeToggle（）`または ` slideToggle（）+`に変更して、他のいくつかの組み込みjQueryエフェクトを表示できます。

以下は、最も一般的に使用されるエフェクトメソッドの概要です。

+ toggle（）+-* Toggle：*は要素の可視性を切り替えます。 `+ show（）`と ` hide（）+`は関連する一方向の効果です。
+ fadeToggle（）+-*フェードトグル：*は、1つまたは複数の要素の可視性を切り替え、不透明度をアニメーション化します。 `+ fadeIn（）`と ` fadeOut（）+`は関連する一方向の効果です。
+ slideToggle（）+-*スライドの切り替え*は、スライド効果のある要素の可視性を切り替えます。 `+ slideDown（）`と ` slideUp（）+`は関連する一方向の効果です。
+ animate（）+-* Animate *は、要素のCSSプロパティでカスタムアニメーション効果を実行します。

jQueryイベントを使用して、ボタンのクリックなどのユーザーインタラクションをリッスンし、jQueryエフェクトを使用して、アクションが発生したら要素をさらに操作します。

結論

このガイドでは、jQueryを使用して要素を選択および操作する方法、およびイベントと効果が連携してユーザーにインタラクティブなWebエクスペリエンスを提供する方法を学びました。

ここから、jQueryの機能をより深く理解し、独自のコードを作成するための準備が整います。