jQuery 初心者でも簡単に試せるサンプル(html ダウンロード可)

jQuery を初めてさわろうとすると、最初はちょっと面倒だったりします。簡単な記述ミスで全然動かず、しかも他の言語みたいにエラーではっきり知らせてくれるワケでもないので、最初の一歩でけっこう時間をとられる場合があります。

そこで、簡単に動くサンプルを作ってみました。ダウンロードしてクリックすればすぐに動きます。

- 目次 -

スポンサーリンク

テキスト関連

テキストを入力してボタンをクリックすると、テキストエリアにコピーされます。

html をダウンロード
(右クリックから保存してください)

解説

jQuery のコードでかならず見かけるのが以下の書きかたです。

これは、次のように書くこともできます。

この部分が意味するのは、Document が Ready 状態 になったタイミングで {} の処理を実行する、ということです。

つまり、Ready 状態で実行させたい処理をここに書けばいいわけですが、それは具体的にどんな処理のことでしょうか。ひとことで簡単に言ってしまうと、さまざまな 前準備 となる処理です。

たとえば、ボタンがクリックされたら何をする、とか、テキストが入力されたらどうする、みたいなことを前もってここに記述しておきます。

そうしておけば、ユーザーがなんらかの操作を行った時点で、書かれたとおりの処理が実行されます。

上のサンプルの場合、button1 のクリック 時の処理を記述しています。

css 操作

ボタンをクリックすると箱の色が変わります。

html をダウンロード
(右クリックから保存してください)

解説

button1、button2、button3 にそれぞれクリック時の処理を登録しています。
以下の処理で、css の値を書きかえています。

スポンサーリンク

コメントはお気軽に