jQueryの第一歩
jQueryの第一歩
「jQueryの第一歩」はCoddyKit上の無料jQuery Academyレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全1レッスンが含まれています。
はじめに
こんにちは。
JQueryライブラリを使うには、まずHTMLドキュメントに追加する必要があります。
以下の例では、jQueryライブラリのアドレスをheadタグ間のsrc属性の値として追加しています。
これでjQueryライブラリをプロジェクトで使えるようになりました。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>jQueryの選択
HTML要素（これ以降はDOMと呼びます）を操作するには、まず対象の要素を選択する必要があります。
jQueryでは、選択に$()またはjQuery()メソッドを使用します。
ソフトウェア開発者には$()メソッドのほうがよく使われます。
このメソッドに渡す引数によって、どの要素を選択するかを指定します。
Xpath
$メソッドに渡す式は、CSSでも使われるXPathセレクターです。
つまり、JQueryではCSSと同じ方法でHTML要素を選択します。
Xpathの例
HTMLコードが次のようになっているとします。
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
jQueryを使ってHTML要素を選択してみましょう
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQueryによってコードをより簡潔に書けるようになりました
Vanilla（標準の）JavaScriptで同じ処理を行う場合は、より多くの行数のコードを書く必要があります。
jQuery独自のメソッドを使うことで、コードをより簡潔に記述できます。
警告
JQueryは単なるライブラリですが、Vanilla JavaScriptよりもWeb開発を簡単にしてくれます。
情報
jQueryのもう1つの利点は、記述したコードがすべての最新ブラウザーでサポートされることです。
VanillaJSで記述したコードは、一部のブラウザーで副作用を引き起こすことがあります。一方、jQueryは抽象化によって、どのブラウザーでも同じように動作することを保証します。
JQueryを使うと、コードを書く際にブラウザーごとの違いを意識せずに済みます。
$(document).ready
jQueryの基礎に入る前に、$(document).readyメソッドについて学びましょう。
HTMLについて思い出してください。Javascriptは、HTMLのheadタグ間またはbodyタグ間のどこにでも配置できると説明しました。
$(document).ready 2
以下のようなHTMLコードがあるとします。
ブラウザーは、コードの<!DOCTYPE html>タグから</html>の閉じタグまでを順に解釈します。
<script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script>という文によって、code.jquery.com経由でライブラリのダウンロードが始まります。
次の行では、jQueryの$メソッドを使ってDOMを選択しています。しかし、ここには問題があります。$ ('# test')メソッドが呼び出された時点でHTMLドキュメントの読み込みが完了していないと、JSコードは失敗します。
この場合、ドキュメントの読み込みが完全に完了したことを保証するために$(document).readyメソッドを使用します。
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
上記の定義の後は、
$(document).ready()メソッドを使うだけです。このメソッドはすべてのコンテンツが読み込まれるまで待機し、その後に処理を実行します。
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>問題
さあ、問題に答えてみましょう。
おめでとうございます
おめでとうございます 🎉
このセクションでは、jQueryライブラリとその$(document).ready()メソッドについて学び始めました。
次のセクションでは、jQueryのセレクターについて学びます。
よくある質問
「jQueryの第一歩」レッスンは無料ですか？
はい。「jQueryの第一歩」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全1レッスンが含まれています。
「jQueryの第一歩」で何を学びますか？
jQueryの第一歩 ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
jQuery Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。
「jQueryの第一歩」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このjQuery Academyレッスンでコードを書いて実行できますか？
はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。