前書き

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の機能をより深く理解し、独自のコードを作成するための準備が整います。