JQueryの紹介

序章

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

jQuery は、「Write Less、DoMore」JavaScriptライブラリです。これはプログラミング言語ではなく、一般的なJavaScriptタスクの記述をより簡潔にするために使用されるツールです。 jQueryには、クロスブラウザー互換であるという追加の利点があります。つまり、コードの出力が最新のブラウザーで意図したとおりにレンダリングされることを確認できます。

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

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の作成を開始することは可能ですが、変数とデータ型、および数学とロジックの概念に精通していると非常に役立ちます。

jQueryの設定

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

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

注：コンテンツ配信ネットワーク（CDN）は、地理的な場所に基づいてユーザーにWebコンテンツを配信する複数のサーバーのシステムです。 CDNを介してホストされたjQueryファイルにリンクすると、独自のサーバーでホストした場合よりも速く、効率的にユーザーに届く可能性があります。

この例では、CDNを使用してjQueryを参照します。 jQueryの最新バージョンは、Googleのホストライブラリにあります。代わりにダウンロードしたい場合は、公式ウェブサイトから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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>

</html>

JavaScriptファイル（scripts.js）は、ドキュメントのjQueryライブラリの下に含まれている必要があります。含まれていないと機能しません。

注： jQueryのローカルコピーをダウンロードした場合は、js/フォルダーに保存し、js/jquery.min.jsにリンクします。

この時点で、jQueryライブラリがサイトに読み込まれ、 jQueryAPIへのフルアクセスが可能になります。

注： アプリケーションプログラミングインターフェイス（API）は、ソフトウェアプログラムが相互に対話できるようにするインターフェイスです。この場合、jQueryのAPIには、jQueryにアクセスするために必要なすべての情報とドキュメントが含まれています。

jQueryの使用

基本的に、jQueryは、DOMを介してブラウザーのHTML要素に接続するために使用されます。

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

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

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

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

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

js / scripts.js

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

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

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

index.html

...
<body>

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

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

$("selector").method();

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

これから、カスタムの「Hello、World！」を配置します。 jQueryready()ラッパー内のプログラム。次の行を既存の関数内のscripts.jsファイルに追加します。

js / scripts.js

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

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

以前にDOMに混乱していた場合は、今すぐDOMの動作を確認できます。「Hello、World！」を右クリックします。ページにテキストを入力し、要素の検査を選択します。 DOMに<p id="demo">Hello, World!</p>が表示されます。 ページソースの表示の場合、私たちが作成した生のHTMLである<p id="demo"></p>のみが表示されます。

セレクター

セレクターは、作業する要素をjQueryに指示する方法です。ほとんどのjQueryセレクターは、CSSで使い慣れているものと同じですが、jQuery固有の機能がいくつか追加されています。 jQueryセレクターの完全なリストは、公式のドキュメントページで確認できます。

セレクターにアクセスするには、jQueryシンボル$に続けて、括弧()を使用します。

$("selector")

jQueryスタイルガイドでは、二重引用符で囲まれた文字列が推奨されますが、単一引用符で囲まれた文字列もよく使用されます。

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

$("*")-ワイルドカード：はページ上のすべての要素を選択します。
$(this)- Current：は、関数内で操作されている現在の要素を選択します。
$("p")-タグ：は、<p>タグのすべてのインスタンスを選択します。
$(".example")-クラス：は、exampleクラスが適用されているすべての要素を選択します。
$("#example")- Id：は、一意のexampleIDの単一インスタンスを選択します。
$("[type='text']")-属性：は、type属性にtextが適用されている要素を選択します。
$("p:first-of-type")-疑似要素：は最初の<p>を選択します。

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

jQueryイベント

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

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

index.html

...
<body>

<button id="trigger">Click me</button>
<p id="demo"></p>

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

js / scripts.js

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

<button>要素にはtriggerというIDがあり、$("#trigger")で選択します。 click()を追加することで、クリックイベントをリッスンするように指示していますが、まだ完了していません。次に、click()メソッド内で、コードを含む関数を呼び出します。

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

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

js / scripts.js

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

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

イベントは、ユーザーがブラウザーを操作するときです。通常、これはマウスまたはキーボードを使用して行われます。作成した例では、クリックイベントを使用しました。公式のjQueryドキュメントから、jQueryイベントメソッドの完全なリストを表示できます。以下は、最も一般的に使用されるイベントメソッドのいくつかの概要です。

click()-クリック：はマウスのシングルクリックで実行されます。
hover()-ホバー：は、マウスを要素の上に置いたときに実行されます。 mouseenter()とmouseleave()は、それぞれ要素に出入りするマウスにのみ適用されます。
submit()-送信：は、フォームが送信されたときに実行されます。
scroll()-スクロール：は、画面がスクロールされたときに実行されます。
keydown()- Keydown：は、キーボードのキーを押すと実行されます。

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

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

jQueryエフェクト

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

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

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

index.html

...
<body>
<button class="trigger">Open</button>

<section class="overlay">
  <button class="trigger">Close</button>
</section>
...

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()メソッドを使用します。このメソッドは、CSSdisplayプロパティをnoneと[の間で切り替えます。 X140X]、クリックするとオーバーレイを表示および非表示にします。

js / scripts.js

$(document).ready(function() {
    $(".trigger").click(function() {
        $(".overlay").toggle();
    });
});

index.htmlを更新します。これで、ボタンをクリックしてモーダルの表示を切り替えることができます。 toggle()をfadeToggle()またはslideToggle()に変更して、他のいくつかの組み込みjQuery効果を確認できます。

以下は、最も一般的に使用されるいくつかの効果方法の概要です。

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

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

結論

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

ここから、jQueryの機能をより深く理解し、独自のコードを作成する準備ができているはずです。