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