初心者向けjQuery
初心者向けjQuery
「初心者向けjQuery」はCoddyKit上の無料jQuery Academyレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全1レッスンが含まれています。
はじめに
こんにちは。
jQuery入門コースへようこそ。
このセクションでは、jQueryについて詳しく学習します。
はじめに 2
このコースを始める前に、
次のコースを受講しておく必要があります。
- HTML Getting Started
- CSS Getting Started
- Javascript Core
- これらの内容をすでに理解している場合は、コースを続けて受講できます。
始めましょう
始めましょう。
まず、JQueryは何に使うのかを確認しましょう。
質問に答える前に、基礎を復習しましょう
質問に答える前に、基礎を復習しましょう。
HTMLはマークアップ言語です。つまり、プログラミング言語ではなく、テキストを構造化するための言語です。オブジェクト指向などの概念とは大きく異なります。言い換えると、HTMLの構造にオブジェクトは存在せず、HTMLタグや属性などを使います。
JavascriptでDOMを操作する
Webページ上のHTML要素を操作する必要が生じることはよくあります。これを可能にし、HTML要素をJSから扱えるようにするため、Document Object Model（DOM）と呼ばれるモデルで表現します。
Javascriptは、Webページをオブジェクトとして表したDOMを操作します。これをDOM操作と呼びます。
例
例を見てみましょう。
以下の例のようなボタン要素があり、「Not Clicked」というテキストが表示されています。ボタンをクリックすると、ボタンのテキストを「Clicked」に変更します。
これを実現するには、Javascriptを使ってDOM操作を行う必要があります。
Javascript入門コースでは、JavascriptでWebドキュメントを操作する方法を学びました。JQueryは、JavascriptでDOM操作を行う際のコードを、より簡潔に書けるようにするライブラリです。
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>問題
あなたへの問題です。
例 2
以下の例では、my-buttonというidを持つボタンを定義しています。
ここでは、DOMを介してJavascriptでこの要素にアクセスします。
ボタンをクリックすると、JSコードでDOMにアクセスし、my-buttonというidを持つ要素のinnerHTMLプロパティをclickに変更します。
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>警告
JQueryは、JS Coreの関数やメソッドを簡単に使えるようにするために作られたライブラリです。
つまり、VanillaJSで実行できる多くの処理を、より簡単で読みやすい構文で記述できます。
例の説明
コードを説明します。
let myButton = document.getElementById('my-button');
getElementByIdメソッドを使って、JavascriptのdocumentオブジェクトをmyButtonという変数に代入しています。
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
続いて、ボタンのclickイベントを監視し、ボタンを変更しました。
ここでは、ライブラリやフレームワークを使わず、nativeまたはvanillaと呼ばれる言語の標準機能だけを使ってDOM操作を行いました。
同じコードをjQueryで書いてみましょう。jQueryライブラリが提供する機能を活用します。
警告
多くの場所でVanillaJSと表現されている概念は、実際には、Javascriptの純粋なコアオブジェクト、メソッド、関数だけを使用し、ブラウザーが提供する機能を利用することを意味します。
jQueryの例
以下では、先ほどの例をjQueryで実装しています。
構文を省略してコードを短くしすぎないように注意してください。
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>おめでとうございます
おめでとうございます 🎉
このセクションでは、jQueryについて学び、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フィードバックを取得できます。ローカル設定は不要です。