jQueryの紹介

投稿日: 2019-11-08 2022-10-08
タグ: Development, javascript, Programming Project

序章

HTML, CSS, and JavaScript are three fundamental languages of the internet. Websites are structured with HTML, styled with CSS, and interactive functionality is added with JavaScript. Most animations or actions that happen as a result of a user clicking, hovering, or scrolling are constructed with JavaScript.

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

This guide assumes no prior knowledge of jQuery. You will go through installation of jQuery in a web project. Important web development concepts such as API, DOM, and CDN will be defined in relation to jQuery. Once you have this base of knowledge and jQuery installed, you will learn to use common selectors, events, and effects.

前提条件

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

A basic knowledge of HTML and CSS.
プログラミングの基礎の理解。 While it is possible to begin writing jQuery without an advanced knowledge of JavaScript, familiarity with the concepts of variables and data types will help significantly.

jQueryの設定

jQueryは、HTMLでリンクするJavaScriptファイルです。 There are two ways to include jQuery in a project, which is to download a local copy or link to a file via Content Delivery Network (CDN).

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

A CDN will be used to reference jQuery here in the examples. jQueryの最新バージョンは、Googleのホストライブラリにあります。代わりにダウンロードしたい場合は、公式ウェブサイトからjQueryのコピーを入手できます。

You will begin this exercise by creating a small web project. それはで構成されます style.css の中に css/ ディレクトリ、 scripts.js の中に 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>

終了直前のjQueryCDNへのリンク </body> タグ、続いて独自のカスタム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の使用

By comparing a simple “Hello, World!” program in both JavaScript and jQuery, you can see the difference of how they’re both written.

JavaScript

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

jQuery

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

This short example demonstrates how jQuery can achieve the same end result as plain JavaScript in a succinct manner. 基本的に、jQueryは、DOMを介してブラウザーのHTML要素に接続するために使用されます。

Document Object Model（DOM）は、JavaScript（およびjQuery）がブラウザーでHTMLと対話するための方法です。 To view exactly what the DOM is, in your web browser, right click on the current web page select “Inspect”. これにより、開発者ツールが開きます。ここに表示されるHTMLコードはDOMです。

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

If you right click on the site again and click “View Page Source”, you will see the raw HTML output of the website. 最初はDOMとHTMLソースを混同するのは簡単ですが、それらは異なります。ページソースは、HTMLファイルに記述されているものとまったく同じです。これは静的で変更されず、JavaScriptの影響を受けません。 DOMは動的であり、変更できます。

DOMの最外層、全体をラップする層 <html> ノードは、documentオブジェクトです。 To begin manipulating the page with jQuery, you need to ensure the document is “ready” first.

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

js / scripts.js

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

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

この記事の紹介では、単純な「Hello、World！」を見ました。脚本。 To initiate this script and print text to the browser with jQuery, first you’ll create an empty block-level paragraph element with the ID demo applied to it:

index.html

...
<body>

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

jQueryはドル記号（$). You access the DOM with jQuery using mostly CSS syntax, and apply an action with a method. A basic jQuery example follows this format:

$("selector").method();

IDはハッシュ記号で表されるため（#) in CSS, you will access the demo ID with the selector #demo. html() 要素内のHTMLを変更するメソッドです。

You’re now going to put your custom “Hello, World!” program inside the jQuery ready() ラッパー。この行をあなたの scripts.js 既存の関数内のファイル：

js / scripts.js

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

ファイルを保存したら、次のファイルを開くことができます index.html ブラウザのファイル。 If everything works properly, you will see the output Hello, World!.

以前にDOMに混乱していた場合は、今すぐDOMの動作を確認できます。 Right click on the “Hello, World!” text on the page and choose “Inspect Element”. DOMが表示されます <p id="demo">Hello, World!</p>. If you “View Page Source”, you will only see <p id="demo"></p>, the raw HTML you wrote.

セレクター

Selectors are how you tell jQuery which elements you want to work on. ほとんどのjQueryセレクターは、CSSで使い慣れているものと同じですが、jQuery固有の機能がいくつか追加されています。 jQueryセレクターの完全なリストは、公式のドキュメントページで確認できます。

セレクターにアクセスするには、jQueryシンボルを使用します $、その後に括弧が続きます ():

$("selector")

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

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

$("*") Wildcard: This selects every element on the page.
$(this) Current: This selects the current element being operated on within a function.
$("p") Tag: This selects every instance of the <p> 鬼ごっこ。
$(".example") Class: This selects every element that has the example それに適用されるクラス。
$("#example") Id: This selects a single instance of the unique example id。
$("[type='text']") Attribute: This selects any element with text に適用 type 属性。
$("p:first-of-type") Pseudo Element: This selects the first <p>.

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

jQueryイベント

「Hello、World！」でたとえば、ページが読み込まれ、ドキュメントの準備が整うとすぐにコードが実行されたため、ユーザーの操作は必要ありませんでした。 In this case, you could have written the text directly into the HTML without bothering with jQuery. However, you will need to utilize jQuery if you want to make text appear on the page with the click of a button.

あなたに戻る index.html ファイルを追加し、 <button> エレメント。 You will use this button to listen for your click event:

index.html

...
<body>

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

You will use the click() method to call a function containing your “Hello, World!” code:

js / scripts.js

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

Your <button> 要素にはIDがあります trigger, which you select with $("#trigger"). 追加することにより click(), you’re telling it to listen for a click event, but you’re not done yet. Now you’ll invoke a function that contains your code, inside the click() method:

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

Here’s the final code:

js / scripts.js

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

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

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

click() Click: This executes on a single mouse click.
hover() Hover: This executes when the mouse is hovered over an element. mouseenter() と mouseleave() それぞれ、要素に出入りするマウスにのみ適用されます。
submit() Submit: This executes when a form is submitted.
scroll() Scroll: This executes when the screen is scrolled.
keydown() Keydown: This executes when you press down on a key on the keyboard.

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

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

jQueryエフェクト

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

You will make an example where you open and close a popup overlay. While you could use two IDs – one to open the overlay and another to close it – you’ll instead use a class to open and close the overlay with the same function.

現在の削除 <button>と <p> あなたの体の中からのタグ index.html ファイルを作成し、HTMLドキュメントに以下を追加します。

index.html

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

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

In your style.css file, you will use a minimal amount of CSS to hide the overlay と display: none and center it on the screen:

css / style.css

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

に戻る scripts.js file, you’re going to use the toggle() CSSを切り替えるメソッド display 間のプロパティ none と block, hiding and showing the overlay when clicked:

js / scripts.js

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

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

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

toggle() Toggle: This switches the visibility of an element or elements. show() と hide() 関連する一方向の効果です。
fadeToggle() Fade Toggle: This switches the visibility and animates the opacity of an element or elements. fadeIn() と fadeOut() 関連する一方向の効果です。
slideToggle() Slide Toggle: This toggles the visibility of an element or elements with a sliding effect. slideDown() と slideUp() 関連する一方向の効果です。
animate() Animate: This performs custom animation effects on the CSS property of an element.

You can use jQuery events to listen for a user interaction such as the click of a button, and jQuery effects to further manipulate elements once that action takes place.

結論

In this guide, you learned how to select and manipulate elements with jQuery, and how events and effects work together to make an interactive web experience for the user.

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

getdocs

13036