TOC

jQueryの概要

前書き

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ページを右クリックし、

Related